DESIGN.md — チョコ茶×キャラメルの飲料キャンペーン LP（Cafe-au-lait Brown Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: カフェオレ色・紙吹雪・放射線背景・斜めストライプ・白カード・太ゴシック見出し
• 地の質感: 淡いベージュの斜めストライプ地と、キャラメル色の放射線。紙吹雪を散らした平面的なグラフィック
• 形: 角丸カード、ピル型ボタン、FV 下は波形カーブ、星形バッジ
• 温度感: 暖色寄り。ミルクと焼き菓子の甘く温かい印象

Colors

• 地は白カード＋ベージュ斜めストライプが基本。商品セクションだけキャラメル放射線地にする
• 濃茶はナビ帯・アコーディオン・サブボタン・見出し文字に使い、ブランドの軸にする
• 赤は応募 CTA と注意喚起の見出し・枠だけに使う
• マゼンタ帯＋黄文字は金額訴求の一点だけに使う
• OK は青、NG は赤の淡い面で対比させる
• Point カードはオレンジの細枠と番号で統一する

Typography

• セクション見出しは極太で白抜き、濃茶の縁取りと黄色マーカーを付ける
• 見出しの上には英字ラベルを青のリボン帯にして載せる
• 数字は大きく、単位や曜日は小さくして強弱をつける
• 本文は字間を少し広げ、行間を 1.8 前後にする
• 注釈は小さい文字にし、※から始めてぶら下げインデントにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品とナビは 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは大きな白カードで包み、中にさらに枠付きカードを入れ子にする
• 見出しは中央揃え、本文は左揃え
• ナビは濃茶地に点線で区切った 2×2 グリッド
• 手順は Step カードを縦に並べ、最後に CTA を置く
• 利用規約は濃茶アコーディオンを 8px 間隔で縦積みする

Elevation & Depth

• CTA ボタンには下方向にやや濃い影を付けて立体感を出す
• 白カードはごく薄い影か影なしで、地との色差で浮かせる
• 枠付きカードはフラットにする

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き。説明図は円形のベージュ背景に入れる
• セクション境界: FV 下は上向きの緩い波形カーブ。それ以外は地色の直線切り替え
• ボタンはピル型にする
• カードの角丸は 8〜12px
• バッジは星形やギザギザの円にする
• OK/NG ラベルは小さなピル型にする

Components

• 応募 CTA（button-primary）: 赤のピル型。右端に小さな三角矢印を付け、影で浮かせる
• 詳細リンクボタン（button-secondary）: 濃茶のピル型で白文字。右に▶を付ける
• 英字リボン付き見出し（section-title）: 青リボンに英字を入れ、下に縁取りの極太和文見出しと黄色マーカーを置く
• アンカーナビ（anchor-nav）: 濃茶地を点線で 2×2 に区切る。白文字の下に v 字矢印
• Step／Point カード（step-card）: 白地にオレンジの細枠。番号を英字で小さく置き、その下に濃茶の見出し
• 全員プレゼントバッジ（badge-star）: 赤いギザギザ円に白文字を 3 行。カードの左上角にはみ出させる
• OK/NG 比較ボックス（ok-ng-box）: 水色と淡ピンクの面。ピル型ラベルの下に○と×の一覧を並べる
• 規約アコーディオン（accordion）: 濃茶の横長バー。中央に白太字、右端に細い＋
• 応募期間ボックス（period-box）: 淡ベージュ面の上部に濃茶ピルのラベルを置き、日付の数字を大きく見せる

Do's and Don'ts

Do - 地にはベージュの斜めストライプを敷き、白カードで内容を区切る - 金額や数字は極太で大きくし、紙吹雪で賑やかさを出す - 手順は番号付きカードとイラストで視覚的に見せる - 赤い CTA は FV 直下と手順の途中に配置する - 注意事項は赤枠、ポイントはオレンジ枠で色分けする

Don't - 寒色をメインの地色に使わない - 赤を装飾目的で多用しない - 細い明朝体を見出しに使わない - カードを影の強い立体表現にしない - 説明を枠のない長文で流し込まない

Page Structure

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

1. ファーストビュー（特典と金額を一目で伝える）: 黄の放射線地に紙吹雪を散らし、マゼンタ帯で金額を見せ、商品パッケージを大きく並べる。下端は波形
2. 応募期間と CTA・ナビ（期間を示して即応募させる）: 濃茶地に白で日付を大きく置き、赤ピル CTA、2×2 アンカーナビ、SNS シェアを並べる
3. キャンペーン概要・賞品紹介（賞品の内容と配分を説明する）: ストライプ地に白カード。星バッジ、金額帯、期間ボックスを入れる
4. 賞品の詳細（交換先と仕組みを伝える）: 濃茶細枠のカードに交換先ロゴをグリッドで並べ、説明文と濃茶ボタンを置く
5. 対象商品（対象のサイズを示す）: キャラメル放射線地に白カード。切り抜き商品を 3 列で並べ、下に容量を書く
6. 応募方法（手順を示す）: 濃茶ヘッダーの開閉パネル内に Step カードを 3 つ並べ、途中に CTA を置く
7. レシートの注意事項（無効な応募を防ぐ）: 赤枠カードに OK の青ボックスと NG のピンクボックスを並べる
8. 撮影時のポイント（撮影のコツを伝える）: 波線付きの見出しの下に、オレンジ枠の Point カードを 7 枚縦積みする
9. NG 例（悪い例を視覚で示す）: 赤枠カードに×の一覧と、赤い斜線を入れた 2×2 の写真を置く
10. 利用規約（規約を開閉形式で示す）: ベージュのグラデーション地に濃茶アコーディオンを縦に並べる
11. 問い合わせ・フッター（連絡先と商品ページへ誘導する）: 細枠の問い合わせボックスと商品バナーを 2 列で置き、ミルクが混ざる写真で締める

Imagery

• 商品パッケージは切り抜きで、やや斜めの立体角度で見せる
• 紙吹雪は黄・ピンク・水色・緑の短冊を回転させて散らす
• スマホとレシートのイラストは、木目背景の上に描くフラットな図解にする
• 説明図は淡ベージュの円背景の中に配置する
• フッターはミルクとチョコが渦巻くシズル写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 900px 程度の白カードの幅に収め、周りにストライプ地を見せる
• PC の FV は商品を左右に置き、見出しを中央に配置する
• PC のナビは 1 行 4 列にして SNS アイコンを右端に置く
• Step と Point のカードは PC で 2 列にする
• 対象商品は 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 行書くと起動時に読み込まれる。