DESIGN.md — 水色×オレンジのゲームコラボ景品LP（Neon Game Collab Prize Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: ネオン発光・インクスプラッシュ・方眼グリッド地・弾ごとの色分け・斜めカット帯
• 地の質感: 薄い方眼グリッドと斜線ストライプを敷いた面に、ペイントのしぶきを重ねたストリート調
• 形: 角を斜めに落とした多角形パネル、角丸の大きいカード、下が三角に尖る帯見出し
• 温度感: 寒色の水色と暖色のオレンジを交互に置き、黒と紫で締めて高い熱量を出す

Colors

• 第一弾は水色地、第二弾はオレンジ地にして、時期で面の色を切り替える
• 大見出しは黒帯に紫のネオン縁を付け、キーワードだけ黄色にする
• ボタンは紫グラデに薄黄の文字を載せ、右端に区切りと矢印を置く
• インクしぶきは地色の反対色にする（水色地には橙、橙地には水色）
• セクション同士は白に近い外地で区切り、角丸カードとして浮かせる
• 数量や名数の強調には紫ピンクを使う
• nav-panel は文字 #F7EFE3 × 背景 #1B95EB のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#1070B4、4.6:1）を使う。
• splash-heading は文字 #F7EFE3 × 背景 #F26A1E のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#B9490B、4.58:1）を使う。
• date-tag は文字 #F7EFE3 × 背景 #B23CB6 のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AE3BB2、4.53:1）を使う。
• label-pill は文字 #F7EFE3 × 背景 #B23CB6 のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AE3BB2、4.53:1）を使う。

Typography

• 見出しは極太のゴシックで、黒帯の上に白文字と光彩を組み合わせる
• しぶき上の文字は白抜きにし、濃紺の縁取りを付ける
• サイズ表記は『サイズ：』の後に数値を続け、9px前後の小さな太字で左に寄せる
• 注釈は※を頭に付け、小さな文字で左揃えにする
• 見出しは中央揃え、本文は左揃えにする
• 日付は数字を大きくし、曜日を括弧で囲む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。商品画像は4列か2列のグリッドに並べる
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• 各大セクションは角丸の色面カードにし、白に近い外地との間に約40pxの余白を取る
• 商品ブロックは『帯見出し→サイズ表記→画像グリッド→注釈』の順で繰り返す
• 商品名の帯見出しはカード幅いっぱいに置き、右端を斜めにカットする
• 弾の切り替えは、色面の境目をペイントの筆跡で波打たせて表す
• CTAボタンはセクション末尾に置き、幅は約90%にする

Elevation & Depth

• ナビパネルとボタンには外側の発光を付ける（ネオン調のglow）
• 大見出しの帯は紫の発光ラインで上下を縁取る
• カード自体の影は付けないか、ごく弱くする
• 商品写真は切り抜きにして、ごく薄いドロップシャドウを付ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景透過の切り抜き、店舗・料理は角丸なしの長方形写真
• セクション境界: ペイントの筆跡でできたギザギザの境界と、下が三角に尖る黒帯見出し
• ナビパネルは角を斜めに落とした八角形風にする
• CTAボタンは左下と右上を斜めにカットし、右端に矢印の区画を設ける
• ラベルや賞品見出しはピル型を使う
• 大セクションは下の角だけ大きく丸める

Components

• ネオンナビパネル（nav-panel）: 黒地の上に青と橙を交互に置き、3列×2段で並べる。角を斜めに落とし、発光させた目次ボタン
• 黒帯大見出し（section-banner）: 黒の帯に紫の発光縁を付け、下を三角に尖らせる。キーワードは黄色にする
• 商品名帯（item-title-bar）: 黒から紫（または青）へのグラデ帯で、右端を斜めにカットし、白文字を中央に置く
• しぶき見出し（splash-heading）: インクしぶきの上に、弾名と期間を縁取りした白文字で載せる
• 紫グラデCTA（button-primary）: 斜めカットした紫グラデのボタン。文字は薄黄で、右端に矢印の区画がある
• 発売日タグ（date-tag）: 商品名帯の左に付ける小さなタグ。紫か青の地に白文字で日付を入れる
• ラベルピル（label-pill）: 『参加方法』や『賞品内容』に使う紫ピンクのピル型見出し
• 番号付き手順（step-list）: 紫の丸数字と本文で、3ステップの参加方法を示す
• NEWS枠（news-frame）: 紫のしぶきの上にNEWSの英字を置き、両端を括弧型の線で囲んだ日付と下線リンクの一覧

Do's and Don'ts

Do - 弾ごとに水色と橙の地色を切り替え、時期がひと目でわかるようにする - 商品ブロックは同じ型（帯→サイズ→画像→注釈）で繰り返す - 地には方眼と斜線ストライプを薄く敷き、ゲームUIらしさを出す - 見出しやボタンには発光と斜めカットを付けて統一する - 商品画像は4列の整ったグリッドで、点数がわかるように並べる

Don't - 角丸の柔らかいボタンだけで構成しない - パステル調の淡い配色に寄せすぎない - 地色を弾の途中で変えない - 黒帯見出しに明朝体を使わない - しぶき装飾を本文の上に重ねない

Page Structure

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

1. ファーストビュー（コラボのビジュアルと期間を伝える）: キャラクターの集合イラストを全面に置き、中央にロゴ、右下に期間の六角形バッジを置く
2. 目次ナビ（各企画へ誘導する）: 黒地に青と橙のネオンパネルを3×2で並べ、下に横長のパネルを1つ置く
3. お知らせ（最新情報の告知）: 薄ピンク灰の地に紫しぶき見出しを置き、日付と下線リンクを2件並べる
4. 景品紹介（第一弾）（商品ラインナップを見せる）: 黒帯の大見出しの下を水色方眼地にし、商品帯と画像グリッドを繰り返す
5. 景品紹介（第二弾）（後半の商品を見せる）: 筆跡の境界からオレンジ地に切り替え、同じ型を繰り返して末尾にCTAを置く
6. オンライン限定景品（オンラインゲーム側の景品を紹介する）: 黒帯見出しの下に水色と橙の2弾構成を置き、最後にCTAを置く
7. 投入特典（条件付きでもらえる特典の案内）: 発売日タグ付きの商品帯で、日付順に並べる
8. コラボ店舗（実店舗への来店を促す）: しぶき見出しで期間を示し、店舗写真を3枚縦に並べてCTAを置く
9. 投稿キャンペーン（SNS投稿への参加を促す）: 告知バナー、項目表、ピル見出し、番号付き手順の順に置く
10. フォローキャンペーン（抽選プレゼントの案内）: 2弾構成で、バナー、説明、賞品ピル、点線リーダー付きの内訳を並べる
11. カフェコラボ（飲食店コラボの告知）: メインビジュアル、料理写真、グッズ価格表を順に置き、店舗別のCTAを2つ並べる
12. フッター（権利表記）: 黒帯に小さな白文字を置き、六角形のTOPボタンを付ける

Imagery

• キャラクターは太い線のアニメ調イラストで、ストリート系の衣装と大胆なポーズにする
• 商品写真は白背景の切り抜き。アクリルや缶バッジを真正面から撮る
• 装飾は飛び散ったペイントのしぶきと筆跡にする
• 地には細かい方眼と、斜めのストライプ模様を薄く敷く
• 店舗写真や料理写真は明るい実写で、俯瞰か斜めの構図にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央に約640px幅の1カラムで置き、内容はSPと同じにする
• PCの左右余白は、白っぽい地にキャラクター線画を淡く敷く
• PCのファーストビューは横長にトリミングし、ロゴを右寄せにする
• ナビパネルはPCでも3列のまま縮小して使う

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