DESIGN.md — 黒×赤×緑のアニメコラボ食品キャンペーンLP（Anime Collab Red-Green Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、クール・先進的、ポップ・元気
• キーワード: 赤と緑の対比・SF・メカ調・斜めカット・極太イタリック・賞品訴求・黒背景
• 地の質感: 星雲の写真背景、薄いグリッド線の地、ドット飾り。全体にマットでフラット。
• 形: 角を斜めに落とした多角形の帯とカード。四隅に小さなドットの飾り。
• 温度感: 熱く高揚した雰囲気。赤が主役で、緑が対になる。

Colors

• 冒頭は星雲調の黒地。赤と緑を左右に分けて二者を対比する。
• 購入キャンペーンは焦茶の外地に白カードを置き、カード内は赤の面で区切る。
• SNSキャンペーンは緑の面で、購入キャンペーンの赤と対にする。
• ラベルと応募ボタンは黒地に白文字。赤い矢印を添える。
• 強調数字は赤、または黒地に白抜きの極太で入れる。
• 本文は白地に黒。注釈はグレーで小さく入れる。
• section-ribbon は文字 #E7E1DC × 背景 #CD1517 のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C81516、4.53:1）を使う。
• float-badge は文字 #E7E1DC × 背景 #CD1517 のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C81516、4.53:1）を使う。

Typography

• 見出しは極太で、右に傾けた斜体を基本にする。
• 赤地や写真の上の見出しには白縁か影を付ける。
• セリフ風コピーだけは明朝の斜体にして、他と差をつける。
• 数字は見出しより一回り大きくして目立たせる。
• 本文は太めのゴシックで中央揃え。注釈は左揃え。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 白カードは焦茶地から左右に約 7% 内側へ置く。
• 賞品ブロックは、黒帯ラベル→コピー→賞品名→画像カードの順に並べる。
• 商品は 2 列。画像の下に商品名を中央揃えで置く。
• STEP は縦に並べ、間に下向きの三角を入れる。
• 応募ボタンは賞品の後と応募方法の後に置く。

Elevation & Depth

• 影はほぼ使わずフラットに保つ。
• 動画のサムネイル枠にだけ薄い影を付ける。
• 見出しの白縁と影で立体感を出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は白抜き。賞品写真は白枠の四角。数量バッジは黒丸。
• セクション境界: 斜めにカットした段差と、ドット柄の帯で区切る
• 角丸は使わず、角を斜めに落とした多角形にする。
• ラベル帯は左右を斜めにカットした平行四辺形にする。
• 四隅に小さな 4 点ドットを飾る。
• 当選人数は黒丸に白抜きの斜体文字で示す。

Components

• セクションナビボタン（nav-tab）: 白地に色枠の3分割。右下に色付きの三角を置く。
• 応募ボタン（button-primary）: 黒い横長の帯。左右に赤い三連矢印を置き、白の斜体文字を入れる。
• 斜めカットの黒帯ラベル（label-band）: 右寄せの平行四辺形。白の斜体文字とドット飾りを付ける。
• 赤帯の項目見出し（section-ribbon）: 白カード内で台形の赤帯を使い、白文字で項目名を示す。
• 賞品カード（prize-card）: 赤地の上に置く白枠の写真カード。角に黒丸の当選数バッジを付ける。
• 当選数バッジ（count-badge）: 黒丸に白抜きの斜体で人数を入れる。
• STEPカード（step-card）: グレー面に黒枠。赤のSTEP番号と黒い説明文を入れ、間を三角でつなぐ。
• 発売情報ボックス（info-box）: 黒地に細い白線の枠。中に発売情報を白い小さな文字で入れる。
• 丸型の誘導バッジ（float-badge）: 赤い丸に紋章と白文字。キャンペーンへの導線として右に置く。

Do's and Don'ts

Do - 赤と緑を左右に分けて、二者の対比を常に見せる。 - 見出しとラベルは極太の斜体にする。 - 角は斜めにカットして、メカ風の形にする。 - 賞品ごとに、ラベル・コピー・写真・人数を同じ型で繰り返す。 - 応募ボタンは黒帯と赤矢印に統一する。

Don't - 角丸やピル型のボタンを使わない。 - パステル調の淡い色を主役にしない。 - 細い書体で見出しを組まない。 - 大きな影やグラデーションのボタンを使わない。 - 赤と緑のどちらか一方だけで構成しない。

Page Structure

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

1. ファーストビュー（コラボの世界観と商品を一目で伝える）: 星雲の背景にキャラ2人を左右に配置。上部に極太の白コピーと商品画像を置く。
2. セクションナビ（動画と2つの応募へ誘導する）: 白帯の上に、色枠のボタンを3つ並べる。
3. 限定商品紹介（発売商品と時期を知らせる）: 黒地に商品を2列で並べ、数量限定ラベルと線枠の情報ボックスを添える。
4. スペシャルムービー（動画で関心を高める）: グリッド線の白地に、斜めカット枠の動画サムネイルを置く。
5. 購入キャンペーン概要（応募期間と仕組みを伝える）: 焦茶地に白カードを置き、赤帯の見出しの下に期間を極太で示す。
6. 賞品コース（ポイント別の賞品を見せる）: 赤地に黒帯ラベル、明朝のセリフ、白枠の写真、黒丸バッジを繰り返す。
7. 応募CTA（応募へ進ませる）: 黒帯に赤矢印のボタンを置き、下に注釈を添える。
8. 対象商品一覧（対象となる商品を示す）: 白地にカップ画像を2列のグリッドで並べ、限定品は黒枠で囲む。
9. 応募方法（手順を示す）: 3つのSTEPカードを縦に並べ、三角でつなぐ。
10. 注意事項・問い合わせ（規約と窓口を示す）: 白地に小さな文字で箇条書きにする。
11. SNSキャンペーン（フォローと投稿での応募を促す）: 緑地に白カードを置き、購入キャンペーンと同じ構成で緑版にする。

Imagery

• アニメ調のキャラクターが商品を食べる、大判のビジュアル。
• 宇宙・星雲風の赤と緑のグラデーション背景。
• 商品は切り抜きで、正面からやや俯瞰で見せる。
• 賞品写真は白背景の物撮り。
• 背景には薄い紋章の透かしと、グリッド線を敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅約 70% のカードを置き、外側は赤・緑のグリッド地にする。
• PC の賞品コースは写真とテキストの2列にし、左右を交互に入れ替える。
• PC の商品一覧は 4 列、STEP は横 3 列にする。
• PC の FV はキャラをコピーの左右に配置する。

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