DESIGN.md — 桃×水色パステルの育児サンプルプレゼント LP（Pastel Split Baby Sample Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、親しみ・手作り感
• キーワード: パステル二色・紙吹雪柄・リボン見出し・楕円フレーム写真・白カード・黄色CTA
• 地の質感: 淡い単色の地に、白い三角・波線・点の紙吹雪を薄く散らす
• 形: 角丸カード、ピル型ボタン、垂れ幕リボン、楕円の額縁
• 温度感: 暖色ピンクと寒色水色を商品ごとに分けた、明るくやわらかい温度感

Colors

• 商品ごとにセクションの地色をピンクと水色に分け、見出しや強調文字もその色系統にそろえる
• ファーストビューは画面を左右に分け、左ピンク・右水色で二択を見せる
• 主 CTA はどの地色でも黄色＋濃グレー縁で統一する
• 本文の強調は、ピンク側ならマゼンタ文字、水色側なら青文字か黄色マーカーにする
• カードは白か、地色をごく淡くした色にして紙吹雪柄から離す
• 最後の手順セクションは若草色にして、前の二色から切り替える
• ribbon-heading は文字 #E0457E × 背景 #FEFEFE のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DC2B6C、4.52:1）を使う。
• flag-label は文字 #FEFEFE × 背景 #0C9ED5 のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#0A7EAA、4.55:1）を使う。
• prize-badge は文字 #E0457E × 背景 #FEFEFE のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DC2B6C、4.52:1）を使う。
• pill-callout は文字 #0C9ED5 × 背景 #FEFEFE のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#0A7EAA、4.55:1）を使う。

Typography

• 見出しは太い丸ゴシックで、やわらかさを出す
• 大見出しはセクションの強調色にし、白いフチか影をつける
• 当選数は数字だけを特大にして白縁と色フチをつける
• 本文は中央揃えで、2〜4行ごとに区切る
• 口コミの一部はセクション色の文字で強調する
• 注釈は※付きの小さいグレー文字にし、ボタンの直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ファーストビューの商品二択だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 紙吹雪柄の地の上に、白い大カードを中央に置く
• 大カードの上端にリボン見出しを重ねて載せる
• 写真3枚を少しずつ傾けて横に並べ、その下に口コミカードを縦に積む
• 商品セクションの最後には必ず CTA と注釈を置く
• グラフや表は白カードの中に収める
• STEP カードは縦に3つ積み、左上に STEP バッジを付ける

Elevation & Depth

• カードは影をつけず、白い面と淡い地色の差で区別する
• CTA ボタンは濃グレーの縁と下側のベタ影で立体的なピル型にする
• 写真カードはごく薄いドロップシャドウと傾きで、貼った写真風にする
• リボン見出しは端を折り返して奥行きを見せる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物写真は細い二重線の楕円の額縁で囲む。スナップ写真は角丸の四角を傾ける
• セクション境界: 直線で地色を切り替える。上下の帯の端に紙吹雪を散らす
• 見出しは両端を折り返したリボン型か、ピル型の枠線カプセルにする
• 斜めの旗型ラベルを楕円写真の左上にかける
• STEP バッジは下端がV字に切れた縦長の旗にする
• 大カードは角を大きく丸め、上下の端は少しギザギザの紙風にしてもよい

Components

• 応募 CTA ボタン（button-primary）: 黄色のピル型に濃グレーの太い縁と影をつける。左にマゼンタの丸い矢印アイコンを置き、下に応募回数の注釈を添える
• リボン型見出し（ribbon-heading）: 白い帯に濃グレーの線を引き、両端を折り返した垂れ幕にする。2行の見出しをセクション色で入れる
• 斜め旗ラベル（flag-label）: 写真の左上に斜めにかける小さな旗。対象者を短く書く
• 楕円額縁の写真（oval-photo-frame）: 赤ちゃんや親子の写真を二重線の楕円で囲み、手前に商品画像を重ねる
• 当選数バッジ（prize-badge）: 丸いバッジに頻度を書き、その横に抽選の人数を特大の縁取り数字で入れる
• 口コミカード（review-card）: 淡い色の角丸の箱に口コミを左揃えで書く。一部をセクション色で強調し、末尾に投稿者名を括弧で添える
• 枠線カプセル見出し（pill-callout）: 白地に青い枠線のピル型カプセルで、データの要点を2〜3行で示す
• STEP カード（step-card）: 白い角丸カードの左上にピンクの旗型 STEP 番号を付ける。中央にピンクの線画アイコンを置き、下に説明を3行で書く
• 成分比較表（comparison-table）: 灰色の罫線の表に●印を打つ。自社の列だけピンクの●で目立たせる

Do's and Don'ts

Do - 商品ごとにピンク系と水色系の配色を守る - 紙吹雪柄は白の半透明で薄く散らす - CTA は全セクション同じ黄色のピル型にする - 写真は自然光のやわらかい親子写真を選ぶ - データはグラフで見せ、出典を注釈で添える - セクションの終わりごとに CTA を置く

Don't - 濃い原色や黒を地色に使わない - 角ばった硬い書体を見出しに使わない - CTA の色をセクションごとに変えない - 紙吹雪柄を文字の下で濃くしない - 1つのセクションにピンクと水色の強調を混ぜない - 過度な影やグラデーションで重く見せない

Page Structure

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

1. ファーストビュー（2種類のプレゼントから選べることを伝える）: 左ピンク・右水色に分けた地に、ラベル、大見出し、楕円写真2つ、当選数バッジ、CTA、各詳細へのアンカーリンクを置く
2. ブランド紹介（研究への姿勢で信頼を得る）: 白地にロゴ、ピンクの太字の理念文、中央揃えの本文
3. 商品A紹介（商品の特長と根拠を見せる）: ピンク地の白カードにリボン見出し、大きな商品名、写真と商品画像、マーカー付き本文、成分を2グループに分けたイラスト
4. 成分比較表（他社との違いを示す）: ●印の比較表と、ピンク強調のまとめ文
5. お客様の声A（利用者が多いことで安心させる）: 斜線飾りの見出し、傾けた写真3枚、口コミカード3つ、CTA
6. 商品B紹介（商品の必要性を伝える）: 水色地の白カードにリボン見出し、商品画像と楕円写真、黄色マーカーの本文
7. データ提示（栄養が不足しがちなことを数値で示す）: 枠線カプセル見出しに棒グラフと出典注釈を添えた白カードを2枚
8. お客様の声B（利用者が多いことで安心させる）: 青系で A と同じ構成の写真と口コミカード、CTA
9. 応募の流れ（応募の手順を簡単に見せる）: 若草色地に STEP カード3枚を縦に並べ、風船やリボンのイラストを散らす。最後に CTA
10. フッター（運営会社を示す）: 白地に短いタグライン、緑のロゴ、紹介文

Imagery

• 赤ちゃんの笑顔や親子が抱き合う写真を、白っぽい背景とやわらかい自然光で撮る
• 商品パッケージは切り抜いて写真の手前に斜めに重ねる
• 利用者の投稿風スナップを角丸の四角にして傾けて並べる
• 成分は丸い顔のキャラクターイラストで描く
• 手順のアイコンはピンク一色の線画にする
• 風船・花・リボン・プレゼント箱の水彩風イラストを余白に散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も幅約480px相当の中央カラムで、SP と同じ構成にする
• PC では左右の余白を地色と紙吹雪柄で埋める
• ファーストビューの左右分割は SP でも2カラムのまま保つ
• SP では写真3枚を横並びのまま縮めるか、横スクロールにする
• CTA は SP で幅80%程度にし、高さ52px以上を確保する

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