DESIGN.md — 赤青緑ピンクの原色ポップなお菓子コラボキャンペーンLP（Pop Character Collab Snack Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: 原色ポップ・キャラクター総出演・リボン見出し・白カード・色分けセクション・ドット絵装飾
• 地の質感: 生成りの地にイラストの柄を敷く。カード内はフラットな白。市松とドット絵の飾りを入れる。
• 形: 角丸カードと多角形のバッジ。リボン型の見出し。ピル型ボタン。
• 温度感: 暖かく元気。子どもっぽい楽しさがある

Colors

• 地は生成りにして、キャラクター柄を左右の余白に見せる
• セクションごとに赤→青→緑→ピンクと太い色枠を切り替える
• 中身は必ず白カードに載せて読みやすくする
• 見出しは黄色リボンに紺の縁と紺の文字
• 強調したい数字や当選数は赤、またはピンクのグラデ文字にする
• 主 CTA は紺のピル型。リンクボタンは白地に赤文字と紺の枠
• 受付が終わったリンクは文字を淡いピンクにして、赤い終了バッジを重ねる
• nav-polygon は文字 #FEFFFE × 背景 #EA3D53 のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E71F38、4.5:1）を使う。
• checker-title は文字 #E0002A × 背景 #FAD0D4 のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#C10024、4.57:1）を使う。
• step-label は文字 #FEFFFE × 背景 #0479DB のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0476D6、4.59:1）を使う。
• year-tag は文字 #FEFFFE × 背景 #2FA17A のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#278565、4.53:1）を使う。

Typography

• 見出しは太い丸ゴシックで、字間を少し広げる
• 数字は大きな極太書体にして、単位は小さく添える
• 中央揃えを基本にする
• 強調語には黄色の下線マーカーを引く
• 暗い地の上の文字は白か黄色にする
• 注釈は ※ を付けて小さい灰黒で入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードの中にグリッドを入れる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 32px、基本単位 8px、カード内 20px（375px 幅換算）
• カラーの外枠の中に白カードを入れ子にする
• ナビの 4 ボタンは左右に互い違いでジグザグに並べる
• カードの端からキャラクターがはみ出して覗くように置く
• 手順は STEP ラベルと下向きの矢印で縦につなぐ
• リンクボタンは白い帯状で、縦に連続して並べる

Elevation & Depth

• 影はほぼ付けず、フラットにする
• カードと地の差は色だけで出す
• ボタンの立体感は紺の線の枠で出す

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きにする。キャラクターは白フチ付きで切り抜く。月替わりの画像は角丸の枠で囲む
• セクション境界: 直線で区切り、色の外枠を切り替える
• ナビボタンは不規則な多角形にする
• 見出しは両端が垂れたリボン型
• 当選数のバッジは円形で金色のグラデーション
• 終了・近日公開のタグは赤い四角を少し傾けて置く

Components

• 紺のピル型 CTA（button-primary）: 白い太字に右矢印を付ける。中央に置く
• 枠付きのリンク帯ボタン（button-link-frame）: 白地に紺の枠と赤い点線の飾り。赤字で、上にキャラクターが覗く
• 黄色のリボン見出し（ribbon-heading）: 紺の縁取りで、両端が垂れる
• 多角形のナビボタン（nav-polygon）: 赤・青・緑・ピンクの多角形に白文字とアイコンを入れる
• コース別の賞品カード（prize-card）: 色付きの枠にコース名、円形の当選数バッジ、賞品写真を入れる
• 市松のタイトル（checker-title）: 淡いピンクか水色の市松地に、1 文字ずつ離した見出しを載せる
• STEP ラベル（step-label）: 青い四角に白文字。下に矢印を付ける
• 年号ラベル（year-tag）: 緑の四角に白い数字。タイムラインに使う
• 終了バッジ（closed-badge）: 赤い四角に白文字。傾けて重ねる

Do's and Don'ts

Do - セクションごとに原色の外枠を変える - キャラクターをカードの角から覗かせる - 当選数は大きな数字のバッジで見せる - 見出しはリボンと市松で装飾する - 地にはキャラクター柄を薄く敷く

Don't - くすんだ色や落ち着いた色だけで構成しない - 明朝体を使わない - 濃い影やグラデーションの面を多用しない - 白カードを使わずに柄の上へ文字を直接置かない - 余白を広く取りすぎて静かにしない

Page Structure

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

1. ファーストビュー（コラボ企画名と期間を伝える）: パステルの空と雲を背景に、キャラクターが集合したイラストとロゴ風タイトル。下に黄色の期間帯を置く
2. 企画ナビ（4 つの企画へ誘導する）: 白カードの中に、色違いの多角形ボタンをジグザグに配置する
3. 企画①の賞品（賞品と当選数を見せる）: 赤い外枠の中に、コース別の色付きカードを縦に並べる
4. 対象商品（対象商品を示す）: 市松のタイトルの下に、商品パッケージの写真をグリッドで並べる
5. 締切と CTA（応募へ誘導する）: 大きな日付を見せ、紺のピル型ボタンを置く
6. 企画②の SNS 応募（SNS 応募の方法を伝える）: 青い外枠に、トゲ型の吹き出しと STEP の手順を入れる
7. 月替わりのクイズ（毎月の画像と応募リンクを載せる）: 月ごとに色の違う角丸の枠に画像を入れ、枠付きのリンク帯を並べる
8. 応募要項（規約を示す）: 青地の中でスクロールする要項ボックス
9. ゲーム連動（アイテム特典を案内する）: 緑の外枠に商品写真とリンク帯を置く
10. 歩み・沿革（ブランドの歴史を伝える）: ピンクの外枠の中にタブを置き、ミント地のタイムラインに年号ラベルと商品写真を並べる
11. 新商品の告知（関連商品へ誘導する）: 大きなキービジュアルとピル型 CTA、SNS アイコン
12. 問い合わせ・フッター（連絡先と SNS を示す）: 黄色の地に旗の飾りと大きな電話番号。下に SNS アイコンと赤い公式サイトボタン

Imagery

• キャラクターは太い輪郭線とフラットな塗りのアニメ調で描く
• 商品パッケージは白背景で切り抜く
• 地の柄は家・木・カップなど、小さなイラストの繰り返し
• ドット絵のモチーフと音符・キラキラを散らす
• 季節のシーンは原色のイラストで描き込む
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央約 600px に固定し、左右に柄の地を広く見せる
• PC では賞品カードを横長にし、写真を右に置く
• PC の沿革は 3 列のタイムラインにする
• PC のナビボタンは 2×2 の配置にする
• 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 行書くと起動時に読み込まれる。