--- version: alpha name: Neon Game Collab Prize Campaign LP description: 格闘ゲームとキャラクターのコラボで、アミューズメント景品を紹介するLP。黒地にネオン紫の帯見出しを置き、第一弾は水色方眼、第二弾はオレンジ方眼の面で色分けする。インクのしぶきの装飾と紫グラデのボタンで、ゲームらしい勢いを出している。 colors: primary: '#844979' background: '#9BC7F9' background-alt: '#F2BB92' dark-section: '#262A3B' on-dark: '#F7EFE3' accent-1: '#FFE14A' accent-2: '#1B95EB' accent-3: '#F26A1E' cta: '#7A2FC0' on-cta: '#FFF3A0' tint-1: '#E3CEDA' text: '#333333' secondary: '#B23CB6' surface: '#F3F0ED' accent-2-accessible: '#1070B4' accent-3-accessible: '#B9490B' secondary-accessible: '#AE3BB2' typography: display: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS 1p fontSize: 20px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: M PLUS 1p fontSize: 16px fontWeight: 800 lineHeight: 1.4 headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 800 lineHeight: 1.3 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.6 label-button: fontFamily: M PLUS 1p fontSize: 15px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 22px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.04em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 12px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-panel: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 85px section-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 80px item-title-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 30px splash-heading: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 100px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 50px date-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 30px label-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px step-list: textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px news-frame: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 220px --- # DESIGN.md — 水色×オレンジのゲームコラボ景品LP（Neon Game Collab Prize Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: ネオン発光・インクスプラッシュ・方眼グリッド地・弾ごとの色分け・斜めカット帯 - **地の質感**: 薄い方眼グリッドと斜線ストライプを敷いた面に、ペイントのしぶきを重ねたストリート調 - **形**: 角を斜めに落とした多角形パネル、角丸の大きいカード、下が三角に尖る帯見出し - **温度感**: 寒色の水色と暖色のオレンジを交互に置き、黒と紫で締めて高い熱量を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#844979` | ネオン紫（見出し帯の縁・ボタン） | 8% | 画素の主要色に補正 | | `background` | `#9BC7F9` | 第一弾セクションの水色方眼地 | 30% | 画素の実測 | | `background-alt` | `#F2BB92` | 第二弾セクションのオレンジ方眼地 | 28% | 画素の実測 | | `dark-section` | `#262A3B` | メニュー部と見出し帯の黒地 | 8% | 画素の主要色に補正 | | `on-dark` | `#F7EFE3` | 黒帯上の白文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#FFE14A` | 見出し内の強調黄色 | 1% | 推定 | | `accent-2` | `#1B95EB` | ナビのネオン青パネル | 2% | 画素の実測 | | `accent-3` | `#F26A1E` | ナビのネオン橙パネル | 2% | 推定 | | `cta` | `#7A2FC0` | 紫グラデの主ボタン | 2% | 推定 | | `on-cta` | `#FFF3A0` | ボタン上の文字 | 0% | 推定 | | `tint-1` | `#E3CEDA` | NEWS部の薄ピンク灰地 | 3% | 画素の実測 | | `text` | `#333333` | 本文・注釈の濃灰文字 | 1% | 推定 | | `secondary` | `#B23CB6` | 日付・ラベルピルの紫ピンク | 1% | 画素の実測 | | `surface` | `#F3F0ED` | セクション間の白に近い外地 | 4% | 画素の実測 | | `accent-2-accessible` | `#1070B4` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#B9490B` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#AE3BB2` | AA を満たす補正値（計算） | | 計算 | - 第一弾は水色地、第二弾はオレンジ地にして、時期で面の色を切り替える - 大見出しは黒帯に紫のネオン縁を付け、キーワードだけ黄色にする - ボタンは紫グラデに薄黄の文字を載せ、右端に区切りと矢印を置く - インクしぶきは地色の反対色にする（水色地には橙、橙地には水色） - セクション同士は白に近い外地で区切り、角丸カードとして浮かせる - 数量や名数の強調には紫ピンクを使う - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 黒帯の大見出し | ゴシック | Dela Gothic One | 900 | 28px | 1.3 | 0.02em | | `headline-lg` | しぶき上の弾タイトル・期間 | ゴシック | M PLUS 1p | 900 | 20px | 1.3 | 0.0em | | `headline-md` | 商品名の黒帯見出し | ゴシック | M PLUS 1p | 800 | 16px | 1.4 | 0.0em | | `headline-sm` | ナビパネルのラベル | 丸ゴシック | M PLUS Rounded 1c | 800 | 15px | 1.3 | 0.0em | | `body-md` | キャンペーン説明の本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.7 | 0.02em | | `note` | サイズ表記・注釈 | ゴシック | Noto Sans JP | 700 | 9px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | M PLUS 1p | 800 | 15px | 1.2 | 0.02em | | `accent` | 英字見出し（NEWSなど） | 欧文サンセリフ | Montserrat | 900 | 22px | 1.1 | 0.04em | - 見出しは極太のゴシックで、黒帯の上に白文字と光彩を組み合わせる - しぶき上の文字は白抜きにし、濃紺の縁取りを付ける - サイズ表記は『サイズ：』の後に数値を続け、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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-b34b1fec`（元 LP の URL から採番） - **元 LP**: https://www.capcom.co.jp/amusement/streetfighter6-hololive/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。