DESIGN.md — 赤×白×黒の高額懸賞キャンペーン LP（Bold Red Prize Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、スポーティ
• キーワード: 真紅・極太明朝・立体文字・金縁ボタン・斜め帯・賞金訴求
• 地の質感: 赤地にモノクロ写真を薄く重ねた半透明のテクスチャ。黒地にもモノクロ写真を沈ませる
• 形: 角ばった赤ラベルと四角いボタンが基本。主 CTA だけ金縁のピル型
• 温度感: 高温。赤の比率が高く、興奮と緊急感を出す

Colors

• 地色は赤→白→赤→白→黒の順で切り替え、セクションの性格を分ける
• 金額・数字・重要語は赤文字で大きくし、他は黒
• 強調語の下に赤い太下線を引く
• 条件ラベルは赤地白抜きの帯
• 赤地には写真をモノクロで半透明に重ねて単調さを消す
• 金色は主 CTA の縁と選手写真の背景のみに限定

Typography

• 訴求部分は極太明朝、注意書きと黒地説明はゴシックと使い分ける
• FV 文字は白で立体の影を付け、彫刻のような厚みを出す
• 見出しは赤文字にドロップシャドウ
• 金額は数字を大きく、単位を小さく並べる
• 注意事項は※始まりのぶら下げインデント
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。選手一覧は写真左・情報右の横並び
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央揃えで条件を縦に積む
• 条件ブロックは灰線で区切る
• ボタンは左右 16px の余白で横幅いっぱい
• サブボタンは 2 列で並べる
• 出場表は全幅の表組み

Elevation & Depth

• 主 CTA は金縁と下方向の濃い影で浮き出す
• 四角い赤ボタンは右下に黒い影
• 見出し文字にドロップシャドウ
• 賞金ボックスは白地に柔らかい影

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 選手写真は縦長の長方形、金色背景で切り抜く。バナーは横長長方形
• セクション境界: 赤地への切り替えに斜めに傾いた帯テキストを 2 段重ねる
• 主 CTA のみピル型、他は角丸ほぼ 0
• ラベルは角ばった赤帯
• 見出し両脇に赤いグラデ線を伸ばす

Components

• 金縁ピル型 CTA（button-primary）: 赤のグラデ地に金縁、右端に下矢印または右矢印
• 四角い赤ボタン（button-secondary）: 全幅の赤ボタンに右端の細い矢印、影付き
• 両脇線つき見出し（heading-line）: 赤文字の明朝見出しの左右に赤い線が伸びる
• 条件ラベル帯（label-condition）: 赤地に白文字の明朝で条件を示す長方形
• 賞金ボックス（prize-box）: 白地の影付きボックスに金のバースト見出しと赤の大きな金額、左右に札束イラスト
• 選手カード（player-card）: 金背景の顔写真と、白文字の戦績・極太明朝の名前
• STEP 番号（step-badge）: 赤い円に白の大きな数字、上に STEP の欧文
• 斜め帯テキスト（diagonal-ribbon）: 白い帯に赤い明朝のコピーを繰り返し、傾けて 2 段重ねる
• 関連企画バナー（banner-card）: 黒地に横長バナー、下に白い説明文と赤ボタン

Do's and Don'ts

Do - 金額・数字は赤の極太明朝で最大サイズにする - 条件は見出し→赤ラベル→金額→補足の順で積む - 赤地には写真をモノクロ半透明で重ねる - 主 CTA の直下に注意書きを赤い小文字で添える - 注意事項はすべて※付きの箇条で網羅する

Don't - パステルや淡い色を主役にしない - 主 CTA 以外のボタンをピル型にしない - 細い書体で金額を書かない - 金色を広い面に使わない - 黒地セクションに白地のカードを多用しない

Page Structure

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

1. ファーストビュー（難易度と高額報酬を一撃で伝える）: 赤地に白の立体明朝を 4 段、数字を最大級に。斜めの赤ラベルを重ねる
2. キャンペーン概要（対象と賞品を要約する）: 日付バッジ、赤下線つき明朝の説明、札束イラスト付き賞金ボックス
3. CTA（応募へ誘導する）: 金縁ピル型ボタンと赤い注意書き
4. 開催・締切情報（日時を明示する）: 両脇線つき赤見出しの下に太字の日時
5. 報酬条件（当選人数別の報酬を説明）: 赤ラベル帯で条件を分け、金額を赤大文字。特例は灰ボックス
6. 出場者紹介（対象レースの期待感を高める）: 斜め帯で赤地へ移り、金背景の写真カードを縦に並べる
7. 出場表（一覧で比較させる）: 色付き番号の表組み、黒灰のセル
8. 応募方法（手順を案内）: 赤円の STEP 番号、全幅赤ボタンと 2 列サブボタン、最後に金縁 CTA
9. 注意事項（規約を網羅）: 赤の見出しと※箇条の小さいゴシック
10. 関連コンテンツ（他企画へ回遊させる）: 斜め帯で黒地へ。赤明朝の見出し、バナー＋説明＋赤ボタンの繰り返し
11. フッター（著作権表示）: 黒地に灰の小文字

Imagery

• 人物は正面の顔写真を金色背景で切り抜く
• 背景写真は競技シーンをモノクロ化し赤や黒に溶かす
• 札束などの金銭イラストで報酬を視覚化
• バナーは赤・金・黒の派手な配色で文字を大きく
• 日付は手書き風の枠バッジで添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に横並びのナビを置く
• PC は本文幅を約 50% に絞り中央配置
• 選手カードは PC で 2 列
• FV コピーは PC でも中央の縦積みのまま
• ボタン幅は PC で約 35% に縮める

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