DESIGN.md — 漆黒の宇宙背景×白機体のホビー模型 LP（Dark Cosmic Hobby Model Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 宇宙空間・漆黒・純白の機体・切り抜き写真・メカ・重厚
• 地の質感: 星屑と青紫の星雲がにじむ暗い宇宙のテクスチャ。写真は光沢のある模型の質感。
• 形: ほぼ角のない四角。写真は切り抜きか細い枠の矩形。ボタンだけ角丸。
• 温度感: 寒色寄り。黒と青紫の冷たい空間に、赤のアクセントを効かせる。

Colors

• 地は常に黒〜濃紺。白背景のセクションは作らない。
• 背景には青紫の星雲のにじみを部分的に入れて奥行きを出す。
• 見出しは白、本文は明るいグレー、注釈は濃いめのグレーで3段階に分ける。
• 赤は購入ボタンと製品の差し色だけに使う。
• 青紫は見出しの縦バーや光彩に限定する。
• 金はブランドバッジだけに使う。
• brand-badge は文字 #E8ECF4 × 背景 #C9A23C のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#816724、4.55:1）を使う。
• button-primary は文字 #E1E2E5 × 背景 #D8221E のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C41F1B、4.56:1）を使う。

Typography

• 見出しは極太ゴシックで、白に薄い影や光彩を付ける。
• FVのコピーは縦書き2行で、強い言葉をかぎ括弧で囲む。
• 本文は小さめ・行間広めで、写真の横の空いた所に置く。
• 英字の型番は小さなコンデンス体で、和文の上に添える。
• 明朝や丸ゴシックは使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム基本。写真と本文は左右交互に重ねて配置
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 32px、基本単位 8px、カード内 8px（375px 幅換算）
• 製品写真は画面幅いっぱいか、はみ出すほど大きく置く。
• 本文ブロックは画面の右半分または左半分に寄せ、写真と重ねる。
• 見出しは縦バー付きで左寄せ、左右の余白は約8px。
• 詳細写真は細い枠付きの矩形で2〜3枚並べる。
• 商品情報は最後にバッジ・商品名・価格・説明の順で縦に並べる。

Elevation & Depth

• 写真や文字の後ろに青紫の光彩・ぼかしを入れる。
• 見出し文字に黒いドロップシャドウを付けて背景から浮かせる。
• ボタンは上から下への赤グラデーションと、軽い立体感。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品は背景を抜いた切り抜き。ディテール写真は細い枠付きの矩形。
• セクション境界: 区切り線は入れない。背景の星雲のにじみで自然につなぐ。
• カードや囲み枠はほぼ使わない。
• ボタンだけ角丸8px程度にする。
• 見出しバーは幅4〜5pxの縦長の長方形。

Components

• 縦書き大コピー（hero-vertical-copy）: FVの右側に縦書き2行で置く白い極太コピー。
• 縦バー付き見出し（heading-bar）: 左に青紫の縦バー、続けて白の極太見出し。
• キャラクター紹介ブロック（character-callout）: 人物イラストの横に、小見出し・英字型番・機体名・短い説明を縦に積む。
• ディテール写真枠（detail-photo-frame）: 細いグレー枠で囲んだ拡大写真。2〜3枚を横に並べる。
• ブランドバッジ（brand-badge）: 金の小さなロゴ風バッジ。商品名の左に置く。
• 商品名・価格（price-block）: 白太字の商品名と、その下に小さく税込価格。
• 購入ボタン（button-primary）: 赤のグラデーションに白太字。ページ下部の中央に置く。
• 注釈（note-text）: ※で始まる小さなグレーの注釈。

Do's and Don'ts

Do - 黒い宇宙の背景に、白い製品をとにかく大きく置く。 - 見出しには必ず青紫の縦バーを付ける。 - 本文は写真の空いた所に重ねて、短く2〜4行に収める。 - 赤は購入ボタンに集中させ、目立たせる。 - ディテールは拡大写真を枠付きで見せる。

Don't - 白や明るい背景のセクションを入れない。 - 丸ゴシックやパステル色で柔らかくしない。 - 製品写真を小さなサムネイルだけにしない。 - 赤や金を装飾に多用しない。 - ピル型ボタンや大きな角丸カードを使わない。

Page Structure

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

1. ファーストビュー（シリーズ名と製品の世界観を一気に伝える）: 上部にロゴ群。製品2体を大きく切り抜きで置き、右に縦書きの大コピー。
2. キャラクター紹介（製品の背景設定を伝える）: 左に人物イラスト。横に英字型番・機体名・短い説明を積む。
3. リード文（商品化の告知）: 白太字2行を画面幅いっぱいに。
4. 特長1（成形色）（色の再現性を訴求）: 縦バー見出しの下に、大写真と右寄せの本文を重ねる。
5. 特長2（デカール）（付属品の価値を訴求）: 右側に縦バー見出しと本文。下に枠付きの拡大写真を2枚。
6. 特長3（装備）（大型装備の再現を訴求）: 見出しと1行の説明。続けて装備写真を大きく、説明を交互に配置。
7. 拡張性（他製品との組み合わせを提案）: 白太字2行の見出し。組み合わせ例の写真に、パーツの写真枠と短い説明を添える。
8. 商品情報（商品名・価格・仕様の提示）: バッジ・商品名・価格を左に。説明文と付属品一覧、右に製品の切り抜き。注釈を小さく。
9. CTA（購入へ誘導）: 中央に赤のグラデーションボタンを1つ。

Imagery

• 製品は真っ黒な背景で、スタジオ撮影したものを切り抜く。
• 斜め下から見上げる迫力のあるアングルにする。
• 背景は星屑と青紫の星雲。ところどころに光のにじみを入れる。
• 人物はアニメ調の全身イラストで、小さめに添える。
• ディテールは寄りの写真で、マーキングや可動部を見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約750px幅のカラムを置き、左右に宇宙背景を広げる。
• PCでは特長ごとに、写真と本文を左右2カラムで交互に並べる。
• FVの縦書きコピーは、PCでも縦書きのまま右側に大きく置く。
• 購入ボタンはPCでも中央配置で、幅は約320pxまで。

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