DESIGN.md — 真紅×生成りのキャラコラボ菓子キャンペーンLP（Bold Red Character Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 真紅・斜め切り替え・キャラクター・応募キャンペーン・パッケージ柄・STEP図解
• 地の質感: 赤地に濃淡の赤い四角タイル柄、生成り地に半透明の板チョコ片を散らした平面的な質感
• 形: 斜めに切った帯・平行四辺形ラベル・矢羽根型のSTEP枠、角丸は小さめ
• 温度感: 暖色・高彩度で熱量が高い

Colors

• 地は真紅と生成りを交互に使い、境界は斜めに切る
• 真紅地のテキストは白、最重要の数字・賞品名だけ黄
• 生成り地のサブキャンペーンはピンクまたは緑をテーマ色にし区画ごとに統一
• 商品一覧は赤地上の白パネルに載せて可読性を確保
• 主CTAは赤地と補色になる緑で目立たせる
• 赤地には濃淡の赤い四角タイル柄を薄く敷く
• button-primary は文字 #FFFFFF × 背景 #02AC44 のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#028936、4.53:1）を使う。
• period-label は文字 #FFFFFF × 背景 #EB4E83 のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E51C60、4.5:1）を使う。

Typography

• 全体を太字ゴシックで統一し中央揃え
• 当選数などの数字は周囲の2倍程度に拡大
• 英字ラベルは-8°程度傾けアウトライン処理
• 日付は曜日と時刻まで1行で表記
• 注釈は※付きの小さい文字で左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品・賞品は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各キャンペーンは英字ラベル→見出し→期間→賞品→応募方法→規約の順
• STEPは横並びの矢羽根型枠（SPは縦積み推奨）
• 規約・FAQは全幅のアコーディオン帯
• キャラクターは区画の端からはみ出させて配置
• 商品一覧は白パネル内2列

Elevation & Depth

• 基本はフラット、影なし
• 主CTAとフッターボタンは斜めの濃色ずらし影
• カードは影より細枠線で区切る

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラクターは切り抜きで区画をまたぐ、賞品画像は縦長長方形
• セクション境界: 斜めのカット（左上がり・右上がりを交互）
• ボタンは平行四辺形か小角丸の長方形
• ラベルは台形・平行四辺形の帯
• STEP枠は右端を矢印型に
• 円形バッジで限定特典を示す

Components

• 斜め英字セクションラベル（section-label-en）: 区画境界に重ねる傾いたアウトライン英字
• 主CTAボタン（button-primary）: 緑の平行四辺形、矢印付き、濃色ずらし影
• 応募期間ラベル（period-label）: 小さい色帯ラベルの下に太字日付
• STEPカード（step-card）: 斜体STEP番号の色帯ヘッダ＋アイコン＋説明
• 規約アコーディオン（accordion-bar）: 白地黒枠、右端に▼
• コラム切替タブ（tab-switch）: 黄土色の3連タブ
• 限定特典の円バッジ（badge-circle）: 赤やピンクの円に白文字2〜3行
• キャラ選択ボタン（character-select）: キャラ色の帯に小画像と名前、▼付き
• 商品カード（product-card）: パッケージ画像＋太字商品名＋説明＋NEW丸バッジ

Do's and Don'ts

Do - 赤と生成りの区画を斜め境界で交互に置く - キャラクターを大きく切り抜いて区画をまたがせる - 数字・当選数は特大太字にする - 区画ごとにテーマ色（ピンク・緑）を統一する - 応募手順はSTEP番号付きで図解する

Don't - 細い明朝や繊細な書体を使わない - 赤地に黒の長文を置かない - くすんだ中間色を主役にしない - 大きな角丸やピル型でやわらげすぎない - 規約を本文に展開せずアコーディオンに収める

Page Structure

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

1. ヘッダー（ロゴとアンカーナビ）: 白帯に赤の現在地タブ、区切り線付き英字メニュー
2. ファーストビュー（コラボの世界観提示）: 赤タイル柄地に縦積みの特大コピー、2キャラを大きく配置し下部を白へ斜めに抜く
3. ストーリー（企画趣旨の説明）: 白地に赤英字見出しと短文、キャラ別の選択ボタン2つ
4. コラム・クイズ（ブランド理解と参加誘導）: 赤地にタブ付きスクロール枠、下部に3択クイズ、左右にミニキャラ
5. SNS投稿特典（投稿キャンペーン案内）: 生成り地、円バッジ＋ピンク見出し、特典画像3枚、2STEP
6. メインキャンペーン（購入応募の賞品訴求）: 赤地に第1弾・第2弾の賞品ブロック、当選数を黄の特大数字で
7. 全員プレゼント（限定特典の訴求）: 黄文字見出しと縦長壁紙3枚
8. 対象商品（購入対象の提示）: 白パネルに2列商品カード、下段に3列
9. 応募方法（手順説明）: 3STEPのイラスト付き枠、レシート撮影の良い例・悪い例
10. SNSフォローキャンペーン（手軽な参加誘導）: 生成り地に緑テーマ、3STEPと緑の主CTA
11. 店頭キャンペーン（店頭購入特典）: 赤地に黄見出し、グッズ画像を3＋2で並べる
12. 問い合わせ・フッター（窓口と関連リンク）: 白地に電話番号大きく、バナーと赤の斜めボタン2つ、SNSアイコン

Imagery

• アニメ調の全身キャラクターを白縁なしで切り抜き
• デフォルメのミニキャラを装飾に添える
• 商品パッケージは正面の物撮り
• 生成り地に半透明の板チョコ片を散らす
• 赤地に濃淡の正方形タイル柄
• STEPは線画の簡素なアイコン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約80%幅で組み、左右は赤やグレー地を延長
• SPは1カラム、STEPは縦積みに変更
• 商品カードはSPも2列を維持
• FVコピーはSPで画面幅いっぱいに縦積み
• キャラクターは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 行書くと起動時に読み込まれる。