DESIGN.md — ライム×ピンクの放射ポップ菓子キャンペーンLP（Pop Burst Lime Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 放射バースト・蛍光ライム・斜め帯見出し・黒縁白抜き文字・レシート応募・角丸パネル
• 地の質感: フラットなベタ塗りに、放射状の光線と飛沫の装飾を重ねる。グラデーションは背景の黄緑〜黄だけに使う
• 形: 斜めに傾けた平行四辺形の帯、正円、大きな角丸の白パネル、ピル型ボタン
• 温度感: 暖かく明るい高彩度。夏祭りのような高揚感

Colors

• ページの地は黄緑。上部だけ黄へグラデーションさせ、放射光をにじませる
• 手順・規約・FAQは白い角丸パネルに入れ、黄緑の地から浮かせる
• STEPカードは淡い水色の面にし、STEP番号と小見出しは青い文字にする
• CTA・締切帯・セクション見出し・FAQ行はピンクで統一する
• 本文中の強調語はピンク文字にする。○×の判定は○を青、×をピンクにする
• 黄はFAQの＋アイコンとイラストの差し色だけに使う
• button-primary は文字 #FFFFFF × 背景 #E75F9C のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE2578、4.52:1）を使う。
• slant-band-heading は文字 #FFFFFF × 背景 #1E9DDB のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#187EB0、4.52:1）を使う。
• deadline-badge は文字 #FEFDFE × 背景 #EA5E9D のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DE1D74、4.56:1）を使う。
• faq-item は文字 #FEFDFE × 背景 #EA5E9D のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DE1D74、4.56:1）を使う。

Typography

• 賞品名とキャンペーン名は白文字に太い黒縁と影を付け、少し右上がりに傾ける
• セクション見出しはピンクの斜体寄りのディスプレイ書体で中央に置く
• 必要購入数は白いピル枠と黒縁で囲み、賞品名の上に小さく添える
• 本文はすべて太めのゴシックにする。細い書体は使わない
• 注釈には※番号を振り、各ブロックの直下に小さく置く
• 締切日は数字を大きくし、曜日や時刻は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品は縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 賞品は1つずつ画像と大見出しを1画面で見せる
• 白パネルは左右に約6%の余白を空け、黄緑の地を縁として見せる
• STEPカードの間には青い下向き三角を置く
• CTAは商品画像の直下にピル型で中央に置く
• FAQはカテゴリの見出しの下にピンクの行を8px間隔で積む

Elevation & Depth

• 影はほぼ使わない。ベタ塗りの色の差で重なりを表す
• 見出し帯と賞品文字にだけ、黒くずらしたベタの影を付ける
• CTAボタンは黒の細い縁取りで立体感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 賞品は角版か切り抜きにし、背後に正円の色面を置く
• セクション境界: 直線のまま。白パネルの角丸で区切る
• 見出し帯は傾けた平行四辺形にし、黒い影をずらして付ける
• 白パネルの角丸は大きめ（約28px）
• STEPカードとFAQの行は角丸16px程度
• FAQ行は右端に黄色い丸の＋を置く
• お問い合わせ枠は黒い太線で囲んだ角丸の白枠にする

Components

• 応募CTA（button-primary）: ピンクのピル型に黒縁。白文字と右向き三角
• 斜め帯見出し（slant-band-heading）: 青またはピンクの傾けた平行四辺形に白い太字。黒い影をずらして付ける
• 締切バッジ（deadline-badge）: 上段に青い小帯、下段にピンクの大帯で締切日時を示す
• 賞品ブロック（prize-block）: 放射光の背景に画像と円を置き、購入数のピルと黒縁白文字の賞品名を添える
• STEPカード（step-card）: 淡い水色の角丸カード。青いSTEP番号と小見出し、本文、線画イラストで構成
• FAQアコーディオン（faq-item）: ピンクの角丸行にQと白い質問文を入れ、右端に黄色い＋を置く
• ○×比較枠（judge-box）: 黒線の四角枠でレシート例を見せ、青い○とピンクの×で判定する
• 規約スクロール枠（terms-scroll）: 細い黒線の角丸枠の中に小さな規約文を入れ、内部でスクロールさせる

Do's and Don'ts

Do - 地は黄緑で統一し、放射光と飛沫を賞品の周囲にたっぷり散らす - 賞品名は黒縁の白い極太文字で大きく、少し傾けて置く - 手続きのパートは白パネルに入れ、読みやすさを優先する - CTAは商品画像とセットで2か所以上に繰り返す - イラストは黒線にピンク・黄・水色のフラットな塗りで描く

Don't - くすんだ色や低彩度のパステルを主役にしない - 見出しを水平な細い書体にしない - 白パネルの中に放射光の装飾を入れない - 写真に強い影やリアルなグラデーションを足さない - CTAの色をピンク以外にしない

Page Structure

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

1. ファーストビュー（キャンペーン名と賞品と商品を一度に見せる）: 放射光の背景に装飾ロゴを置き、賞品3種を弧状に並べ、商品を中央に大きく置く
2. 締切告知（応募期限を明示する）: 青の小帯とピンクの大帯を重ねた斜めのバッジ
3. 賞品紹介（購入数ごとの賞品を見せる）: 斜め帯の見出しの下に、賞品ごとの円＋画像＋黒縁の大見出しと注釈を縦に並べる
4. CTA（応募へ誘導する）: 商品の切り抜き画像と放射光の下にピンクのピル型ボタン
5. 応募方法（手順を3ステップで説明する）: 白パネルに斜め帯のコピーとピンクの見出しを置き、水色のSTEPカードを三角でつなぐ
6. レシート撮影方法（撮影の注意を伝える）: 番号付きのレシート図解と、○×の比較枠と箇条書き
7. 締切再告知・応募規約（期限と規約を確認させる）: 締切バッジとスクロール枠の規約
8. CTA（応募を再び促す）: 商品画像とピンクのボタンを繰り返す
9. よくある質問（疑問を解消する）: 白パネル内にカテゴリの見出しとピンクのアコーディオン
10. お問い合わせ・フッター（事務局の連絡先とブランドサイトへの導線を示す）: 黒枠の白ボックスと、商品写真入りのピル型バナー

Imagery

• 背景はピンク・水色・黄・オレンジの光線と、尾を引く円の飛沫を中心から放射状に描く
• 商品は切り抜きで大きく見せ、背後に放射バーストを置く
• 賞品画像は角版にし、背後に正円の色面を敷く
• 手順のイラストは太い黒線のフラットな線画にする。スマホ・レシート・ギフト箱をピンクと黄で塗る
• レシートの図解は灰色の面に番号の丸と青いハイライトを付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは上部に白いピル型のグローバルナビを固定し、右端にピンクの応募ボタンを置く
• PCのFVは商品を中央にし、賞品を左右に散らして配置する
• PCの賞品紹介は画像とテキストを左右交互の2カラムにする
• PCのSTEPカードは横長にし、テキストを左、イラストを右に置く
• PCの白パネルは最大幅約860pxで中央寄せにし、左右に放射装飾の背景を見せる

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