DESIGN.md — 紺×黒×金の模型分冊コレクション LP（Dark Navy Rally Collector Partwork LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型、クール・先進的
• キーワード: 濃紺グラデーション・メタリック・深紅アクセント・金色CTA・ディテール写真・カタログ的
• 地の質感: 黒〜濃紺・こげ茶の縦グラデーションに、カーボン調やヘアラインの金属質感を薄く重ねる。
• 形: 基本は角のある四角。CTA は小さめの角丸、特典バッジは円、見出しは斜めにカットしたリボン型。
• 温度感: 寒色の夜の空気を地にして、深紅と金で熱を足した温度感。

Colors

• 地は黒→濃紺→こげ茶→濃紺→明るい青の縦グラデーションでつなぎ、白い地のセクションは作らない。
• 深紅はリボン見出し・写真の枠線・拡大アイコン・特典の丸バッジに限って使う。
• 金はメインの CTA と CTA 帯の地だけに使い、ほかの面には使わない。
• 強調したい言葉は金黄色の文字にする。本文は白。
• ディテール見出しは淡い金色の斜めカット帯に濃紺の文字を乗せる。

Typography

• 情緒を語る大見出しは明朝体に白と軽い影。説明や訴求は太いゴシック。
• 本文も太め（700）にして、暗い地の上で読めるようにする。
• 見出しの中の引用語は、括弧や引用符で囲んで強調する。
• 数字（価格・縮尺）は大きくし、単位は小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真 → キャプションの縦並びを繰り返す
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は本文幅いっぱいに置き、キャプションは写真の下 8〜12px に 2〜3 行で入れる。
• 写真同士の縦間隔は 24〜32px。
• 特典ブロックは枠付きのパネルにまとめ、CTA 帯をセクションの区切りごとに繰り返す。
• 仕様表は 2 列の罫線テーブルにする。

Elevation & Depth

• 特典パネルには薄いドロップシャドウと細い金色の枠を付ける。
• 見出しの白文字に黒い影を落として立体感を出す。
• CTA は金のグラデーションと下側の影で、ボタンらしい盛り上がりを作る。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角のまま、深紅の細い枠で囲む。製品カットは背景を抜いた切り抜き。
• セクション境界: 直線で区切らず、背景のグラデーションで色が自然に切り替わる
• リボン見出しは右端を矢羽根形にカットする。
• ディテール見出しの帯は右端を斜めにカットする。
• 特典の訴求は円形の深紅バッジを 4 つ横に並べる。
• 拡大アイコンは写真の右下に置く深紅の円。

Components

• 金色の申込 CTA（button-primary）: 金のグラデーションの地に三角アイコンと太い黒文字を置き、右に黒地の小バッジを添える。
• CTA 帯（cta-band）: 金色の角丸パネルに、深紅の丸バッジ 4 つと CTA を縦に収める。下に FAQ への小さな導線を置く。
• 深紅リボン見出し（ribbon-heading）: 右端が矢羽根形の深紅の帯に白文字を中央揃えで入れる。
• 金帯のディテール見出し（detail-heading）: 淡い金色から透明へ抜けるグラデーション帯に濃紺の文字。右端は斜めにカットする。
• 拡大アイコン付き写真（photo-zoom）: 深紅の細い枠で囲んだ写真の右下に、深紅の円形の虫眼鏡アイコンを置く。
• 深紅の丸バッジ（badge-circle）: 直径 64px 前後の深紅の円に、白で 2〜3 行の短い特長を入れる。
• 特典カード（benefit-card）: 黒い見出しバーの左に深紅の番号ラベル。本体は淡いグレーの面に商品の切り抜きを並べる。
• プレミアム訴求パネル（premium-panel）: カーボン調の黒い面を金色の枠で囲み、月桂樹の飾り付きの白い大見出しを置く。
• 吹き出し注釈（callout-box）: 黄色い角丸の吹き出しや深紅の小ラベルで、写真の部位を指して説明する。

Do's and Don'ts

Do - 主役の製品写真は暗い地の上に切り抜きで大きく置き、金属の光沢を見せる。 - ギミックは 1 機能につき写真 1 枚とキャプション 2 行で、順番に並べる。 - CTA 帯は特典・ギミック紹介・コンテンツ紹介の後ろごとに、計 3〜4 回繰り返す。 - 可動部の写真には黄色の両矢印を重ね、どう動くかを示す。 - 価格の数字は大きく、税込表記は小さく添える。

Don't - 白や淡色の地のセクションを大きく入れない。 - 金色を見出しや本文の地に広げない（CTA だけに使う）。 - 丸ゴシックや手書き風の書体を使わない。 - 写真を角丸で切り抜かない。 - 深紅・金・青以外のアクセント色を増やさない。

Page Structure

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

1. ファーストビュー（製品・価格・発売日を一目で伝える）: 黒地に明朝の白いキャッチを置き、大きな製品写真・縮尺の丸バッジ・パッケージ写真と大きな価格を配置する。
2. 動画導線と CTA（動画で興味を深め、すぐ申込へ誘導する）: 深紅枠の動画サムネを 2 つ並べ、下に金色の CTA とログインへの導線を置く。
3. 定期購読特典（特典で申込の動機を作る）: 濃紺地に深紅のリボン見出しを置き、特典カード 2 枚と金枠のプレミアムパネルを続ける。
4. CTA 帯（特長を短く再確認して申込を促す）: 金色のパネルに丸バッジ 4 つと CTA を入れる。
5. ブランドストーリー（モチーフの伝説性を語る）: こげ茶の地に大きな明朝のキャッチ、金黄色のサブコピー、実写写真と長い本文を置く。
6. 再現性・取材（精密さの根拠を示す）: 深紅の罫線で挟んだ明朝見出しを置き、取材写真や CAD 図を枠付きで縦に並べる。
7. ギミック紹介（操作できる機能を具体的に見せる）: 濃紺の地に、深紅ボックスでコントローラーを説明し、その下に拡大アイコン付きの写真を連続で並べる。
8. サイズ・仕様（大きさと仕様を正確に伝える）: 四方向から見た写真に寸法の矢印を付け、2 列の仕様表と深紅帯付きのギミック一覧を置く。
9. ディテール紹介（細部のこだわりを網羅する）: 金帯の見出し・写真・キャプションのセットを繰り返す。
10. プレミアム購読（上位プランに誘導する）: 金枠のカーボン調パネルに、注釈ラベル付きの製品写真と吹き出し型の価格説明を入れる。
11. マガジン内容（冊子の価値を伝える）: 色分けした見出し帯と誌面写真を並べ、斜めカットの色帯でその他の企画を一覧にする。
12. 特典再掲と最終 CTA（最後のひと押し）: 特典カードとプレミアムパネルを縮めて再掲し、最後に金色の CTA 帯を置く。

Imagery

• 製品はスタジオで撮影し、暗い背景にツヤを強調したライティングで切り抜く。
• 細部は寄りのマクロ写真で撮り、黒〜濃紺の背景に溶け込ませる。
• 可動部の写真には黄色い曲線の両矢印を重ねる。
• 実車の資料写真や CAD のワイヤー図を使い、本物らしさの裏付けにする。
• 誌面は見開きを少し斜めから撮ったモックアップで見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せで、幅およそ 1000px のコンテンツ幅にする。
• PC の FV は左にコピーと価格、右に大きな車体写真の 2 カラム。
• 特典カードとディテール写真は、PC では 2〜3 列のグリッドにする。
• PC の CTA 帯は丸バッジと CTA を 1 行に横並びにする。
• PC の仕様表は写真の横に並べて配置する。

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