DESIGN.md — ピンク×レモン色のアイドル菓子キャンペーンLP（Kawaii Idol Pink and Lemon Candy Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、情報量多め・訴求型
• キーワード: ハート柄・ピンク×レモン・ぷっくりピル見出し・立体ボタン・アイドル切り抜き・水玉の帯
• 地の質感: ボケたピンクの背景、放射線、ハートや水玉の連続柄。光沢のあるグラデーションの見出し
• 形: ピル型と大きな角丸のカード、円形の写真枠、下に厚みのあるボタン
• 温度感: 暖色寄りで甘く明るい

Colors

• 前半（紹介・賞品・ライブ配信）はピンク系、後半（応募方法・対象商品・注意事項）はレモン地に黄緑でまとめる
• 濃いピンクは見出しとSNSボタンに使い、応募ボタンだけオレンジにして目立たせる
• 強調したい語はピンクの文字色にする。下矢印はピンクの濃淡を交互に並べる
• ボタンの下に同じ色相の暗い色を敷いて厚みを出す
• 本文はほぼ黒のグレーにして、可愛い配色の中でも読みやすくする
• button-primary は文字 #FDFAF0 × 背景 #FEA502 のコントラスト比が 1.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9E6701、4.58:1）を使う。
• button-sns は文字 #FDFAF0 × 背景 #E24778 のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DC245E、4.51:1）を使う。
• heading-pill は文字 #69B917 × 背景 #FEFCA7 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#487E10、4.62:1）を使う。
• prize-badge は文字 #E24778 × 背景 #FEFEFE のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DC245E、4.54:1）を使う。
• step-circle は文字 #69B917 × 背景 #FEFEFE のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#487E10、4.58:1）を使う。
• period-box は文字 #69B917 × 背景 #FEFEFE のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#487E10、4.58:1）を使う。
• speech-bubble は文字 #69B917 × 背景 #FEFEFE のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#487E10、4.58:1）を使う。

Typography

• 本文は中央揃えで、1行15〜20字で改行する
• 見出しは太い丸ゴシックで、字間を少し広げる
• 大見出しはピンクで、白いフチや影をつけてステッカー風にする
• 注釈は9px前後の小さな文字にし、※から書き始める
• 日付は黄緑の太字で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品画像のみ 3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは画面幅いっぱいの色の帯にし、中に大きな角丸カードを置く
• 見出しのピルはカードの上辺にかぶせて配置する
• カードの下端にはメンバーの切り抜き写真を置き、端までかぶせる
• セクションの間はハートや水玉の連続柄の帯でつなぐ
• 応募ステップは白い円の中にアイコンを入れ、縦に並べる

Elevation & Depth

• ボタンは下に4〜6pxの濃い色の帯を敷いて立体感を出す
• ピル型見出しはグラデーションと内側のハイライトで光沢を出す
• 動画サムネイルの枠は白いフチとやわらかい影
• 円形の写真枠はピンクの光彩で縁取る

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は背景を抜いた切り抜き写真。ロゴや商品は円の中に入れる
• セクション境界: 直線で区切り、ハートや水玉の柄の帯を挟む
• 見出しは完全なピル型でぷっくり見せる
• ボタンは角丸8〜12pxの四角に厚みをつける
• カードは角丸16px前後で、太めの縁取りをつける
• 応募期間は左にラベル、右に日付を並べたピル型の枠に入れる

Components

• 応募ボタン（button-primary）: 幅いっぱいのオレンジボタン。白い丸に矢印のアイコンをつけ、下に濃いオレンジの厚みを敷く
• SNSボタン（button-sns）: 濃いピンクで厚みのあるボタン。2列で並べ、矢印アイコンをつける
• ピル型見出し（heading-pill）: 黄色から黄緑のグラデーションのピル。下に点線を引き、文字は黄緑
• 賞のラベル（prize-badge）: ピンクのパネルの上に置く白い小さなピル。賞の名前をピンクの文字で入れる
• ステップの円（step-circle）: 白い大きな円の中に、STEP番号と黄緑の線画アイコンを入れる
• 応募期間の枠（period-box）: 左に黄緑の塗りのラベル、右に白地で日付を大きく入れたピル型の枠
• 下矢印の列（arrow-row）: ピンクの濃淡の下矢印を交互に並べ、次へ進むよう促す
• 吹き出し（speech-bubble）: 白い大きな角丸の吹き出しで、文字は黄緑。下向きのしっぽをつける
• 注意事項のスクロール枠（notice-scroll）: 黄緑の縁の角丸カード。中を固定の高さでスクロールさせ、オレンジのつまみをつける

Do's and Don'ts

Do - ピンクのセクションとレモンのセクションを交互にし、境目はハートや水玉の柄でつなぐ - 主CTAは画面幅いっぱいで、厚みのある立体ボタンにする - 人物の切り抜き写真をカードの端に重ね、にぎやかに見せる - 賞品・期間・ステップは数字と短い文で整理する - 見出しはすべてピル型か、フチつきの太い丸ゴシックにそろえる

Don't - 寒色や落ち着いた暗い色を広い面に使わない - 細い明朝体や角ばった硬い書体を使わない - 影のない平らなボタンにしない - 本文を左揃えで長く詰め込まない - 主CTAにピンク以外の目立つ色を何色も混ぜない

Page Structure

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

1. ファーストビュー（キャンペーン名とコラボ相手を一目で伝える）: 黒板の前にメンバー4人を並べた写真。上にピンクのロゴ風の大見出しと商品パッケージを散らす
2. タイトル帯（タイトルを繰り返して印象づける）: ハート柄の帯の下、白地にロゴとメンバーの全身写真を横に並べる
3. コラボ紹介（商品とアイドルそれぞれの紹介）: ボケたピンクの背景。円形の枠に商品とロゴを入れ、間に大きな×印を置く
4. 話題メーター企画（拡散を促す仕掛けを説明する）: 白い角丸カードに縦長のメーター画像とピンクの見出し、下矢印を並べる
5. 賞品（賞の内容と当選者数を見せる）: ピル型の見出しの下にピンクのパネルを置き、白いラベル・賞の内容・人数を縦に並べる
6. 追加特典（全員がもらえる特典で後押しする）: レモン地に白いピルの告知、矢印の列、ピンクの「さらに」
7. メッセージ動画（メンバーの動画で親近感を高める）: オレンジイエローの帯を水玉で上下に区切り、英字の見出しと再生ボタン付きサムネイルを置く
8. 応募方法（4ステップで応募の手順を示す）: 黄緑の縁のカードに白い円のアイコンを縦に並べ、最後に応募期間の枠を置く
9. レシート有効期間とCTA（条件を確認させてから応募へ誘導する）: 期間と注釈を入れ、オレンジの応募ボタンとメンバー写真を置く
10. 対象商品（どの商品が対象かを示す）: 縦書きのシリーズ名と、商品パッケージの3列×2段のグリッド
11. ライブ配信・SNS（SNSのフォローと配信の視聴を促す）: 淡いピンク地にハートを添えた見出し、ピンクの立体ボタンを並べ、吹き出しとメンバー写真を置く
12. 注意事項・問い合わせ・フッター（規約と問い合わせ先を伝える）: スクロールする注意事項の枠、中央揃えの問い合わせ先、緑の細いフッター

Imagery

• 人物は白背景で撮って切り抜き、指さしやハートなどのポーズで画面の端に配置する
• 衣装の色（紫・黄・赤・ピンク）を画面の色の差し色に生かす
• アイコンは黄緑の太い線画（お店・パソコン・レシートなど）
• 背景はピンクのボケ、放射線、ハートや水玉の連続柄
• 商品パッケージは少し傾けて散らし、楽しげに見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の幅を約900pxにし、両側の余白にメンバーの切り抜きを置く
• 応募ステップはPCで4列の横並びにする
• レシート有効期間と対象商品はPCで2カラムに並べる
• SNSボタンはPCで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 行書くと起動時に読み込まれる。