DESIGN.md — 漆黒×金メッキの宇宙系模型ホビー LP（Cosmic Black Gold Hobby Model Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 宇宙空間・金メッキ光沢・メカ・発光文字・赤枠ディテール・黒地
• 地の質感: 星雲が入った黒〜紺の宇宙写真を地に使う。金属の鏡面反射とグロー（発光）を強めに出す
• 形: 四角が基本。赤い細枠の角丸なし写真パネル、左端に金色の縦バーを付けた見出し、角丸の光沢ボタン
• 温度感: 寒色の宇宙に、暖色の金を差す高コントラスト

Colors

• 地は漆黒と宇宙写真だけにする。白い背景の面は作らない
• 金は商品写真と英字見出しのグローに限って使う
• 写真の拡大パネルや比較パネルは赤い細枠で囲む
• 見出しの左端には金→青のグラデーションの縦バーを付ける
• 注意書きの強調はオレンジ、購入ボタンは青の光沢グラデーション
• button-primary は文字 #FFFFFF × 背景 #1E7FE0 のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1C77D3、4.54:1）を使う。

Typography

• 和文の見出しは太い明朝にして重厚に見せる
• 英字の型番は細めのサンセリフにし、金色の外側グローを付ける
• 本文は白のゴシックで小さめ。行間は狭めにする
• パーツ名は細い引き出し線と小さなラベルで示す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は斜めや左右にずらして重ねて配置
• 本文ブロックの幅: 画面幅の約 95%
• 余白: セクション間 40px、基本単位 8px、カード内 8px（375px 幅換算）
• 商品写真は画面幅いっぱいか、はみ出すほど大きく置く
• テキストは左寄せ。左右の余白は約8px
• 大きな写真の背後に、薄暗いシルエット写真を重ねて奥行きを出す
• 拡大写真は赤枠の小パネルにして、隅に添える

Elevation & Depth

• 影は使わず、発光（グロー）で前後関係を出す
• 英字見出しには金色の外側グローを付ける
• ボタンは上が明るい光沢グラデーションにし、立体感を出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を切り抜いて宇宙背景に合成する。拡大写真は四角
• セクション境界: 区切り線は使わず、背景写真の切り替えで区切る
• パネルは角丸なしの赤い細枠
• ボタンだけ角丸8px
• 矢印は青い二重シェブロン

Components

• 購入ボタン（button-primary）: 中央寄せの青い光沢ボタン。白い太字
• 縦バー見出し（heading-bar）: 左端に金または青の縦バーを置いた、白い明朝の2行見出し
• 発光型番見出し（glow-model-title）: 金色に光る英字の型番2行
• 赤枠ディテールパネル（detail-panel）: 拡大写真や変形前後の比較を、赤い細枠で囲む
• パーツ名引き出し（part-callout）: 細い白線で写真の一部を指し、小さなラベルで名前を示す
• 縦書きキャッチ（vertical-catch）: FV の右側に置く縦書きの白い明朝。紺の太い縁取り付き
• 商品情報ブロック（spec-block）: ロゴと商品名、価格、本文、セット内容、オレンジの注意書きを縦に並べる

Do's and Don'ts

Do - 商品写真を主役にして、画面の大半を占めさせる - 宇宙・星雲の背景で世界観を統一する - 型番は英字の発光見出しで繰り返し入れる - 付属パーツや別売品の注記は、正確に小さな文字で添える

Don't - 白や明るい色の背景セクションを入れない - 丸ゴシックやパステル色を使わない - 写真を小さなサムネイルの格子に並べない - 金以外の暖色を多用しない

Page Structure

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

1. ファーストビュー（世界観と商品の迫力を一目で伝える）: 戦闘シーンの合成写真に縦書きキャッチを重ね、上部にロゴを並べる
2. 商品概要（商品名と概要を伝える）: 明朝の商品名と英字サブを並べ、白い本文と注釈を置く
3. 特長1 造形（造形の再現度を見せる）: 縦バー見出しを置き、前後の写真を大きく、ずらして配置する
4. 特長2 ギミック（変形・可動を見せる）: 形態ごとの写真、赤枠の拡大パネル、発光型番見出しで構成する
5. 展開ポーズ（遊び方を伝える）: 台座付きの写真と、赤枠の変形前後比較（青い矢印付き）を並べる
6. 特長3 組み合わせ（別売品との連携を見せる）: 青い縦バーの見出しに、パーツの赤枠パネルと装着写真を並べる
7. セット内容（同梱物を一覧で見せる）: 赤枠の濃灰パネルに、部品を並べて撮った写真を入れる
8. イメージビジュアル（最後に世界観を盛り上げる）: 画面幅いっぱいの戦闘シーンの CG
9. 商品情報・CTA（価格を示し購入へ誘導する）: ロゴ、価格、セット内容、オレンジの注意書きを並べ、最後に青い購入ボタンを置く

Imagery

• 切り抜いた商品写真を宇宙背景に合成し、ビームや発光のエフェクトを加える
• 金メッキの鏡面反射が映えるよう、強いハイライトで撮る
• 大きな写真の背後に、暗く沈めた同じ商品のシルエットを重ねる
• 部品は平置きで整列させて撮り、暗い灰色の背景に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨を書く。PC では中央に幅約750pxのカラムを置き、左右は宇宙背景で埋める
• 写真の重ね構図は SP と同じ比率のまま拡大する
• PC では本文を14px程度に上げる

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