DESIGN.md — 黒×グリッチ赤青の体験型ゲームイベントLP（Glitch Digital Dark Escape Game Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、力強い・インパクト、情報量多め・訴求型、ラグジュアリー・ダーク
• キーワード: グリッチノイズ・RGBずれ文字・ピクセルドット地・漆黒・白カード・ゲーム画面風
• 地の質感: 黒地に暗いグレーのモザイク・ドット柄を敷き、セクション境界に横走りのノイズ帯を入れる。
• 形: 角丸ほぼなしの直角カードと枠。見出しは赤と青の折れ線フレームで挟む。
• 温度感: 冷たく暗いデジタル。赤・青・黄の差し色で緊張感と遊び心を出す。

Colors

• 地は黒と、ドット柄の濃グレーを交互に使いセクションを区切る。
• 見出し文字は白で、赤と青のずらし影を付けグリッチ感を出す。
• 購入導線は赤ボタンに限定し、多用しない。
• 折りたたみ・タブは淡いクリーム黄＋黒文字で目立たせる。
• サブ見出し帯は紺色の全幅帯に白文字。
• 白カードは黒地の上にだけ置き、強いコントラストを保つ。

Typography

• 大見出しは極太で、赤と青を左右に1〜2pxずらした影を重ねる。
• 日本語見出しの上に小さな英字ラベルを字間広めで添える。
• 本文は中央揃えで短い行に改行する。
• 強調セリフは黄色の太字、手書き風に大きく。
• 表の数字は太字で大きめ、補足は小さく下に。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カード3枚はSPで縦積みまたは横スクロール
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは中央寄せの狭い幅にまとめる。
• 特長・手順・アイコン情報は3枚の白カードで並べる。
• セクション境界にグリッチノイズ帯か細い灰線を置く。
• 紺の全幅帯でサブ見出しを区切る。
• 料金は黒地に白罫の表で示す。

Elevation & Depth

• 影はほぼ使わず、平面の色差で層を作る。
• 白カードに黒の太枠を付けて浮かせる。
• 見出しは赤青のずれ影で発光感を出す。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角く切り、白い太枠で囲む
• セクション境界: 横走りのグリッチノイズ帯または細い水平線
• ボタン・カードは直角を基本とする。
• 見出しは赤と青の折れ線フレームで上下を挟む。
• アイコンは黄色の円の中に線画で置く。
• 受賞は月桂樹の金色マークで囲む。

Components

• 赤の購入ボタン（button-primary）: 直角の赤ボタン、右端に三角矢印。
• 赤青フレーム見出し（heading-frame）: 英字ラベル＋日本語見出しを赤と青のL字線で挟む。
• 紺帯見出し（band-heading）: 全幅の紺帯に白文字を中央配置。
• STEPカード（step-card）: 白地に黒枠、左上にSTEPと大きな番号、黄色円アイコン。
• アイコン情報タイル（info-tile）: 白い正方形に黒アイコンと項目名・数値。
• クリーム黄アコーディオン（accordion-yellow）: ▼付きの見出しバー、注意事項やFAQを格納。
• 料金表（price-table）: 黒地に灰罫、上部に前売り／当日のタブ切替。
• 受賞バッジ（award-badge）: 金色の月桂樹と星で評価を示す。
• 会場スケジュールカード（venue-card）: 水色ヘッダーに会場名、日付タブと予約枠ボタン。

Do's and Don'ts

Do - 見出しには必ず赤青のずれ影を付ける。 - 黒地とドット柄地を交互に使いリズムを作る。 - 情報は白カードや表に区切って読みやすくする。 - ノイズ帯でセクションの切り替えを演出する。 - CTAは赤一色で統一する。

Don't - パステルや柔らかいグラデーションの背景を使わない。 - ボタンをピル型や大きな角丸にしない。 - グリッチ効果を本文に掛けて読めなくしない。 - 赤を装飾に多用してCTAを埋もれさせない。 - 白地の広いセクションを作らない。

Page Structure

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

1. ファーストビュー（世界観と作品名を一瞬で伝える）: 暗い室内写真にグリッチノイズを重ね、右に縦組みコピーと大ロゴ、受賞ラベル。
2. 評価訴求（受賞・高評価で信頼を得る）: 大きなキャッチと月桂樹バッジ2つを横並び。
3. 推薦コメント（第三者の声で期待を高める）: 白グラデの四角パネルに黒帯の肩書き、中央揃え本文。
4. 作品紹介（遊びの概要を伝える）: 黄色の見出しと3枚の白枠写真カード。
5. ストーリー（物語へ引き込む）: ドット地に英字大見出し、短い導入文、黄色の台詞、赤のREAD MORE。
6. プレイ形式（時間・人数を示す）: フレーム見出しと白アイコンタイル3つ。
7. 遊び方（参加手順を示す）: STEP番号付き白カード3枚、1枚目に購入ボタン。
8. 安心ポイント（初心者の不安を消す）: 赤青枠の中に3つの約束を番号付きで並べる。
9. キャンペーン（投稿を促す）: 枠付き見出し、説明文、横長バナー。
10. チケット情報（料金と割引を示す）: 紺帯見出し、タブ付き料金表、黄枠の注意リンク、割引バナー。
11. 会場・スケジュール（日程選択と予約）: 会場ごとの水色ヘッダーカードに日付タブと緑の空き枠ボタン。
12. 主催紹介・メッセージ（制作背景を伝える）: 黒地のロゴ紹介と、青紫ブロックの中央揃えメッセージ。
13. FAQ・フッター（疑問解消と締め）: クリーム黄アコーディオン3本、バナー、ロゴとクレジット。

Imagery

• 暗い室内に一筋の光が差す、低照度で青みのある写真。
• 写真や文字にRGBずれ・横スライスのグリッチを加える。
• 背景に濃淡グレーの正方形モザイクを敷く。
• ピクセル風・ゲーム画面風の小物やキャラクター。
• アイコンは黒の線画を黄色の円に入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは3枚カードを縦積みにし幅90%で表示する。
• FVのロゴはSPで写真下に重ね、縦組みコピーは小さく残す。
• 料金表はSPで文字を12px程度に縮め横スクロールを許容する。
• 日付タブは横スクロールにする。
• PCは中央約60%幅に本文をまとめ、左右は黒地で余白を取る。

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