DESIGN.md — 紺×金枠の高級ミステリー体験イベントLP（Dark Navy Gold Frame Escape Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、情報量多め・訴求型
• キーワード: 夜景・濃紺・金の額縁・明朝体・ミステリー・高級インテリア
• 地の質感: 濃紺のダマスク柄や幾何学柄の壁紙テクスチャ、夜景写真のグラデーション。金枠は光沢と淡い外光を伴う
• 形: 角の立った長方形が基本。金の二重線枠、角だけ金ブロックを置いたカード、L字の角飾り
• 温度感: 冷たい紺に温かい金を差した、夜のラグジュアリーな温度感

Colors

• 地は濃紺で統一し、セクションごとに壁紙柄や夜景写真で質感だけ変える
• 金は枠線・角飾り・小見出し・区切り線に限定し、面で広く使わない
• カードの中は黒に近い濃色、文字は白、項目名や数値だけ金
• 主ボタンは白地＋金枠＋濃紺文字で暗い地から浮かせる
• 導入コピー帯だけワインレッドの星空背景で差し色にする
• 会場カードは黒の上段＋金の下段で行き先リンクを示す
• venue-card は文字 #FFFFFF × 背景 #D29600 のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9A6E00、4.56:1）を使う。

Typography

• 全体を太めの明朝体でまとめ、ゴシックを混ぜない
• ストーリー本文は中央揃え・行間広めで朗読調にする
• 強調は色（金）で行い、サイズの跳ね上げは見出しだけ
• 小見出しの下に短い金の横線を引く
• 数値（時間・人数）は金色で単位ごと表示
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ルール情報は 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 各セクションは金枠見出しプレートを中央に置いて始める
• 本文は左右約5%余白で中央揃え
• カードは画面幅いっぱい近くまで広げる
• 参加方法はスライダー型カードで1枚ずつ見せる
• セクション端に家具の切り抜き写真をはみ出させて置く

Elevation & Depth

• 見出しプレートは金枠の外側に淡い金色の外光（glow）
• カードに影は付けず、金枠と黒地のコントラストで浮かせる
• 動画枠は太い金の額縁で囲む

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は長方形のまま。グッズは円形と正方形を重ねる。家具は背景を抜いた切り抜き
• セクション境界: 直線。壁紙柄の切替や金の細い横ラインで区切る
• 角は基本直角、ボタンとアコーディオンだけ小さく角丸
• カードの角に金の小ブロックやL字を付ける
• アイコンは白い角丸正方形か金の円に入れる

Components

• 金枠見出しプレート（heading-plate）: くすみ青の横長プレートを金の二重枠と四隅のビスで縁取り、外光を付けた中央見出し
• 金枠の特徴リストカード（feature-card）: 黒地に金の枠、左に白角丸アイコン、右に金小見出しと白本文を縦に3項目
• ルール2×2タイル（rule-tile）: 黒い正方形に金の細枠と角ブロック、白線アイコン、項目名白＋値金
• ステップスライドカード（step-card）: 濃紺カードに白細線の内枠、金グラデの円アイコン、step番号と金下線、下部に主ボタン
• チケット購入ボタン（button-primary）: 白地に金の太枠、濃紺の明朝文字
• タブ付き料金表（price-table）: 黒地に金上線の選択タブ、グレー行の2列表で区分ごとの料金
• 会場カード（venue-card）: 金地の中に黒の情報欄（会場名・期間）、下段の金帯がリンク
• 注意事項アコーディオン（accordion）: 白い角丸バーに▼で挟んだ黒の明朝ラベル

Do's and Don'ts

Do - 見出しは必ず金枠プレートで統一する - 明朝体の白文字を濃紺地に置く - 高級家具や夜景の写真で舞台の世界観を作る - 金は細い線と小さな角飾りで品よく使う - 数値情報はアイコン付きタイルで一目でわかるようにする

Don't - パステルや明るい原色の背景を使わない - 丸ゴシックや手書きフォントを混ぜない - 大きな角丸やピル型ボタンにしない - 金をベタ面で多用して安っぽくしない - ドロップシャドウの強いポップな装飾を入れない

Page Structure

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

1. ファーストビュー（世界観と題名を一目で伝える）: 夜景と高級ソファの合成ビジュアルに金枠の題名ロゴ、下に短いキャッチ
2. 写真帯と導入コピー（体験内容を短く要約）: 横並びの体験写真の下にワインレッドの星空帯、白明朝3行
3. 動画（CMで雰囲気を見せる）: 見出しプレート＋金額縁の埋め込み動画
4. ストーリー（物語で没入させる）: 中央揃えの白明朝の段落を並べ、末尾を夜景写真へフェード
5. 特長（体験の魅力を3点で訴求）: 金枠黒カードにアイコン＋金小見出し＋本文を縦に並べる
6. プレイ形式（時間・人数などの基本情報）: リード文の下に2×2のアイコンタイル
7. 参加方法（申込の流れを示す）: ダマスク壁紙の上にステップのスライダーカード、購入ボタン
8. 料金（料金体系を提示）: タブ切替の黒い料金表、注記、割引案内の枠囲みボックス
9. 開催会場（会場別の詳細へ誘導）: 金×黒の会場カードを縦に積む
10. グッズ（関連商品の紹介）: 円形と正方形の商品画像を重ね、下に中央揃えの名称と価格
11. 注意事項・FAQ（不安解消と規約）: 白い角丸アコーディオンを3本縦に並べる

Imagery

• 高層階から見下ろす青い夜景写真を背景に使う
• 金や真鍮の家具・照明・宝箱などを切り抜いてセクション端に配置
• アイコンは白の細線ピクトで統一
• ステップアイコンは金グラデの円に白線画
• 壁紙は濃紺やオリーブ金のダマスク柄・幾何学柄
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に最大約800px幅のコンテンツ列を置き背景を左右に広げる
• 特長カードはPCで3列横並びにしてもよい
• ルールタイルはPCで4〜5列横一列
• 会場カードはPCでも縦積みのまま中央寄せ
• 見出しプレートの大きさはPCで1.2倍程度に

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