--- version: alpha name: Dark Arena Green and Gold Sports Game LP description: 黒地に深緑と金色を効かせた、プロバスケのホームゲーム観戦案内 LP。アリーナ写真を暗く沈めた背景の上に、太い欧文見出しと和文の小見出しをセットで置く。座席表と料金表で情報をしっかり見せ、最後は白地のアクセス情報で締める。 colors: background: '#010101' primary: '#005C43' accent-1: '#D9D492' cta: '#EBE3C5' on-cta: '#070401' surface: '#FFFFFF' line: '#B5A15A' text-body: '#004B32' on-dark: '#E3E3E3' accent-2: '#B74B71' background-alt: '#E2DED1' secondary: '#024C33' text: '#0B0A0F' tint-1: '#F08C86' background-accessible: '#ACACAC' typography: display: fontFamily: Bebas Neue fontSize: 56px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Alfa Slab One fontSize: 44px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.4 rounded: sm: 0px md: 4px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-ticket: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 40px game-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 360px section-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 110px event-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 900px carousel-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 260px button-sub: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px price-table: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' height: 900px brand-band: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' height: 110px --- # DESIGN.md — 黒×深緑×金のプロスポーツ観戦案内 LP（Dark Arena Green and Gold Sports Game LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、スポーティ、情報量多め・訴求型 - **キーワード**: 黒地・深緑・金色の欧文見出し・アリーナ写真・試合日程・座席表 - **地の質感**: 暗く沈めた会場写真に光のにじみと羽根のエフェクト。テキスト面はフラットな単色で塗る - **形**: 角の立った四角が基本。チケットボタンは角を斜めに落とした札型。サブボタンだけピル型 - **温度感**: クールでドラマチック。金色でほんのり熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#010101` | ページ基調の黒地 | 40% | 画素の実測 | | `primary` | `#005C43` | ブランドの深緑（日程バナー・表ヘッダー） | 8% | 画素の実測 | | `accent-1` | `#D9D492` | 金色の欧文セクション見出し | 2% | 画素の実測 | | `cta` | `#EBE3C5` | チケット購入ボタンの生成り面 | 1% | 画素の実測 | | `on-cta` | `#070401` | チケットボタンの文字 | 0% | 画素の実測 | | `surface` | `#FFFFFF` | イベント詳細カードの白地 | 22% | 画素の実測 | | `line` | `#B5A15A` | カードの金色の枠線 | 0% | 推定 | | `text-body` | `#004B32` | 白カード内の深緑の本文 | 2% | 画素の主要色に補正 | | `on-dark` | `#E3E3E3` | 黒地上の白文字 | 3% | 画素の実測 | | `accent-2` | `#B74B71` | テキストリンクのピンク | 0% | 画素の実測 | | `background-alt` | `#E2DED1` | 料金表の行地の淡いグレー | 4% | 画素の主要色に補正 | | `secondary` | `#024C33` | サブボタンの濃緑 | 0% | 画素の実測 | | `text` | `#0B0A0F` | 白地上の見出し・本文の黒 | 2% | 画素の主要色に補正 | | `tint-1` | `#F08C86` | 料金表 FC 価格ラベルのサーモン | 0% | 推定 | | `background-accessible` | `#ACACAC` | AA を満たす補正値（計算） | | 計算 | - 地の色は黒を主に使い、アクセス情報など実用的な面だけ白にする - セクション見出しの欧文は金色。和文の小見出しも同じ金色にそろえる - 日程とチケットのバナーは深緑の面に、会場写真を薄く重ねる - 主 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のチーム名・試合日付 | 装飾・ディスプレイ | Bebas Neue | 700 | 56px | 1.0 | 0.0em | | `headline-lg` | 金色の欧文セクション見出し | 欧文セリフ | Alfa Slab One | 400 | 44px | 1.1 | 0.02em | | `headline-md` | 欧文見出しの下に置く和文の小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.05em | | `headline-sm` | カード内の見出し・表のタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.03em | | `body-md` | 案内の本文・注意事項 | ゴシック | Noto Sans JP | 500 | 12px | 1.9 | 0.02em | | `body-lg` | アクセス案内の本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.0em | | `label-button` | チケット購入ボタンの文字 | ゴシック | Zen Kaku Gothic New | 900 | 15px | 1.2 | 0.02em | | `note` | 料金表のセル・注記 | ゴシック | Noto Sans JP | 700 | 9px | 1.4 | 0.0em | - 見出しは必ず「大きな欧文 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-e4531680`（元 LP の URL から採番） - **元 LP**: https://www.storks.jp/lp/game_20260228_20260301/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。