DESIGN.md — クリーム×ピンク水玉のキャラコラボ菓子キャンペーンLP（Pastel Character Collab Snack Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、親しみ・手作り感
• キーワード: 水玉地・こげ茶縁取り文字・キャラクターイラスト・肉球の角飾り・お菓子色・二重枠カード
• 地の質感: 白い小さな水玉を散らしたパステル地。イラストは手描き風の線画にフラットな塗り
• 形: 角丸の枠カード、リボン型の見出し帯、ピル型SNSボタン、ゆるい円弧のセクション境界
• 温度感: 暖色寄り。クリーム・ピンク・焼き菓子の茶色で甘く温かい

Colors

• 地色はクリームとピンクの水玉をセクションごとに交互に切り替える
• 文字・枠線は黒を使わずこげ茶で統一する
• 情報カードはアイボリーか白の面にこげ茶の二重線枠
• 黄色は見出しの下線マーカーとキラキラ装飾に限定
• 特別コンテンツだけ青の水玉地で目立たせる
• FVの3導線カードはピンク・茶・水色で色分けする
• nav-card は文字 #F27B93 × 背景 #FFFFFF のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#E81A43、4.51:1）を使う。
• badge-date は文字 #FFFFFF × 背景 #FE3B3C のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#EE0102、4.53:1）を使う。

Typography

• 大見出しはこげ茶文字に白い太フチと薄い影
• 本文は中央揃え・行間広めで短い行に改行
• 強調語は文字を大きくし黄色マーカーを敷く
• 小見出しの前後に斜線「＼ ／」を添える
• 注釈は左揃え・小さく・※で始める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。導線カード3列、手順4列、対象商品2列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 枠カードは左右4%ほどの余白で横幅いっぱい
• 見出しは枠カード上辺に重ねて配置
• キャラクターを見出しの左右やセクション境界に配置
• 画像と本文は中央寄せで縦に積む

Elevation & Depth

• 影はほぼ使わずフラット
• 見出し文字に下方向の薄い影
• 応募開始ボタンに濃い下影で立体感
• 商品パッケージ画像に柔らかい落ち影

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品・賞品は切り抜き。キャラクターは背景なしのイラスト配置
• セクション境界: 大きな円弧（丘型）で地色を切り替え、境界にキャラクターを並べる
• 枠カードの四隅に肉球マークを置く
• 見出しはリボン帯型の枠で囲む
• 手順カードは上辺に番号を切り欠きで乗せる
• SNSボタンはピル型で太い黒縁

Components

• FV導線カード（nav-card）: 色違いの太枠角丸カード3枚。見出し・画像・下矢印
• 期間表示帯（period-bar）: こげ茶帯に白枠ラベルと期間を2行
• 二重枠カード（framed-card）: アイボリー面にこげ茶二重線、四隅に肉球
• リボン見出し（ribbon-heading）: カード上辺に重なる帯型見出し
• 応募手順カード（step-card）: 白角丸カード4列、上に番号、線画アイコン＋ラベル
• 応募ボタン（button-primary）: ピル型、点線の内枠、下に濃い影
• 発売日バッジ（badge-date）: 赤い丸型ギザ縁に白文字2行
• 規約スクロール枠（scroll-box）: 白面こげ茶枠の内部スクロール
• SNSボタン（button-sns）: 各SNS色のピル型、右に矢印

Do's and Don'ts

Do - 水玉地をクリームとピンクで交互に使う - 文字・線はこげ茶に統一する - 見出しの周りにキャラクターやお菓子のイラストを置く - カードの四隅に肉球などの小さな飾りを入れる - キラキラ装飾を黄色で余白に散らす

Don't - 純黒の文字や細い線を使わない - 寒色を広く使わない（特別枠以外） - 直角でシャープなカードにしない - 写真の背景付き画像をそのまま並べない - 本文を長い行で左揃えにしない

Page Structure

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

1. ファーストビュー（コラボの世界観と3つの見どころを示す）: 全面イラストにリボン型ロゴ、下に色違い導線カード3枚
2. 期間表示（キャンペーン・レシート期間を示す）: こげ茶帯に白枠ラベル付き2行
3. コラボ紹介（コラボの背景を伝える）: ピンク水玉地、記念ロゴ、大見出し、中央揃え本文、周囲にお菓子画像
4. 限定商品（新商品と個包装デザインを紹介）: 二重枠カード内に商品画像・発売日バッジ・カルーセル
5. プレゼント賞品（当選数と賞品を訴求）: クリーム地、当選数の丸バッジ、大コピー、賞品画像を左右交互に配置、仕様の注釈
6. 対象商品（対象商品を一覧化）: 枠カードに商品パッケージを1＋2列で並べ、下に注釈
7. 応募方法（応募手順を示す）: ピンク地、4ステップカード、下向き三角、応募ボタン
8. 無効レシート例（NG例を示す）: 角丸枠内にレシート図と×印を2列
9. 応募規約（規約を掲示）: 白いスクロール枠、見出し左右にイラスト
10. 特別コンテンツ予告（公開予定を告知）: 丘型境界の青水玉地、白文字見出しとCOMING SOON
11. キャラクター紹介（キャラの魅力を伝える）: 斜めの大イラスト、下に二重枠の紹介文
12. SNS導線（公式アカウントへ誘導）: 斜線付き小見出しとピル型SNSボタン

Imagery

• 手描き風の茶色い線画にパステルのフラット塗りのキャラクター
• 焼き菓子・紅茶・プリンなどお茶会モチーフを散らす
• 商品パッケージや賞品は切り抜きで正面配置
• 肉球・キラキラ・音符などの小さな装飾
• 格子柄の布の上に置いた俯瞰構図のメインビジュアル
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に最大幅約750pxのSPレイアウトを置く
• 左右余白には水玉地を広げる
• FVイラストは中央カラム内で拡大
• グリッドの列数は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 行書くと起動時に読み込まれる。