DESIGN.md — 黒×赤紫ネオン煙の変身玩具 LP（Dark Villain Neon Smoke Toy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型
• キーワード: 悪役・ネオングロウ・煙エフェクト・ゴシック・特撮玩具・ボイス収録
• 地の質感: 黒地に色付きの煙とぼかし光。背景に紋章を薄く透かし、六角形の暗い柄も重ねる
• 形: 角ばった枠と斜めにカットした見出し帯、金属質の番号プレート
• 温度感: 寒色の闇に暖色の赤・橙の光が差す、妖しく不穏な温度感

Colors

• 地は黒を基本にし、セクションごとに赤紫・紫・濃紺の煙を重ねて色を切り替える
• 強調語は白文字に赤・紫・橙・水色の外側グロウを付け、キャラごとに色を固定する
• 吹き出しは黒い面に、キャラの色のネオン枠を付ける
• 数字の訴求は大きな白文字に赤いグロウ
• 注釈だけは黄色い帯に黒文字で目立たせる

Typography

• 子ども向けなので漢字にルビを振る
• セリフやコピーは明朝の太字で芝居がかった雰囲気にする
• 強調したい語は他の語より一段大きくし、色のグロウを付ける
• 見出しの文字は白で、黒い縁取りとドロップシャドウを付ける
• 縦書きの大きいコピーを商品写真の左右に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品写真の左右に縦書きコピーを置く
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• 各機能は番号プレートと見出し帯から始め、赤い細線の枠で囲む
• 吹き出しとキャラ写真を左右交互に並べる
• 商品写真は画面幅いっぱい近くまで大きく見せる
• 注釈はセクションの最後に黄色い帯で置く

Elevation & Depth

• 文字にはぼかしの強い色付き外側グロウを付ける
• 吹き出しは枠線の外側をネオン色にぼかして発光させる
• 商品の切り抜き写真には下に暗い影を落とす

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を抜いた切り抜き、人物も切り抜いてグロウの上に置く
• セクション境界: 煙のグラデーションで溶かして切り替え。見出し帯は斜めカット
• 角丸はほぼ使わず、直角か面取りにする
• 番号は石や金属っぽい四角いプレートで表す
• 見出し帯は左から右へ赤いグロウが消えていく横長の帯

Components

• 番号プレート付き見出し帯（numbered-feature-heading）: 金属質の四角いプレートに数字を入れ、右に赤くグロウする帯と白い明朝見出しを続ける
• ネオン枠のセリフ吹き出し（speech-bubble-neon）: 黒い四角にキャラの色の発光枠を付け、白い明朝でセリフを書く
• キャラ名ラベル（character-label）: 人物写真の下端に置く灰色の小さなプレートに、黒文字でモード名を入れる
• グロウ付きセリフコピー（glow-copy）: 黒地の上に、色付きの煙を背負った明朝のセリフを1行ずつ置く
• セット内容タグ（set-item-tag）: 紫のグラデーションの帯に白い明朝で部品名を入れる
• 黄色の注釈帯（note-bar）: セクションの下端に置く黄色い帯。黒い小さい文字で注意書きを書く
• 数字の訴求（big-number）: 大きな白い数字に赤いグロウを付け、前後に小さい明朝を添える
• 赤線のセクション枠（section-frame）: 機能ごとのブロックを赤い細線で囲み、中を暗い半透明にする

Do's and Don'ts

Do - 黒地に色付きの煙とグロウを重ねて、悪役の妖しさを出す - キャラごとに光の色を固定して、吹き出しと写真をつなげる - 見出しとセリフは明朝の太字でドラマっぽく見せる - 漢字にはルビを振る - 注釈は黄色い帯でまとめる

Don't - 白や明るいパステル調の地にしない - 角丸カードやピル型ボタンで柔らかく見せない - グロウなしのベタな文字で見出しを置かない - 丸ゴシックなどかわいい書体を使わない - 光の色を5色以上に増やさない

Page Structure

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

1. ファーストビュー（作品の世界観とキャラの雰囲気を伝える）: 黒地に色違いのグロウを付けたセリフを3行並べ、中央に紋章を煙の中に浮かべる
2. 世界観コピー（物語の続きを期待させる）: 水色の煙の明朝セリフを2〜3行、中央にまとめて置く
3. 商品キービジュアル（商品と出演者をまとめて見せる）: 商品ロゴの下に人物の集合写真と商品写真を置き、左右に縦書きの大きいコピーを入れる
4. セット内容（付属品を明示する）: 紫の六角柄の地に、切り抜き部品と紫のタグを散らして並べる
5. 特長1 ボイス（収録ボイスの魅力を伝える）: 番号見出しの下にキャラ写真とネオン吹き出しを左右交互に並べ、最後に大きな数字で訴求する
6. 特長2 変身（操作と音のギミックを伝える）: 人物と怪人の写真の間に商品と矢印を置いて手順を見せ、黄色の注釈帯で締める
7. 特長3 付属パーツ（付け替えの楽しさを伝える）: 部品と＋記号の式で見せ、怪人写真と付け替え後の商品をコラージュする
8. 注釈・権利表記（仕様の注意と著作権を示す）: 黄色の注釈帯と、黒地に小さい灰色のコピーライト

Imagery

• 商品は正面から撮って背景を抜き、金属の質感を見せる
• 人物は暗い衣装で切り抜き、後ろにキャラの色のグロウを敷く
• 背景は煙・霧のテクスチャと薄い紋章を重ねる
• 使い方の手順は太い黄色や赤の矢印で示す
• 六角形の暗い柄で背景に機械っぽさを加える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP 構成を置き、左右は黒で埋める
• PC では吹き出しとキャラ写真を横に広げ、2カラムで並べてもよい
• グロウのぼかしは画面幅に合わせて大きくする
• 縦書きの大きいコピーは PC でも商品写真の左右に残す

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