DESIGN.md — 虹色グラデの菓子プレゼントキャンペーンLP（Rainbow Gradient Candy Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 虹色グラデ・雲形白見出し・紺の極太文字・水玉装飾・白カード・賞ごとの色バッジ
• 地の質感: フラットなグラデ面に半透明の白い水玉と斜めのストライプを重ねる。質感は付けない
• 形: もこもこした雲形の白い見出し台、大きく丸い白カード、円形の賞バッジ、角丸のピル型ラベル
• 温度感: 暖色から寒色まで全部使う高彩度。全体はにぎやかで明るい

Colors

• 背景はセクション単位で虹順にグラデーションさせ、隣のセクションと色相をつなげる
• 情報は必ず白カードか白い雲形の上に載せ、グラデ上に細かい文字を直接置かない
• 見出し・強調文字は紺一色に統一し、色付き背景との対比を出す
• 賞バッジは賞ごとに赤・青・緑など別の色の円にする
• 赤は注意事項・NG例だけに使う
• 応募ボタンだけオレンジグラデにして主CTAとわかるようにする
• button-primary は文字 #FFF7E7 × 背景 #FE6C15 のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C34901、4.61:1）を使う。
• ok-ng-label は文字 #FFF7E7 × 背景 #1AA5E0 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#1379A5、4.58:1）を使う。

Typography

• 見出しは極太の丸みのあるゴシックで、白い台の上に紺で置く
• タイトルは白フチと濃い影を付け、文字ごとに色を変えてもよい
• 本文も太字寄りにし、細い書体は使わない
• 数字（日付・当選人数）は本文より一段大きくする
• 注意書きは※で始め、小さく行頭をそろえる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。STEP だけ 3 カラム、賞品カードは写真と文字を左右に分ける
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション見出しは中央の雲形白台に置く
• 白カードは左右 5% の余白を取り中央に置く
• 賞品カードは左右を入れ替えながらジグザグに並べる
• 動画は横幅いっぱいの16:9にし、上にピル型のタイトルを置く
• 応募ボタンは2つ並べて白背景の帯に置く

Elevation & Depth

• 影は基本的に付けず、白カードと色背景の対比で浮かせる
• 応募ボタンだけ下に弱いドロップシャドウを付ける
• タイトル文字には濃紺の太い影を付けて立体感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品写真は切り抜きで白地に置く。動画は角丸なしの長方形
• セクション境界: 境界線は入れず、グラデの色をそのまま切り替える
• 見出し台は丸をつなげた雲形にする
• 賞品カードは縁が波打つ大きな白い雲形にする
• 賞バッジは正円にする
• STEPカードは角丸の小さな長方形

Components

• 雲形セクション見出し（cloud-heading）: もこもこした白い雲形の台に、紺の極太文字
• 賞品雲カード（prize-card）: 白い雲形の大カード。左上に賞バッジと購入条件の吹き出し、商品写真、人数
• 賞バッジ（prize-badge）: 「A賞」などを書いた正円の色付きバッジ。白文字
• 応募期間ピル（period-pill）: 白いピル型の帯に、期間を紺の太字で書き、曜日を丸で囲む
• STEPカード（step-card）: 紺帯の見出しに白いSTEP番号、下に白地でアイコンと説明。カード同士を▶でつなぐ
• 動画タイトルピル（video-title-pill）: 動画の上に置く、白いピル型のタイトル帯
• 応募ボタン（button-primary）: オレンジグラデのピル型ボタン。2段の文字と右端の白丸矢印
• 良い例・悪い例ラベル（ok-ng-label）: ○は水色、×は赤の小さな角丸ラベル

Do's and Don'ts

Do - セクションごとに背景の色相を変えて、虹色の流れを作る - 見出しは雲形の白台で統一する - 応募条件・期間・人数は大きな数字で目立たせる - 注意事項は白カードの中に箇条書きでまとめる - 背景に半透明の水玉・円・斜線を散らす

Don't - くすんだ色や低彩度の背景にしない - 細い明朝体や細字を見出しに使わない - グラデ背景の上に小さい本文を直接置かない - 赤を装飾に使わない（注意用に残す） - 見出しを四角い帯にしない

Page Structure

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

1. ファーストビュー（出演者と商品で目を引く）: 虹色の放射背景に集合写真と商品、左上にロゴ
2. キャンペーンタイトル（企画名と期間を伝える）: オレンジグラデ上に立体タイトル、白い期間ピル、紺のリード2行
3. プレゼント（賞品）（賞品と当選人数を見せる）: 雲形見出しの下に、賞ごとの雲形カードをジグザグに並べる
4. 注意事項（応募のルールを書く）: グラデ上に紺の※箇条書き
5. TVCM（CM動画を見せる）: 黄緑グラデ。ピル型タイトルと16:9動画、白いピル型の動画リンクボタン
6. 応募方法（手順を説明する）: 紫背景にリード文と3つのSTEPカード、撮影方法カードと良い例・悪い例
7. 応募規約（規約を載せる）: ピンク〜橙グラデ上に、スクロールする白枠ボックス
8. お問い合わせ（窓口を示す）: 白カードに中央寄せの窓口情報と、罫線で区切った受付時間
9. 応募CTA（応募させる）: 白帯にオレンジのピル型ボタンを2つ並べ、下に補足文
10. 対象商品（対象商品を見せる）: 青背景に白カード、商品を切り抜いてグリッドに並べ、罫線付きのカテゴリ名を付ける
11. WEBCM（Web動画を並べる）: 紫背景にピル型タイトルと動画を縦に並べる
12. ブランドサイト誘導（外部サイトへ送る）: 斜線で囲んだ見出しと、白フチの青いロゴバナー

Imagery

• 人物写真は明るく元気なポーズの集合カット。商品を手に持たせる
• 商品パッケージは白地に影なしの切り抜き写真
• 背景装飾は半透明の白い水玉グリッド、大きな円、斜めのストライプ
• 手順アイコンは紺と水色の線画（レシート・カメラ・端末）
• キャラクターは白フチ付きで写真の上に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央にSPと同じ幅（480〜750px程度）のカラムを置き、左右にグラデ背景を広げる
• PCでは賞品カードを2列に並べてもよい
• STEPはSPでも3列のまま、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 行書くと起動時に読み込まれる。