DESIGN.md — 黒地×緑赤青ネオンの電子玩具 LP（Neon Digital Toy Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、力強い・インパクト、情報量多め・訴求型
• キーワード: ネオン・サイバー・3色カラー展開・斜めカット枠・ゲームUI風
• 地の質感: 暗い地にデジタルの格子・ビル群・光の筋を重ね、発光するグラデーションを敷いている
• 形: 角を斜めに落としたパネル、平行四辺形の見出し帯、丸いゲーム画面
• 温度感: 暗い地に寒色と暖色のネオンを混ぜた、高揚感のある温度

Colors

• 地はほぼ黒にして、左右の端から緑・赤・青のネオンを横方向のグラデーションで差し込む
• 3色は商品の3カラーに対応させる。同じ3カラーの並びは常に緑・赤・青の順にする
• 大見出しの文字と帯は黄色にする。白文字の小見出しは黄色の斜め帯に載せる
• 本文は白。注目させたい1行だけを赤か黄色の文字にする
• 注釈は灰色の小さい文字にし、パネルの下の端にまとめる

Typography

• 見出しは極太のゴシックで斜体にし、黒の縁取りか発光を付ける
• 大見出しは1行で言い切って、感嘆符で勢いを出す
• 本文も太字にして、暗い地でも読めるようにする
• 強調したい語は『』で囲むか色を変える。斜体は見出しだけに使う
• 番号は斜体の黄色い数字をバッジにして見出しの頭に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードやアイコンは 3〜5 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 32px、基本単位 8px、カード内 14px（375px 幅換算）
• 各セクションは画面幅いっぱいの黒いバーの見出しから始める
• コンテンツは斜めカットのパネルに入れ、左右に3%ほど余白を取る
• 機能の説明は番号つきのブロックを縦に積み、右に小さな画像を置く
• 3カラーの比較は3列に並べる
• 注釈はブロックの最後にまとめる

Elevation & Depth

• パネルは影ではなく、外側の発光と縁取り線で浮かせる
• 見出しの文字には黒の縁取りと外側の発光を付ける
• 商品写真には、それぞれのカラーの光を後ろから当てる

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: ゲーム画面は円形に切り抜く。商品は切り抜き。カード画像は長方形のまま
• セクション境界: 黒いバーの両端を斜めに落とし、ネオンの線で区切る
• パネルの角は1〜2か所を斜めにカットする
• ラベルは平行四辺形か、片側だけ斜めにした形にする
• 角丸はほぼ使わない

Components

• セクション見出しバー（section-bar）: 画面幅いっぱいの黒いバー。両端を斜めにカットし、中央に白の極太文字を置く
• 黄色の斜め見出し（slant-heading）: 黄色の斜体の大見出し。黒の縁取りと発光を付ける
• サイバー枠パネル（cyber-panel）: 暗い面に灰色の縁取りを付け、角を斜めに落としたパネル
• 番号バッジ（number-badge）: 黄色の斜体の数字。機能の小見出しの頭に置く
• カラー名ラベル（color-label）: 白地に黒の太字。左端にカラーの色の斜めの帯を入れる
• 黄色の帯の小見出し（callout-yellow-band）: 黄色の平行四辺形の帯に、矢印記号と白抜きの見出しを置く
• 円形のゲーム画面（circle-screen）: 円形に切り抜いた画面画像。下に斜めのネームタグを付ける
• 続きタグ（more-tag）: 右下に置く黄色の小さなタグ。続きがあることを示す

Do's and Don'ts

Do - 地は必ず黒にして、ネオンの3色を左右の端から光らせる - 3カラーは同じ順番で並べ、それぞれ同じ色の光を添える - 見出しは極太の斜体で勢いを出す - 機能は番号を付けて分け、短い文で説明する - 注釈は省かずに、小さい灰色の文字で必ず載せる

Don't - 白い地や淡い色の地にしない - 角丸を大きくしたり、ピル型を多用したりして柔らかくしない - 細い明朝体や細いゴシックを使わない - パネルの中に何色ものネオンを混ぜない

Page Structure

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

1. ファーストビュー（世界観と、3カラーの商品を一目で伝える）: キャラ絵の前に商品3色を横に並べ、ロゴは発光させる。背景は都市とデジタルの格子
2. 動画（商品の PV を見せる）: 見出しバーの下に、サイバー枠で囲んだ動画を置く
3. セット内容（カラーの種類と付属品を示す）: 3色を大きく並べ、下にカラー名ラベルを付ける
4. 外観・仕様（サイズと機能部位を伝える）: 寸法線と引き出し線で注記する。最後に黄色の大見出しのまとめを置く
5. 付属カード一覧（同梱物の量と価値を伝える）: カラーごとのパネルに、カード画像を5列のグリッドで並べ、下に名前を付ける
6. ゲーム機能の紹介（遊び方を順に伝える）: 番号つきのブロックを縦に積み、ドット絵や円形の画面を添える
7. バトル・進化（見どころの演出を見せる）: 横長の演出ビジュアルの下に、円形の画面を3列×3段で並べる
8. スクープ情報（隠し要素で期待を高める）: 黄色の帯の見出しと、2列の円形画像のパネル
9. 楽曲・ボイス（収録内容の量を示す）: 暗いパネルに、箇条書きのリストを2列で入れる
10. 通信・連動（他の商品と遊べることを伝える）: 左に文章、右に関連する商品の写真を置く
11. 特典と注釈（特典の内容と注意事項を伝える）: 3色の列にアイテムの円形画像を並べ、最後に注釈と権利表記を置く

Imagery

• 商品は切り抜き写真にし、後ろからカラーの光を当てる
• アニメ調のキャラクターイラストと、ドット絵のスプライトを使う
• 背景は暗い都市のシルエット、デジタルの格子、光の筋を重ねる
• ゲーム画面は円形に切り抜き、細い枠を付ける
• 付属物は正面から撮った画像を同じサイズにそろえてグリッドに並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はない。PC では本文の幅を 960px ほどに制限し、背景のネオンは画面幅いっぱいに広げる
• PC では付属カードを 7〜8 列、円形の画面を 3〜5 列に増やす
• PC の機能ブロックは、左に文章、右に画像の2カラムにする
• 見出しの文字サイズは PC で 1.5 倍ほどにする

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