DESIGN.md — 赤×金箔×焦げ茶の競馬キャンペーン LP（Crimson Gold Racing Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、上品・高級、情報量多め・訴求型
• キーワード: 深紅・金箔・火花・疾走感・賞品訴求・明朝見出し
• 地の質感: 金箔の揉み紙風テクスチャ、赤地の光沢グラデーション、黒地に斜めの金ライン、散る火花のパーティクル
• 形: 角の立った長方形カードと金の細枠、リボン型の賞バッジ、円形の当選数バッジ、斜め切り替えのセクション境界
• 温度感: 暖色中心で熱く華やか。黒と焦げ茶で重厚感を足す

Colors

• 地は深紅・焦げ茶・黒・金箔をセクションごとに切り替える
• 情報カードは白地に黒文字で可読性を確保する
• 数字の強調は赤文字か金地の白抜きで大きく見せる
• 当選数バッジは赤丸に白文字、または金地に赤文字
• 金は線・枠・バッジで面積を絞り高級感を出す
• コラボ枠など別企画は異色の太枠で区別する
• prize-ribbon-badge は文字 #BC0202 × 背景 #E8B666 のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#F0D09D、4.52:1）を使う。

Typography

• 見出しは明朝の太字で格調を出す
• 数字は単位より2〜3倍大きくする
• 大タイトルは金や白に縁取り・影をつける
• 本文は短く改行し中央揃えを基本にする
• 注釈は小さく白か灰で条件下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品カード一覧は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 賞品ブロックは賞バッジ＋賞品名＋画像＋応募条件の順
• 手順は STEP 番号付きカードを横並びし矢印で繋ぐ
• Q&A は白い横長バーのアコーディオンで縦積み
• 競走馬写真は左右端からはみ出させて配置
• セクション冒頭に明朝見出しと飾り線を置く

Elevation & Depth

• 白カードに薄い影と金の細枠
• タイトル文字に金のグラデと黒影
• バッジは軽いドロップシャドウ
• Q&A バーは影なしでフラット

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 競走馬は背景を抜いた切り抜き。賞品は斜めに重ねた実物写真
• セクション境界: 斜めの対角線切り替えと光沢の帯で境界をつくる
• カードは角丸ほぼなしの長方形
• 賞の記号はリボン形の金バッジ
• 当選数は円形バッジ
• ボタンは細枠の長方形に矢印アイコン

Components

• 金のアンカータブ（nav-anchor-tabs）: 賞品・応募方法・Q&Aへ飛ぶ金地の小タブを横3つ並べる
• 金枠の総当選数カード（summary-gold-card）: 金箔地に大きな当選総数と期間ボックス2つを配置
• 賞リボンバッジ（prize-ribbon-badge）: A・B・C 賞を示す縦長の金リボン、文字は赤
• 当選数の丸バッジ（winner-count-badge）: 赤丸に白で抽選人数を大きく表示
• STEP カード（step-card）: 金ラベルの STEP 番号と見出し・説明を持つ白カード、間に三角矢印
• Q&A アコーディオン（faq-accordion）: 金色のQ記号と質問、右端に開閉矢印の白バー
• 細枠リンクボタン（button-secondary）: 白または透明地に細枠と右矢印
• 黒地の主ボタン（button-primary）: 黒地に白文字と三角矢印、応募や詳細へ誘導
• 赤ヘッダー付き白パネル（red-header-panel）: 赤の帯見出しを上に乗せた白い説明パネル

Do's and Don'ts

Do - 赤・茶・黒・金の地をセクションごとに交互に使う - 当選人数や日付は特大数字で見せる - 馬の切り抜き写真を画面端からはみ出させる - 火花や光の粒を見出し周りに散らす - 条件や規約は白カード内に整理する

Don't - パステルや淡色の地を使わない - 大きな角丸やピル型ボタンにしない - 金を広い面で単色ベタ塗りしない - 見出しを細い書体にしない - 注釈を本文と同じ大きさにしない

Page Structure

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

1. ファーストビュー（大会名と期間・当選総数を一目で伝える）: 赤地に巨大な金縁タイトル、左右に疾走する馬、右下に当選数の丸バッジ
2. 応募ボタン帯（即応募へ誘導）: 黒の全幅帯に白文字と矢印
3. 概要（アンカーと総当選数・期間を提示）: 金タブ3つと金枠カード、期間を赤帯ボックス2つで並べる
4. 賞品紹介（各賞の内容と応募条件を示す）: 焦げ茶の斜めグラデ地にリボンバッジ、明朝の賞品名、賞品写真、条件リスト
5. 賞品一覧（コレクション全種を見せる）: カード画像を多列グリッドで並べる
6. 新規加入特典（新規会員獲得）: 赤い光沢リボン背景に白抜き大見出しと特典カード
7. コラボプレゼント（別企画の特典を案内）: 金箔地に赤帯見出し付き白パネル、番号付き手順
8. 関連サービス紹介（観戦体験の提案）: 黒地を蛍光グリーン太枠で囲み、斜めの見出しと写真
9. 応募方法（手順を簡潔に示す）: 赤地に3つの STEP カードと矢印、下に規約スクロール枠
10. よくある質問（疑問解消）: 黒と金の斜め地に白いアコーディオンバー
11. SNS キャンペーン（拡散を促す）: 赤地に大タイトル、黒ヘッダー付きの3ステップ枠
12. 会員サービス紹介（会員登録の利点を伝える）: 金箔地に緑ラベルの特典3つと設定手順
13. クロージング（開催日時と締切を再提示）: 赤地に馬写真を薄く敷き大タイトルと日付
14. フッター（注意書きと権利表記）: 黒地に小さな白文字

Imagery

• 馬と騎手を背景から抜いた躍動的な切り抜き写真
• 金色の火花・光の粒を見出し付近に散らす
• 金箔の揉み紙テクスチャを背景に敷く
• 賞品は斜めに重ねて立体的に配置
• 赤い布のような光沢リボンを背景に流す
• アイコンは単色の線画でシンプルに
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 700px の固定幅で背景は全幅
• SP では STEP カードを縦積みにして矢印を下向きにする
• 賞品一覧グリッドは PC 6〜7列から SP 3列へ
• 馬の切り抜きは SP では小さくし本文に重ねない
• 大タイトルは SP で画面幅の 90% 程度に収める

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