DESIGN.md — 黄色地×原色ポップの食品投票キャンペーンLP（Vivid Yellow Pop Food Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感
• キーワード: 原色ポップ・黄色地・きらめき装飾・色分けセクション・白カード・レシピ写真
• 地の質感: フラットな単色面に白や黄の星形きらめきを散らす。グラデーションや陰影はほぼ使わない。
• 形: 大きめ角丸の白カード、太い色枠、上辺がアーチ形の見出しパネル、斜めにずれた付箋風ラベル。
• 温度感: 暖色寄りで明るく賑やか。青と緑で情報部分を引き締める。

Colors

• 地は黄色、情報ブロックは白の角丸カードで乗せる。
• セクションごとに枠色と見出し札の色を変える（賞品=オレンジ、応募方法=マゼンタ、対象商品=緑）。
• メインタイトルは1文字ごとに青・緑・赤・オレンジ・紫を変えた多色にする。
• 日付などの重要情報は緑の全幅帯に白文字で載せる。
• レシピ系統ごとに赤アーチ＋淡ピンク、青アーチ＋淡水色の対で色分けする。
• 当選人数は青の太字に黄マーカーを敷いて強調する。
• section-title-tag は文字 #FFF4F3 × 背景 #DE7F3F のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B0591E、4.54:1）を使う。
• arch-header は文字 #FFF4F3 × 背景 #EF0D33 のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E00C30、4.57:1）を使う。
• button-outline は文字 #EF0D33 × 背景 #FFFFFF のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E00C30、4.56:1）を使う。
• button-primary は文字 #FFF4F3 × 背景 #EF0D33 のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E00C30、4.57:1）を使う。
• step-badge は文字 #FFF000 × 背景 #E8137F のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#CC1170、4.56:1）を使う。
• date-band は文字 #FFF4F3 × 背景 #0DA03C のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#0B8131、4.64:1）を使う。
• floating-buttons は文字 #FFF4F3 × 背景 #E8137F のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#CC1170、4.57:1）を使う。

Typography

• 見出しは太い丸ゴシック系で、文字に白フチを付けて地から浮かせる。
• メインタイトルは1文字ずつ色を変え、少し傾ける。
• 数字は本文より2倍以上大きくし、単位は小さく添える。
• 見出しは中央揃え、注意事項のみ左揃えでぶら下げインデントを付ける。
• 本文に細字は使わず、最低でも400ウェイトで読みやすくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、レシピ写真カードは 2 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面左右に約7%の余白を取り中央に置く。
• セクション見出し札はカード上端に半分かぶせて配置する。
• レシピカードは2列で並べ、奇数の最後は中央に寄せる。
• 応募手順は縦に STEP を並べ、間に下向き三角を置く。
• 日付・応募方法の要点は全幅の色帯でまとめる。

Elevation & Depth

• 影はほぼ使わずフラット。
• 見出し札は白フチで立体感を出す。
• ボタンは下側に濃い色の縁を付けて押せる感じにする。
• 右下に丸い追従ボタンを縦に3つ並べる。

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 料理写真は真上から撮った正方形に近い形で、点線の枠と斜めにずらした色帯の影を付ける。
• セクション境界: 直線で色帯を切り替える。レシピパネルは上辺をアーチ形にする。
• 白カードは角丸24pxに太さ4px前後の色枠を付ける。
• サブボタンは白地に色枠のピル型にする。
• 見出し札は少し傾けた四角に白フチを付ける。
• STEP番号は塗りの円にする。
• 吹き出し的な補足は淡黄の円にする。

Components

• セクション見出し札（section-title-tag）: オレンジ・マゼンタ・緑の四角に白い太字、白フチ付き。少し傾けてカード上にかぶせる。
• アーチ見出しパネル（arch-header）: 上辺がドーム形の赤または青パネル。白文字の見出しを弧に沿わせ、きらめきを散らす。
• レシピ写真カード（recipe-card）: 点線で囲んだ正方形写真、色帯のラベル、一言キャプション、色枠のピルボタンで構成する。
• 枠線ピルボタン（button-outline）: 白地にカードの色と同じ枠線と文字色を付けた小さめのピル。
• 赤の全幅ボタン（button-primary）: 赤地に白文字と三角アイコン。下側に濃いオレンジの縁を付ける。
• 賞品カード（prize-card）: 白地にオレンジ枠の角丸カード。賞品画像、淡黄の円形吹き出し、黄マーカー付きの当選人数を入れる。
• STEP番号バッジ（step-badge）: マゼンタの円に小さく英字のSTEP、大きく数字を入れる。数字は黄色。
• 日付帯（date-band）: 緑の全幅帯に白いピル型ラベルと白の太字日付を並べる。
• 追従丸ボタン（floating-buttons）: 右下に固定するマゼンタ・緑・青の円形ボタン。白文字を2行で入れる。

Do's and Don'ts

Do - 地は必ず鮮やかな黄色にし、白や薄黄の星形きらめきを周囲に散らす。 - セクションごとに原色の枠色を決め、見出し札と色をそろえる。 - 賞品の数と当選人数は特大の数字で見せる。 - 応募手順はSTEP番号・イラスト・短い説明を縦に並べる。 - 料理写真は明るい真上からの写真を使い、器と布の色で彩りを出す。

Don't - くすんだ色や中間色をメインに使わない。 - 細い明朝体や繊細な書体を使わない。 - 黄色地に直接長文を置かない（必ず白カードに入れる）。 - 強い影や光沢のグラデーションを付けない。 - 1つのカードに複数の枠色を混ぜない。

Page Structure

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

1. ファーストビュー（キャンペーン名と楽しさを一目で伝える）: 黄地に商品パッケージ、四隅に料理写真、中央に多色の大きなタイトル、周囲にきらめきを散らす。
2. 賞品サマリー（賞品の内容と当選数を短く伝える）: 白帯の左にスマホ画像、右に青と赤の太字コピーを置く。
3. 応募条件（何をすれば応募できるかを示す）: 黄帯に緑のピルラベルを置き、条件を赤字2行で＋記号でつなぐ。
4. 応募期間（期間と締切を明示する）: 緑の全幅帯に白いピルラベルと白の太字日付を並べる。
5. 投票の導入（投票の対象と方法を説明する）: 赤アーチに多色ロゴ風の見出しを入れ、下の青パネルに白字で説明を書く。
6. レシピ一覧（系統A）（投票対象のレシピを見せる）: 赤アーチ＋淡ピンクのパネルにレシピ写真カードを2列で並べる。
7. レシピ一覧（系統B）（別の味のレシピを見せる）: 青アーチ＋淡水色のパネルに同じ形のカードを並べる。
8. 賞品（賞品の詳細とダブルチャンスを示す）: オレンジの見出し札の下にオレンジ枠の白カードを2枚置く。当選数には黄マーカーを敷く。
9. 応募方法（手順と注意事項を伝える）: マゼンタ枠のカードに3つのSTEPを縦に並べ、注意事項と規約リンクを添える。
10. 補助CTA（撮影方法の案内へ誘導する）: 白帯の中央に赤の全幅ボタンを置く。
11. 対象商品（対象のパッケージを示す）: 緑の見出し札の下に緑枠のカードを置き、パッケージ写真と商品名を並べる。
12. 問い合わせ・応募要項（問い合わせ先と規約を示す）: 白カードに赤の帯見出しを付け、フリーダイヤルを大きく出す。規約は内部スクロールの枠に入れる。
13. フッター（法務リンクと企業表記）: 白地に小さいリンク、コピーライト、企業ロゴを置く。

Imagery

• 料理は白い器を真上から撮り、チェックや無地のカラフルな布・木の板を背景にする。
• 写真には点線の枠と、斜めにずらした色帯の影を付ける。
• スマホ操作はシンプルな線画イラストにし、青い集中線を添える。
• 背景には4方向に光る星形のきらめきを、白・淡黄・オレンジで散らす。
• 商品パッケージは切り抜き画像で見出しパネルの中に置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもコンテンツ幅は約800px相当の中央1カラムに保つ。
• PCの賞品リンクボタンは2つを横に並べる。
• PCの応募STEPは3つを横に並べ、間を三角矢印でつなぐ。
• PCの対象商品は2つを横に並べる。
• 追従の丸ボタンは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 行書くと起動時に読み込まれる。