DESIGN.md — 紺×水色ネオンの宇宙系ロボフィギュアLP（Cosmic Navy Mecha Figure Showcase LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: 宇宙・SF インターフェース・ネオン水色・メカ・コラボ限定
• 地の質感: 星空・光の筋・メカ図面の透かし。コックピット画面風のベゼルフレーム
• 形: 斜めカットの角、六角形、平行四辺形の見出しバー
• 温度感: 寒色中心で冷たい。差し色に紫とマゼンタの光

Colors

• 外枠は黒、内側の各セクションは紺のパネルにする
• 水色ネオンは枠線・英字見出し・光の筋だけに使う
• 本文は紺地に白文字で中央揃えにする
• 紫とマゼンタは装飾セクションの差し色に限る
• 比較展示は左右を紺と暗赤に塗り分ける
• heading-bar は文字 #64ABD7 × 背景 #FDFEFD のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#2D7CAD、4.52:1）を使う。

Typography

• 商品名は明朝の太字にし、白から水色のグラデーションをかける
• 特長見出しは幅広の SF 系英字で、白いバーの中に水色で置く
• 説明文は 2〜4 行に短く区切り、中央揃えにする
• 注釈は※付きの小さな文字で説明文の下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅で、説明文はその上下か横に添える
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 各特長は見出しバー、大きな写真、短い説明の順に並べる
• 写真は斜めに大きく配置し、パネルの外にはみ出させてよい
• 説明文は写真の余白に左右交互に置く
• セクション同士はベゼル状のフレームでつなぐ

Elevation & Depth

• 影は使わず、ネオンの外光（glow）で立体感を出す
• 写真は背景の透かし図面の上に重ねて奥行きを作る
• フレームはメタル調の濃灰と水色ラインの二重線にする

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角版または被写体の切り抜き。部分のアップ写真は斜めカットのコラージュにする
• セクション境界: 角を斜めに落としたコックピット風フレームで区切る
• 角丸は使わず、角は斜めに落とす
• 見出しの左に円形のエンブレムを付ける
• 六角形と三角形を装飾に使う

Components

• 英字見出しバー（heading-bar）: 左に円形エンブレム、右に平行四辺形の白いバー。水色の英字と上に小さなコラボ表記を置く
• SF ベゼルパネル（frame-panel）: 黒い外枠の中の紺パネル。両側に水色のネオン斜線を入れる
• 商品名ブロック（product-title）: 英字シリーズ名、明朝の大きな商品名、英字のサブ名を中央に縦に積む
• 説明テキスト帯（text-band）: 深い紺の帯に白い中央揃えの説明文を数行入れる
• ディテールコラージュ（detail-collage）: 部分のアップ写真を斜めカットで組み合わせ、中央に全身像を置く
• 左右比較展示（split-compare）: 紺と暗赤に塗り分けた背景に 2 体を並べ、組み合わせの展示を見せる
• コラボロゴ並び（logo-lockup）: 2 つのロゴを × でつなぎ、その下に企画名の帯を置く
• 注釈（note-text）: ※付きの小さな灰色の文字。末尾に権利表記を並べる

Do's and Don'ts

Do - 背景は黒と紺の宇宙トーンでそろえる - 商品写真は斜めの構図で大きく見せる - 見出しは毎回同じ型のバーで繰り返す - ネオンの光の筋で動きを出す

Don't - 白や明るい色の背景を広く使わない - 角丸やピル型のやわらかい部品を使わない - 長い文章のブロックを置かない - 暖色の CTA ボタンを目立たせて世界観を崩さない

Page Structure

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

1. ファーストビュー（コラボの世界観と商品を一目で見せる）: 上部にブランドロゴ。星空と光の筋の上にキャラクターと商品を配置し、下に明朝の商品名を置く
2. コラボ企画紹介（企画の背景を伝える）: コラボロゴを × でつなぐ。企画名の帯を置き、その下に中央揃えの説明文
3. ブランド説明（シリーズの価値を伝える）: 左にロゴ枠、右に見出しと短い説明を並べた横組みのカード
4. 商品紹介（商品の全体像を見せる）: 大きな写真を置き、商品名ブロックと 2 行の説明を添える
5. 特長（造形）（スタイルを訴求する）: 見出しバー、斜めの全身写真、白文字の説明の順に並べる
6. 特長（素材）（金属パーツの品質を伝える）: 見出しバー、写真、設計図風の画像、ディテール写真のグリッド
7. 特長（マーキング）（限定の装飾を見せる）: 紫地に斜めカットのコラージュ。下に音声波形風の装飾
8. 付属品とギミック（付属品と可動を紹介する）: 台座写真の後、複数のポーズ写真を左右交互に置き、短い説明を添える
9. 特別展示（別売り商品と組み合わせる楽しさを伝える）: 紺と赤の左右分割背景で 2 体を並べ、3 カットを縦に積む
10. クロージング（世界観の余韻と商品名を再確認させる）: 宇宙背景のキービジュアル、ロゴ 2 つ、商品名、注釈と権利表記

Imagery

• 商品は黒背景で撮る。メタリックな反射を強めた高コントラストの切り抜き写真にする
• 宇宙の星雲・岩片・ネオンの光の筋を背景に合成する
• 背景に機体の線画や大きな英字を薄く透かす
• 部分のアップはシャープなクローズアップにする
• アニメ調キャラのイラストを商品と並べて置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元 LP は全幅の縦長画像を中央に置く構成
• SP では左右のフレーム装飾を細くし、写真を全幅にする
• 見出しバーは SP で幅 90% にし、英字を 20px 前後にする
• PC では 1000px 前後の中央カラムに収め、外側は黒地にする

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