DESIGN.md — 紺黒×発光シアンの試験イベントLP（Dark Arena Exam Event Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 暗い試験会場・発光するネオン・デジタルカウントダウン・漫画のコマ・ステップ型の説明・ゴールドのチケット
• 地の質感: 青黒いコンクリート・石壁風のざらついたテクスチャを全面に敷き、スポットライト状の光とぼかした発光文字を重ねる
• 形: 四角いパネルと帯が中心。ボタンだけピル型で、外側に赤い光彩をつける
• 温度感: 寒色で低い温度感。赤と黄色をアクセントに入れて熱量を足す

Colors

• 地は常に濃紺〜黒。明るい地のセクションは作らない
• ネオン感はシアン系の発光文字とぼかした光彩で出す
• 行動を促すボタンは赤のピル型に限定し、外側に赤い光彩をつける
• 受付期間外のボタンは灰色の無効状態にして区別する
• 数字・人数・時間・注意文は黄色で強調する
• 白は見出し・本文・漫画のコマ・吹き出しに使う
• button-disabled は文字 #88A4BE × 背景 #C3C6C9 のコントラスト比が 1.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• FVのコピーは字間を広めにとった明朝で、中央にそろえる
• セクションタイトルは極太ゴシックを白〜灰でぼかし、看板が光っているように見せる
• カウントダウンは7セグメント風のデジタル数字にする
• 数字は単位より2倍ほど大きくし、セリフ体で目立たせる
• 見出しの末尾に「！」を付け、命令形で短くまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。科目カードは左に見出し、右に数値を置く 2 分割
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 要素はすべて中央ぞろえ
• ステップは番号→見出し→全幅の日付帯→画像→説明→ボタンの順に積む
• 日付帯は左右がフェードする横長グラデーションの帯にする
• 大きなセクションの間に、ロゴを横に並べた細い帯を区切りとして挟む
• ボタンは幅75%前後で中央に置く

Elevation & Depth

• 赤ボタンに赤い外側グロー（0 0 12px）をつける
• タイトル看板は内側を発光させ、文字をぼかす
• 特典チケットや謎の壁紙カードには白〜青の強い光彩をつける
• カードに影はつけず、細い明るい枠線で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 漫画のコマは白地の四角で切り抜く。人物は背景を抜いて重ねる
• セクション境界: 直線で切り替え、ロゴを並べた帯や細い光の線で区切る
• パネルとカードは角丸なしか、ごく小さい角丸にする
• ボタンだけを完全なピル型にする
• 吹き出しは楕円形にする

Components

• 赤い光彩ボタン（button-primary）: 赤のピル型ボタン。外側に赤いグローをつける。2行のテキストも入る
• 無効状態ボタン（button-disabled）: 受付前を示す灰色のピル型ボタン。文字も薄くする
• デジタルカウントダウン（countdown-row）: 左に黄色の点＋ラベルと日付、右にシアンの7セグ数字を置いた半透明の帯
• 発光看板タイトル（glow-title）: 暗いティール色の枠の中に、ぼかした極太文字を置いてネオン看板のように見せる
• ステップ見出し（step-header）: 灰青の番号、白の見出し、その下にフェードする全幅の日付帯を置く
• タイムラインパネル（timeline-panel）: 紺のパネルに縦線とシアンの点を置き、時刻・項目・詳細を並べる。強調は黄色
• 科目カード（exam-card）: 細い枠のテクスチャパネル。左に極太の科目名、右に人数・問題数・制限時間
• キャラ吹き出し（speech-bubble）: 白い楕円の吹き出しに明朝で台詞を書き、漫画キャラクターの横に添える
• 補足情報の吹き出しカード（info-callout）: 上に三角の突起がある青灰のカード。左にロゴ画像、右に黄色の強調テキスト

Do's and Don'ts

Do - 地はざらついた暗い紺のテクスチャで統一する - カウントダウンをFVとページ末尾の両方に置く - ステップは番号付きで縦に並べ、それぞれにCTAを置く - 数字・人数は黄色やセリフ体で大きく見せる - 漫画のコマや吹き出しを挟み、作品の世界観を出す

Don't - 明るい白地やパステルのセクションを入れない - 赤以外の色で主ボタンを作らない - 角丸の大きいカードを多用しない - グローを本文にかけて読みにくくしない - 情報を横並びに詰め込みすぎない

Page Structure

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

1. ファーストビュー（イベント名と締切までの残り時間を示す）: 光る会場の中央にロゴ、左右にモノクロ漫画のパネル。下にカウントダウンを2段で置く
2. コンセプト（ファンの参加意欲を高める）: 明朝のコピーの一部を黄色にし、詩のように短い本文を中央ぞろえで並べる。下にキャラクターの集合イラスト
3. 特典紹介（上位入賞の景品をアピールする）: 英字の大見出しとゴールドのチケット画像、大きな人数表示、赤ボタン、補足の吹き出しカード
4. 参加特典（全員がもらえる特典を伝える）: 左に明朝のテキスト、右に光る「？」入りのカード
5. スケジュール（参加の流れを示す）: 発光看板タイトルとキャラの吹き出しを置き、01〜04のステップを見出し・日付帯・画像・ボタンで構成
6. 当日タイムライン（当日の時刻を示す）: 紺のパネルに縦線のタイムラインを置き、黄色の注意文と無効状態のボタンを添える
7. 試験説明（選べる科目を比較させる）: キャラの吹き出しの下に科目カードを4枚縦に並べ、注意見出しと赤ボタン2つ、FAQリンクを続ける
8. サブCTA（原作を読ませる）: 単行本の表紙を3冊扇形に並べ、赤ボタンを置く
9. 受験会場（ログインの入口）: 発光看板、カウントダウンの再掲、幅広の無効状態ボタン
10. SNSシェア・フッター（拡散を促す）: 細い線で区切り、ハッシュタグとSNSの丸いアイコン3つ、最後に著作権表記

Imagery

• 人物はモノクロ〜カラーの漫画原画を使い、背景を抜いて重ねる
• FVはシアンに光るモニターが並ぶ暗いステージの3DCG風
• 背景はひび割れたコンクリート調で、上からスポットライトが当たったような明暗をつける
• 景品は金属光沢のあるゴールドのチケットで表現する
• 漫画のコマは白枠の四角で、手描きの吹き出しを含めて見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約540px幅のSPレイアウトをそのまま置き、左右は暗い紺のグラデーションにする
• PCのFVは全幅のビジュアルにして、漫画パネルを左右に大きく広げる
• PCは左側にナビとサウンド切り替え・ログインボタン、右側にカウントダウンを固定で置く
• PCでも文字サイズとセクションの構成は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 行書くと起動時に読み込まれる。