DESIGN.md — 空色×紺の紙吹雪 食品プレゼントキャンペーン LP（Sky Blue Confetti Food Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感、情報量多め・訴求型
• キーワード: 空色の紙吹雪・生成りの布目・紺のずらし影・黄緑 CTA・破線区切り・白カード
• 地の質感: 生成り地に細かい布目（キャンバス）テクスチャ。空色帯には淡い三角の紙吹雪柄。
• 形: 白カードは角丸大きめ、見出し箱とボタンは角のある矩形に紺のオフセット影。番号や当選数は紺の正円。
• 温度感: 明るく爽やか。空色の冷たさを生成りの暖かさで中和した中間〜やや暖かめ。

Colors

• 地は空色の紙吹雪帯と生成りの布目地を交互に切り替える。
• 情報はすべて白カードに載せ、文字は紺で統一する。
• 主 CTA だけ黄緑面＋紺文字にして目立たせる。
• 赤帯＋黄文字は当選確率アップなど特典訴求1か所に限定。
• 見出し箱・ボタンの影と賞バッジは紺で揃える。
• 商品別ラベルは商品パッケージ色（空色・緑）を流用する。
• highlight-band は文字 #EEFEFD × 背景 #F30A0B のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E7090A、4.56:1）を使う。
• step-label は文字 #EEFEFD × 背景 #00B5EC のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#007CA2、4.59:1）を使う。

Typography

• 全体を太めの丸ゴシックで統一し、細字は使わない。
• 数字（当選数・日付）は一回り大きくして強調する。
• 見出しは「＼ ／」の斜線で挟む装飾を多用する。
• 本文は中央揃え、規約のみ左揃え。
• FVタイトルのみ手書き風書体を空色帯の上に白抜きで斜めに置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビボタンと Step は 3〜2 列グリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右 6% ずつ余白を取り中央配置。
• セクションの切替は横一本の紺破線で区切る。
• 見出し箱は破線の中央に重ねて置く。
• 賞品カードは上辺に紺のピル型バッジをはみ出させる。
• 当選数の紺の円はカード右下の写真に重ねる。

Elevation & Depth

• ぼかし影は使わず、紺のベタのオフセット影（右下 4〜6px）で立体感を出す。
• 白カードはフラットで影なし。
• CTA は白のオフセット影を付ける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き、賞品写真は角丸なしの矩形。
• セクション境界: 水平の紺破線＋空色帯と布目地の直線切替
• 見出し箱・CTA は角丸なしの矩形。
• 賞バッジとサブリンクボタンはピル型。
• 番号・当選数は正円。
• レシピ・商品カードは破線の角丸枠。

Components

• 応募CTA（button-primary）: 黄緑の横長矩形に紺の太字と右向き三角、白のオフセット影。上に放射線の集中線。
• セクション見出し箱（heading-box）: 白矩形に紺文字、右下に紺のずらし影。左右に紺破線が伸びる。
• ページ内ナビ（nav-tile）: 白の正方形に近いタイル3つ、文字下に下向き矢印。紺のずらし影。
• 賞ランクバッジ（prize-badge）: 紺のピル型に白文字で賞ランク、カード上辺に重ねる。
• 当選数の円（count-circle）: 紺の正円に大きな白数字と小さな単位。
• 購入先ボタン（button-store）: 白矩形に紺文字2行と右三角、右と下に紺の太い影線。
• サブリンク（button-link）: 白地に紺の細枠、小さな文字と紺丸の矢印アイコン。
• 特典訴求帯（highlight-band）: 赤の矩形に白文字、要点のみ黄文字。上に集中線。
• ステップラベル（step-label）: 空色の矩形に白の欧文Stepと大きな数字、下に空色の線画アイコン。
• 期間ラベル（label-period）: 紺の矩形に白文字の小見出し、下に大きな日付。

Do's and Don'ts

Do - 空色帯と生成りの布目地を交互に使い、リズムを作る。 - 紺のずらし影を見出し・ボタンで統一する。 - 数字と期間は大きく、紺ラベルとセットで見せる。 - 見出しの両脇に斜線や集中線を添えて祝祭感を出す。 - 情報は白カードにまとめ、余白を広めに取る。

Don't - ぼかしの強いドロップシャドウを使わない。 - 黒文字や細い明朝体を使わない。 - 黄緑を CTA 以外に多用しない。 - 赤を複数箇所に散らさない。 - 背景を無地のグレーにしない（布目か紙吹雪を入れる）。

Page Structure

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

1. ファーストビュー（キャンペーン名と対象商品を一目で伝える）: ぼかした室内写真に紙吹雪、斜めの空色帯に白抜き手書き風タイトル、木のテーブル上に商品2本。
2. 概要・応募導線（賞品総数と期間を示し応募へ誘導）: 空色紙吹雪地に白箱の大見出し、紺ラベル付き期間、黄緑CTA、3列ナビタイル。
3. 賞品（賞のランクと内容を見せる）: 布目地に白カードを縦積み、紺バッジ・破線で挟んだ賞品名・写真・当選数の円。末尾にWチャンス枠。
4. 対象商品（応募対象を明示）: 破線角丸カードに切り抜き商品と商品色ラベル、赤帯の特典訴求と注釈。
5. 購入先リンク（購入へ送客）: 紺の影付き白ボタンを縦に3つ。
6. 商品ストーリー（産地と品質の訴求）: 山と湖の風景写真に地図と商品を合成、白文字の見出しと本文を重ねる。
7. 特長（味・使いやすさを3点で説明）: 下線付き見出しの下に白帯の小見出し＋中央揃え本文を3回。
8. おすすめレシピ（使い方提案と賞品との連動）: 紺破線の角丸枠に料理写真、黄緑マーカー見出し、紺ラベルの材料と番号付き手順。SNS誘導枠。
9. 応募方法（条件と手順を説明）: 下線見出し、注釈、期間ラベル、白カードに空色Step 4つを2×2で矢印連結。
10. CTA（最終の応募誘導）: 空色紙吹雪帯に集中線付き黄緑ボタン。
11. 関連キャンペーン（別企画への送客）: 白地に斜線見出し、バナー画像と紺の矩形ボタン。
12. 応募規約・お問い合わせ（規約と連絡先の提示）: 空色地に白い角丸カードで規約、下に白文字で問い合わせとコピーライト。

Imagery

• 商品は白背景で切り抜き、まっすぐ正面から。
• 空色・白・黄・緑の小さな四角や三角の紙吹雪を斜めに散らす。
• 料理写真は暗めの背景に寄りで、湯気や照りを見せる。
• 産地は青空と雪山の風景写真に白い地図を半透明で重ねる。
• 手順アイコンは空色の単色線画（カート・スマホ・レシート）。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 800px 幅のコンテンツを置き、左右の空色地に商品ボトルを散らす。
• PC のFVはタイトル中央、左右に賞品総数と期間を振り分ける。
• 賞品カード・特長・購入ボタンは PC で 3 列横並び。
• Step は PC で 4 列 1 行。
• レシピは 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 行書くと起動時に読み込まれる。