DESIGN.md — 黄×チョコ茶の冬季レシート応募キャンペーン LP（Winter Chocolate Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 黄色×チョコ茶・冬の雪の結晶・シズル感のある商品写真・ステップ式の応募手順・太線のフラットイラスト
• 地の質感: 黄色地には淡い雪の結晶とボケた光、茶色地にはチョコが流れるような光沢グラデーション。カードはフラットな単色。
• 形: 角丸の白・クリーム色カード、ピル型 CTA、旗形のステップラベル、下向き三角の矢印、FV 下はチョコが割れたようなギザギザの境界。
• 温度感: 暖色。甘くにぎやかで、冬らしいごほうび感。

Colors

• 黄色地とチョコ茶地をセクションごとに交互に置き、リズムを作る。
• 茶色地の上には白かクリーム色の角丸カードを置き、本文は濃い茶色で書く。
• 賞品パネルだけは水色を使い、黄色地の中で目立たせる。
• 金額・倍率などの数字は赤か水色の極太文字で強調する。
• 情報の見出し帯は濃い茶色の面に黄色の文字。
• CTA は濃い茶色のピルに白文字。外側に細い黄色の縁を付ける。
• prize-panel は文字 #FFFFFF × 背景 #01A7EB のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#017DB1、4.6:1）を使う。
• badge-check は文字 #FFFFFF × 背景 #01A7EB のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#017DB1、4.6:1）を使う。

Typography

• 強調語は茶色の文字に白か黄色のフチを付け、ドロップシャドウで立体的に見せる。
• セクション見出しは明朝体の太字にし、下に筆記体風のループ曲線を添える。
• 数字と単位は大きさを変え、数字を 2〜3 倍に大きくする。
• 本文は小さめにして中央寄せか左寄せ。注釈には※を付ける。
• 日付・期間は太字で 2 行に分けて中央に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 2 列グリッドで、端数は中央に置く。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右 5〜6% の余白を取り、中央に置く。
• ステップカードは縦に積み、間に黄色の下向き三角を置く。
• セクション見出しは中央揃え。上下に 40px 前後の余白を取る。
• 長い規約文はスクロールできる白い枠に収める。
• 問い合わせは白い細線の角丸枠で囲み、中央揃えにする。

Elevation & Depth

• 基本はフラット。カードに影は付けない。
• FV の商品写真や強調文字にだけドロップシャドウを付けて立体感を出す。
• 茶色地に光沢グラデーションを敷き、奥行きを出す。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージは切り抜きにし、背後に白い多角形のハローを置く。
• セクション境界: FV 下はチョコが割れたようなギザギザ。ほかのセクションは直線で切り替える。
• ステップラベルは右端を斜めにカットした旗形にする。
• 吹き出しは角丸に三角の尾を付ける。
• 賞品パネルは水色の太枠の中に白い角丸面を入れる。

Components

• 応募 CTA ボタン（button-primary）: 濃い茶色のピルに白文字と右向き三角。外側に黄色の細い縁。
• 筆記曲線付き見出し（heading-swash）: 明朝体の太字の下に、ループする曲線を描く。
• 賞品パネル（prize-panel）: 水色の太枠の中に白い面を置き、大きな赤い数字を入れる。下に白文字で当選数。
• 期間カード（period-card）: 上部は濃い茶色の帯に黄色文字の項目名。下部は白地に日付。
• ステップカード（step-card）: クリーム色の角丸カード。旗形の番号ラベル、見出し、説明、イラストの順に並べる。
• ステップ間の矢印（step-arrow）: 黄色の下向き三角をカード間に置く。
• 商品タイル（product-tile）: 切り抜きパッケージ写真の背後に白い多角形。下に小さな商品名。
• 締切ブロック（deadline-block）: 赤い二重線で上下を挟む。中央に黄色の六角形ラベル、その下に日時を太字で。
• Check バッジ（badge-check）: 水色の傾いたリボン形に、白い欧文セリフ文字。

Do's and Don'ts

Do - 黄色と茶色のセクションを交互に配置する。 - 手順はステップカードと三角矢印でつなぎ、縦に流す。 - 数字・倍率は極太の大きな文字で目立たせる。 - イラストは茶色の太い線、黄色・水色の塗りでフラットに描く。 - 応募期間・締切は繰り返し明示する。

Don't - 寒色やモノトーンを地色にしない（水色は賞品パネルだけ）。 - カードに強い影やグラデーションを付けない。 - 本文に装飾書体を使わない。 - 黒（#000）は使わず、茶色系で代用する。 - 写真の上に細い文字を直接置かない。

Page Structure

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

1. ファーストビュー（キャンペーン名と期間を伝え、商品のシズル感を見せる）: 黄色地に雪の結晶を散らし、太いタイトルを置く。罫線で囲んだ期間を挟み、割れたチョコの大きな写真を下に重ねる。
2. 賞品紹介（当たる賞品と当選数を示す）: リード文を中央に置き、水色の賞品パネルに大きな数字を入れる。
3. 期間情報（レシートの有効期間と応募期間を明示する）: 茶色の帯付きの白いカードを 2 枚、縦に並べる。
4. 対象商品（購入対象を一覧で示す）: クリーム色地。切り抜き商品を 2 列グリッドで並べる。
5. 応募方法（応募の流れを説明する）: 茶色地に白文字の導入文。続けてステップカードを 3 枚、矢印でつなぐ。
6. 当選確率アップ訴求（複数購入を促す）: 白いカード内に Check バッジを付け、極太の強調文字と 3 段階の倍率イラストを入れる。
7. レシート撮影方法（不備による応募ミスを防ぐ）: 白いカードの中で、レシート図解と○×の比較を見せ、水色文字で注意点を並べる。
8. 応募締切（締切日時を強調する）: 赤い二重線で挟み、黄色ラベルと太字の日時を置く。
9. 応募規約・CTA（規約を確認させて応募へ誘導する）: 黄色のボケ背景。スクロール式の白い枠の下にピル型 CTA を置く。
10. お問い合わせ・ブランドバナー（事務局情報とブランドサイトへの導線）: 茶色地に白い線の枠で事務局情報を入れる。その下に黄色の角丸バナーを置く。

Imagery

• 商品はチョコが割れて断面が見えるシズル写真。破片を飛び散らせ、躍動感を出す。
• パッケージは切り抜きにし、背後に白い多角形の光を置く。
• イラストは茶色の太いアウトラインに、黄色・水色・赤のフラットな塗り。
• 黄色地に白い雪の結晶と丸いボケ光を薄く散らす。
• スマホ・レシート・ギフト箱などの手順アイコンは、キラキラ装飾付きでポップに描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV でタイトルを左、商品写真を右に置く横構図にする。
• PC の期間カードは、項目名を左・日付を右に並べる横型にする。
• PC の対象商品は 3 列グリッドにする。
• PC のステップカードは、テキストを左・イラストを右に並べる横並びにする。
• PC のコンテンツ幅は約 1000px で、カードを中央に置く。
• PC の撮影方法は、図解と○×比較を左右 2 列にする。

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