DESIGN.md — ガーランドと生成り地の食品キャンペーンLP（Festive Pennant Quiz Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: ガーランド旗・ルーレット・生成り地・白カード・赤ピルCTA・金バッジ
• 地の質感: 地は淡い三角柄の生成り。カードは白か淡いクリームのフラット面。ヒーローだけ漫画調の空と草原のイラスト
• 形: 角丸カード、ピル型ボタン、円形バッジ、三角旗の連なり
• 温度感: 暖色寄り。生成りとオリーブに赤のアクセントが効く

Colors

• 地は生成りの三角柄で統一し、内容は白カードの上に載せる
• 赤は主CTAと注意喚起の見出し帯だけに使う
• オリーブ色はSTEPラベル・ptピル・締切帯に使い、手順の強調色にする
• 緑はコース名などの小見出しに使う
• 特典セクションだけレモン色の地にして目立たせる
• 黒文字を基本にし、赤文字は短い注意文だけにする
• deadline-bar は文字 #FFFFFF × 背景 #9A8A1E のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#85771A、4.52:1）を使う。
• step-label は文字 #FFFFFF × 背景 #9A8A1E のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#85771A、4.52:1）を使う。
• winner-badge は文字 #FFFFFF × 背景 #9E8A2E のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#867527、4.58:1）を使う。

Typography

• 見出しは太字ゴシックで中央揃え
• 挨拶文と説明文は中央揃えで短く改行する
• ロゴ風の企画名だけ白フチと影付きの極太ディスプレイ書体を使う
• 賞品内訳は小さな文字の2列リストにする
• 数字バッジは欧文の極太書体と小さな単位文字を組み合わせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。手順内のクイズ種別は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに白い大カードを置き、上辺にガーランド旗を飾る
• カード内でSTEP 1〜3を縦に並べ、間を点線と下向き三角でつなぐ
• 賞品コースは枠線付きのサブカードを縦に積み、右上に当選数バッジを重ねる
• CTAはセクションの最後に中央配置。会員登録と応募の2ボタンを横に並べる
• 説明ブロックの右か下にモノクロのアイコンイラストを添える

Elevation & Depth

• カードは影をつけずフラットにし、地色との差で区切る
• ヒーローのロゴだけ濃いドロップシャドウと白フチをつける
• スクリーンショット画像には薄い影をつけて浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 賞品写真は切り抜きで背景なし。アイコンは円形
• セクション境界: ヒーロー下は芝生のギザギザ。各カードの上辺に三角旗のガーランド
• ボタンとラベルはすべてピル型
• 当選数バッジはギザギザ縁の円形
• STEPラベルは角丸の小さな帯

Components

• 赤ピルCTA（button-primary）: 応募・ログイン用の赤いピル型ボタン
• 白ピルサブボタン（button-secondary）: 会員登録用の白地・グレー枠のピル。上に小さな補足文を添える
• 締切帯（deadline-bar）: オリーブ地に白文字の角丸帯で応募締切を示す
• STEPラベル（step-label）: オリーブのピルに番号、右に同系色の太字見出し
• ジャンルアイコン行（quiz-genre-item）: 色違いの六角アイコンと短い説明を2列で並べる
• 賞品コースカード（prize-card）: 金茶枠の角丸カード。コース名と必要ptピル、写真、賞品名、内訳リストを入れる
• 当選数バッジ（winner-badge）: 金色のギザギザ円に白い数字と単位
• 赤見出し付き注意ボックス（notice-box）: 赤い見出し帯と赤枠の白ボックスでお願い事項を伝える
• ガーランド装飾（garland）: 赤・黄・緑・青の三角旗をカード上辺の左右に垂らす

Do's and Don'ts

Do - カードの上辺にはガーランドを飾ってお祭り感を出す - 手順は番号ラベルと区切り線で3ステップに整理する - 賞品ごとに当選数バッジを右上に重ねる - CTAは各ブロックの最後に赤ピルで置く - 生成りの地と白カードの2層を守る

Don't - 赤を背景の広い面に使わない - カードに強い影やグラデーションをつけない - 写真を角版で並べない（賞品は切り抜く） - 寒色を基調にしない（青は空と装飾だけ） - 本文を左右いっぱいの長文にしない

Page Structure

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

1. ファーストビュー（企画名と参加方法を一目で伝える）: 青空と草原のイラストにガーランドとルーレット。極太ロゴ、吹き出し、赤CTA、締切帯を置く
2. 挨拶（企画の趣旨と楽しみ方を伝える）: クリームのカードに中央揃えの文。風船とクラッカーのイラストを周りに散らす
3. 参加方法（3ステップで流れを説明する）: 白カードの中にSTEPラベル、説明文、右にアイコン。クイズのジャンルは2列で見せる
4. プレゼント（コース別の賞品と必要ptを見せる）: 枠付きカードを縦に並べ、当選数バッジ、切り抜き写真、内訳リストを入れる
5. CTA（会員登録か応募へ進ませる）: 白ピルと赤ピルを横に並べ、上に小さな補足文
6. 会員特典（当選確率アップの条件を伝える）: レモン色の地に画面キャプチャ、リボン見出し付きの白カード、赤枠の注意ボックス
7. 応募規約（規約を確認させる）: 薄グレーの地に枠付きのスクロールボックスを置き、下にCTAを再掲
8. フッター・シェア（SNSでの拡散を促す）: 木と走る人のイラストを添え、丸いSNSアイコンを並べる

Imagery

• 空と草原は漫画調のフラットなイラストにし、白い雲と緑の木を置く
• 風船・クラッカー・三角旗を原色で描き、余白に散らす
• 賞品写真は白背景で切り抜き、「+」記号でつないで組み合わせを見せる
• 説明用のアイコンはグレーの線画で統一する
• 画面キャプチャには赤い丸囲みと手書き風の矢印で操作箇所を示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央カードを幅約900pxに固定し、左右に生成りの柄を見せる
• SPではカードを画面幅の約92%にし、ガーランドは小さくする
• クイズのジャンルはSPでも2列のままでよいが、文字は12px程度にする
• 賞品カードはSPで写真を上、賞品名と内訳を下の縦積みにする
• 2つのCTAは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 行書くと起動時に読み込まれる。