DESIGN.md — パステル帯×えんじ文字のお菓子キャンペーンLP（Pop Candy-Color Character Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: パステル地色の帯・白い角丸パネル・えんじ色の太字・黄色のアクセント・キャラクター玩具・レシート応募
• 地の質感: フラットな単色の面。立体感はキャラクター写真だけで出し、面はベタ塗り
• 形: 角丸の白パネル、六角リボン型ラベル、吹き出し、ピル型の強調帯
• 温度感: 明るく暖かい。子ども向けで楽しく賑やかな印象

Colors

• セクションごとに地色を水色→クリーム→ピンク→黄緑と切り替え、内容のまとまりを色で示す
• 地色の上には必ず白い角丸パネルを置き、本文はパネルの中に入れる
• 文字は黒を使わず、えんじ色に統一する
• 黄色は見出しの下線、リボン型ラベル、手順ボックスに限って使う
• 赤は当選数などの数字を強調するピルにだけ使う
• 注意・NG例は青、OK例は赤の記号で色分けする
• badge-highlight は文字 #FEF5F4 × 背景 #E60012 のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#E30012、4.58:1）を使う。

Typography

• 見出しは極太の丸みあるゴシックで、中央揃えにする
• 本文も太めのウェイトで、えんじ色の中央揃えにする
• 日付や数字は本文より大きく太くし、曜日は小さくする
• 小見出しは短い語にして、下に黄色の太線を引く
• 注釈は9〜10pxで、見出しとの差をはっきりつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品・壁紙のグリッドは 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 30px、基本単位 8px、カード内 22px（375px 幅換算）
• 白パネルは左右に約14pxの余白をとり、色付きの地を額縁のように見せる
• パネル同士の間には地色を約30px見せる
• パネル内の要素は中央揃えで縦に積む
• 手順やリストは左揃えのブロックにして中央に置く
• ファーストビューはパネルなしで全幅のビジュアルにし、下に締切の帯を敷く

Elevation & Depth

• 影はほぼ使わず、フラットに作る
• 白パネルと地色のコントラストだけで面を分ける
• キャラクター写真の立体感だけを奥行きとして使う

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラクターは切り抜いて背景なしで置く。動画と壁紙は角丸なしの長方形にする
• セクション境界: 地色を直線で切り替える。ステップ帯の間だけ下向きのV字で区切る
• 白パネルは角丸14px
• ラベルは左右がとがった六角形のリボン型
• 強調には赤のピル型や吹き出しを使う
• ボタンは角丸8px程度の長方形にする

Components

• 白い角丸パネル（panel-white）: 色付きの地の上に載せるコンテンツの器
• 黄色下線の小見出し（heading-underline）: 小さな太字の下に、パネル幅いっぱいの黄色い太線を引く
• リボン型ラベル（label-ribbon）: 黄色の六角形に、えんじの太字で項目名を入れる
• 当選数の強調ピル（badge-highlight）: 赤地に白抜きの大きな数字を入れたピル
• 締切の帯（deadline-bar）: ファーストビュー下の黄色い全幅帯。左にえんじのタグ、右に大きな日付
• キャラクターの吹き出し（speech-bubble）: 黄色の角丸吹き出しにキャラクターのセリフを入れ、横にイラストを置く
• 応募ステップ帯（step-band）: 水色の濃淡3段に、STEP番号・説明・線画アイコンを入れる
• 規約アコーディオン（accordion-bar）: えんじの帯に白文字を入れ、右端に▼を置く
• 応募ボタン（button-primary）: 同意のチェック前は灰色の無効状態。2段組の文字を入れる

Do's and Don'ts

Do - セクションごとに地色のパステルを変える - 文字は全てえんじ色の太字にする - 見出しの装飾は黄色の下線とリボンでそろえる - キャラクターは切り抜いて、色違いのバリエーションを並べる - 日付と数字は大きく太くする

Don't - 黒文字や細いウェイトを使わない - 白パネルなしで地色の上に直接本文を置かない - グラデーションや強い影を多用しない - 落ち着いたくすみ色を使わない - 1つのパネルに複数の地色を混ぜない

Page Structure

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

1. ファーストビュー（賞品と当選数を一目で伝える）: 空色の地に虹と芝生を描き、キャラクターを並べる。右下に当選数のバッジ、下に締切の黄色い帯を敷く
2. 賞品の紹介（キャラクターの背景と魅力を伝える）: 白パネルにロゴ見出し、下線つき小見出し、紹介文を置く。続けて吹き出しとキャラクター、動画を配置する
3. キャンペーン1の詳細（応募条件と賞品を示す）: クリーム地の白パネルに、赤ピル・大見出し・応募期間の明細を置き、4種のキャラクターを丸ラベル付きで並べる
4. 遊び方の説明（商品の遊び方を伝える）: 黄色の正方形ボックスに、番号付きの3手順を線画イラストと組み合わせて入れる
5. キャンペーン2の詳細（全員がもらえる特典を示す）: ピンク地の白パネルに見出しを置き、縦長の壁紙サンプルを3列×2段で並べる。1枠は灰色のシークレットにする
6. 対象商品（購入する対象を明確にする）: 黄緑地のパネル内に、商品パッケージのグリッドと黄色い丸の箇条書きを置く
7. 応募方法（応募の手順を示す）: 水色の濃淡3段のステップ帯に、線画アイコンを入れる
8. レシート撮影の注意（無効な応募を防ぐ）: レシートの見本に番号を付け、えんじの帯で項目を示す。赤○のOK例と青×のNG例を対比させる
9. 規約・応募CTA（同意を得て応募へ導く）: 規約アコーディオン、同意チェック、2段の応募ボタンを縦に並べる
10. お問い合わせ（窓口を案内する）: 黄色のリボン見出しの下に、えんじのラベルと連絡先・対応期間を中央揃えで置く

Imagery

• ソフビ風のキャラクター玩具を、背景なしの切り抜きにする
• 色違いのバリエーションを横一列に並べ、色付きの丸ラベルを添える
• 手順は白とオレンジの線画イラストにする
• アイコンはえんじ色の太い線画（レシート・PC・スマホなど）にする
• ファーストビューは虹・雲・芝生のイラスト調の背景にする
• 動画のサムネイルは暗い赤の背景で玩具を接写する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも中央寄せの1カラムにし、白パネルの最大幅は約1000pxにする
• 遊び方の3手順はPCで横3列に並べる
• 応募ステップはPCで横並びにし、矢印型の区切りでつなぐ
• レシート見本と注意文はPCで左右2カラムにする
• 応募ボタン2つはPCで横並びにする
• 応募期間の明細はPCで1行ずつ詰めて表示する

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