DESIGN.md — 赤×緑二分割のポップなキャラ菓子キャンペーンLP（Pop Kids Character Snack Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: 二色分割・ドット柄・ルビ付き・白フチ文字・波線区切り・キャラクター
• 地の質感: 細かい水玉やアイコン柄を地に敷き、フラットな塗りの上に白フチ・黒フチの立体感を足す
• 形: 円形フレーム、ピル型ボタン、波形の帯、星形バッジ、太い黒枠の角丸パネル
• 温度感: 高彩度の暖色（赤・黄）と寒色（水色・緑）を交互に置いた、にぎやかで温かい配色

Colors

• 地の色はセクションごとに、赤緑の二分割→黄→水色→赤緑→淡黄の順に切り替える
• 赤と緑は二つの味を表し、商品ラベルや帯も同じ色で揃える
• 主CTAは黄色地に白文字と濃いフチ、サブボタンは赤地に白文字
• 注意文の重要な行は赤文字にし、さらに黄色マーカー線を引く
• パネルは黒の太枠に黄色の内枠を重ね、中はクリーム色にする
• heading-burst は文字 #64AD5C × 背景 #FEFEFE のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#488242、4.58:1）を使う。
• speech-banner は文字 #FEFEFE × 背景 #F08A00 のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#AE6400、4.5:1）を使う。

Typography

• 子ども向けなので漢字に小さなルビを振る
• 見出しは白フチや濃い色のフチで立体的にする
• 本文は中央揃えにして、一文ずつ短く改行する
• 大事な数字は周りの文字の約1.5倍にして目立たせる
• 注意事項だけは左揃えの角ゴシックで読みやすくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品の並びも縦に積む
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央に置き、背後にトゲのある白い放射形をつける
• 商品は円形フレームに入れ、その下にラベル帯を重ねる
• 遊び方は黒枠パネルの中で白いステップカードを縦に並べ、間に丸い下向き矢印を入れる
• キャラクターは画面の左右の端にはみ出すように配置する

Elevation & Depth

• ボタンは下側に濃い色の厚みを付けた立体表現にする
• ぼかした影は使わず、太い枠線とフチ取りで奥行きを出す
• カードはフラットな白地で、影はごく弱くするか付けない

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は白丸の中に色付きリングで囲み、キャラクターは輪郭で切り抜いて白フチを付ける
• セクション境界: 波形（スカラップ）の境界線
• ラベル帯は縁を波形にした角丸の帯にする
• STEP番号は星形のバッジにする
• パネルの見出しは黒枠のピル型にして、パネルの上辺に重ねる

Components

• 主CTAボタン（button-primary）: 黄色の角丸ボタン。下側に厚みがあり、白い太字に濃いフチ、右端に丸い再生アイコン
• 一覧へのボタン（button-secondary）: 赤いピル型ボタン。白い二重枠に白文字、右端に＋アイコン
• 放射形の見出し（heading-burst）: 白いトゲの放射形の上に多色の見出しを置き、左右に丸いアイコンを添える
• 商品円フレーム（product-circle）: 白丸を赤または緑のリングで囲み、下に同じ色の波形ラベル帯を重ねる
• 種類数バッジ（count-badge）: 白丸の中に赤字で数字を大きく入れ、上に小見出しを付ける
• ステップカード（step-card）: 白いカードに星形のSTEP番号、スマホ画面のイラスト、短い説明文を入れる
• 遊び方パネル（how-to-panel）: 黒い太枠と黄色の内枠のパネル。中はクリーム色の方眼で、上に黄色いピル型の見出しを付ける
• オレンジの吹き出し帯（speech-banner）: 黒枠のオレンジ色の角丸帯で、下に三角の尾が付く。白文字で特典を伝える
• 注意事項ボックス（notice-box）: 白地を緑と黒の枠で囲み、上に赤いピル型の見出し（警告アイコン付き）。重要な行は赤字やマーカーで示す

Do's and Don'ts

Do - 地の色をセクションごとにはっきり変え、境界は波線にする - 見出しにはルビと白フチを必ず付ける - 二つの味を赤と緑で一貫して色分けする - キャラクターや菓子のシルエットを余白に散らしてにぎやかにする - ステップの間は丸い矢印で上から下へつなぐ

Don't - くすんだ色やモノトーンの地にしない - 細い明朝体や細字のゴシックを見出しに使わない - ぼかした影やガラス風の表現を使わない - 大人向けの長い文章を詰め込まない - 柄のない無地の大きな面を広く残さない

Page Structure

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

1. ファーストビュー（キャンペーン名と対象の商品を一目で伝える）: 赤と緑の二分割にドット柄。中央に多色のタイトル、左右に商品パッケージ、周りにキャラクター、下に種類数バッジを3つ
2. 菓子の形の紹介（菓子の形の楽しさを見せる）: 黄色のドット地。放射形の見出しの下に、キャラクターと菓子の円形写真を交互に並べ、赤いピル型ボタンで一覧へ誘導する
3. 対象商品（どの商品が対象かを示す）: 水色のアイコン柄の地。商品の円形フレームと波形のラベル帯を縦に並べる
4. 企画の説明（遊びの目的と期間を伝える）: 赤緑の二分割の地に大きな多色見出しと中央揃えの白文字本文。星形の期間バッジの両側にキャラクター
5. 遊び方（手順を3つのステップで示す）: 黒枠のクリーム色パネルに、STEPカードと丸矢印を縦に並べる
6. 特典の紹介（集めたときのご褒美を予告する）: オレンジの吹き出し帯の下に、黄色い枠のカードと矢印、？マークの画面イラスト
7. CTA（カメラ機能の起動へ誘導する）: 二分割の地の上に、立体的な黄色い大きなボタンを置く
8. 注意事項（動作環境や利用上の注意を伝える）: 白い枠のボックスに箇条書き。赤字とマーカー線で強調する
9. 関連アニメの紹介（関連するコンテンツへ興味をつなげる）: 淡い黄色のストライプ地に、オレンジの中央揃え本文とオレンジ枠のポスター画像

Imagery

• キャラクターはアニメ調のフラットな塗りにし、白フチで切り抜いて画面の端からはみ出させる
• 菓子の写真は白い円の中に真上から撮って置く
• スマホ画面の手順はデバイスの枠付きイラストで描く
• 背景は小さな水玉やテーマに合うアイコン柄、大きな輪っかを淡い色で敷く
• 菓子のシルエットを紙吹雪のように散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央の約1000pxにコンテンツを収め、背景の二分割や柄は画面幅いっぱいに広げる
• 菓子の紹介はPCで2列に並べる
• 対象商品はPCで3列に並べる
• 遊び方のステップはPCで横に3列並べ、矢印を横向きにする
• アニメ紹介はPCで画像を左、本文を右の2カラムにする

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