---
version: alpha
name: Dark Navy Rally Collector Partwork LP
description: 黒から濃紺へ移るグラデーションの地に、メタリックブルーの車体写真を大きく置いた LP。深紅のリボン見出しと金色のグラデーション CTA で、高級感と熱さを両立させている。ディテール写真に虫眼鏡の拡大アイコンを付けて縦に並べ、ギミックを 1 つずつ見せていく情報量の多い作り。
colors:
  primary: '#022C52'
  dark-section: '#090910'
  background: '#3D3533'
  background-alt: '#4D83C2'
  secondary: '#C40B52'
  cta: '#E8C34A'
  on-cta: '#090910'
  on-dark: '#F3F1F0'
  accent-1: '#F2C230'
  tint-1: '#EEE2C2'
  surface: '#E4E3E2'
  line: '#941C46'
  text: '#113A62'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.3
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.35
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.65
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: -0.02em
rounded:
  sm: 4px
  md: 10px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 52px
  cta-band:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.lg}'
    height: 150px
  ribbon-heading:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 36px
  detail-heading:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 34px
  photo-zoom:
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 230px
  badge-circle:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 64px
  benefit-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.secondary}'
    typography: '{typography.body-md}'
    height: 300px
  premium-panel:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 600px
  callout-box:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 60px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#022C52` | ブランドを代表する濃紺の地 | 30% | 画素の実測 |
| `dark-section` | `#090910` | ファーストビューの黒い地 | 8% | 画素の主要色に補正 |
| `background` | `#3D3533` | ストーリー部のこげ茶グレーの地 | 20% | 画素の実測 |
| `background-alt` | `#4D83C2` | 下部の明るい青の地 | 8% | 画素の実測 |
| `secondary` | `#C40B52` | リボン見出しと強調ボックスの深紅 | 5% | 画素の実測 |
| `cta` | `#E8C34A` | CTA ボタンの金色 | 3% | 推定 |
| `on-cta` | `#090910` | CTA 上の黒文字 | 0% | 画素の主要色に補正 |
| `on-dark` | `#F3F1F0` | 暗い地に乗せる白文字 | 4% | 画素の実測 |
| `accent-1` | `#F2C230` | キャッチの金黄色の強調文字 | 0% | 推定 |
| `tint-1` | `#EEE2C2` | 特徴見出しの帯に使う淡い金ベージュ | 3% | 画素の主要色に補正 |
| `surface` | `#E4E3E2` | 特典カードの淡いグレーの面 | 2% | 画素の実測 |
| `line` | `#941C46` | 写真枠と区切り線の深紅 | 0% | 画素の主要色に補正 |
| `text` | `#113A62` | 見出し帯上の濃紺文字 | 0% | 画素の実測 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ストーリーの大きなキャッチ | 明朝 | Shippori Mincho | 700 | 44px | 1.3 | 0.0em |
| `headline-lg` | セクション見出し（白、影付き） | 明朝 | Noto Serif JP | 700 | 24px | 1.35 | 0.02em |
| `headline-md` | 訴求見出しと強調ボックスの見出し | ゴシック | Noto Sans JP | 900 | 22px | 1.35 | 0.0em |
| `headline-sm` | ディテール帯の見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.0em |
| `body-md` | 写真のキャプション・本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.65 | 0.0em |
| `note` | サイズ表記や注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em |
| `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 900 | 20px | 1.2 | 0.02em |
| `accent` | 価格の数字や縮尺の表記 | 欧文サンセリフ | Montserrat | 800 | 40px | 1.0 | -0.02em |

- 情緒を語る大見出しは明朝体に白と軽い影。説明や訴求は太いゴシック。
- 本文も太め（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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-ad69f5d0`（元 LP の URL から採番）
- **元 LP**: https://hcj.jp/22b/home.html
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。