DESIGN.md — 黒×ワインレッドの潜入体験イベント LP（Dark Spy Mission Event LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: スパイ・潜入ミッション・警告テープ・サイバー回路・緊張感・ゲームUI
• 地の質感: 黒地に薄い回路線・グリッドの模様。白地にも薄い同心円やレーダー模様を重ねる
• 形: 角を斜めに欠いた枠、カッコ型の見出しブラケット、斜めストライプの帯
• 温度感: 冷たく暗い。ワインレッドと黄色で熱を差す

Colors

• 基本は黒地。情報の区切りで白系の地を挟み、黒と白を交互に置く
• ワインレッドはブランド色。紹介ボックス・表の見出し行・タブ・アコーディオンに使う
• 黄色は小見出しや日付マーカーなど、ごく一部の強調だけに使う
• セクション境界は黒白の斜めストライプ帯で区切る
• 表やカードの中は白地に黒文字で読みやすくする
• フッター手前の締めはワインレッドに格子模様を重ねる

Typography

• 見出しは極太の書体を使い、左右をカッコ型の装飾で挟む
• 小見出しは斜体ぎみの太字にし、黄色か赤で色を付ける
• 本文は細めのゴシックで行間を広めにとる
• 料金の数字は大きく太く、単位や税表記は小さく添える
• 黒地の上の文字は白、白地の上の文字は黒に統一する
• 書体は画像からの推定で、フォント名は近い印象の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。