DESIGN.md — 黒×赤×群青のアニメ謎解きイベント LP（Dark Cyber Escape Game Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 暗闇・赤い発光・追跡・メタルプレート・グリッド・アニメコラボ
• 地の質感: 暗い廊下の写真、細い赤のグリッド線、メタリックなグラデーションの見出しプレート
• 形: 六角形のアイコン枠、角丸が小さい赤枠パネル、斜めに区切った KV
• 温度感: 冷たく緊張感がある。赤と黄色の差し色で熱量を足す

Colors

• 地は黒で統一する。セクションの切り替えはチャコールか群青の帯だけで行う
• 赤は発光する線・枠・アイコンの縁取りと KV に使う。広い面には塗らない
• 黄色はリード文・番号付き小見出し・リンクだけに使う
• 群青はキャラクター紹介の帯と、アコーディオンボタン・グッズカードの下段に使う
• 本文は白、注釈は灰色にする
• 写真の背景は暗く沈め、文字のコントラストを保つ
• heading-plate は文字 #E01A1A × 背景 #1B1B1A のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#F7F7F7、4.52:1）を使う。

Typography

• 見出しは極太ゴシックにし、メタル調のプレートの中に赤か黒で置く
• 本文は中央揃えにして、短い行で改行する
• リード文は黄色の太字で 2 行に収める
• 番号はデジタル風の欧文で大きく置き、黄色にする
• 日付・時刻は数字を詰めて太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央 70% の 1 カラムで、特長やアイコンだけ 2〜4 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは見出しプレートを中央に置くところから始める
• チケット情報やストーリーは赤枠のグリッドパネルの中に入れる
• 会場は赤枠の角丸カードを縦に並べ、カードの下端に濃灰のボタンを置く
• 特長は六角形のアイコンと番号を左に置き、ジグザグに少しずつずらす
• 補足情報はページ下部で青いアコーディオンにまとめる

Elevation & Depth

• 影はほぼ使わない。奥行きは暗い写真と発光する赤線で出す
• アイコンの六角枠には赤い外側の発光（glow）を付ける
• 見出しプレートには銀色のグラデーションと細い黒縁を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの矩形で横に並べる。キャラクターは背景を抜いて置く
• セクション境界: 直線で区切る。帯の色を黒・チャコール・群青に切り替える
• アイコン枠は六角形か円形にし、赤か白の線で囲む
• チケットボタンは濃灰のピル型にする
• パネルは角の小さい赤枠にする
• KV は斜めの線でパネルを区切る

Components

• メタルプレート見出し（heading-plate）: 銀色のグラデーションで両端を斜めに落としたプレートに、赤か黒の極太文字を置く
• 六角形のポイントアイコン（point-hex-icon）: 赤く光る六角枠に白い線画のアイコンを入れ、横に黄色の番号と見出しを置く
• 赤枠のグリッドパネル（grid-panel）: 黒地に細い赤のグリッドを敷き、赤い 1px の枠で囲んだ情報パネル
• 会場カード（venue-card）: 赤枠の角丸カード。上部に赤い矢印を連ね、中に会場名と日付、黄色の MAP リンク、濃灰のピル型ボタンを入れる
• チケットボタン（button-ticket）: 濃灰のピル型ボタン。白文字の後ろに赤い三角を付ける
• 青いアコーディオン（accordion-bar）: 画面幅いっぱいの群青の帯に、白文字を三角で挟んで置く
• 料金タブと料金表（price-table）: 選んでいるタブを暗い赤で塗り分け、下に灰色の線で区切った 2 列の表を置く
• バナーリンク（banner-link）: アニメ調の横長の画像バナーを 2 列に並べる
• お知らせリスト（news-list）: 赤枠の中で、日付とタイトルを赤い区切り線で 1 行ずつ並べる

Do's and Don'ts

Do - 地は黒を守り、赤は線と発光に使う - 見出しはすべて同じメタルプレートで揃える - 暗い廊下や人影の写真を背景に薄く敷く - 黄色は強調する文だけに絞る - 情報は赤枠パネルにまとめて読みやすくする

Don't - 白や明るい色の背景セクションを作らない - パステル色や柔らかい角丸を多用しない - 赤を広い面に塗らない（KV は例外） - 細い明朝体を使わない - 背景写真を明るくして文字のコントラストを下げない

Page Structure

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

1. ファーストビュー（世界観とタイトルを一目で伝える）: 赤地にキャラクターを斜めのパネルで配置する。極太の白いタイトルと縦書きのコピーを置く
2. 開催告知（イベントの概要を伝える）: 暗い背景にリボン風のタイトルを置き、黄色のリードと白い説明文を続ける。下に体験写真を横一列に並べる
3. ポイント（遊び方の魅力を 3 つ示す）: 六角形のアイコンと番号付きの見出しを斜めにずらして並べ、背景に人影の写真を敷く
4. 関連バナー・CM（作品の理解と動画で興味を高める）: 青いバナーを 2 つ並べ、その下に動画を埋め込み、さらに横長のバナーを 2 つ置く
5. プレイ形式（時間・人数・場所の条件を示す）: 赤い円形のアイコンを 4 つ並べ、下に短いラベルを付ける。続けてチャコールの注記帯を置く
6. ストーリー（物語への没入を促す）: 赤枠のグリッドパネルに中央揃えの文を置き、下に敵キャラクター 3 体を並べる
7. キャラクター（登場人物を紹介する）: 群青の帯にキャラクター 1 人と大きな欧文の名前を置き、下にサムネイルで切り替えられるようにする
8. 参加方法（購入から終了までの流れを示す）: 円形の線画アイコンと番号付き見出しを 2×2 に並べる
9. チケット＆スケジュール（販売日程・会場・料金を伝える）: 赤枠パネルに、赤い小見出し、会場カード、料金表、割引バナーを順に置く
10. グッズ（関連グッズを紹介する）: 白い画像エリアと群青の説明エリアを上下に組み合わせたカードを置く
11. 注意事項・FAQ（補足情報を折りたたんで載せる）: 青いアコーディオンバーを 3 本縦に並べる
12. ニュース・フッター（更新情報と運営情報を載せる）: 赤枠のニュースリストの下にバナーを 2 つ置き、ロゴとクレジットを中央揃えにする

Imagery

• 暗いコンクリートの廊下や地下通路の写真を、彩度を落として背景に敷く
• 黒いスーツの人影のシルエットを並べて、追われる緊張感を出す
• アニメ調のキャラクターは背景を抜き、走るなど動きのあるポーズで置く
• アイコンは白い単線の線画にし、赤く光る枠で囲む
• 体験写真は暖色寄りで、楽しんでいる様子を横に連続して並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにする。ポイントのジグザグ配置は解除し、アイコンと見出しを縦に積む
• プレイ形式のアイコンは SP で 2×2 にする
• バナーは SP で 1 列に縦積みする
• KV は SP で縦長にし、タイトルを上、キャラクターを下に配置する
• パネルの左右余白は SP で 16px 程度にする

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