DESIGN.md — 赤×黄の祭り感ある食品キャンペーン LP（Festive Red Yellow Food Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: お祭り感・赤と黄・きらめき・極太見出し・商品パッケージ大量・コース分け
• 地の質感: ストライプ地や金の星きらめき、紙吹雪とリボンを散らした賑やかな質感。本文エリアは白でフラット。
• 形: 角丸カード、白縁取りの太字見出し、ピル型ラベル、四角い白パネル。
• 温度感: 暖色中心の高温。赤とオレンジで食欲と熱気を出す。

Colors

• 地は淡黄→オレンジの縦グラデ、黄、赤とセクションごとに切り替える。
• 赤は見出しの文字・ナビ帯・後半の地に使い、ブランドの主役にする。
• 赤地の上の強調語は黄色、本文は白。
• 2コース比較は赤カードと青カードで対比させる。
• 規約や手順は白パネルに黒文字でまとめ可読性を確保。
• 金色のきらめき装飾は背景のみに散らし、文字に重ねない。
• badge-winners は文字 #EF1E00 × 背景 #FEFEFE のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E71D00、4.55:1）を使う。
• present-card は文字 #EF1E00 × 背景 #FEFEFE のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E71D00、4.55:1）を使う。

Typography

• 大見出しは極太書体に白フチと濃い影を付けて立体的に。
• 見出しの一部の語を大きくし、助詞は小さくしてリズムを出す。
• 日付は太字で曜日を括弧付きで小さめに。
• 本文・規約は細めのゴシックで行間広め。
• 赤地では白文字＋黄色の強調語。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。コースカードは縦積み、STEP は 1 列。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 上部に3つのアンカーナビを赤帯で配置。
• 手順・規約は中央の白パネルに集約。
• 当選数は丸バッジでカード右上に重ねる。
• 商品パッケージを横一列に敷き詰めて帯にする。
• 情報表は2列（項目名／内容）の罫線表。

Elevation & Depth

• コースカードは濃色のドロップシャドウで浮かせる。
• 見出し文字は影付きで立体感。
• 白パネルは影なしでフラット。
• 後半のプレゼントカードは大きな角丸の白でシャドウなし。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き、イベント写真は角丸四角。人物は角丸の横長枠。
• セクション境界: 背景色の直線切り替え。
• 当選数バッジは正円。
• カード上部見出しラベルはピル型で縁取り。
• ボタンは小さい角丸四角。
• 赤帯見出しは角なし帯。

Components

• コースカード（course-card）: 赤と青で色分けした応募コース。極太見出しと商品画像、当選数バッジ。
• 当選数バッジ（badge-winners）: 白または黄の正円に当選人数を大きく表示。
• アンカーナビ（anchor-nav）: 赤帯に白文字3項目と下矢印。
• 赤帯見出し（heading-band）: 白パネル内の横長赤帯に白文字。
• STEP ラベル（step-label）: 淡青帯に青文字で手順番号。
• ダウンロードボタン（button-primary）: 青地白文字にアイコン付き。
• プレゼントカード（present-card）: 赤地上の大角丸白カード。上辺にピル型の条件ラベルを重ねる。
• 情報表（info-table）: 白地に罫線の2列表、項目名は太字。

Do's and Don'ts

Do - 赤・黄・オレンジの暖色で全体をまとめる。 - 背景に金のきらめきや紙吹雪を散らす。 - 見出しは極太＋白フチ＋影で目立たせる。 - 当選数は丸バッジで大きく見せる。 - 細かい規約は白パネルにまとめる。

Don't - 寒色を主役にしない（青はコース対比と手順だけ）。 - 細い明朝体で見出しを作らない。 - 装飾を本文の上に重ねない。 - 余白の多いミニマルな構成にしない。 - 規約を色地に直接置かない。

Page Structure

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

1. ファーストビュー（キャンペーン名と全体像の提示）: オレンジのストライプ地に極太ロゴ風見出し、商品の帯、2つの企画カード。
2. アンカーナビ（3企画への誘導）: 赤帯に3項目と下矢印。
3. 応募企画の見出し（応募条件と期間の提示）: 赤い極太見出しに商品画像、青で期間を太字。
4. コース紹介（賞品と当選数の比較）: 赤と青のカードを並べ、丸バッジで当選数。
5. 応募方法（手順の説明）: 白パネル内に赤帯見出しとSTEP 1〜3、図解、ダウンロードボタン。
6. 対象商品・賞品詳細（対象と賞品の明示）: 罫線表と商品の小画像。
7. 応募規約（注意事項）: 白パネルに小さい文字の箇条書き。
8. 誰でも応募企画（別企画の告知）: 黄色地に紙吹雪と商品画像、極太見出し、人物写真、当選バッジ。
9. イベント告知（記念日イベントの案内）: 赤地に白文字と黄色強調、白い情報表、昨年の写真2枚。
10. 来場特典（特典の訴求）: 大角丸白カードにピルラベルと極太赤見出し。
11. SNS 誘導（投稿の促進）: 白抜き見出しと丸いSNSアイコン。
12. お問い合わせ（事務局連絡先）: 白地中央寄せに大きな電話番号。

Imagery

• 商品パッケージを切り抜いて大量に並べる。
• 金色の四芒星きらめきを背景に散らす。
• リボンや紙吹雪、星で祭り感を出す。
• 賞品は白背景の切り抜き写真。
• 謎の賞品は「？」のシンプルな箱イラスト。
• イベント写真は明るい屋外の賑わい。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約700px幅、SP は1カラム。
• コースカードは PC 横2列、SP 縦積み。
• STEP は PC 3列、SP 縦積み。
• アンカーナビは SP でも3分割を保ち文字を小さく。
• 見出しは SP で幅いっぱいに縮小。

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