DESIGN.md — 牛乳ブルー×吹き出しのポップな懸賞キャンペーンLP（Milk Blue Pop Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型
• キーワード: 牛乳ブルー・吹き出しシェイプ・リボン見出し・黒枠ボックス・レシート応募・規約の情報量
• 地の質感: フラットな塗り。写真は切り抜きか長方形で載せ、影はほぼ付けない
• 形: 丸い吹き出し、角丸ボックス、ピル型ボタン、両端が切れ込んだリボン
• 温度感: 明るく涼しい青が基調。賞品ごとに黄・緑・赤・紫で温度を足す

Colors

• 地は白を基本にする。ファーストビューだけ淡いグレーにする
• ブランド色の青は吹き出しの装飾と見出しリボンに使う
• CTAは少し紫寄りのロイヤルブルーにし、下側に濃い影を付けて立体感を出す
• 賞品コースごとに黄・緑・ピンク・紫のリボンで色を分ける
• 規約の見出しは濃グレーのピル型帯にそろえる
• 正誤の〇×だけ赤を使う
• speech-bubble は文字 #F3F5F4 × 背景 #3CC84A のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#24812E、4.51:1）を使う。

Typography

• 見出しは太めのポップ書体にし、濃紺か白で載せる
• 本文は中央寄せの短い文にまとめる
• 規約は小さめの文字で左寄せにし、項目頭に●を付ける
• 注釈は※で始め、写真の右下に小さく添える
• 賞品名は2〜3行に分けて中央に置き、価格は括弧で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品と見本画像は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 主要情報は黒枠の角丸ボックスに入れる
• ボックス内の左右余白は約16px
• 賞品はリボン見出し→写真→吹き出し→名称の順で縦に積む
• 規約セクションは枠なしで帯見出しを使って区切る
• CTAはページの先頭付近と末尾に置く

Elevation & Depth

• CTAボタンの下側に濃い青の影（2〜4px）を付ける
• カード類はフラットにし、影の代わりに線で区切る
• 問い合わせ枠は薄いグレーの線で囲む

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 賞品写真は長方形のまま。商品の画像は青い吹き出しの上に切り抜いて載せる
• セクション境界: 直線の切り替えと点線の区切り。ファーストビューは淡いグレーの地に青い吹き出しを散らす
• リボン見出しは両端をV字に切り込む
• 賞品の補足コピーは小さな吹き出しにし、下向きの尻尾を付ける
• 手順同士は下向きの三角でつなぐ
• 〇×は赤の太い記号にする

Components

• 応募CTAボタン（button-primary）: 横幅いっぱいのピル型。下側に濃い影を付ける
• アンカーナビ（anchor-nav）: 濃グレーの帯を2分割し、各項目に下向き矢印を付ける
• 黒枠ボックス（bordered-box）: 2px程度の黒線で囲む角丸ボックス。上部に見出しを置く
• 応募手順パネル（step-panel）: 水色の面に線画アイコンと説明を3段並べ、三角でつなぐ
• コースリボン見出し（ribbon-heading）: コースごとの色の帯に白文字を載せ、末尾に小さな白いピル型ラベルを付ける
• 補足吹き出し（speech-bubble）: コース色のグラデーションを使った楕円の吹き出しに、白文字で補足を入れる
• 規約の帯見出し（section-bar）: 濃グレーのピル型の帯で、白文字を中央に置く
• 〇×チェックリスト（check-item）: 赤い〇×の記号と太字の短文を並べ、点線で区切る

Do's and Don'ts

Do - 青い吹き出しシェイプを装飾として繰り返し使う - 賞品ごとにリボンの色を変えて見分けやすくする - 応募手順はアイコンと短い文で3ステップに分ける - 規約は帯見出しで区切って読みやすくする - 撮影の良い例・悪い例は図で示す

Don't - 本文の地を濃い色にしない - CTAの色をコースの色と混ぜない - ボックスに強いドロップシャドウを付けない - 明朝体を使わない - 規約の文字を大きくしてメイン訴求と競わせない

Page Structure

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

1. ファーストビュー（キャンペーン名・期間・条件を一目で伝える）: 淡いグレーの地に人物を置き、青い吹き出しを散らす。濃紺の大見出しを置き、左右に条件と限定のバッジを配置する
2. アンカーナビ（概要と応募要項へ移動させる）: 濃グレーの帯を2分割する
3. キャンペーン概要とCTA（要点を伝え、すぐに応募できるようにする）: 中央寄せの短い文章の下にピル型CTAを置く
4. 応募方法（3ステップの手順を示す）: 水色のパネルにアイコンと文を並べ、三角でつなぐ
5. 賞品紹介（コース別の賞品で期待感を高める）: 色違いのリボン、写真、吹き出し、賞品名の順に積む
6. 当選人数・条件（条件を明示する）: ボックス内に【】付きの項目を並べたテキストリスト
7. 対象商品（対象メーカーを示す）: 青いリボン見出しの下に、●付きの2列リストと牛乳の切り抜き画像を置く
8. 応募要項（規約を網羅する）: 帯見出しの下に小さな文字の●付き段落を続ける
9. レシート撮影の注意（不備のある応募を防ぐ）: 良い例・悪い例の見本をグレー地の図で示し、〇×リストを添える
10. 注意事項・問い合わせ（推奨環境や問い合わせ先を案内する）: 帯見出しの下にテキストを並べ、問い合わせは薄い枠で囲む
11. 最終CTA・フッター（応募を促し、ブランドへ誘導する）: CTAの下に牧場写真のバナーを置き、濃グレーのフッターにリンクを並べる

Imagery

• 青い吹き出しの上に、牛乳瓶・紙パック・グラスを切り抜いて配置する
• 人物は白背景のスタジオ写真にし、王冠やぬいぐるみなどの遊び心を加える
• 賞品写真は暖色の料理やスイーツを寄りで撮影する
• アイコンは黒の線画でシンプルに描く
• レシートの見本は白黒の図解にし、赤い番号で指示を入れる
• 締めの画像は青空と牧場の広い風景写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約60%幅のカラムを置き、余白は白にする
• PCのファーストビューは横長にし、吹き出しを左右へ広げる
• PCは応募手順を横3列に並べ、矢印でつなぐ
• PCは賞品を2列グリッドにする
• PCはCTAを中央に置いた短いピル型にする
• 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 行書くと起動時に読み込まれる。