DESIGN.md — 紫×青ネオンの玩具コラボ商品LP（Neon Purple Blue Collab Toy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: ネオン発光・紫と青の対比・ドット絵・コラボ感・斜めラベル・宇宙的グラデーション
• 地の質感: 星雲のような紫青グラデーションに、光のにじみとスパークを重ねます。
• 形: 平行四辺形の斜めラベル、細枠の半透明パネル、横長の帯見出しを使います。
• 温度感: 寒色の青と暖色寄りのマゼンタ紫を左右でぶつけ、緊張感を出します。

Colors

• 地は濃紺から紫へのグラデーションで、全面を暗くします。
• ゴジラ側には紫・マゼンタ、相手側には青を当て、左右で対比させます。
• 強調したい語は黄色文字にします。白文字は基本の見出しに使います。
• 名称ラベルは黒または青の平行四辺形に白文字をのせます。
• POINT番号のラベルは金橙一色に限ります。
• 注釈は淡灰の極小文字にして、本文とは明るさで差をつけます。

Typography

• 見出しは極太の明朝を斜体気味に使い、ゲームらしい重さを出します。
• 見出しにはすべて黒の縁取りかドロップシャドウを付けます。
• 1見出しは2〜3行までにし、各行を中央で揃えます。
• 強調語だけを黄色にし、1文の中に白と黄色を混ぜます。
• 注釈は※を頭に付け、極小の中央揃えでブロックの直下に置きます。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャラ紹介は 2 列、ドット絵は 8 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションは横幅いっぱいの見出し帯から始めます。
• 商品写真は画面幅の80〜90%まで大きく見せます。
• ドット絵は半透明パネルに等間隔で並べます。
• 各ブロックの末尾に注釈を置きます。
• POINTごとに背景のグラデーション位置を変え、区切りを見せます。

Elevation & Depth

• 商品とキャラの背後に、白〜紫の放射状の光を入れます。
• 見出し文字には黒のドロップシャドウを付けます。
• パネルは半透明の白地に細い枠線を引き、影は付けません。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品とキャラは背景を抜いた切り抜きで、発光をにじませます。
• セクション境界: グラデーションの濃紫の帯で区切ります。上下に光のラインを入れます。
• ラベルは平行四辺形の斜めカットにします。
• 角丸はほぼ使いません。
• パネルは直角の矩形にします。
• 矢印は太いシェブロン形にします。

Components

• セクション見出し帯（section-band）: 横幅いっぱいの濃紫帯に白い極太明朝の見出しをのせ、上下に発光ラインを引きます。
• POINT番号ラベル（point-label）: 左上に斜めカットの金橙ラベルを置き、POINTと番号を書きます。
• 斜め名称ラベル（slant-name-tag）: 商品・キャラ名を黒または青の平行四辺形に白文字で入れます。
• ドット絵グリッドパネル（dot-grid-panel）: 半透明パネルにドット絵キャラを8列で整列させます。
• 機能小見出しラベル（feature-sub-label）: 淡紫の台形ラベルに機能名を書き、下に説明パネルを続けます。
• 画面遷移フロー（flow-panel）: 濃紺パネルに画面のドット絵を矢印でつなぎ、斜めの吹き出しで補足します。
• 枠線バッジ（badge-outline）: 細い白枠の矩形に仕様をひとこと書いたバッジです。
• 注釈（note-text）: ※付きの極小灰文字で、中央揃えにします。

Do's and Don'ts

Do - 全面を暗いグラデーションにし、商品を光らせて主役にします。 - コラボの両者を紫と青に割り当て、左右で対比させます。 - 強調語には黄色の極太明朝を使います。 - 機能はPOINT番号で区切り、順に見せます。 - ドット絵は等間隔のグリッドで整列させます。

Don't - 白やパステルの明るい地にしないでください。 - 角丸のピル型ボタンや柔らかい装飾は使わないでください。 - 細いゴシックで見出しを組まないでください。 - 黄色以外の強調色を増やさないでください。 - 写真を四角い枠に収めて発光を消さないでください。

Page Structure

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

1. ファーストビュー（コラボの対決感と商品を一目で伝えます。）: 怪獣のイラストを背景に、2色の商品を大きく並べます。上にはコラボ表記とロゴを置きます。
2. ムービー（動画で世界観を補います。）: 見出し帯の下に、16:9の動画埋め込みを大きく置きます。
3. 商品情報（2種のラインナップと印刷の特徴を示します。）: 黒と青の名称ラベル、商品写真2点を並べます。その下に黄色の強調文を置きます。
4. 商品詳細ビュー（各面のデザインを見せます。）: 展開図の写真と立体写真を斜めの光帯の上に置き、名称ラベルを付けます。
5. 特長POINT1 収録キャラ（収録数の多さを伝えます。）: 半透明パネルにドット絵を8列で並べます。
6. 特長POINT2 新キャラ（目玉のキャラを紹介します。）: キャラのイラストを2列で並べ、ドット絵と名称ラベルを添えます。
7. 特長POINT3 合体進化（特別な遊び方を示します。）: 左右のキャラから中央へ矢印をのばし、合体後のキャラを見せます。
8. 特長POINT4 振り子機能（操作の仕組みを説明します。）: 画面遷移のフロー図と吹き出しで説明します。
9. 特長POINT5 連動・サポート（シリーズとの互換性と便利機能を伝えます。）: 機能名ラベルと説明パネルを縦に積みます。
10. 注意事項（権利表記と注意を載せます。）: 極小の注釈を中央揃えでまとめます。

Imagery

• 商品は背景を抜いた立体写真にし、後ろから白紫の光を放射させます。
• キャラは劇画調のCGイラストにし、翼や棘を画面外まではみ出させます。
• ドット絵は荒いピクセルのまま拡大し、にじませないでください。
• 背景は星雲調の紫青グラデーションにし、光の粒を散らします。
• 斜めの光の帯で奥行きとスピード感を出します。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像はないため、以下はPCに広げるときの推奨です。
• PCでは中央に幅750px前後のカラムを置き、両脇に背景グラデーションを広げます。
• ドット絵グリッドは10〜12列に増やします。
• キャラ紹介は3〜4列に広げます。
• 見出しの文字サイズはSPの約1.4倍にします。

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