DESIGN.md — 黒地×金とオレンジの模型商品紹介 LP（Dark Metallic Hobby Model Showcase LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 黒背景・メタリック金・発光エフェクト・巨大英字透かし・製品写真主役・アニメ的演出
• 地の質感: 光の粒子、集中線、宇宙の星雲などの発光表現。それ以外はフラットな黒地。
• 形: 四角い写真枠と斜めカットの帯見出し。角丸はボタンだけに使う。
• 温度感: 暗い地に暖色の金とオレンジが光る、熱量の高い温度感

Colors

• 地は全面を黒にする。FVだけ焦げ茶と光の粒子で温度感を出す。
• 色の主役は製品写真のオレンジと金にし、UIの色は最小限に抑える。
• セクション大見出しには黄〜金のグラデーションと発光を使う。
• 縦書きの数値訴求には緑の発光文字を使う。
• 本文は白、注釈はグレーにする。
• 緑はCTAボタンと縦書き訴求だけに使う。
• button-primary は文字 #F8FDF3 × 背景 #3CC63C のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#278527、4.55:1）を使う。

Typography

• 大見出しは極太にし、グラデーション・発光・ドロップシャドウを付ける。
• 英字はワイドなメカ系のサンセリフで、巨大な透かしとしても使う。
• 本文は小さめの白ゴシックで、写真の余白に短く置く。
• 訴求コピーは縦書きにし、明朝体に光彩を付けて劇的に見せる。
• 注釈には「※」を付けて最小サイズで写真の近くに添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストを左右にずらして重ねる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 8px（375px 幅換算）
• 製品写真は画面幅いっぱいか、はみ出すほど大きく置く。
• 本文は写真の空いている側に、幅40〜50%で寄せる。
• セクションの境目に巨大な英字の透かしを敷く。
• ディテール写真は細い白枠の小窓で2〜3枚並べる。
• 最後に価格と付属品をまとめ、中央にCTAを置く。

Elevation & Depth

• 製品写真は切り抜いて黒地に落とし、背後に光彩を付ける。
• 見出し文字には外側の発光とドロップシャドウを付ける。
• カード状の影はほぼ使わない。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 背景を抜いた切り抜き写真が主。ディテールだけ四角い枠に入れる
• セクション境界: 直線の区切りは使わない。英字の透かしや光のエフェクトで場面を切り替える
• 帯見出しは左端を斜めにカットした濃グレーの帯にする。
• ボタンは角丸を小さくし、立体的な光沢を付ける。
• 写真の小窓には1px の白枠を付ける。

Components

• 購入ボタン（button-primary）: 緑のグラデーションに光沢と白枠を付けた横長ボタン
• 発光グラデーション大見出し（heading-glow）: 黄〜金のグラデーション文字。背後に英字の透かしと光彩を重ねる
• 斜めカット帯見出し（heading-band）: 濃グレーの帯に白文字を置き、左に金のライン装飾を付ける
• 巨大英字透かし（watermark-text）: 画面幅いっぱいの英字を暗いグレーで背景に敷く
• 縦書き発光コピー（vertical-copy）: 緑の光彩付き縦書きで数値や合体を訴求する
• ディテール写真窓（detail-thumbs）: 白枠の小さな四角写真を2〜3枚並べ、短い説明を添える
• 罫線付きリード見出し（lead-heading）: 赤オレンジの2行見出し。1行目は字間を広く取り、2行目は両脇に線を付ける
• 価格・仕様ブロック（price-block）: 左にロゴ、商品名、価格、付属品を並べ、右に製品写真を置く

Do's and Don'ts

Do - 製品写真を最大限に大きく見せ、文字は脇役にする。 - 黒地に光彩・粒子・星雲を使って劇的な場面を作る。 - 機能ごとに見出しと短文と写真の組を繰り返す。 - 英字の透かしで場面の切り替えを演出する。 - CTAは最後に一つだけ、目立つ色で置く。

Don't - 白や淡い色の背景を使わない。 - 長い文章のブロックを置かない。 - 丸いピル型のポップなボタンにしない。 - 写真を小さく均等なグリッドに並べない。 - 暖色の製品色と競合する派手な色を地に使わない。

Page Structure

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

1. ファーストビュー（製品のインパクトを一目で伝える）: 光の粒子が舞う焦げ茶の地に、製品を斜めに大きく置く。下に巨大な英字ロゴと小さな英文を添える。
2. リード（関連製品との連動と発売を告知する）: 赤オレンジの2行見出しと、ロゴ付きの白い太字コピーを置く。
3. 特長紹介（造形と色分けのこだわりを示す）: 大きな写真の脇に短文を置き、ディテール写真の小窓を添える。背後に英字の透かしを敷く。
4. 変形ギミック（変形機能を訴求する）: 黄色の発光見出しと帯見出しを置き、変形後の写真と説明を交互に並べる。
5. 演出見出し（必殺技の再現で気分を盛り上げる）: 英字の重なりの上に、極太の金グラデーション文字を置く。
6. 合体・付属品（組み合わせの遊び方を見せる）: 縦書きの緑発光コピーと合体写真を並べ、組み合わせ例のラベルを付ける。
7. 演出再現（エフェクトパーツを訴求する）: 縦書きのオレンジコピーと大写真、ディテールの小窓を置く。
8. 締めのビジュアル（世界観で購買意欲を高める）: 宇宙背景にキービジュアルを置き、白い明朝のコピーを重ねる。
9. 価格・CTA（購入へ誘導する）: ロゴ・価格・付属品の情報と注釈を置き、中央に緑の購入ボタンを配置する。

Imagery

• 製品は黒背景で撮影し、切り抜いて斜めアングルで迫力を出す。
• 金属パーツにはハイライトの反射を強く入れる。
• 背景には光の粒子、集中線、宇宙の星雲などのCG的な発光エフェクトを使う。
• ディテールのアップ写真を小窓で添える。
• 形態ごとの写真を繰り返して見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の固定幅（約750px）に、SPと同じ縦長の画像構成を配置する想定。
• PCの左右余白は黒地のままにする。
• PCでは本文サイズを1.3倍程度に上げる。
• CTAはPCでも中央に1つだけ置く。

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