DESIGN.md — 紫×黒×黄の極太見出しアニメコラボ懸賞 LP（Bold Purple Black Anime Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 紫の三角格子柄・黒帯の見出し・黄の帯・赤いピル型ボタン・極太白フチ文字・キャラクター集合絵
• 地の質感: 紫の地に薄い三角格子線を敷く。ボタンには赤のグラデーションとピクセル風のノイズを入れる。
• 形: 黒帯は斜めにカットする。ボタンは金フチのピル型、カードは角丸なしの太枠。
• 温度感: 高彩度で熱量が高い。紫・赤・黄の補色に近い配色で対比を強くする。

Colors

• 地は紫の三角格子柄にし、景品や本文のブロックは白地で区切る
• セクション見出しは黒帯に白の極太文字で入れる
• 強調したい語句や数字は黄にする。小見出しは黄の帯に黒文字
• 赤は応募ボタン・個数バッジ・STEP の帯だけに使う
• 注釈のうち重要なものは赤文字、そうでないものは黒文字にする
• 黄の囲みボックスには赤い枠線と赤文字を組み合わせる
• pt-badge は文字 #CB101B × 背景 #EBC25B のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#F6E2B1、4.53:1）を使う。
• notice-box は文字 #CB101B × 背景 #FCC54B のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AF0E17、4.56:1）を使う。
• rank-ladder は文字 #FFFFFF × 背景 #EBC25B のコントラスト比が 1.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#F6E2B1、4.54:1）を使う。

Typography

• 見出しはすべて極太ゴシックにする。紫地では白文字に黒フチと影を付ける
• 1 つの見出しの中でも、キーワードを黄にし、助詞は小さくする
• 日付は数字を大きく、曜日は小さくする
• 本文と注釈は細めの Noto Sans JP で組み、行間を広めに取る
• 斜めの帯の文字は黄の斜体にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。グッズは 3 列、待ち受け画像は 4 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 50px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しの黒帯は画面幅いっぱいに敷き、右端に赤い個数バッジを重ねる
• 見出しの左上に pt バッジやランクのメダルを食い込ませる
• 景品セクションは白地にし、上端に紫の格子帯を細く残す
• STEP カードは黒の太枠で囲み、上部に赤の帯を付ける
• 応募ボタンは紫地の中央に置き、注意事項に同意する旨の一文を添える

Elevation & Depth

• ボタンには金フチと濃い影を付けて立体的に見せる
• 白フチの見出し文字にはドロップシャドウを付ける
• カードは影を付けず、太い枠線だけで区切る

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: キャラクターのアイコンは金フチの円形で切り抜く。グッズは切り抜きで並べる
• セクション境界: 紫の格子帯、または黒の斜め帯で区切る
• CTA は金フチのピル型にし、右下に外部リンクのアイコンを付ける
• pt バッジは黄の三角形に赤の斜体文字
• 個数バッジは赤の長方形
• 吹き出しは円形で、黄の線を使う

Components

• 応募ボタン（button-primary）: 赤のグラデーションに金フチを付けたピル型。中に白フチの極太文字を入れる。
• 黒帯見出し（section-title-bar）: 幅いっぱいの黒帯に白の極太文字を入れ、上に紫の格子帯を置く。
• 景品見出し（prize-header）: 黒地に黄帯の条件ラベル、左に pt バッジかメダル、右に赤の個数バッジを置く。
• ポイントバッジ（pt-badge）: 左上に置く黄の三角形。赤の斜体文字で pt 数を入れる。
• 個数バッジ（count-badge）: 赤の長方形に白文字で種類数を入れる。
• STEP カード（step-card）: 黒の太枠で囲み、上部の赤帯に白文字で STEP 番号を入れる。
• 注意ボックス（notice-box）: 黄地を赤い枠線で囲み、中に赤文字を中央揃えで入れる。
• 斜め帯（slant-band）: 傾けた黒帯に黄の斜体文字を入れ、コースの区切りに使う。
• ランク階段図（rank-ladder）: 黄から赤へグラデーションする階段の上にメダルを置き、オレンジの矢印でつなぐ。

Do's and Don'ts

Do - 紫の格子地と白の情報ブロックを交互に置く - 見出しは極太文字に白フチ・影を付け、強調語を黄にする - 景品ごとに同じ見出しの型を繰り返す - 注釈は「※」で始め、重要なものだけ赤文字にする - CTA はページ内に複数回置く

Don't - 細い明朝体や淡いパステル系の配色は使わない - 角丸の大きいソフトなカードは使わない - 赤を CTA とバッジ以外に乱用しない - 白地のセクションに格子柄を敷かない

Page Structure

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

1. ファーストビュー（コラボであることの告知）: キャラクターを縦に分割して並べ、中央にロゴを重ねる。黒の太フチで囲む。
2. 企画ナビ（各企画への誘導）: 紫地に赤のピル型カードを 3 つ縦に並べ、右下に黄の矢印を付ける。
3. メイン企画の紹介（企画の内容と達成条件の説明）: 黄地に集合絵を置き、斜めの黒帯でキャッチを入れる。紫地に訴求文を続ける。
4. 達成率マップ（進捗の可視化）: 暗い地にドット地図を描き、大きな % 表示とキャラの吹き出しを添える。
5. ランク説明（購入本数ごとの特典の提示）: 階段図とメダルで段階を示す。
6. ランク特典（景品の紹介）: 景品見出しの下に、円形アイコンや画像と注釈を置く。
7. もれなくコース（全員がもらえる景品の紹介）: 斜め帯を区切りにし、景品カードと番号付きリストを並べる。
8. 抽選コース（抽選景品の紹介）: 当選数を黄のマーカーで強調し、グッズを切り抜きで並べる。
9. 対象商品（購入対象の明示）: 商品写真と黄枠の吹き出しを置き、デザインの種類を一覧で見せる。
10. 対象店舗（購入できる場所の案内）: 黒帯見出しの下に 2 列の箇条書き。
11. 応募方法（手順の説明）: STEP カードを 4 枚並べ、フロー図とボタンを入れる。
12. 注意事項（規約の掲載）: 白地に■付きの小見出しと本文を並べる。
13. よくある質問（疑問の解消）: Q 番号付きの太字の問いに本文の答えを続ける。
14. 最終 CTA（応募への誘導）: 紫地に同意の一文と赤のピル型ボタンを置く。

Imagery

• アニメ調のキャラクター集合絵を、立ちポーズの全身で大きく使う
• SD キャラのアイコンは単色背景の円形で、金フチを付ける
• グッズは白背景の切り抜きに SAMPLE の透かしを入れる
• ピクセル風のグリッチ質感をボタンや地図の背景に使う
• メダル・矢印・マイクのアイコンは単純な形のフラットな描き方にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 70% 幅の固定コンテナを置き、外側は紫の格子柄で埋める
• PC ではナビカードを 1+2 の配置にする
• PC の応募ボタンの横には QR コードを置き、スマホでの閲覧を促す
• 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 行書くと起動時に読み込まれる。