DESIGN.md — 漆黒×深紅×金のホビー模型 LP（Dark Crimson Gold Hobby Figure LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
• キーワード: 漆黒・深紅のビロード・金メタリック・夜空・発光・ドラマチック
• 地の質感: 暗い背景に赤や紫の光がにじむグラデーション。模型は光沢のある黒と金の質感で見せる
• 形: 写真は角丸なしの矩形。見出しは左に縦線を付けた帯にする
• 温度感: 暗くて温かみのある色調。ところどころに冷たい紫と青の光を差す

Colors

• 地は深紅・紫紺・黒の 3 色だけ。セクションごとに暗いグラデーションで切り替える
• 金は型番ロゴと見出しの装飾に限り、商品の色に合わせる
• 文字は白を基本にし、見出しには紫の外側発光を付ける
• 鮮やかな色を使うのは購入ボタンの青だけ
• ギミック写真は中立のグレー地にして、模型の質感を見せる

Typography

• 型番ロゴは金のグラデーションと影を付けた大きなセリフ体にする
• 見出しは白の極太ゴシックにし、紫の外側発光を付ける
• 見出しは 2 行までにし、左に金の縦線を置く
• 注釈は 8px 前後の小さな白文字で写真の直下に置く
• 背景に型番ロゴを半透明で大きく重ねてもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ギミック写真だけ 2 列に並べる
• 本文ブロックの幅: 画面幅の約 96%
• 余白: セクション間 40px、基本単位 8px、カード内 8px（375px 幅換算）
• 模型写真は画面幅いっぱいか、はみ出すほど大きく置く
• 説明は見出し・一言・写真の順で短くまとめる
• before/after は 2 枚を横に並べ、間に赤い矢印を置く
• 写真は左右 8px 程度の余白で揃える
• 価格情報は左に文字、右に写真を置く

Elevation & Depth

• 影は使わず、光のにじみで奥行きを出す
• 見出しの文字に紫の外側発光を付ける
• 型番ロゴにはドロップシャドウを付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 矩形に切り抜くか、模型を切り抜いて背景に直接重ねる
• セクション境界: 直線を引かず、背景のグラデーションで溶け込ませる
• 写真枠は角丸なしにし、茶金の細い枠線を付ける
• 丸い形は購入ボタンだけに使う
• 模型の切り抜きはセクションの境界をまたいで置いてよい

Components

• 発光見出し（heading-glow-bar）: 左に金の縦線、白の極太文字に紫の発光を付けた見出し
• 型番ロゴ（model-logo）: 金色の大きなセリフ体ロゴ。背景に半透明で重ねても使う
• ギミック比較写真（gimmick-pair）: グレー地の写真 2 枚の間に赤い矢印を置き、下に注釈を付ける
• アングルラベル（view-label）: 写真の上に重ねる細いセリフ体の英字ラベル
• 近日公開枠（coming-soon-box）: 紫のグラデーションに細い枠線を付け、中央に英字を置く
• 価格情報（price-block）: ロゴ、商品名、税込価格、説明、付属品を並べたブロック
• 購入ボタン（button-primary）: 中央に置く青いピル型ボタン。光沢のあるグラデーションを付ける

Do's and Don'ts

Do - 模型写真をできるだけ大きく、ドラマチックな角度で見せる - 暗い背景に赤・紫・緑の光の点やエフェクトを散らす - ギミックは写真と短い注釈で 1 つずつ見せる - 金色は商品の配色に合わせて使う - セクションの終わりに型番ロゴを繰り返し入れる

Don't - 白や明るい背景のセクションを作らない - 角丸のカードやパステル調の装飾を使わない - 長い本文を何段も続けない - 購入ボタン以外に鮮やかな色の面を使わない - 細いゴシック体で見出しを組まない

Page Structure

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

1. ファーストビュー（商品の存在感で一目で引き込む）: 夜空の背景に大きな模型を置き、縦書きキャッチと金の型番ロゴを重ねる
2. 商品概要（商品の位置づけを伝える）: 黒帯の上に白の小さな文字で数行の説明を置く
3. 造形の特長（新規造形と色分けを訴求する）: 深紅の背景に発光見出しを置き、前後 2 方向の写真とアップ写真を並べる
4. 武装・可動（ギミックと可動域を見せる）: アクション写真の下に 2 列の比較写真と注釈を置く
5. 情景ショット（劇中の世界観を再現する）: 建物と煙の背景に、ポーズを付けた模型を全幅で置く
6. ポージング（可動の自由度を伝える）: 比較写真と発光見出しの下に、複数のポーズ写真を重ねる
7. セット内容（付属品とパッケージを示す）: 写真枠と近日公開枠を左右にずらして置く
8. シリーズ比較（同じスケールの関連商品と並べて見せる）: 紫紺の背景に 3 体を横に並べ、上下にイタリックの発光見出しを置く
9. 価格・購入（購入へ導く）: 価格情報、注釈、青いピル型の購入ボタンの順に置く

Imagery

• 光沢のある模型をスタジオで撮り、切り抜いて合成する
• 背景は夜空・星・赤い光球、または洋館と煙の情景にする
• ギミック写真はグレーのグラデーション地で撮り、赤や緑の矢印で動きを示す
• 背景にビロードのような深紅のグラデーションを敷く
• ビームや刃先に緑の発光エフェクトを加える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750〜800px 幅の縦長の帯を置き、両側を暗い背景で埋める
• PC の比較写真は 3〜4 列まで広げてよい
• PC の型番ロゴと見出しは 1.5 倍程度に拡大する
• SP では文字を画像に埋め込む前提で、最小 8px まで許容する

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