--- version: alpha name: Dark Spy Mission Event LP description: 黒地にワインレッドと黄色を差した、スパイ映画風の体験型イベント告知 LP。斜めストライプの警告テープでセクションを区切り、角を欠いたメカ風の枠やカッコ型の見出しでゲームの緊張感を出す。黒い面と白い面を交互に置き、開催期間・料金・購入までの情報を表やタブで細かく見せる。 colors: background: '#000000' primary: '#821E38' background-alt: '#FFFFFF' surface: '#FFFFFF' secondary: '#B3B3B3' accent-1: '#F9F431' cta: '#A32A49' on-cta: '#FFFFFF' dark-section: '#74113A' text: '#010101' on-dark: '#FEFFFF' accent-2: '#6A717A' line: '#D6D9D8' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 400 lineHeight: 1.2 headline-lg: fontFamily: Dela Gothic One fontSize: 26px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: M PLUS 1p fontSize: 18px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Oswald fontSize: 11px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 2px md: 4px lg: 6px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading-bracket: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 48px hazard-stripe: backgroundColor: '{colors.background}' height: 16px intro-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 280px step-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 240px tab-switch: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 32px price-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 320px accordion-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px date-marker: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px --- # DESIGN.md — 黒×ワインレッドの潜入体験イベント LP（Dark Spy Mission Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型 - **キーワード**: スパイ・潜入ミッション・警告テープ・サイバー回路・緊張感・ゲームUI - **地の質感**: 黒地に薄い回路線・グリッドの模様。白地にも薄い同心円やレーダー模様を重ねる - **形**: 角を斜めに欠いた枠、カッコ型の見出しブラケット、斜めストライプの帯 - **温度感**: 冷たく暗い。ワインレッドと黄色で熱を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページの基本の黒地 | 40% | 画素の主要色に補正 | | `primary` | `#821E38` | ワインレッドの紹介ボックス・表見出し | 10% | 画素の実測 | | `background-alt` | `#FFFFFF` | 白系の区切りセクション地 | 12% | 画素の実測 | | `surface` | `#FFFFFF` | カード・表の白面 | 8% | 画素の実測 | | `secondary` | `#B3B3B3` | ストーリー枠のグレー面 | 5% | 画素の実測 | | `accent-1` | `#F9F431` | 黄色の強調文字・日付マーカー | 1% | 画素の実測 | | `cta` | `#A32A49` | ボタン・タブ・アコーディオンの赤 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#74113A` | フッター手前のワインレッド格子面 | 5% | 画素の実測 | | `text` | `#010101` | 白地上の見出し・本文の黒 | 1% | 画素の実測 | | `on-dark` | `#FEFFFF` | 黒地上の白文字 | 1% | 画素の実測 | | `accent-2` | `#6A717A` | タブ非選択のくすみ青グレー | 1% | 画素の主要色に補正 | | `line` | `#D6D9D8` | カード枠・表罫線のグレー | 1% | 画素の主要色に補正 | - 基本は黒地。情報の区切りで白系の地を挟み、黒と白を交互に置く - ワインレッドはブランド色。紹介ボックス・表の見出し行・タブ・アコーディオンに使う - 黄色は小見出しや日付マーカーなど、ごく一部の強調だけに使う - セクション境界は黒白の斜めストライプ帯で区切る - 表やカードの中は白地に黒文字で読みやすくする - フッター手前の締めはワインレッドに格子模様を重ねる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのタイトル。筆の勢いがある太い書体 | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.2 | 0.0em | | `headline-lg` | カッコで挟むセクション見出し | ゴシック | Dela Gothic One | 400 | 26px | 1.3 | 0.05em | | `headline-md` | 黄色の斜体の小見出し | ゴシック | M PLUS 1p | 900 | 18px | 1.4 | 0.02em | | `headline-sm` | カード見出し・項目名 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈・表の補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | STEP 番号などの斜体英字ラベル | 欧文サンセリフ | Oswald | 600 | 11px | 1.0 | 0.05em | | `label-button` | ボタン・アコーディオンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.1em | - 見出しは極太の書体を使い、左右をカッコ型の装飾で挟む - 小見出しは斜体ぎみの太字にし、黄色か赤で色を付ける - 本文は細めのゴシックで行間を広めにとる - 料金の数字は大きく太く、単位や税表記は小さく添える - 黒地の上の文字は白、白地の上の文字は黒に統一する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長・グッズ・ステップはカードを縦に積むか横スクロールにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは中央揃えの見出しで始める - 情報はカード・表・タブで区切って整理する - カレンダーと料金表は横幅いっぱいに置く - セクション境界ごとに斜めストライプ帯を入れる ## Elevation & Depth - 影はほぼ使わず、平面で構成する - カードはグレーの線と、角を欠いた線で立体感を出す - 赤い角アクセント(L字)を枠の隅に置いて浮いた印象をつける ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角を落とさない四角形。枠線で囲う - **セクション境界**: 黒白の斜めストライプの警告テープ帯 - 枠の角は斜めにカットするか、L字の赤い角アクセントを付ける - ボタンは角の小さい長方形にし、右端に矢印を付ける - アイコンは角ばったフレームに入れる - 丸は日付マーカーにだけ使う ## Components - **カッコ装飾見出し**（`section-heading-bracket`）: 極太の見出しを、左右の太いカッコ型ラインで挟む - **警告テープ帯**（`hazard-stripe`）: 黒白の斜めストライプ帯。セクションの境目に入れる - **紹介ボックス**（`intro-box`）: ワインレッドの面に縦長の写真と本文を並べ、四隅に赤い角アクセントを付ける - **ステップカード**（`step-card`）: グレーのカードに赤い斜体のSTEPラベル、線画アイコン、説明文を入れる - **特長カード**（`feature-card`）: 番号入りの円、黄色の見出し、写真で構成する - **タブ切り替え**（`tab-switch`）: 月や券種を切り替えるタブ。選択中は赤、それ以外は青グレーにする - **料金表**（`price-table`）: 見出し行は赤、表の中は白。金額は大きな太字で入れる - **アコーディオン**（`accordion-button`）: 赤い長方形に白い字間の広い文字を置き、右端に▼を付ける - **開催日マーカー**（`date-marker`）: カレンダーの開催日に付ける黄色の丸 ## Do's and Don'ts **Do** - 黒地を基本にし、白い地は情報整理の区切りとしてだけ挟む - セクション境界には毎回、斜めストライプ帯を入れる - 見出しは必ずカッコ装飾で中央に揃える - 枠には角カットか赤い角アクセントを付けて、ゲーム画面らしくする - 日程・料金は表やタブで構造化して見せる **Don't** - パステル色や丸みの強いやわらかい装飾は使わない - ピル型のボタンは使わない - 黄色を広い面に塗らない - ワインレッド以外の暖色を主役にしない - 装飾のない平坦な見出しで済ませない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とイベント名を一目で伝える）: 暗いトーンの合成写真に人物を配置し、筆風の白抜き極太タイトルを斜めに重ねる 2. **リード帯**（体験の魅力を2行で訴える）: 暗い写真の上に黄色と白の斜体の太字を置き、上下を警告テープで挟む 3. **イベント紹介**（どんな体験なのかを説明する）: 白い地の上にワインレッドのボックスを置き、縦長の写真と本文を並べる 4. **動画・キャンペーン**（動画とSNS施策で関心を高める）: 黒地の中央に埋め込み動画とバナーを置く 5. **特長**（魅力を3つに絞って示す）: 番号・黄色の見出し・写真で組んだカードを3枚並べ、その下に黄色のバナーボタンを置く 6. **ストーリー**（物語への没入を促す）: グレーの枠に赤い見出しを置き、短い文と「続きを読む」ボタンを入れる 7. **プレイ形式**（人数・時間・場所を要約する）: 白い地に角ばったアイコン枠を4つ並べ、矢印でつなぐ。数値は赤い太字にする 8. **遊び方**（参加の手順を示す）: STEPラベル付きのグレーのカードを4枚並べる 9. **開催期間**（日程と販売スケジュールを示す）: 月タブ付きのカレンダーで、開催日を黄色の丸で示す。その下に赤い帯の販売スケジュールを置く 10. **チケット情報**（料金と購入方法を示す）: 券種タブと料金表を置き、注意事項のアコーディオンと日付スライダーで購入へ誘導する 11. **開催会場**（アクセス情報を示す）: 黒地に住所などを中央揃えで書き、地図を埋め込む 12. **グッズ**（関連商品を紹介する）: 白い地に角アクセント付きの商品カードを3枚並べ、商品名は赤の太字にする 13. **注意事項・FAQ**（補足情報をまとめる）: ワインレッドの格子模様の地に、赤いアコーディオンを縦に並べる ## Imagery - 人物写真は青みのある暗いトーンにし、緊張した表情やポーズで撮る - 背景は夜の遊園地のように、ネオンやレーザーの光が入る映画的な合成にする - アイコンは白黒の線画にし、角ばったフレームに入れる - 黒地には薄い回路線や数字のノイズを敷く - 赤いシルエットやレーザー線で危険な雰囲気を足す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央の約70%幅にまとめ、左右は黒地を見せる - SP では特長・グッズのカードを1カラムに積む - SP では遊び方の4ステップを2×2か縦積みにする - 料金表は SP では横スクロールにするか、券種ごとのカードに分割する - 日付タブは SP でも横スクロールのスライダーのままにする ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-16effc10`（元 LP の URL から採番） - **元 LP**: https://realstealthgame.jp/s/hirapa2025/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。