DESIGN.md — 紫紺×ネオン青のアニメコラボ謎解きゲームLP（Dark Neon Anime Collab Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト、情報量多め・訴求型
• キーワード: ダーク・ネオンブルー・紫グラデーション・六角形ドット・赤いV字エンブレム・アニメ
• 地の質感: 中央が明るい青紫のスポットライト状グラデーションに、細かな六角形ハニカムのドット模様を重ねる
• 形: 角丸なしの四角いカードと細い白枠、CTAだけピル型
• 温度感: 寒色主体で赤を差し色にした緊張感のある温度

Colors

• 地は濃紺〜紫のグラデで、各セクション中央を青く光らせる
• ゲーム説明やWEB謎解きなどの区切りは純黒の帯にする
• ストーリーだけは白地に灰色ドットで一呼吸置く
• 赤はV字エンブレム・購入ボタン・注意文字に限定
• 文字は暗い地では白、白地では黒
• カード枠は細い白線、塗りは半透明の濃紺
• button-primary は文字 #FFFFFE × 背景 #E8202F のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E81E2D、4.51:1）を使う。

Typography

• セクション見出しは太い欧文ディスプレイ＋下に小さな日本語の2段組
• 見出しの上に赤いV字エンブレムを重ね、文字を半分隠す
• 本文は明朝の中央揃えで物語っぽく組む
• 注意書きは小さいゴシック、強調部分だけ赤字
• 価格は太字で目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC はポイント3列・キャラ6列・ステップ3列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しはすべて中央揃え
• ゲーム説明は画像と文を左右に交互に並べる
• 仕様情報は4つのアイコンカードを並べる
• 商品カードは同じ幅の枠で並べる
• 特典はフレーム内に左上バッジを重ねる

Elevation & Depth

• 影はほぼ使わず、光るグラデで奥行きを出す
• 見出し文字には弱い外側グローをかける
• カードは半透明の濃紺＋細い白線で浮かせる

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンはピル型。
• 写真の切り抜き: アニメ画像は四角に切り、キャラは縦長の短冊に入れる
• セクション境界: 直線で区切り、黒帯・白帯で切り替える
• カードとフレームは角を立てる
• 赤CTAだけピル型
• サブボタンは黒い四角に白文字
• 仕様アイコンは四隅にL字の括弧線を付ける

Components

• V字エンブレム付き見出し（section-title-emblem）: 赤いV字を背後に置き、太い欧文と小さな日本語を重ねる
• 赤ピル型CTA（button-primary）: 購入・店舗リンク用の赤ボタン。右に三角矢印を付ける
• 白枠の購入ボタン（button-outline）: 商品カード下に置く細い白枠の四角ボタン
• ポイントカード（point-card）: 赤V＋番号見出し、場面画像、白文字の太字説明
• キャラ短冊（character-strip）: 縦長の立ち絵の下に黒紫帯で名前を入れ、白い枠で並べる
• ステップカード（step-card）: 黒帯に赤V＋STEP番号、下は白地にモノクロのピクト
• 商品カード（product-card）: 白線の枠に商品名・写真・価格・内容一覧・購入ボタン
• 角の丸バッジ（badge-corner）: 特典フレームの左上に重ねる小さな濃紺の丸いラベル
• 仕様アイコンカード（spec-icon-card）: 白いシルエットアイコン、四隅の括弧線、下に白枠のラベルと値

Do's and Don'ts

Do - 暗いグラデ地に六角形ドットを必ず敷く - 各セクション見出しに赤いV字を重ねる - 赤は購入動線と強調にだけ使う - 画像は四角く切り、白い細線で囲む - 黒帯・白帯でセクションの区切りを作る

Don't - 大きな角丸やパステル色を使わない - 赤を地の色や広い面に使わない - 見出しを細いフォントにしない - 影の強い立体ボタンを作らない - 白地のセクションを続けない

Page Structure

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

1. ファーストビュー（コラボ世界観とタイトルを見せる）: キャラ集合絵の上に大きなロゴを中央に置き、紫の光で包む
2. ナビゲーション（ページ内移動）: 暗い帯に白い小文字のメニューを5つ横に並べる
3. 場面ビジュアル帯と動画（作品の雰囲気と紹介動画）: ネオン粒子の帯に場面画像を並べ、下に動画の埋め込み
4. ポイント（体験の魅力を3つ示す）: リード文の下に番号見出し付きの画像カードを3つ
5. ストーリー（物語への導入）: 白地＋灰ドットに明朝の中央揃え本文
6. ゲームシステム（遊び方のパートを紹介）: 黒地で画像と文を左右交互に配置
7. キャラクター（登場人物の紹介）: 縦長の短冊6枚を白枠で並べ、下に黒い相関図ボタン
8. WEB謎解きバナー（無料体験への誘導）: 黒帯に白見出しとネオン調ロゴバナー
9. 遊び方（購入からプレイまでの手順）: STEPカード3枚と仕様アイコン4つ、開始日時の黒枠
10. 販売情報（価格と購入先を比べさせる）: 商品カード3枚、店舗名の赤ピルボタンを線で区切って縦に並べる
11. 特典情報（購入特典を示す）: 白線フレームを縦に並べ、左上に丸バッジ
12. グッズ（関連グッズの紹介）: 白地の商品写真カードに名前・価格を付け、赤CTAで一覧へ
13. 関連リンク（シリーズ・原作の案内）: 青と黒のバナーを2つ並べる

Imagery

• アニメ調のキャラ立ち絵と場面カットを主役にする
• 背景は青紫の光とネオン粒子、ハニカムのドット
• 手順や仕様は白黒のフラットなピクト・シルエット
• 特典バナーは太いゴシックに白グロー＋影のゲーム風文字
• グッズは白背景の物撮り
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは3列のカードを縦1列に積む
• キャラ短冊はSPで2〜3列、または横スクロール
• ゲームシステムの左右交互配置はSPで画像を上・文を下にする
• 英字見出しはPC約48pxからSP約34pxに縮める
• ナビはSPでハンバーガーにまとめる
• 赤CTAはSPで横幅80%前後に広げる

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