DESIGN.md — ピンク×ラベンダーのかわいいお菓子コラボキャンペーンLP（Kawaii Pink Lavender Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: ゆめかわ・パステル・ドーム曲線・ピル見出し・グラデCTA・キャラ柄パターン
• 地の質感: フラットなパステル面に、うっすらとシルエット柄を敷く。カードには下方向へ濃いめの影を落とし、ぷっくりした質感を出す
• 形: 大きな角丸カード、ピル型の見出しとバッジ、円形の写真フレーム、上に膨らむドーム状のセクション境界
• 温度感: 甘く明るい暖色寄り。ピンクと紫で夢っぽいかわいさを出す

Colors

• 地の色はピンクとラベンダーをセクションごとに交互に切り替える
• カード・見出しピル・商品枠は白にして、地の色から浮かせる
• コースごとに識別色を持たせる（赤と黄）。ラベル・円フレーム・カード地で統一する
• 主CTAと注意点ボックスの見出し帯は、ピンク→紫の横グラデーションにする
• フッターは濃紫で締め、ボタンにはピンクの枠線を付ける
• 良い例は淡い緑の地、悪い例は淡い赤の地で区別する
• button-primary は文字 #FFFFFF × 背景 #EC63BC のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DB1B98、4.54:1）を使う。

Typography

• 全体を太めの丸ゴシックで統一する
• セクション見出しは紫の文字で、白いピルの中に置く
• 人数など強調したい数字だけ赤くし、サイズも上げる
• 説明文は中央揃え。1行を短くして改行を多めにする
• 色地の上の文字は白にする
• FVのロゴだけ、縁取りと立体感のある装飾書体を使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。対象商品だけ2カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは中央に寄せ、カードは左右に約6%の余白を取る
• 見出しの上には星とハートを交互に5つ並べる
• 賞品は1コースにつき1カードとし、縦に重ねる
• 応募手順はSTEPバッジ→丸アイコン→説明文→赤い下向き矢印の順で、縦につなげる
• 規約はアコーディオンにまとめ、その下に同意チェックとCTAを2段並べる

Elevation & Depth

• カードには下方向へ濃いめの影を付ける（約0 4px 0 の色付き影）
• 見出しピルにも、薄い紫の下影を付ける
• アコーディオンは、紫の下線風の影で立体的に見せる
• CTAには、濃い色の下影を付ける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 賞品は、太い色枠付きの正円の中に白抜きで置く。商品写真は、白い角丸カードの中に切り抜きで置く
• セクション境界: 上に膨らむ大きなドーム状のカーブで、地の色を切り替える
• 見出し・バッジ・コースラベルはピル型にする
• カードは大きめの角丸にする
• 応募CTAは角丸の長方形（radius md）にする
• FVの下端もカーブさせ、次のセクションへつなげる

Components

• ピル見出し（section-title-pill）: 上に星とハートの飾りを並べ、白いピルの中に紫文字で見出しを置く
• 賞品カード（prize-card）: コース色のラベル、色枠付きの円形写真、賞品名、人数ピルを順に並べるカード
• コースラベル（course-label）: コース名を書いた赤または黄のピル
• 商品カード（product-card）: 白い角丸カードに、切り抜きの商品写真と商品名・容量を入れる
• 見出し帯（list-bar）: 左にドットを置いた白い帯。紫文字でカテゴリ名を書く
• STEPバッジ（step-badge）: 紫のピルにSTEP番号を入れ、下に淡いピンクの丸アイコンを置く
• 注意点ボックス（notice-box）: グラデーションの見出し帯に紫の枠線を付けたボックス。中に番号チップと良い例・悪い例を入れる
• 規約アコーディオン（accordion）: 淡いグレーの角丸バーに項目名を書き、右端に▼を置く
• 応募CTA（button-primary）: ピンク→紫のグラデーションのボタン。上に小さな説明、下に大きなボタン名の2段組
• フッターリンクボタン（button-footer）: 濃紫の地に置く、ピンク枠の白抜きピル

Do's and Don'ts

Do - 地の色はピンクとラベンダーを交互に使い、境界はドームのカーブにする - 見出しは毎回、星とハートの飾りと白いピルのセットで出す - コースごとの識別色を一貫させる - ラベンダーの面には、キャラクターのシルエット柄を薄く敷く - 応募手順は、番号バッジと丸アイコンで視覚的に区切る

Don't - 直線的なセクション境界や、角張ったカードは使わない - 黒や原色の面を大きく使わない（フッターの濃紫は例外） - 明朝体や細い書体を使わない - 見出しを地に直接置かない（必ず白いピルに入れる） - 影をぼかしの強いドロップシャドウにしない

Page Structure

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

1. ファーストビュー（コラボの世界観、賞品、応募期間を一目で伝える）: 左右に色を分けた背景の上に人物写真・賞品・ロゴを配置する。下部に、期間を書いた白ピルを置き、ラベンダーのカーブで締める
2. プレゼント概要（当選人数と応募条件を伝える）: ピンクの地に置いた白ピル見出しで人数を赤く強調し、その下に白文字の説明を中央揃えで置く
3. 賞品紹介（コース別の賞品を見せる）: コース色のカードを縦に重ね、円形フレームの中に賞品を置く。下に人数ピルを付ける
4. 対象商品（どの商品がどのコースの対象かを示す）: シルエット柄のラベンダー地に、ドット付きの見出し帯と2列の白い商品カードを並べる
5. 応募方法（レシート応募の手順を説明する）: 大きな白カードの中に、説明文、注釈、STEP1〜3の縦フローを入れる
6. 撮影の注意点（レシートの不備を防ぐ）: グラデーション帯付きの枠ボックスに番号チップを並べ、良い例（緑）と悪い例（赤）のボックスを置く
7. 応募規約・CTA（同意を得てから応募へ送る）: ラベンダーの地にアコーディオンを3つ置き、同意チェックとグラデーションCTAを2つ続ける
8. お問い合わせ（事務局の連絡先を示す）: 淡いグラデーションのカードに、点線で区切った項目を並べる
9. フッター（ブランドサイトへの導線と著作権表記）: 濃紫のドーム状の地に、ピンク枠のピルボタンとコピーライトを置く

Imagery

• 人物は、パステルの衣装を着て正面から笑顔で写る、明るい撮影にする
• 賞品は白抜きで撮り、太い色枠の円形フレームに入れる
• 商品パッケージは切り抜き写真にし、白いカードの中央に置く
• 背景には、マスコットのシルエットを淡い色で敷き詰めたパターンを使う
• 星・ハート・キラキラの白いアイコンを装飾に散らす
• ステップアイコンは細い線のアイコンにし、淡いピンクの丸の中に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも、FVのビジュアルは画面幅いっぱいに使う
• PCでは賞品カードを2列に横並びにする
• PCでは対象商品を4列のグリッドにする
• PCではSTEP1〜3を横3列に並べ、矢印も横向きにする
• PCでは良い例と悪い例を横に並べ、CTA2つも横並びにする
• PCではコンテンツ幅を約1000pxに抑え、中央に寄せる

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