DESIGN.md — 赤×黒×金の炭酸飲料キャンペーン LP（Bold Red Black Sparkling Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型、スポーティ
• キーワード: 深紅グラデーション・黒地・金色ボタン・斜めカット・水しぶき・極太斜体
• 地の質感: 赤から暗赤へのグラデーション地に炭酸の水しぶき写真をうっすら重ねる。黒地には白い飛沫を散らす。
• 形: 平行四辺形の見出しプレート、角丸の小さいカード、直角の赤枠ボックス。
• 温度感: 熱く刺激的。赤と黒の高コントラストで緊張感がある。

Colors

• 上部は赤→暗赤の斜めグラデーション、中盤は暗赤茶パネル、後半は黒地と地色で章を分ける。
• 主CTAだけを金色グラデーションにし、他要素に金を多用しない。
• 赤は見出し帯・数値・強調語に使い、本文は白か黒のみ。
• 白帯は黒文字、赤帯は白文字で必ず高コントラストにする。
• セクション境界に細い金色の斜めラインを入れる。
• page は文字 #222222 × 背景 #BB261D のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#E55D54、4.56:1）を使う。
• step-card は文字 #F2E4E0 × 背景 #D90413 のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D10412、4.54:1）を使う。
• question-tab は文字 #F2E4E0 × 背景 #D90413 のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D10412、4.54:1）を使う。
• voice-tag は文字 #F2E4E0 × 背景 #D90413 のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D10412、4.54:1）を使う。
• badge-gold は文字 #D90413 × 背景 #E3BB53 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#F8EDD2、4.53:1）を使う。

Typography

• 見出しは極太ゴシックで、数字だけ赤く大きくする。
• 英字見出しは斜体のコンデンス体で勢いを出す。
• 本文は中央揃え中心、体験談のみ左揃え。
• 注釈は※付きで小さく、まとめて置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品は 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは暗色の角丸パネルに収め、外側に赤地を見せる。
• 見出しプレートはパネル上端にはみ出して重ねる。
• ステップは縦積みで間に下向き三角を挟む。
• CTAはFV・応募方法後・体験談後の3箇所に置く。

Elevation & Depth

• CTAに下方向の濃い影をつけ立体感を出す。
• グラフ棒は赤のグラデーションと側面で3D風にする。
• 写真は赤枠＋黒い影で浮かせる。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形に赤の細枠、やや傾けて配置
• セクション境界: 金色の細い斜めライン
• 見出しプレートと期間帯は平行四辺形（斜めカット）。
• ボタンは角丸小さめの長方形。
• ナビは縦線区切りの格子。

Components

• 金色CTA（button-primary）: 金のグラデーション長方形に黒い極太文字と右端に赤三角。
• 斜めカット見出し（heading-plate）: 白い平行四辺形に黒文字、背後に赤い帯をずらして重ねる。
• 応募期間帯（period-band）: 黒の小プレートの下に白い斜め帯で日付を表示。
• コース切替タブ（tab-course）: 2列グリッドのグレータブ、選択中は赤地白文字。
• ステップカード（step-card）: 上半分が赤地にSTEP番号と見出し、下半分が薄グレー本文。間に白い下向き三角。
• 規約アコーディオン（accordion）: 濃赤地に白い細枠の長方形、右に大きな＋。
• 設問タブ（question-tab）: 赤い斜め端のタブに白英字、下に赤枠のチャコールカード。
• 声のステッカー（voice-tag）: 白帯と赤帯に斜め文字を重ねた短い感想ラベル。
• 倍率バッジ（badge-gold）: 金地に赤枠、数字を大きく赤く。

Do's and Don'ts

Do - 赤・黒・白・金の4色に絞る。 - 見出しは必ず斜めカットの帯に乗せる。 - 数値は大きく赤で強調する。 - 背景に水しぶきテクスチャを薄く敷く。 - CTAは金色で複数回繰り返す。

Don't - パステルや淡い色を入れない。 - 大きな角丸やピル型ボタンにしない。 - 細い明朝体を使わない。 - 金色をCTA以外で広面積に使わない。 - 白地の広いセクションを作らない。

Page Structure

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

1. ヘッダーバナー（起用人物と開催中を告知）: 赤地に人物写真2枚を並べ、赤帯の短文を添え、金帯で開催中を表示。
2. ファーストビュー（キャンペーン名と期間を提示）: 赤グラデにかすれ極太タイトル、白い斜め帯で期間2つ、金CTA。
3. ページ内ナビ（各章へ誘導）: 濃赤地に2×2の格子、下向き矢印付き。
4. 景品（賞品とコースを見せる）: 暗色パネル内にコースタブ、白い賞品カードに赤の大きな金額。未公開分はグレー被せ。
5. 対象商品（購入対象を示す）: 商品写真を2〜3列で並べ、金バッジでポイント倍率を強調。
6. 応募方法（手順の説明）: 赤×グレーのステップカード4つを三角で連結し、最後に金CTA。
7. 規約・FAQ（詳細情報の格納）: 濃赤地に白枠アコーディオン2つ。
8. アンケート結果（ファンの声で魅力を訴求）: 黒地に設問タブ付きカードを5つ、赤い3D棒グラフと声ステッカー。
9. 著名人の声（権威付け）: 赤枠写真、名前と肩書き枠、太字の一言と本文。
10. ブランド導線・問い合わせ（締めと連絡先）: 赤グラデ地に赤枠の黒ボックスでロゴ、白枠の問い合わせ表。

Imagery

• 人物は黒やコックコートなど締まった服で、商品を掲げる動きのあるポーズ。
• 商品は白背景の切り抜きボトルを正面で並べる。
• 炭酸の水しぶき・飛沫を黒や赤地に白く散らす。
• 写真は赤い細枠と少しの傾きで配置。
• グラフは赤グラデの立体棒と金のリボン型。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約70%幅に同じパネルを置き、外側の赤や黒地を広く見せる。
• PCは商品を5列、コースタブを横一列に並べる。
• PCのアンケートはグラフ左・声ステッカー右の2カラム。
• PCの体験談は写真と文章を左右交互に配置。
• ナビはPCで横一列4項目。

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