DESIGN.md — 黒×ネオン緑の謎解きイベント LP（Dark Mystery Neon-Green Escape Game Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型
• キーワード: ミステリー・黒背景・ネオングリーン・アニメイラスト・ボケ光・謎解き
• 地の質感: 暗い背景にイラストやボケた光を重ねたシネマ調の質感。ノイズは少なめ。
• 形: 円形の写真切り抜き、白い長方形のボタン、黒い帯の見出しが付いた枠ボックス
• 温度感: 冷たく不穏。ただし緑と朱色がアクセントとして効いている

Colors

• 基本は黒地に白文字。チケット・料金・日程だけは白地に黒文字に切り替える
• セクション見出しは頭の 1 文字だけをネオングリーンにし、残りは白（白地では黒）にする
• 緑は見出しの頭文字・役職名・アイコン・主 CTA に限って使う
• 遊び方セクションだけは朱茶色の地にして、ページの流れに変化をつける
• 赤は先行販売などの注意喚起に限って、括弧装飾と一緒に使う
• カレンダーは時間帯ごとに淡い黄・青・ピンクで塗り分ける
• step-flow は文字 #1FE07A × 背景 #FFFFFF のコントラスト比が 1.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#138649、4.63:1）を使う。

Typography

• 見出しは明朝体の太字で中央揃えにする
• 本文はゴシック体で中央揃え。短い行で改行する
• 見出しの頭文字だけをネオングリーンにする
• 補足の括弧書きは見出しより小さくする
• 英字ボタンは大文字のサンセリフにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長・キャラクターは SP で 1 カラム、プレイ形式のアイコンは 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• すべて中央揃えで縦に積む
• 人物紹介は円形写真→名前→役職→本文→コメント→ボタンの順に並べる
• 情報ボックスは黒い帯の見出しと黒枠の白ボックスで作る
• セクションごとに背景のイラストや色を切り替える
• 遊び方は円形アイコンを三角矢印でつないだ 4 ステップにする

Elevation & Depth

• 影はほぼ使わず、フラットに作る
• 黒地の上では白ボックスにだけ薄い影を付けて浮かせる
• 背景イラストにはぼかしと暗いオーバーレイを重ね、前景との奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物・特長の写真は円形に切り抜く。ギャラリーの写真は角丸なしの横長矩形
• セクション境界: 直線で区切り、背景色や画像を切り替える
• ボタンは角丸なしの長方形
• 情報ボックスは角丸なしの黒枠
• アイコンは太線のフラットな形

Components

• 申込ボタン（button-primary）: 緑の長方形ボタン。右端に三角矢印を付ける
• 開閉ボタン（button-readmore）: 黒地の上に置く白い長方形。英字ラベルと下向きの三角を付ける
• 頭文字が緑の見出し（heading-section）: 明朝体の見出しで、頭の 1 文字だけをネオングリーンにする
• 黒帯付き情報ボックス（info-box）: 上部に黒帯の見出し、本体は白地に黒枠。中に区切り線入りの期間表示を入れる
• 円形プロフィール（profile-circle）: 円形写真、明朝の名前、緑の役職名を縦に並べる
• 番号付き特長（feature-number）: 大きな緑の数字に円形画像を重ね、その下に緑の小見出しを置く
• 遊び方ステップ（step-flow）: 白い円の中に黒いシルエットのアイコンを入れ、三角矢印でつなぐ
• 公演カレンダー（schedule-table）: 黒い曜日ヘッダーを付け、セルを時間帯ごとに淡い色で塗り分ける
• 料金表（price-table）: 黒罫線で区切った 2 列の表
• 赤い括弧付き告知（notice-red）: 斜線の括弧ではさんだ赤文字の告知

Do's and Don'ts

Do - 黒地を基調に、見出しの頭文字だけを緑で光らせる - 背景にはぼかした光や暗くしたイラストを使い、ミステリー感を出す - 人物や特長の画像は円形に切り抜いて統一する - チケット情報は白地と黒罫線ではっきり読ませる - 長い本文は開閉ボタンで畳む

Don't - パステル調や明るいグラデーションを全体に使わない - 緑を本文の色や広い面積の塗りに使わない - 角丸の大きいピル型ボタンにしない - 見出しを丸ゴシックにしない - 表組みを黒地のまま置かない

Page Structure

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

1. ファーストビュー（世界観とタイトルを一目で伝える）: 左にアニメのキービジュアル、右に縦組みのロゴを置く。下の黒い帯に期間と会場を書く
2. リード（監修者と期間限定であることを訴求する）: 暗い背景の上に、緑と白を混ぜた太字の 3 行を置く
3. 動画・ギャラリー（体験の様子を見せる）: 動画の埋め込み、告知バナー、横に並べた写真
4. イベント概要（どんなイベントかを説明する）: ボケ光の背景に明朝の見出し。01〜03 の円形画像で特長を 3 つ並べる
5. プレイ形式（時間・人数・会場を示す）: 白地に緑のアイコンを 4 つ並べ、イラストの手で枠を飾る
6. ストーリー（物語への没入を促す）: ぼかしたイラストの背景に中央揃えの本文。続きは開閉ボタンで見せる
7. キャラクター紹介（登場人物を紹介する）: 円形画像 3 つと短い説明
8. 監修・スタッフ（制作陣で信頼を得る）: 円形写真の縦並び。各人にコメントの開閉ボタンを付ける
9. 遊び方（参加の流れを示す）: 朱茶色の地に 4 ステップのフローと安心ポイントのボード
10. チケット情報（販売期間・日程・料金を伝え、申込につなげる）: 白地に黒帯ボックス、カレンダー、料金表、緑の CTA
11. 特典・グッズ（参加特典を訴求する）: 特典バナー画像、枠囲みの告知、注意事項のアコーディオン
12. アクセス（会場の場所を案内する）: チャコール地に会場情報と地図の埋め込み

Imagery

• アニメ調で不穏な表情のキャラクターを描いたイラスト
• 暗い背景に色とりどりのボケ光を散らす
• 体験中の参加者の写真は自然光の明るめのトーンにする
• 宝石風の立体オブジェクトをセクションの境目に浮かべる
• アイコンは太い線のフラットなピクトグラム
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は 3〜4 列の並びを、SP では 1〜2 列にする
• キービジュアルは SP では縦に積み、イラストの下にロゴを置く
• カレンダーは SP では月ごとに縦に並べる
• 本文ブロックの幅は PC で約 70%、SP で約 88% にする
• ギャラリーは 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 行書くと起動時に読み込まれる。