DESIGN.md — ピンク×ミントのパステル育児サンプル LP（Pastel Pink and Mint Baby Sample Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、信頼・誠実
• キーワード: パステル・紙吹雪柄・リボン見出し・白パネル・黄色CTA・育児
• 地の質感: 淡い地色の上に白い半透明の紙吹雪・波線を散らしたパターン。平面的でグラデーションは少ない
• 形: 角丸の白パネル、楕円の写真フレーム、リボン型の見出し帯、ピル型ボタン
• 温度感: 暖色ピンクと寒色ミントを並べ、全体は明るく温かい

Colors

• 商品ごとに地色を切り替える。ピンク地の商品ではピンクで強調、ミント地の商品では青で強調する
• ファーストビューは左右でピンクとミントに二分割し、2つの商品を並べる
• どの地色の上でも CTA は黄色の塗り＋濃い枠線で統一する
• 白い角丸パネルは地色より明るい淡色にして、文字の読みやすさを確保する
• 本文の重要語は色文字か黄色マーカーで強調する
• 応募手順は黄緑の地にピンクの STEP 帯を置き、商品セクションと区別する
• button-primary は文字 #C8376E × 背景 #FFE600 のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#B63264、4.57:1）を使う。
• ribbon-heading は文字 #E0508A × 背景 #FFFFFF のコントラスト比が 3.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DA3074、4.51:1）を使う。
• flag-label は文字 #FFFFFF × 背景 #E0508A のコントラスト比が 3.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DA3074、4.51:1）を使う。
• data-card は文字 #1E9AD6 × 背景 #FFFFFF のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#187DAE、4.58:1）を使う。

Typography

• 見出しは太い丸ゴシックで、やわらかい印象を出す
• 本文はゴシック 13px 前後・行間 1.9 で、中央揃えか短い行の左揃えにする
• 数字は大きく太く、白い縁取りでアイキャッチにする
• 強調語は地色に合わせてピンクか青の色文字にする
• 注釈は ※ を付けた小さなグレー文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。FV のみ 2 商品を左右 2 列に並べる
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 地色の上に幅 80% の白い角丸パネルを中央に置き、その中に内容をまとめる
• 各商品セクションの最後に応募 CTA を置く
• 見出しリボンはパネル上端に少し重ねて配置する
• 口コミは写真 3 枚の横並び＋吹き出しの縦積みにする
• STEP カードは幅 60% 程度で縦に並べ、間に装飾を散らす

Elevation & Depth

• 影はほぼ使わない。CTA だけ濃色の下ずれ影で立体感を出す
• 白パネルは影なしにして、地色との差で浮かせる
• 写真は楕円の二重線フレームで囲み、メダルのように見せる

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は楕円・二重線のフレーム。口コミ写真は角丸の正方形を少し傾けて並べる
• セクション境界: 直線で地色を切り替える
• 見出しは両端が折り返したリボン型の帯にする
• ラベルは傾けたフラッグ型にする
• STEP 番号は下端が V 字に切れたしおり型にする
• パネルの角は 10〜16px の角丸にする

Components

• 応募 CTA（button-primary）: 黄色のピル型ボタン。濃い枠線と下ずれ影を付け、左にピンクの丸＋矢印、下に回数制限の注釈を入れる
• リボン見出し（ribbon-heading）: 白地に黒線で描いた、両端が折れたリボン帯。中に 2 行の見出しを入れる
• フラッグラベル（flag-label）: 写真フレームの上に斜めに重ねる、ターゲットを示す小旗
• 楕円写真フレーム（photo-medallion）: 赤ちゃんや親子の写真を楕円で切り抜き、細い二重線で囲む
• 口コミ吹き出し（review-bubble）: 淡色の角丸ボックス。重要部分を色文字にし、末尾に投稿者名を書く
• データグラフカード（data-card）: 白い角丸カード。上部に枠線付きの角丸見出し、その下に棒グラフと出典を置く
• STEP カード（step-card）: 白いカードの左上にピンクのしおり型 STEP 番号、中央に線画アイコン、下に説明文を置く
• 成分比較表（comparison-table）: グレーの罫線の表。自社の列をピンク地にして、●印で有無を示す

Do's and Don'ts

Do - 商品ごとに地色（ピンク／ミント）と強調色（ピンク／青）を対にして使う - 背景には淡い紙吹雪・波線のパターンを敷く - 各セクションの最後に、同じデザインの黄色 CTA を繰り返し置く - データは簡潔な棒グラフにし、出典を注釈で添える - 見出しにはリボンやフラッグなど、お祝い感のある装飾を使う

Don't - 濃い地色や黒背景を広く使わない - CTA の色をセクションごとに変えない - 角張った硬いゴシックの太字を大見出しに使わない - 写真を四角いまま無装飾で大きく並べない - 1 つのセクションでピンクと青の強調を混ぜない

Page Structure

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

1. ファーストビュー（2 種の無料サンプルと抽選人数を伝える）: 左右でピンクとミントに二分割する。ガーランド装飾とバッジ型タイトル、楕円写真 2 枚、数字バッジ、CTA、各商品詳細へのアンカーリンクを置く
2. ブランド理念（研究に基づく信頼感を伝える）: 白地の中央にロゴ、ピンクの太字リード、短い本文を中央揃えで置く
3. 商品紹介 1（1 つ目の商品の特長を伝える）: ピンク地に淡色パネル。リボン見出し、大きな商品名、楕円写真と商品画像、マーカー付き本文、成分を丸い吹き出しで紹介する
4. 比較表（他社との成分の違いを示す）: 罫線の表に●印を付け、下にピンクの結論文を置く
5. お客様の声 1（利用者の実感で後押しする）: 白パネルに写真 3 枚と吹き出し 3 つを並べ、最後に CTA を置く
6. 商品紹介 2（2 つ目の商品の必要性を伝える）: ミント地に淡色パネル。青の商品名、写真とフラッグラベル、マーカー付き本文を置く
7. データ根拠（栄養が不足していることを数値で示す）: 白カードに角丸の見出しと棒グラフ 2 つ、出典の注釈を置く
8. お客様の声 2（購入実績と安心感を伝える）: リボン見出し、傾けた写真 3 枚、青の強調入り吹き出し、CTA を置く
9. 応募の流れ（応募手順を 3 段階で示す）: 黄緑地にピンクのタイトル、STEP カード 3 枚を縦に並べ、風船やリボンの装飾と CTA を置く
10. フッター（企業の信頼を示して締める）: 白地に企業ロゴと 2 行の企業メッセージを中央揃えで置く

Imagery

• 赤ちゃんと母親の、自然光で撮った明るい笑顔の写真
• 商品パッケージは切り抜いて写真フレームに重ねる
• 口コミ写真は日常のスナップ風
• 成分紹介には丸いデフォルメの赤ちゃん・キャラクターのイラストを添える
• STEP には細いピンクの線画アイコン（スマホ・チェックリスト・ギフト）を使う
• 風船、リボン、花、魚など、パステル調の小さな装飾を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も SP と同じ縦長のデザインで、幅 375〜480px 程度の中央カラムを表示する
• PC では左右の余白にセクションの地色とパターンを延長する
• FV の 2 列は PC でも維持し、写真や数字バッジを少し大きくする
• CTA は PC でも幅 60% 程度のピル型を中央に置く

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