DESIGN.md — 宇宙紺×ネオングリーンの模型商品 LP（Neon Green Space Dark Hobby Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 宇宙背景・ネオン発光・ダーク・商品写真主役・メカ・縦長カタログ
• 地の質感: 星が散る濃紺の宇宙グラデーションの上に、発光感のある緑を重ねる。
• 形: 角はほぼ直角。見出しの左に緑の縦バーを置き、ボタンだけ角を丸める。
• 温度感: 寒色で、夜のようにクールな印象

Colors

• 地はかならず濃紺〜黒にして、明るい地のセクションは作らない。
• 緑は見出しバー・発光・CTA だけに使い、面積は全体の5%以下にとどめる。
• 見出しと本文は白にし、注釈は薄いグレーにする。
• 商品名ロゴは水色→白のグラデーション文字で、緑とは色の役割を分ける。
• 白いパネルは素材表示などの情報を載せる場所に限り、1〜2か所にとどめる。
• button-primary は文字 #DFE3E4 × 背景 #4FA82A のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#35711C、4.6:1）を使う。

Typography

• 本文も太字にして、暗い地でも読める濃さを保つ。
• 英字の商品名は全部大文字の詰めたサンセリフにし、グラデーションか光彩をかける。
• 見出しは2行以内に収め、白の極太で書く。
• FVのキャッチは縦書きにし、写真の左右の端に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅で配置し、文字は左揃え
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 32px、基本単位 8px、カード内 12px（375px 幅換算）
• 見出し→短い説明2行→大きな写真、の順で1ブロックにする。
• 写真を2〜3枚重ね、斜めに躍動感を出して配置する。
• 本文の左右余白は約10pxと狭くする。
• 最後に左に文字・右に写真の2分割で商品情報をまとめる。

Elevation & Depth

• 影はほとんど使わず、商品のネオン発光（緑のグロウ）で奥行きを出す。
• CTAボタンには上から下への明るいグラデーションと薄い影を付ける。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 背景を透過した切り抜き写真を宇宙背景に重ねる
• セクション境界: 直線か背景グラデーションで切り替え、区切り線は入れない
• カードや枠は使わず、背景の上に直接置く。
• ボタンだけ小さく角を丸める。
• 見出しバーは幅6〜8pxの緑の縦長矩形にし、上下に光彩を付ける。

Components

• 緑バー見出し（heading-neon-bar）: 左に緑の発光する縦バーを置き、白の極太見出しを2行で並べる。
• 英字商品名タイトル（title-gradient）: 水色から白へのグラデーションをかけた大文字の英字を2行で置き、下に白の和文名を添える。
• 縦書きキャッチ（vertical-catch）: 白い明朝の縦書きに緑の縁取りを付け、FV写真の左右の端に重ねる。
• 白い仕様パネル（info-panel）: 素材表示やパッケージ画像を載せる白い横長のパネル。
• 仕様アイコン（icon-badge）: 赤い禁止マークの付いた小さな正方形アイコンを2つ並べ、短い説明を添える。
• 写真キャプション（caption-note）: 写真の隙間に置く小さな白文字の補足。
• 購入ボタン（button-primary）: 緑グラデーションの横長ボタンで、白の太文字を入れ、中央に置く。

Do's and Don'ts

Do - 商品写真は大きく扱い、緑の発光が映える暗い背景を保つ。 - 特長1つにつき、見出し・2行の説明・写真を1セットにする。 - 仕様アイコンや注釈で、商品の手軽さを補足する。 - 最後に価格と仕様をまとめ、その直後に CTA を置く。

Don't - 白やパステルの明るい地をセクション全体に使わない。 - 緑を本文や広い面に使わない。 - 丸みの強い可愛いフォントや装飾を入れない。 - 写真に枠や角丸を付けて小さく収めない。

Page Structure

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

1. ファーストビュー（商品の世界観を一目で伝える）: 地球と宇宙の背景に大きな商品写真を置き、左右の端に縦書きキャッチ、上部にシリーズロゴを配置する。
2. 商品名タイトル（正式な商品名を示す）: 黒帯に英字のグラデーションタイトルを置き、下に白の和文名を添える。
3. 仕様・素材の説明（環境配慮素材であることや付属物を伝える）: 白いパネルにロゴとパッケージ画像を載せ、下に注釈を置く。
4. 商品概要（商品の魅力を要約する）: 黒地に白の太字本文を4〜5行並べる。
5. 特長1（成形色の魅力を見せる）: 緑バー見出しの下に前後2体の写真を並べ、仕様アイコンを添える。
6. 特長2（付属パーツとポーズの幅を見せる）: アクションポーズの写真を3枚ほど重ねて配置し、キャプションを付ける。
7. 特長3（付属台座を紹介する）: 台座に飾ったポーズ写真を2枚並べる。
8. 特長4（付属シールなどを紹介する）: 説明文とランナー写真・付属品の一覧写真を組み合わせる。
9. 商品情報・CTA（価格と仕様を示して購入へつなげる）: 左に商品名・価格・付属品・注釈、右に商品写真を置き、下に緑の購入ボタンを中央配置する。

Imagery

• 商品は背景を切り抜き、宇宙背景の上に重ねる。
• 黒い機体に蛍光グリーンが光る見せ方にし、周囲に緑の光彩を足す。
• 背景は濃紺の星空グラデーションにし、FVだけ地球や光線を入れて迫力を出す。
• ポーズ写真は斜めや躍動的な角度で撮り、重ねて配置する。
• 付属品は整列させた俯瞰写真で見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では 750px 前後の中央カラムに SP と同じ構成を置く方法を推奨する。
• 左右の余白は同じ宇宙背景で埋め、画面全体の世界観をそろえる。
• 最後の商品情報は PC でも左右2分割を維持する。
• 写真の拡大は最大 2 倍までにとどめ、画質の劣化を防ぐ。

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