DESIGN.md — 緑×青グラデの医薬品プレゼントキャンペーンLP（Fresh Green and Blue Pharma Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型、力強い・インパクト
• キーワード: 抽選プレゼント・2コース応募・緑と青・縁取り極太文字・賞品カード・長い規約
• 地の質感: パステルの縦グラデ背景に白いドット模様を薄く重ねる。カードは平らな単色塗り。
• 形: 角丸の太枠カード、斜めのリボン帯見出し、円形の賞バッジ、ピル型の小ボタン
• 温度感: 明るく爽やかな寒色寄り。クリーム黄と赤い数字で温度感を足す

Colors

• 応募コースごとに色を分ける。サイト応募＝緑／ミント、SNS応募＝青／水色。見出し・帯・ボタン枠まで統一する
• 背景はミント→水色→青の縦グラデでコースの切り替わりを見せる
• 賞品カードと倍率UP枠はクリーム黄で、寒色の地から浮かせる
• 主CTAはレモン黄の面に黒の太い影。文字は青か黒
• 赤は倍率の数字だけに使う
• 規約本文は白地に黒文字で読みやすくする
• ribbon-heading は文字 #FFFFFF × 背景 #009F4D のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#008842、4.56:1）を使う。
• prize-card は文字 #009F4D × 背景 #FFFFAD のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#008842、4.55:1）を使う。
• prize-badge は文字 #FFFFFF × 背景 #009F4D のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#008842、4.56:1）を使う。

Typography

• 人数・倍率の数字は周りの文字の2〜3倍の大きさにする
• FVの訴求文字は白い太フチ＋濃い影で立体的にする
• 記念日などの数字にはルビ（語呂合わせの読み）を小さく添える
• 規約は11px前後で詰めて組み、※は字下げする
• 本文は中央揃え。規約だけ左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品カードは左に円形バッジ、右に内容
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• コースのブロックは画面幅いっぱいの地色の上に、角丸の大きなパネルとして置く
• 賞品カードは縦に3つ積み、左上に円形の賞バッジをはみ出させる
• 規約はパネル内の白地に、帯見出し＋本文を交互に縦に並べる
• STEPは縦に積んだカードを下向き三角でつなぐ

Elevation & Depth

• 主CTAは影を下と右に4pxずらした黒の塗りで、立体ボタン風にする
• フォローボタンは白地に黒の2px枠と、ずらした黒影を付ける
• カードには影を付けず、太い色枠で区切る
• 見出しの縁取り文字にはドロップシャドウを付ける

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 賞品写真は白〜淡色地に切り抜くか、角丸の長方形にする
• セクション境界: グラデ背景のまま区切る。確率UPエリアは上辺を波形にする
• リボン見出しは平行四辺形の帯に、色違いの影の帯を重ねる
• 賞バッジは緑の円に、上に青いリボンを付ける
• 商品情報ボタンだけピル型にする
• STEPの番号は青い円形バッジにする

Components

• 応募CTAボタン（button-primary）: 横幅いっぱいのレモン黄ボタン。黒枠とずらした黒影を付ける
• 斜めリボン見出し（ribbon-heading）: 傾けた平行四辺形の帯に黄色の文字。緑版と青版がある
• 賞品カード（prize-card）: クリーム黄の地に緑の太枠。左に円形の賞バッジ、上に緑の帯キャッチ、中央に大きな賞品名と写真
• 賞バッジ（prize-badge）: 緑の円に賞の等級と人数を白文字で入れ、上に青いリボンを付ける
• FVのコース選択カード（course-tab）: リボン見出しの付いたストライプ柄のカードを左右に並べる。右下に下向き矢印の丸を置く
• 規約アコーディオン（accordion-terms）: 上部が緑か青の角丸帯（開閉マーク付き）。中は帯見出しと白地の本文を繰り返し、最後に閉じるボタンを置く
• STEPカード（step-card）: 白地に青い枠のカード。上端に青い円のSTEP番号を置き、カード同士は三角でつなぐ
• SNSフォローボタン（button-social）: 白地に黒枠、左にSNSアイコンの丸、ずらした影を付ける
• 商品情報ボタン（button-pill）: 濃紺のピル型に白文字

Do's and Don'ts

Do - コース別の色分け（緑／青）を見出しから規約まで徹底する - 数字は大きくして、目立つ色か縁取りで強調する - 賞品カードの周りに星や集中線の装飾を置いて、お祝い感を出す - 法的な注釈は省かず、帯見出しで細かく区切って載せる - キャラクターの3Dフィギュアを余白に置いて、遊び心を出す

Don't - 暗い背景や重い色を広い面に使わない - 赤を本文や見出しに広げない（倍率の数字だけ） - 主CTAを緑や青にしない（レモン黄を保つ） - ボタンの角をすべて丸めすぎない（主ボタンは小さい角丸） - 規約を装飾付きにして読みにくくしない

Page Structure

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

1. ヘッダー（ブランドを示し、メニューを置く）: 白地に緑のロゴ文字と、緑のハンバーガーメニュー
2. ファーストビュー（当選総数と、購入不要であることを伝える）: 淡い緑のグラデに都市のシルエット。極太の縁取り文字、月桂樹で囲んだ記念日バッジ、人物とキャラクター、2コースのカードを置く
3. 応募期間帯（期間を明示する）: 濃い青の全幅帯に白文字。左に小さなラベル
4. サイト応募コースの賞品（賞の等級別に賞品を見せる）: ミント地にリボン見出し。中央揃えのリードの後、賞品カードを3枚縦に積む
5. 全員向け試供品（希望者向けのプレゼントを訴求する）: 緑の角丸パネルに白文字。大きな数字を黄色で入れ、吹き出しを付ける
6. SNS応募コースの賞品（その場で当たるデジタルギフトを紹介する）: 水色〜青の地に青いリボン見出し。賞品カード1枚
7. 注意事項（応募条件の要点を伝える）: 白地に※付きの小さな文字を並べる
8. 応募方法（サイト）（クイズ応募へ誘導する）: ミントのパネルに同意チェックボックスと黄色の応募ボタン。その下に規約アコーディオンと商品紹介の列
9. 当選確率アップ（SNSフォローや記念日の応募で倍率が上がることを訴求する）: 上辺が波形の水色地にクリーム枠。赤い大きな倍率数字とSNSボタン、最大倍率の縁取り文字
10. 応募方法（SNS）（3ステップの手順を示す）: 青いパネルにSTEPカードを縦に並べ、フォローボタンと黄色の応募ボタンを置く。その下に青い規約アコーディオン
11. 関連リンクバナー（公式チャンネルや関連サイトへ誘導する）: 横長のバナーを縦に並べ、SNSアイコンの丸を置く
12. フッター（サイト内リンクとコピーライトを置く）: 緑の全幅地に白文字のリンク。購入ボタンと、ページトップへ戻るボタンを固定表示する

Imagery

• 人物は明るい笑顔で商品を持つ、白背景になじむ広告写真
• 体を動かす3DCGキャラクターを切り抜いて、余白に散らす
• 賞品は切り抜き写真。周りに青や緑の星と集中線を添える
• 背景には淡い高層ビルのシルエットと、光の差すグラデ
• 白い網点（ドット）の円模様を、背景の一部に薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 60% 幅にパネルを収め、左右はグラデ背景を全幅に広げる
• PC の FV は人物とキャラクターを左右に分け、中央に訴求文字を置く
• PC の賞品カードは横長にし、写真を右に並べる
• PC の STEP は3列で横に並べる
• PC の商品紹介は2列グリッドにする
• 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 行書くと起動時に読み込まれる。