DESIGN.md — 黒×紫×山吹の怪談系謎解きイベント LP（Dark Occult Comedy Escape Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 夜の旧校舎・怪談コメディ・網点グラデーション・極太フチ文字・山吹アクセント
• 地の質感: 黒地にハーフトーンの網点を重ね、薄暗い教室写真を透かして奥行きを出す
• 形: セクションの境目は山並みのような波線。カードは角丸が小さい四角
• 温度感: 暗くて冷たい地色に、山吹と赤の暖色をアクセントとして置く

Colors

• 地は黒、紺、紫がかった暗色をセクションごとに切り替え、白い地は使わない
• 強調は赤と山吹の暖色だけにし、見出しの中の 1〜2 語を赤くする
• 白カードは情報ブロック（遊び方、声、料金、会場）だけに使い、暗い地の上に浮かせる
• 装飾見出しは白の極太文字に紫と黒の二重フチを付ける
• アコーディオンや主ボタンは山吹の地に白文字、サブボタンは紫か黒の地に白文字
• 地には網点のグラデーションを重ね、のっぺりした単色面は避ける
• accordion-cta は文字 #FFFFFF × 背景 #EDA421 のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A06B0D、4.56:1）を使う。

Typography

• 見出しは英字見出しも含めて極太のディスプレイ書体にし、紫のフチと黒の影を付ける
• 見出しの横には手描きの小物イラストを 1 点添える
• 暗い地の本文は白、中央揃え、行間は 1.8
• 価格の数字は大きく太くし、「円」は小さくする
• 強調語は赤にするか、文字の大きさに差を付けて目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード群は横スクロール、または縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しはすべて中央に置き、上に装飾イラストを重ねる
• ステップカードの左上には紫の四角い番号バッジを付ける
• 料金表は 3 列のテーブルにし、ヘッダーを山吹にする
• お客様の声は白カードのカルーセルにし、下にドットのページャーを付ける
• ページ末尾には山吹のアコーディオンを 3 本縦に並べる

Elevation & Depth

• 影はほぼ使わず、暗い地と白カードの明暗差で浮かせる
• 白カードには紫か赤の細い枠を付ける
• 見出しの文字にだけ黒のドロップシャドウを付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は四角のまま。白フチや色枠で囲む
• セクション境界: 山並みや煙のような不規則な波線で色を切り替える
• サブボタンはピル型、アコーディオンは角丸の小さい帯にする
• カード類は角丸 4px 程度の硬めの形にする
• 吹き出しやリボン型のラベルで見出しを補う

Components

• フチ取り装飾見出し（heading-outline）: 白の極太文字に紫と黒の二重フチを付け、横に小物イラストを置く
• 山吹アコーディオン（accordion-cta）: 全幅の山吹の帯。中央に白いラベル、右に下矢印を置く
• サブボタン（button-sub）: 紫か黒のピル型ボタン。白文字で右に矢印を付ける
• 遊び方ステップカード（step-card）: 白カードの左上に紫の番号を付け、線画アイコン、赤い見出し、本文の順に並べる
• ポイントカード（point-card）: クリーム色のラベル見出しの下に写真と白文字の説明を置く
• 参加者の声カード（review-card）: 白カードに感想文と、赤い星の満足度を載せる
• 料金表（price-table）: 山吹のヘッダー、淡黄の行見出し、太字の価格を配し、紫の細い罫線で区切る
• 開催概要ボックス（info-box）: 黒地に白い細枠を付け、紫の丸アイコンと項目を 2 列で並べる
• お知らせリスト（news-list）: 細枠の中に、山吹の日付と白文字の見出しを並べる

Do's and Don'ts

Do - セクションごとに地の色を変え、波線の境界でつなぐ - 見出しには必ずフチ取りと小物イラストを添える - 網点や暗く沈めた教室写真で地に質感を出す - 情報は白カードにまとめて、読みやすさを確保する - 強調色の赤と山吹は少量に絞って使う

Don't - 白やパステルを地の色にしない - 細い明朝体や上品な書体を見出しに使わない - 強い角丸や柔らかい影で可愛く寄せすぎない - 本物のホラーのような血や残酷表現を使わない - 強調色を 3 色以上同時に使わない

Page Structure

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

1. ファーストビュー（世界観とタイトルを一目で伝える）: 黒地の左にロゴ風のタイトルとサブコピー、右に円形のコラージュイラストを置き、下に会場写真の帯を並べる
2. コンセプト（体験の魅力を一文で示す）: 白い極太の 2 行コピーにし、強調語を赤にする
3. 動画（CM で雰囲気を伝える）: フチ取り見出しの下に、オレンジ枠付きの動画埋め込みを置く
4. ポイント（特長を 3 つ示す）: クリームのラベル、写真、白文字の説明からなるカードを 3 列で並べ、その下に概要ボックスを置く
5. ストーリー（物語への没入感を高める）: 網点の紫グラデーション地に赤いリボン見出しを置き、中央揃えの短い文を並べて「もっと見る」で開閉する
6. 各章紹介（章の構成を見せる）: 縦長の動画と、赤枠の章タイルのグリッドを並べる
7. 遊び方（参加の流れを示す）: 番号付きの白カードを 4 枚並べる
8. 参加者の声（社会的な証明を示す）: 紺地に白カードのカルーセルを置く
9. スペシャル（関連企画へ誘導する）: 紫の網点地にバナーを 3 枚横に並べる
10. チケット情報（料金と販売情報を伝える）: タブ切り替え、料金表、割引の案内ボックス、紫ヘッダーの注意事項の順に並べる
11. 会場・購入（場所の案内と予約）: 白い大枠の中に地図と日付カレンダーの予約枠を置く
12. 制作者紹介（制作者の信頼感を示す）: 集合写真、本文、ピル型ボタン、黒枠のコメントボックスの順に並べる
13. グッズ・フード（物販を案内する）: 紺地に商品写真と金色の価格のカードを 3 列で並べる
14. FAQ・お知らせ・フッター（補足情報と SNS への導線）: 山吹のアコーディオン 3 本、細枠のお知らせ、ロゴと SNS の丸アイコンの順に並べる

Imagery

• 学校の怪談モチーフ（人体模型、ピアノ、理科室の器具）をポップな線画で描く
• 白い小さなお化けのイラストを見出しの角に添える
• 教室や廊下の写真は暗く沈め、網点を重ねて背景に使う
• 会場の実写は暖色の照明で、薄暗いレトロな校舎の雰囲気にする
• フラスコ、ボール、紙片などの小物を斜めに配置して散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の 3〜4 列カードは、SP では 1 列か横スクロールにする
• ファーストビューは SP ではタイトルを上、コラージュイラストを下に積む
• 料金表は SP でも 3 列を保ち、文字を小さくする
• SP の見出しは 24〜28px にし、装飾イラストは小さくする
• カレンダーは 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 行書くと起動時に読み込まれる。