DESIGN.md — 黒×青×黄の夜景ネオン謎解きイベントLP（Night Neon Mystery Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 夜景・ネオンブルー・警告テープ黄・グリッチ・ミステリー・疾走感
• 地の質感: 夜景写真を青で単色化した背景、スピードラインやグリッチノイズ、かすれた黄色ペイントのボタン
• 形: 角丸なしの直角が基本。盾型のエンブレム、斜めにカットしたバナー、細い白線の枠
• 温度感: 寒色が中心。黄色で温度と緊張感を足す

Colors

• 地は黒。セクションの切り替えに、青く単色化した夜景や青レンガの面を挟む
• 黄色は CTA ボタン、表の強調行、ラベル、リード文だけに使う
• 本文は白。目立たせたい語だけ黄色にする
• 表やカードは黒い面に白の 1px 枠を付ける
• 受付が終わった項目は半透明のグレーをかぶせて沈める
• 青と黄色は補色なので、隣り合わせて緊張感を出す

Typography

• 和文はすべて太い明朝で、ミステリーの雰囲気をそろえる
• 英字見出しには、かすれやグリッチの加工を入れる
• 英字見出しのすぐ下に、字間を大きく空けた日本語の小見出しを添える
• 本文は中央揃えにし、短い行で改行する
• 難しい読みの漢字にはルビを振る
• 数値は単位より大きくして強調する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スペックは 3 列、会場カードは 3 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションの見出しは中央に置き、その下に 40px ほど空ける
• 会場カードは 3 列で、間隔は 6px
• 料金表は 2 列の表組みにし、セルの境界は白線にする
• ボタンは画面幅いっぱいに近い帯状にする
• キャラクターのイラストは枠からはみ出させてよい

Elevation & Depth

• 影は基本的に使わない
• カード類はフラットで、白い枠線で区切る
• 立体感は光の写真やグロー効果で出す
• 受付終了は半透明の重ねで奥に沈める

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形か、斜めにカットしたバナー。キャラクターは切り抜いてはみ出させる
• セクション境界: 直線で切り替え、地の色や写真の背景を替えるだけ
• ボタンは角丸なしの長方形にする
• ナンバリングやスペックのアイコンは盾型エンブレムで作る
• 料金表のタブは斜めにカットした台形にする
• 警告テープを斜めに交差させて装飾にする

Components

• 黄色のペイント風ボタン（button-primary）: かすれた質感の黄色い帯に、黒い明朝の文字と▼を置く
• グリッチ英字見出し（section-title-glitch）: 白い欧文セリフ体の大見出しに、ノイズ加工と日本語の小見出しを組み合わせる
• 盾型エンブレムのポイント（point-shield）: 黄色い枠の盾にキャラクターと番号を入れる。横に半透明の帯を敷いてテキストを置き、左右交互に並べる
• 羽根付き盾のスペック（spec-icon）: 黄色い羽根付き盾のアイコンを 3 列に並べ、ラベルと大きな黄色の数値を添える
• 料金表（price-table）: 黒地に白線の 2 列の表。上部に斜めカットのタブを付け、強調する行は黄色で塗る
• 会場カード（venue-card）: 白枠の黒い四角に地域名と日付を入れる。受付が終わったものはグレーを半透明でかぶせる
• 斜めカットの訴求バナー（slant-banner）: 黄色と黒を斜めに分け、キャラクターと大きな明朝のコピーを置く
• カルーセル（carousel-arrow）: 白い枠の画像スライダー。左右に黄色の三角矢印、下に白丸のドットを付ける

Do's and Don'ts

Do - 黒の地を基本にし、青い夜景のセクションを挟んで変化をつける - 黄色は行動を促す場所にだけ使う - 見出しは英字と日本語の 2 段で組む - 盾・羽根・警告テープでミステリーの世界観をそろえる - 日程や会場が多いときは 3 列のグリッドで一覧にする

Don't - 角丸やパステルカラーを使わない - 白い地のセクションを作らない - ゴシック体の細い本文にしない - 黄色を広い背景に多用しない - 柔らかい影やぼかしたカードにしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（世界観とタイトルを一目で伝える）: 夜景を背景にキャラクターのイラストと縦書きのコピーを置き、黄色の筆文字タイトルを重ねる
2. リードと動画（実績と体験の魅力を伝える）: スピードラインの上に白い明朝のコピーを置き、黄色い枠の動画を埋め込む
3. イベント紹介（初めての人にイベントを説明する）: ポスターを敷き詰めた暗い背景にシルエットを置き、初心者向けのバナーを添える
4. ポイント（特長を 3 つ示す）: 青い夜景の上に盾型の番号を付け、左右交互に並べる
5. ストーリー（物語への没入を促す）: 黒地に中央揃えの太い明朝。ルビを振り、続きを読むボタンを付ける
6. キャラクター（登場人物を紹介する）: 集合イラストに、黄色い枠の名札を重ねる
7. プレイ形式（人数・場所・時間を示す）: 羽根付き盾のアイコンを 3 列に並べる
8. チケット（料金と特典を示す）: 白線の表組みと黄色の特典行、特典のスライダー、注意事項のボタンで構成する
9. 割引訴求（券種ごとのメリットを示す）: 黄色と黒を斜めに分けたバナーを縦に 3 つ並べる
10. 関連企画（回遊させる）: 青レンガの壁に警告テープを交差させ、バナーを 2 列に並べる
11. グッズ（物販を紹介する）: 黄色のリード文と白い枠のスライダー、一覧へのボタンで構成する
12. チケット購入（会場を選んで購入へ誘導する）: 青い夜景の上に会場カードを 3 列に並べる
13. よくある質問・注意事項（疑問や不安を解消する）: 黄色いアコーディオンのボタンを 3 本、縦に並べる

Imagery

• 都市の夜景写真は、青で単色化して高コントラストにする
• 車のライトのような赤・青・白の光跡をスピードラインとして入れる
• セル画調のアニメイラストを切り抜いて配置する
• 黄色い警告テープ、羽根、盾のモチーフを装飾に使う
• グリッチやノイズで、映像が乱れたような質感を足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 60% 幅のコンテンツを置き、背景の写真は全幅にする
• PC ではファーストビューを横長にし、タイトルを右側に置く
• PC の関連企画バナーは 3 列にする
• PC のグッズはスライダーで 3 枚を同時に見せる
• 会場カードは PC でも 3 列のままで、高さを詰める

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 行書くと起動時に読み込まれる。