DESIGN.md — クリーム黄×チョコ茶のキャラ菓子キャンペーンLP（Creamy Chocolate Character Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、情報量多め・訴求型
• キーワード: ミルクチョコ・ゆるキャラ・波形の区切り・クリーム色・番号付きキャンペーン・レトロ丸文字
• 地の質感: 無地のフラット塗り。チョコ片・小さな点・花火のような飾りを散らし、紙もののような温かみを出す
• 形: 溶けたチョコのような大きな波、角丸の白カード、矢印型のSTEPバー、ピル型ボタン
• 温度感: 暖色寄りで甘く柔らかい。差し色の赤とくすみ青でメリハリをつける

Colors

• 地はクリーム黄と白を交互に使う。境界は波形にする
• 文字は黒ではなくチョコ茶で統一する
• 赤は波・期間ラベル・ブランドボタンなど要所だけに使う
• 賞ごとに赤・青・からし黄・モカで色分けし、ラベルと同じ色に揃える
• STEPは淡いピーチ→濃いサーモンへ段階的に濃くする
• フッターはモカ茶の濃色面に白文字で締める

Typography

• キャッチと人数は丸みのあるディスプレイ書体を使い、数字を大きくする
• 欧文見出しは字間を広くとり、下に和文の小見出しを添える
• 本文は中央揃えにし、行間を広めにとる
• 日付は数字を大きく、曜日を小さくして強弱をつける
• 大事な語には黄色マーカーを下に敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品と商品は 2 カラム、キャラ紹介は 2×2
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• キャンペーンごとに番号付きの見出しを置き、縦に並べる
• コースは白い角丸カードに入れ、賞品を縦線で区切って並べる
• 応募STEPは横並びの矢印型。SPでは縦に積む
• セクションの間にチョコ片などの飾りを散らす
• 終了したキャンペーンはグレーの半透明を被せ、白文字で告知する

Elevation & Depth

• 影はほぼ使わず、フラットな面で構成する
• カードは色差だけで浮かせる
• 終了告知は全面に半透明グレーを重ねる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 商品と賞品は切り抜きで配置する。キャラは不定形のブロブ型の色面の上に置く
• セクション境界: 溶けたチョコのような大きな波形。赤・黄・青の波を重ねる
• ボタンとラベルはピル型にする
• 賞品カードは大きめの角丸か、ゆるい有機的な輪郭にする
• STEPは右向きの矢印（シェブロン）で区切る
• 期間ラベルは角丸の小さな帯にする

Components

• 番号付きキャンペーン見出し（campaign-heading）: 字間の広い欧文の見出しに、キャラ耳形の番号バッジを付ける
• キャラ紹介ボタン（button-character）: こげ茶のピル型で、右に三角の矢印を付ける
• 応募ボタン（button-apply）: 大きな角丸ボタンを2つ並べる。上に小さな補足、下に大きな文字
• 賞品コースカード（prize-card）: 生成りの角丸カード。賞の丸バッジ・当選人数の丸・条件のピルを入れる
• 当選人数バッジ（count-badge）: くすみ色の正円に、「合計○名様」を縦に組んで重ねる
• 賞別の色帯（prize-bar）: 賞ごとの色の横帯に白文字の賞名、右に条件文を置く
• 応募STEP（step-chevron）: 3段の矢印型パネル。STEP番号・説明・線画アイコンを入れ、段ごとに色を濃くする
• 規約アコーディオン（accordion-terms）: 白地に茶色の枠線、中央に見出し、右に下向き三角
• 期間ラベル（period-label）: 赤い文字の見出しと点線の下線、または赤い小さな帯に白文字

Do's and Don'ts

Do - 地色はクリーム黄と白を波形で交互に切り替える - 文字はチョコ茶で統一する - 賞と色を対応させ、ラベル・バッジ・帯を同じ色に揃える - キャラは不定形の色面の上に置き、ゆるい雰囲気を出す - チョコ片や点の飾りを余白に散らす - 数字と日付を大きく見せる

Don't - 純黒の文字や硬い直線の区切りを使わない - 濃い影やグラデーションの立体表現を使わない - 鮮やかな色を増やしすぎない（赤・青・黄・茶にとどめる） - 四角いボタンを使わない - 情報を詰めすぎて余白をなくさない

Page Structure

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

1. ヘッダー（ロゴとページ内リンク）: 白地の左にロゴ、右にキャンペーン番号付きのナビ
2. ファーストビュー（コラボの世界観を伝える）: クリーム黄の波の上にキャラ群と商品、赤とチョコ茶のキャッチ。周りに菓子片を散らす
3. ストーリー（商品とキャラのつながりを伝える）: 白地に欧文見出しと中央揃えの短文。下にキャラ4体をブロブ型の色面と紹介ボタン付きで並べる
4. キャンペーン1（メイン）（購入してレシートで応募する懸賞を案内する）: 赤い波で始め、総当選数の大見出し・期間・全員対象のコースカードを置く
5. コース別賞品（時期ごとのコースと賞品を見せる）: 第1〜3弾の帯見出しと、A/B/C賞を3列に並べた生成りカード
6. 対象商品（対象の商品を示す）: パッケージの切り抜きを2列3段に並べ、名前と説明を添える
7. 応募方法（条件と手順を示す）: 賞別の色帯、矢印型の3STEP、レシートの良い例と悪い例
8. 規約・応募CTA（同意を得て応募へ進ませる）: アコーディオン・チェックボックス・大きな角丸ボタン2つ
9. キャンペーン2（SNS）（フォロー＆リポストの懸賞を案内する）: 同じ型で、終了後はグレーを被せる
10. キャンペーン3（店頭）（店頭でもらえるノベルティを紹介する）: 淡いグレー青の地、マーカー付きの見出し、ノベルティ画像2点
11. キャンペーン4（壁紙）（全員にもらえる特典を案内する）: 壁紙4種を縦長で並べ、モカ系の3STEPを置く
12. フッター（問い合わせ先と関連リンクを載せる）: 赤い波の下にモカ茶の面、白文字の連絡先、赤と黄のピル型リンク、SNSアイコン

Imagery

• キャラはフラットな線画風で、寝転ぶ・抱える・寄り添うなどゆるいポーズにする
• 商品と賞品は白背景の切り抜き。正面からまっすぐ写す
• チョコの欠片や板チョコのイラストを斜めに散らす
• 点を集めた円・花火・アスタリスクの小さな飾りを余白に置く
• チェック柄などの手作り感のある柄をノベルティに使う
• アイコンは茶色の単色線画にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPCでも中央の狭い1カラム（約800px）。SPでもほぼ同じ構成にする
• SPでは賞品の3列を横スクロールか1列に変える
• 応募STEPはSPで縦に積み、矢印を下向きにする
• 対象商品とキャラ紹介はSPで2列を保つ
• 波の区切りはSPで高さを抑える（40〜60px）
• 応募ボタン2つは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 行書くと起動時に読み込まれる。