DESIGN.md — 黒×ネオングリーンの特撮玩具 LP（Neon Green Hero Toy Feature LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、クール・先進的、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: ネオン発光・黒地・極太明朝・CASE番号・トゲ吹き出し・ルビ付き
• 地の質感: 黒地に緑の煙や光のグラデーション。商品はツヤのある透明感で発光させる。
• 形: 角のある四角い見出し帯、トゲ状の吹き出し、斜めのシェブロン矢印
• 温度感: クールで熱量が高い。暗い背景に蛍光緑が浮かび上がる。

Colors

• 地は黒が基本で、緑の煙状グラデーションを左右端に流す
• 見出しは白帯に黒文字か、黒地に白文字のどちらか
• ネオングリーンは発光・帯・パネルに限って使い、文字には使いすぎない
• CASE番号だけ虹色ホログラムのグラデーションにする
• 黄緑は小見出しや矢印のアクセントに使う
• 注釈は白の小さい文字で、黒地の右下に置く

Typography

• 見出しは極太明朝に統一し、迫力を出す
• 漢字には小さいルビを振り、子どもも読めるようにする
• 大コピーは縦書きで写真の左右に置く
• CASEは縦書きの欧文で、数字の横に添える
• 白文字には黒い縁取りや影をつけて写真の上でも読めるようにする
• 効果音はカタカナで、斜めや大きさの変化で動きを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書きコピーを左右に重ねる
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• CASE番号+見出しのブロックで機能ごとに区切る
• 商品写真は画面幅いっぱいに大きく置き、余白は少なめ
• 縦書きコピーは画面の端に寄せて写真と重ねる
• 図解は枠付きパネルを2列で並べる
• モード比較は3つのボックスを矢印でつなぐ

Elevation & Depth

• 商品の周りに緑の外側グロー
• 白い文字に黒い縁取りと落ち影
• パネルは影なしで緑の線で囲む

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きで発光させ、キャラクターは背景と溶け込ませる
• セクション境界: 直線で切り替え、緑の煙グラデーションでなじませる
• 見出し帯は角丸なしの長方形
• 吹き出しはトゲのある多角形
• 矢印は太いシェブロンを重ねる
• パネルは角丸なしで細い枠線

Components

• CASE番号見出し（case-heading）: 縦書きのCASEと虹色の大きな数字、その右に白帯の極太明朝見出しを置く
• 縦書き大コピー（vertical-copy）: 写真の左右に白い極太明朝の縦書きコピーを置き、黒い縁取りをつける
• トゲ型吹き出し（spiky-bubble）: 白地黒枠の尖った吹き出しにセリフや効果音を入れ、商品の周りに散らす
• 緑のまとめ帯（green-band）: 横幅いっぱいのネオングリーン帯に要点を黒い明朝で入れる
• 図解パネル（diagram-panel）: 深緑地に緑の枠線とラベルタブをつけた分解図・側面図のパネル
• モード比較フロー（mode-flow）: 緑のラベル付きボックスを3つ矢印で横に並べ、モードの違いを示す
• シェブロン矢印装飾（chevron-arrow）: 緑の太い山形を重ねて、回転や動きを表す
• ミント説明パネル（info-panel）: ミントグリーン地に黒い明朝で収録内容を2〜3行で説明する

Do's and Don'ts

Do - 黒地に緑の発光を必ず効かせる - 機能は1CASEに1つずつ見せる - 見出しは極太明朝にし、白帯か白文字で強く見せる - 効果音・セリフは吹き出しで商品の周りに散らす - 漢字にルビを振る - 注釈とコピーライトを最下部に小さく入れる

Don't - 淡いパステル地や白地のページにしない - 丸ゴシックややさしい書体を見出しに使わない - 角丸のピル型ボタンにしない - 緑以外の強い色を主役にしない - 余白を広く取りすぎて迫力を失わない

Page Structure

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

1. ファーストビュー（キャラクターと商品で世界観と主な売りを伝える）: 緑に発光するキャラクター写真の上に商品を大きく重ね、左右に縦書きの白い大コピーを置く
2. 商品ロゴ（商品名を印象づける）: 黒地に斜体の白いロゴと小さい欧文のサブタイトル
3. サイズ比較（CASE 0）（従来品と同じサイズであることを示す）: グレーのグラデーション地に商品2つを並べ、斜体のラベルをつける
4. 構造図解（内部の仕組みを見せる）: 深緑のパネル2枚に分解図と側面図を置き、引き出し線で部品名を示す
5. モード紹介（3種類のモードを比べて見せる）: 白帯の見出しの下に、緑のラベル付きボックス3つを矢印でつなぐ
6. 連動機能（CASE 1）（本体玩具と組み合わせたときの遊び方を伝える）: 緑の大きい縦書き文字と本体写真を斜めに置き、効果音の吹き出しを散らす
7. ボイス収録（CASE 2）（収録したセリフを伝える）: 商品の周りにトゲ吹き出しを放射状に並べ、緑の帯で収録数をまとめる
8. 固有効果音（CASE 3）（回転操作で鳴る固有の音を見せる）: 緑のシェブロン矢印と商品写真を置き、収録内容を箇条書きの枠にまとめる
9. BGM収録（CASE 4）（BGM機能を伝える）: 商品写真に音符の吹き出しを添え、ミントのパネルで曲の説明を入れる
10. コピーライト（権利表記を入れる）: 黒地の中央に白い小さな文字

Imagery

• 商品は黒背景で撮り、内側から緑に光るように見せる
• キャラクターは暗い背景で緑のリムライトを当てる
• 背景には緑の煙やもやのテクスチャを重ねる
• 効果音は手描き風の筆文字ロゴで光らせる
• 図解は3Dレンダー風の分解図で部品を色分けする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版がないため、PC は中央 480〜600px の縦長カラムで見せる
• カラムの左右は黒地と緑の煙グラデーションで埋める
• 縦書きコピーと写真の重なりはそのまま保つ
• 図解パネルは 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 行書くと起動時に読み込まれる。