DESIGN.md — 黒×深緑×金のプロスポーツ観戦案内 LP（Dark Arena Green and Gold Sports Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、スポーティ、情報量多め・訴求型
• キーワード: 黒地・深緑・金色の欧文見出し・アリーナ写真・試合日程・座席表
• 地の質感: 暗く沈めた会場写真に光のにじみと羽根のエフェクト。テキスト面はフラットな単色で塗る
• 形: 角の立った四角が基本。チケットボタンは角を斜めに落とした札型。サブボタンだけピル型
• 温度感: クールでドラマチック。金色でほんのり熱を足す

Colors

• 地の色は黒を主に使い、アクセス情報など実用的な面だけ白にする
• セクション見出しの欧文は金色。和文の小見出しも同じ金色にそろえる
• 日程とチケットのバナーは深緑の面に、会場写真を薄く重ねる
• 主 CTA は深緑の上に生成りのボタンを置き、文字は黒にする
• テキストリンクはピンクに限定し、ほかの強調に使わない
• 料金表のヘッダーは深緑に白文字。行は淡いグレーと白を交互に並べる
• 座席エリアの多色は座席表と料金表の番号だけで使う
• page は文字 #004B32 × 背景 #010101 のコントラスト比が 2.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#ACACAC、4.51:1）を使う。
• brand-band は文字 #005C43 × 背景 #010101 のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#ACACAC、4.51:1）を使う。

Typography

• 見出しは必ず「大きな欧文 1 行＋小さな和文 1 行」をセットにし、中央にそろえる
• 日付は斜体寄りの極太数字にし、曜日と時刻は数字の右に小さく 2 段で添える
• 案内の本文は太めのゴシックで、中央そろえか左そろえで短く改行する
• 【】で項目名を立て、項目の間は空行で区切る
• 料金表の数字は右に寄せ、末尾に「円」を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カルーセルだけ横スクロールで次のカードを少し見せる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは画面幅いっぱいの暗い写真か黒地の上に置く
• 白い詳細カードは左右 4% の余白で置き、金色の枠で囲む
• 日程バナーは正方形に近い深緑のパネル。左にロゴ VS ロゴ、下に日付とボタンを横に並べる
• 座席表は画面幅いっぱいの図版、料金表は 5 列の表にする
• 黒地の注意事項は中央そろえでたっぷり行間を取る

Elevation & Depth

• 基本はフラットで影を付けない
• 日程バナーの右と下にだけ、薄いグレーの影を付けて浮かせる
• チケットボタンは右下に黒い三角の切り欠きを入れ、立体的に見せる

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は基本的に四角のまま。アリーナ外観だけ正円で切り抜く。SNS アイコンは角丸の正方形
• セクション境界: 直線で背景色を切り替える。黒の帯に大きなロゴ文字を挟んで区切る
• カードとボタンは角を立てる
• 詳細ボタン（サブ）だけピル型にする
• 表のセルは 1px の白い線で区切る

Components

• チケット購入ボタン（button-ticket）: 生成りの横長ボタン。左にチケット販売ロゴ、右に太字の購入文言を置き、右下は黒く切り欠く
• 試合日程バナー（game-banner）: 深緑のパネルに会場写真を薄く重ねる。ロゴ VS ロゴ、会場名、日付ごとにボタンを並べる
• 欧文＋和文の見出し（section-heading）: 金色の極太欧文と和文の小見出しを中央に積む。背景は暗い写真
• イベント詳細カード（event-card）: 上にバナー画像、下に白地のテキスト。全体を金色の枠で囲む
• イベントカルーセル（carousel-card）: 画像の下にピンクの太字タイトル、その下に濃緑のピル型の詳細ボタン
• 詳細ボタン（button-sub）: 濃緑のピル型ボタンに白い文字
• 料金表（price-table）: ヘッダーは深緑。席番号は色付きの正方形、価格区分はサーモンと緑のラベルで示す
• ロゴ帯（brand-band）: 黒地の帯に写真で塗った大きなロゴ文字、または緑のグラデーションのロゴ文字を置く

Do's and Don'ts

Do - 見出しは金色の極太欧文と和文をセットで使う - 背景の写真は暗く沈め、文字がはっきり読めるようにする - 日程と購入ボタンのバナーは、ページの中盤と終盤で繰り返す - 席番号と色を座席表と料金表でそろえる - 注意事項は【】の項目名と空行で整理する

Don't - パステル調やかわいい装飾を加えない - 主 CTA を丸いピル型にしない - 金色を本文に使わない - 白地のセクションを増やしすぎない - リンク以外の強調にピンクを使わない

Page Structure

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

1. ヘッダー（シーズン表記とファンクラブへの導線）: 黒地の左にロゴとシーズン名を 2 行、右に金色のファンクラブボタンとハンバーガーメニュー
2. ファーストビュー（試合の告知）: 選手写真と光のエフェクト。上に極太のチーム名と筆記体、下に対戦相手と日付
3. スペシャルイベント（目玉の企画を案内する）: 暗い会場写真の上に金色の見出し。その下に金色の枠付き白カードで詳細
4. 試合日程と購入（チケット購入へ誘導する）: 深緑のバナーに日付ごとの購入ボタンを並べる
5. ロゴ帯（ブランドを印象づけて区切る）: 黒の帯に写真で塗った大きなロゴ文字
6. その他のイベント（関連企画を一覧で見せる）: 横スクロールのカルーセル。ピンクのタイトルと緑のピル型ボタン
7. 座席・チケット情報（席の種類と価格を示す）: 多色の座席表を置き、その下に 5 列の料金表
8. 優先入場・場内の注意（来場時のルールを伝える）: 黒地に白い太字を中央そろえで並べ、小さな写真とピンクのリンクを添える
9. アリーナ情報（アクセスを案内する）: 白地に正円で切り抜いた外観写真、緑の欧文見出し、交通手段ごとの箇条書き
10. 日程と購入の再掲（最後にもう一度購入へ誘導する）: 中盤と同じ深緑のバナー
11. フッター（SNS への導線と著作権表記）: 黒地に緑グラデーションのロゴ、白地に SNS アイコン、最下部は黒地に著作権表記

Imagery

• 選手は試合用のユニフォーム姿で、自信のあるポーズを撮る。モノクロの大写しと重ねて迫力を出す
• 会場写真は観客席を俯瞰で撮り、暗めに補正して背景に使う
• 緑の光や羽根が舞うエフェクトで高揚感を出す
• 座席表は区画ごとの単色の塗りに番号を付けた、フラットな図版にする
• 建物の外観は晴天の青空の下で撮り、正円で切り抜く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーに観戦ガイドやアリーナなどのナビを横に並べる
• PC の FV は横長にし、写真を右、文字を左に置く
• PC のイベントカードは左寄せの細いカラムに置き、右側は会場写真を見せる
• PC の日程バナーは横長で、ロゴと日付・ボタンを左右に並べる
• PC の料金表と座席表は中央の約 80% 幅に収める
• PC の本文は中央そろえで小さめに表示する

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