DESIGN.md — 赤×パステル色分けの食品キャンペーンLP（Pop Multicolor Snack Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、かわいい
• キーワード: 紙吹雪・極太見出し・セクション色分け・太枠白カード・味ごとの色分け
• 地の質感: フラットな単色面。FV だけ黄色の網点と紙吹雪で印刷物風の賑やかさを出す
• 形: 角丸の大きい白カード、両端を切り込んだリボン帯、カップ形のシルエット
• 温度感: 暖色の赤を軸に、寒色・黄緑も混ぜた明るい多色

Colors

• セクションごとに地色を切り替える。賞品はピンク、対象商品は水色、応募方法は黄緑、問い合わせはベージュ。
• 白カードの枠線はセクションのテーマ色に合わせる。賞品は赤、対象商品は青、応募方法は緑。
• 見出しの白抜き文字は、テーマ色の太いフチ取りで囲む。
• 当選人数などの数字は赤の極太で大きく見せる。
• 商品バリエーションは味ごとのイメージ色の帯で塗り分ける。
• ボタンはオレンジ単色にし、赤とは役割を分ける。
• prize-card は文字 #0586CC × 背景 #FFFFFF のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#057CBD、4.54:1）を使う。
• step-badge は文字 #FEFAC5 × 背景 #3CAB77 のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2D8059、4.53:1）を使う。
• button-primary は文字 #FFF9EE × 背景 #FA6101 のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C54C01、4.55:1）を使う。

Typography

• 見出しはすべて極太ゴシックで、柔らかい書体は使わない。
• 大見出しには白や色の太いフチ取りを重ねる。
• 当選人数は数字を大きくし、単位の「名様」は数字の半分ほどのサイズにする。
• 見出しは中央揃え、注釈は左揃えで先頭に※を付ける。
• 商品特長の帯は、手書き風の太字で斜めに勢いを出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品グリッドは 2 列、FV の味一覧は 3 列
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは全幅の色地にし、中に白カードを置く。
• カードは左右に約 8% の余白を取る。
• セクション見出しの上にカップ形のシルエットを大きく敷く。
• 賞品カードの上にリボン帯でコース名を載せる。
• 応募 STEP は縦に並べ、下向き三角でつなぐ。

Elevation & Depth

• 影はほぼ使わず、太い枠線で面を区切る。
• フローティングボタンだけに軽い影を付ける。
• ボタンは濃い色のフチ取りで立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きで配置。FVの味一覧は正方形タイル
• セクション境界: 直線で地色を切り替える
• カードは 3〜4px の太枠と大きな角丸にする。
• コース名は両端を V 字に切り込んだリボン帯にする。
• STEP 番号と「&」は塗りつぶした正円にする。
• 丸いフローティングボタンは白フチ付きにする。

Components

• リボン帯（ribbon-label）: 両端を切り込んだ赤帯。白の極太文字でコース名を載せる
• 賞品カード（prize-card）: 赤枠の白カード。青い賞品名、イラスト、赤い当選人数の順に並べる
• 当選人数（count-number）: 赤の極太数字に、小さめの単位を添える
• カップ形の見出し（section-title-cup）: テーマ色のカップ形シルエットに放射線を添え、フチ取りの白文字を重ねる
• STEP 番号（step-badge）: 緑の正円に、黄色の大きな数字を入れる
• オレンジのボタン（button-primary）: 全幅のオレンジ帯ボタン。末尾に▼を付ける
• 味の特長帯（flavor-band）: 味の色の横帯に商品の切り抜きを左右交互に重ねる
• 問い合わせの見出し帯（info-heading-bar）: 茶色の角丸帯に白文字を中央に置く
• 丸いフローティングボタン（floating-circle）: 右下に固定する白フチの円形ボタン。友だち追加と TOP へ戻る

Do's and Don'ts

Do - セクションの地色と、カード枠・見出しの色をそろえる。 - 数字は大きく赤で強調する。 - 紙吹雪と網点で FV を賑やかにする。 - 味やバリエーションごとにイメージ色を割り当てる。 - 規約は白カード内のスクロール枠に収める。

Don't - 細い明朝や繊細な書体を使わない。 - くすんだ色やグレー基調にしない。 - 影やグラデーションを多用しない。 - カードを枠線なしの白だけにしない。 - 1 セクションに複数の地色を混在させない。

Page Structure

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

1. ファーストビュー（キャンペーン名と賞品総数を伝える）: 白地に黄色の網点と多色の紙吹雪を散らす。緑の帯ラベルを置き、赤の極太タイトルとキャラクターを添える
2. 商品バリエーション一覧（対象の味を一目で見せる）: 3 列×2 段の正方形タイル。味ごとに背景色を変え、商品写真を載せる
3. 応募期間（期間を明示する）: 緑の全幅帯に白文字で表示する
4. 特長の紹介（味の違いを短い言葉で伝える）: 色帯 6 本に商品の切り抜きを左右交互に配置する
5. 賞品（コース別の賞品と当選人数を示す）: ピンク地にリボン帯と赤枠カードを並べ、カードを縦に積む
6. 対象商品（購入対象を示す）: 水色地に青枠カードを置き、中に商品を 2 列グリッドで並べる
7. 応募方法（手順を説明する）: 黄緑地の緑枠カードに STEP 1〜3 を縦に並べ、アイコンイラストを添える
8. 補助 CTA（撮影方法などへ誘導する）: 白地に全幅のオレンジボタンを置く
9. 問い合わせ・応募要項（事務局情報と規約を載せる）: ベージュ地の白カードに茶色の見出し帯と、スクロールする規約枠を置く
10. フッター（リンクと著作権表示）: 白地に小さな文字で左揃えにする

Imagery

• 商品は切り抜き写真で正面から撮り、彩度を高めにする。
• FV のタイルは商品と具材のアップを組み合わせる。
• 賞品や手順は太い黒線のフラットなイラストで描く。
• 中身を伏せる賞品は「?」入りの青いカップで表す。
• キャラクターを FV の右下に配置する。
• 四角い紙吹雪を赤・青・緑・黄で散らし、きらめきは黄色の星で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 1000px 前後に収め、左右は同じ地色で塗り延ばす。
• PC の賞品カードは、横 2 列に並べて「&」でつなぐ。
• PC の応募 STEP は横 3 列に並べ、右向きの矢印でつなぐ。
• PC では QR コードを表示し、SP では友だち追加ボタンに置き換える。
• FV と味のタイル構成は SP・PC 共通にする。

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