DESIGN.md — 黄色地に緑×橙の2コース応募キャンペーンLP（Pop Yellow Two-Course Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: 黄色地・黒の太い縁取り・緑と橙のコース分け・キャラクター・ピル型ボタン・ベタ塗りイラスト
• 地の質感: フラットなベタ塗り。グラデーションや影は使わず、黒の太線で輪郭を描く漫画風。
• 形: 角丸の大きい白カードとピル型ボタンを使う。カードは黒の 3px 線で縁取り、セクションの境目は緩い弧にする。
• 温度感: 暖色寄りで、明るく元気な秋の雰囲気。

Colors

• 地は黄色と淡い黄色を交互に切り替え、境目を弧で区切る。
• コースごとに緑か橙のどちらかに統一し、見出し・帯・STEP・ドットまで同じ色にする。
• カードは白地にし、黒の太線で縁取る。
• 黒は文字と輪郭線だけに使い、面には使わない。
• 淡い緑・クリーム・淡い橙は、カード内の補足ボックス専用にする。
• 強調の赤は本文中のキーワードに限って使う。

Typography

• 見出しは極太の丸ゴシックにする。
• 当選数などの数字は 1.6 倍ほど大きくし、コース色で塗る。
• 小見出しは「＼ ／」の斜線ではさむ。
• 見出しの下に、コース色の短い横線（幅60px・太さ4px）を置く。
• 本文は黒で、行間を 1.8 前後と広めにとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。検索ボタンと賞品カードは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面幅の約 88% で中央に置く。
• カードどうしの間隔は 24〜40px にする。
• コースの導入見出しは、カードの外に地の上へ置く。
• キャラクターはカードの角に半分重ねる。
• 応募手順は横スライダーにし、矢印とドットを付ける。

Elevation & Depth

• 影は使わず、黒の太線で立体感を出す。
• 重なりはキャラクターがカードからはみ出すことで表現する。

Shapes

• 角丸: 小 12px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 賞品写真は角丸の矩形で切り抜く。人物は円形に切り抜く。
• セクション境界: 地色の切り替えは緩い上向きの弧にする。
• カードの枠線は黒 3px にする。
• ボタンはピル型で黒枠にする。
• タグは黒やコース色で塗ったピル型にし、下向きの三角を付けて吹き出し風にする。
• 番号は黒丸の中に白数字を入れる。

Components

• コース選択の大型ピル（course-entry-pill）: コース色で塗り、黒枠を付けた大きなピル型ボタン。上に黒いタグ、左にアイコン、下に▼を置く。
• 黒枠の白カード（card-outlined）: 角丸 28px で黒の太枠を付けた白カード。セクションの器として使う。
• コース色のカードヘッダー（card-header-band）: カード上部をコース色で塗り、白文字の見出しとアイコンを入れる。
• 白地黒枠の CTA（button-primary）: 白地に黒枠のピル型ボタン。右にコース色の三角を置き、上に「＼Click!／」を添える。
• 検索ボタン（search-chip）: 白地黒枠のピル型。淡い緑のパネル内に 2 列で並べ、右に色付きの三角を置く。
• STEP ラベル（step-badge）: カードの上辺にまたがる、コース色のピル型ラベル。
• 賞バッジ（prize-badge）: 写真の左上に重ねる円形バッジ。「A賞」と当選数を入れる。
• FAQ アコーディオン（faq-bar）: 黄色地に黒枠の角丸バー。右に＋を置く。
• 問い合わせボックス（contact-box）: 淡い緑のボックスに、緑の丸アイコンと連絡先を入れる。

Do's and Don'ts

Do - コースごとに緑か橙を決め、そのコースのすべての部品に一貫して使う。 - カードもボタンも黒の太枠で縁取る。 - キャラクターや食材のイラストを、見出しの左右やカードの角に散らす。 - 地色は黄色と淡い黄色を弧で切り替える。 - 注釈は小さな文字で、カードの下部にまとめる。

Don't - 影やグラデーションは使わない。 - 細い明朝体や角ばった書体は使わない。 - 緑と橙を同じコース内で混ぜない。 - 暗い地の色は使わない。 - 角の尖ったボタンは使わない。

Page Structure

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

1. ファーストビュー（キャンペーン名・期間・世界観を伝える）: 淡い黄色の地に、極太文字で橙のタイトルと期間を置く。その下に売り場のイラストとキャラクターを大きく配置する。
2. コース選択（2 つの応募コースへ誘導する）: 緑と橙の大型ピルを縦に 2 つ並べ、それぞれに黒いタグを付ける。
3. 取り組みの紹介（背景にある考え方を伝える）: 白カードにサポーター人物の写真と本文を入れ、バナーとピル型ボタンを添える。
4. コース A の賞品（賞品の豊富さを見せる）: 緑のヘッダーカードに、日本地図のイラスト・検索パネル・2 列の賞品カードを並べる。
5. 応募方法（手順を示す）: STEP カードを横スライダーにし、CTA と店舗検索ボタンを置く。
6. 応募規約（法的な情報を載せる）: カード内にスクロールできる枠を設け、規約を収める。
7. コース B の賞品（賞品を見せる）: 橙のヘッダーカードに、写真付きの賞カードを並べ、円形の賞バッジを付ける。
8. 特典の訴求（両方のコースへの応募を促す）: 地の上に集中線と、白文字を載せた橙マーカーの文字帯を置く。
9. 注意事項（無効になる例を図で示す）: レシートの図解、×印の例のカード、番号付きリストで構成する。
10. お問い合わせ（連絡先を示す）: 淡い緑のボックスにアイコン付きで連絡先を並べる。
11. よくある質問（疑問を解消する）: 黄色のアコーディオンバーを縦に並べる。
12. 関連情報・フッター（関連サイトへ誘導する）: 淡い黄色の地に、動画カード・白いバナー・キャラクターを置く。

Imagery

• イラストは黒の輪郭線とベタ塗りで描く、可愛い漫画風のキャラクターにする。
• 食材（野菜・米・肉・果物）は小さなアイコンにして散らす。
• 賞品写真は白背景か明るい物撮りで、角丸に切り抜く。
• 日本地図は地方ごとにパステルで色分けしたブロックで表す。
• 説明図は線画と、橙の×や強調枠で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px にし、中央に寄せる。
• コース選択のピルは PC では横に 2 つ並べる。
• 取り組みの紹介は PC では横長カードにし、人物・本文・バナーを横に並べる。
• 賞品カードは PC では 3 列、STEP は 3 枚を同時に表示する。
• FV は 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 行書くと起動時に読み込まれる。