DESIGN.md — 桃色の雲とオレンジの育児用品キャンペーン LP（Soft Cloud Pastel Baby Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: やさしい・柔らかい、かわいい、情報量多め・訴求型
• キーワード: 水彩パステル・雲の境界・白カード・オレンジのピル・マスコット・ベビー
• 地の質感: 紙に滲んだ水彩のような淡いグラデーションの地に、立体感のある白い雲を重ねる
• 形: 角丸の大きいカード、ピル型ボタンとラベル、雲形のセクション境界
• 温度感: 暖色寄りでミルキー。ピーチとピンクを交互に使う

Colors

• 地はピーチとピンクの水彩をセクションごとに交互に使う
• 情報は必ず白い角丸カードの上に載せる
• 主ボタン・ラベル・アコーディオンはオレンジで統一
• ピンクはハガキなどサブの経路や強調数字に使う
• 注意事項だけは赤い枠線で区別し、OK例は水色地にする
• 見出しは黒ではなくこげ茶を使う
• button-primary は文字 #FDF6E8 × 背景 #F3925B のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE4E0E、4.56:1）を使う。
• button-secondary は文字 #FDF6E8 × 背景 #FB7CA9 のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DF0753、4.55:1）を使う。
• accordion は文字 #FDF6E8 × 背景 #F3925B のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE4E0E、4.56:1）を使う。
• badge-round は文字 #FDF6E8 × 背景 #FB7CA9 のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DF0753、4.55:1）を使う。

Typography

• 見出しは太い丸ゴシックのこげ茶
• 見出しの上に英字の小ラベルをマスコットの耳型の枠に入れて添える
• 数字と賞品数はピンクで少し大きくする
• 本文は中央揃えで短く改行する
• 注釈は小さいグレーで、カードの下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品やポイントは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは大きな白カードで包み、中に小カードを入れ子にする
• 見出しは中央に配置する
• ステップは番号ラベルつきのカードで縦に並べる
• 規約は全幅のアコーディオンを縦に並べる
• 固定のアンカーナビは白いピル型の帯にする

Elevation & Depth

• 白カードはごく薄い影（0 4px 16px rgba(200,140,120,.15)）
• ボタンは控えめな影をつけて浮かせる
• 雲には柔らかい立体の陰影を入れる

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物写真は円形。商品は切り抜き
• セクション境界: 白いふわふわの雲の波形で区切る
• カード上部の帯は下端を雲形にする
• 番号ラベルはカードの上辺にまたがるピル型
• 角のある図形は使わない

Components

• オレンジのピルボタン（button-primary）: シェブロンや＋を右端に置く全幅ボタン
• ピンクのピルボタン（button-secondary）: もう一方の応募経路やダウンロードに使う
• 規約アコーディオン（accordion）: オレンジのピルに＋アイコン。縦に連続させる
• 耳型ラベル見出し（section-title）: クマ耳形の白い枠に英字、その下に太い丸ゴシックの見出し
• ステップカード（step-card）: クリーム地の角丸カード。上辺にオレンジの Step ラベル
• ポイントカード（point-card）: 白地にオレンジ枠、上辺に Point 番号ピル。2 列に並べる
• 注意ボックス（alert-box）: 赤の太枠に赤い見出し。中に水色の OK 例を入れる
• 丸バッジ（badge-round）: ピンクの円形で当選数を強調する
• アンカーナビ（anchor-nav）: 白いピル帯にメニューとシェアアイコンを並べる

Do's and Don'ts

Do - 地は水彩のグラデーションにして、雲で区切る - 情報は白い角丸カードにまとめる - 番号・ステップはピル型ラベルで示す - マスコットのイラストをセクションの角に添える - 強調はオレンジとピンクの 2 色だけにする

Don't - 真っ黒の文字や濃い背景は使わない - 四角くて硬い枠やボタンは使わない - 彩度の高い寒色を広い面に使わない - 注意枠以外で赤を使わない - 写真を四角いまま大きく並べない

Page Structure

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

1. ファーストビュー（キャンペーン名と賞品を一目で伝える）: ピーチ地に雲。中央に丸ゴシックのタイトル、左右に円形のベビー写真、マスコットと当選数の帯を置く
2. 応募期間（期間と締切を示す）: オレンジのピルラベルの横に日付を並べる
3. 応募方法の要約（2 通りの応募経路を簡潔に示す）: ピンク地に白カードを 2 つ並べ、線画アイコンで手順を示す
4. アンカーナビ（各セクションへ移動する）: 白いピル帯
5. キャンペーン概要・賞品紹介（賞品の魅力と仕様を伝える）: 雲形の帯つき白カード。賞品の切り抜き写真、特徴の円形写真 3 つ、着用イメージ
6. マスコット紹介（親しみを持たせる）: 小さな白カードにイラストと短い文章
7. 対象商品（対象商品を示す）: ピンク地の白カード。商品の切り抜きを 3 列に並べ、種類ごとに点線見出しで区切る
8. 応募方法の詳細（手順と注意を説明する）: 経路別の 2 ボタンと、Step カード・注意ボックス・Point カード・NG 例の写真
9. ハガキでの応募（郵送の手順を示す）: ピンクの帯見出しのカード。宛先とダウンロードボタン
10. 利用規約（規約を開閉式で示す）: ピーチ地にオレンジのアコーディオンを縦に並べる
11. お問い合わせ（連絡先を示す）: 白カードにオレンジの電話番号
12. 関連バナー（関連施策へ誘導する）: 角丸バナーを 2 列、その下にブランドバナー

Imagery

• 赤ちゃんの写真はハイキーで柔らかい光。円形に切り抜き、白縁をつける
• 商品は白背景の切り抜き
• マスコットは手描き風のクマのイラストで、角や余白に添える
• 背景は水彩の滲みと、立体感のあるふわふわの雲
• アイコンはグレーの細い線画
• 当選者のステップには三角旗のガーランドで祝福感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はカード幅を約 780px で中央に置き、左右に水彩地を見せる
• SP は応募方法の 2 カードを縦に積む
• Point カードは SP で 1 列にする
• 対象商品は SP で 2 列にする
• アンカーナビは SP で横スクロールか、ハンバーガーにする

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