DESIGN.md — 黒地×メタリック白文字のプラモデル商品LP（Dark Metallic Hobby Model Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
• キーワード: 漆黒の地・切り抜き写真・極太コンデンス欧文・メタリック文字・深緑アクセント・雑誌的な写真レイアウト
• 地の質感: 黒地にわずかな放射状の暗いグラデ。文字は銀色のグラデと影で金属感を出す。
• 形: 矩形が基本。写真は背景なしの切り抜きで自由に重ねる。ボタンのみ小さな角丸。
• 温度感: 冷たく硬質。メカニカルで重厚。

Colors

• 地は全面ほぼ黒。白やパステルの地は使わない。
• 大見出しは白〜銀のグラデ＋黒い影で金属感。
• セクション欧文見出しのみ深緑で、下の和文ルビは白。
• CTAは深緑系の単色ボタンで1か所に集中させる。
• FVのみ空色の写真背景で明るさを出し、以降は黒で統一。
• 注釈はグレーの小さな文字で目立たせない。
• button-primary は文字 #E9ECEA × 背景 #1E8A6E のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1A775F、4.59:1）を使う。

Typography

• 欧文は縦長の極太コンデンス体で大文字のみ。
• 欧文見出しの直下に和文名を小さく添える2段構成にする。
• メイン見出しは銀グラデ＋ドロップシャドウ。
• 本文は太めのゴシックで行間は詰め気味。
• 写真の部位に向けた注記は小さな文字で写真の上に重ねる。
• キャッチ見出しは白太字で斜めに並べ、勢いを出してもよい。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と文字を自由配置で重ねる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 24px、基本単位 4px、カード内 8px（375px 幅換算）
• 文字ブロックは左寄せで、右側に大きな写真を配置する。
• 写真同士を重ねて奥行きを出し、余白を作りすぎない。
• セクション境界は線を引かず黒地の連続で区切る。
• 注記は対象部位の近くに置く。
• 商品情報ブロックはロゴと価格を左上にまとめる。
• CTAは最下部で中央寄せ。

Elevation & Depth

• 影は文字にのみ使い、黒い強いドロップシャドウで浮かせる。
• 切り抜き写真には軽い光彩で黒地から分離させる。
• カードの影は使わない。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 背景のない切り抜き写真を中心にし、付属品だけはグレーの矩形パネルに並べる
• セクション境界: 直線。FVと本編は背景の色差だけで切り替える
• 角丸はボタンと小さな画像枠のみに使う。
• 装飾の図形は増やさない。
• 小見出しの横に細い白線を伸ばす。

Components

• メタリック大見出し（hero-metallic-title）: FV下に置く。型番と商品名を極太欧文の2行で組み、銀グラデと影をつける。
• 欧文＋和文の見出し（section-en-heading）: 深緑の大文字欧文の下に、白の和文名を小さく添える。
• 写真注記ラベル（callout-label）: 部位名を2行の白い小文字で写真上に置く。
• 線付き小見出し（line-subheading）: 字間を広げた白文字の後ろに細い水平線を伸ばす。
• 付属品パネル（accessory-panel）: ライトグレーの矩形に付属品写真を並べる。
• 商品スペック欄（product-info）: シリーズロゴ、商品名、価格、説明、付属品リストを左寄せで並べる。
• 購入ボタン（button-primary）: 中央に置く深緑ボタン。白の太字で、上から下への微グラデをつける。

Do's and Don'ts

Do - 黒地と切り抜き写真を主役にし、写真をとにかく大きく見せる。 - 欧文見出しは極太コンデンスの大文字にする。 - 強調色は深緑に絞る。 - 部位の説明は写真上の注記で示す。 - 価格・付属品は最後の商品情報でまとめて示す。

Don't - 白や淡色の背景セクションを挟まない。 - 丸ゴシックや手書き書体を使わない。 - カードや角丸の大きい枠を多用しない。 - 暖色の派手なボタンを使わない。 - 写真を小さな枠に整列させすぎない。

Page Structure

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

1. ファーストビュー（商品化の告知とキービジュアル）: 空色の写真背景に機体を大きく配置する。左上にシリーズロゴ、白い明朝風の大きな告知文字を置く。
2. 商品名タイトル（型番と名称を印象付ける）: 黒地に銀グラデの巨大欧文を2行で組み、下に和文名を置く。
3. リード（商品の概要と見どころの要約）: 白い太字の本文を4〜5行並べる。
4. 特長1（装備）（主装備の造形を紹介）: 深緑の欧文見出し、短い説明、複数の切り抜き写真と部位注記で構成する。
5. 特長2（形態変化）（別形態やギミックの提示）: 線付き小見出しを置き、写真を重ね、小さな補足写真を枠に入れる。
6. 特長3（付属武器）（付属武器と可動を訴求）: 欧文見出しとアクションポーズの写真を置き、白太字の斜めキャッチを添える。
7. 付属品一覧（セット内容の可視化）: グレーパネルに付属品を並べ、右に白太字の見出しと注記を置く。
8. 商品情報（名称・価格・内容の確定情報）: ロゴと商品名、価格、説明文、付属品リストを置き、右に完成写真を添える。
9. 注意書き・CTA（購入導線）: グレーの小さな注釈の下に、深緑の購入ボタンを中央に置く。

Imagery

• 立体物は背景を切り抜いた高解像度のスタジオ写真にする。
• ポーズ違いを複数枚、大小を変えて重ねる。
• FVだけは雲のある青空背景で、ローアングルから迫力を出す。
• 背景に暗いエンブレムのシルエットを薄く敷く。
• 付属品は真上から撮って平置きにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せで最大幅 750〜800px 程度とし、両脇は黒で埋める。
• PC では見出しと写真を左右2カラムに配置してもよい。
• 欧文の大見出しは PC で 64px 前後まで拡大する。
• CTAボタンは 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 行書くと起動時に読み込まれる。