DESIGN.md — クリーム地×ティールと朱色の妊婦向けキャンペーンLP（Warm Cream Pop Maternity Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、やさしい・柔らかい、情報量多め・訴求型
• キーワード: お祝い・紙吹雪・クリーム地・手書き風見出し・賞品グリッド・全員プレゼント
• 地の質感: マットな単色面が中心。FVだけ風船や水彩紙のような柔らかい質感を使う
• 形: 角丸カード、ピル型ボタン、円形バッジ、波形や大きな円弧のセクション境界、三角形の紙吹雪
• 温度感: 暖かい（クリームと黄が中心で、ティールを差し色にする）

Colors

• 地はクリーム色と白を交互に置いて、セクションを区切る
• 主CTAはティールに限定し、白文字とピル型にする
• 数字・当選数・抽選の訴求は朱色に統一する
• サブ導線（詳細確認など）はオレンジのピルボタンにする
• フッターはマスタード黄の大きな円弧で締める
• 紙吹雪にはティール・朱・黄・オレンジの4色を散らす
• button-primary は文字 #F4FEFE × 背景 #01BBB3 のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#01817B、4.62:1）を使う。
• button-secondary は文字 #F4FEFE × 背景 #FE8114 のコントラスト比が 2.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BB5701、4.57:1）を使う。
• badge-count は文字 #F4FEFE × 背景 #F55C54 のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E7180E、4.51:1）を使う。
• badge-new は文字 #F4FEFE × 背景 #02BBB3 のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#01817B、4.62:1）を使う。
• lottery-panel は文字 #F4FEFE × 背景 #F55C54 のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E7180E、4.51:1）を使う。

Typography

• 大見出しは極太の丸ゴシックにし、キーワード2文字を白抜き袋文字にする
• 見出しの上に小さな前置き文を斜線の飾りで挟んで添える
• 数字は他の文字の約2倍の大きさにし、朱色で強調する
• 和文の見出しの下に黄色の欧文ラベルを小さく添える
• 賞品カードには、輪郭線だけの大きなアルファベットで連番を振る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、賞品は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 左右の余白は約18px
• 賞品カードは2列で、間隔は約20px
• ロゴ一覧は1行3〜4個で中央揃え
• UGC投稿は横スクロールのカルーセルにする
• 主CTAはセクションの切れ目ごとに入れる

Elevation & Depth

• 白カードには薄くぼかした影（0 2px 8px rgba(0,0,0,.08)）を付ける
• CTAボタンには下方向に濃い色のベタ影を付けて立体感を出す
• それ以外は影なしのフラットにする

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで白地に置く。投稿写真は正方形にする
• セクション境界: 波線や大きな円弧で区切る。抽選パネルは不定形の丸い塊にする
• カードは角丸14〜20pxにする
• バッジは円形にし、内側に点線の縁を付ける
• 吹き出しバッジは丸い吹き出し形にする

Components

• 応募CTAボタン（button-primary）: ティールのピル型で、右端に白丸の▶アイコンを付ける。左上に朱色の吹き出しで「所要時間」を添える
• 詳細ボタン（button-secondary）: オレンジのピル型で、内側に白い点線の縁を付ける
• 賞品カード（prize-card）: 白い角丸カード。右上に輪郭線だけのアルファベット、左上にブランドロゴ、中央に切り抜きの商品を置く
• 当選数の丸バッジ（badge-count）: 朱色の円に白文字で数字と名様を入れる。縁は点線にする
• 新商品の吹き出し（badge-new）: 淡いティールの丸い吹き出しに、白い手書き風の文字を入れる
• 見出しの飾り（heading-deco）: 左右に放射状の短い線や斜線を付け、下に黄色のマーカー帯を引く
• 抽選訴求パネル（lottery-panel）: 朱色の不定形パネルに白抜きの大きな金額を置き、左に賞品の写真を重ねる
• フッターメニュー（footer-menu）: 黄色地の上に白カードを置き、黄丸の▶アイコン付きリンクを2×2に並べる

Do's and Don'ts

Do - 数字（人数・金額・名様）は朱色の特大サイズで見せる - 紙吹雪の三角形を余白に散らす - 賞品は全部カードにして、連番のアルファベットを振る - 各カードに応募リンクを置く - 見出しには手書き風の飾りや、白抜きの文字を混ぜる

Don't - 黒や濃紺の重い背景は使わない - 角ばったカードや直角のボタンにしない - CTAにティール以外の色を混ぜない - 細い明朝体で高級感を出さない - 賞品写真に背景付きのまま並べない

Page Structure

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

1. ファーストビュー（全員がもらえる特典を一目で伝える）: 風船とギフトボックスの背景に、赤ちゃんの写真と極太キャッチを重ねる。丸い対象者バッジも置く
2. 特典の選択肢（選べる特典を見せる）: 淡い黄の地に、切り抜き商品を4つ横に並べる
3. 抽選の告知バナー（追加の抽選特典を予告する）: ティールの枠付きバナーに、金額と賞品写真を入れる
4. 協賛企業のロゴ（信頼感を出す）: 白地にロゴを3〜4列で並べる
5. 実績と応募者の声（社会的証明）: 大きな累計人数、最新の応募通知カード、SNS投稿の横スクロールを並べる
6. CTA（応募へ誘導する）: ティールのピルボタンに所要時間の吹き出しを添える
7. 全員プレゼントの詳細（特典の種類を説明する）: 白カード内に商品を2×2で並べ、オレンジの詳細ボタンを置く
8. 抽選の大賞（高額賞品で後押しする）: 朱色の不定形パネルに、白抜きの大きな金額を置く
9. 賞品一覧（数の多さで期待感を出す）: クリーム地に、A〜Vの賞品カードを2列で並べる
10. フッター（運営情報とリンクを置く）: イラスト付きの黄色い円弧の上に、白いメニューカードを置く

Imagery

• 商品は白背景の切り抜き写真にし、ソフトな影で並べる
• 赤ちゃんは明るい自然光で笑顔のポートレートにする
• ママのイラストは太めの線のフラットなもので、オレンジ系の服を着せる
• 風船・紙吹雪・リボンをパステルで散らして、お祝い感を出す
• SNS投稿は正方形にし、ユーザー名とタグを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは賞品グリッドを5列にする
• PCのFVは横長にし、特典の商品をキャッチの左右に配置する
• PCではヘッダーにグローバルナビをピル状に並べる
• PCではUGCを5列表示にする
• PCではフッターメニューを4列横並びにする

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