DESIGN.md — 黒×赤のレーシング模型組立キット LP（Dark Racing Diecast Model Kit LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、スポーティ、情報量多め・訴求型
• キーワード: チャコール地・チェッカーフラッグ・レッドの車体・黄色の価格・ゴールド特典・スタジオ撮影
• 地の質感: マットな濃灰の地に、ぼかしたチェッカー柄をグレーの濃淡で重ねる。写真は黒背景のスタジオ光で艶を出す
• 形: 四角いボタンとタブが基本。丸型スケールバッジ、ピル型の回数ラベル
• 温度感: 冷たい暗色に赤と黄が熱を加える、高揚感のある配色

Colors

• 地はほぼ全体を濃灰にする。チェッカー柄は #3a3a3e 前後の濃淡に抑える
• 赤は見出し、選択状態、丸型バッジに限って使う
• 黄色は価格の数字、限定数のバッジ、プレゼント見出しだけに使う
• 特典は白→ダークグリーン→ゴールドと地色を変えて区切る
• 特典パネルの上端には赤・黒・黄の細い3本線を入れる
• 申込CTAはオレンジにして、赤い見出しと役割を分ける
• scale-badge は文字 #F7E21A × 背景 #DA191D のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C5171A、4.51:1）を使う。
• button-primary は文字 #FCFCFC × 背景 #FE7B0C のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BD5701、4.52:1）を使う。

Typography

• 各セクションは白いリード2行→赤の大見出し→赤の小副題の3段で中央に揃える
• 副題は字間を広く(0.2em)とる
• 価格は数字だけを特大の黄色にし、単位と税表記は小さく添える
• 本文は左揃えの白文字で、14px・行間1.7
• 寸法表記には細めの欧文コンデンス体を使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ギャラリーとお届け内容は横スクロール
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは左右に約16pxの余白をとる
• 大きな車体写真は画面幅いっぱいに置く
• セクションの区切りは地色の微差とチェッカー柄の入り方で示す
• 特典パネルは左右に約12pxの余白を残して箱として浮かせる
• スライダーの下に横長の短いバーを並べたページネーションを置く

Elevation & Depth

• 基本はフラット。影は使わない
• パーツ写真のカードには薄いドロップシャドウと角丸をつける
• 立体感は写真のスタジオ光で出す

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形のフル幅切り抜き、または黒背景の切り抜き写真
• セクション境界: 直線で区切り、背景の濃淡とチェッカー柄の有無で切り替える
• ボタンとタブは角丸なしの四角
• スケール表示は赤い円形バッジ
• 回数ラベルとFAQリンクはピル型
• 選択中のタブは三角の吹き出し尾をつける

Components

• 価格帯（price-band）: FV直下の濃灰帯。左に白枠の限定ラベル、右に黄色の特大価格と2行の価格表を置く
• スケール丸バッジ（scale-badge）: 赤い円に黄色の縮尺数字を入れ、斜めの白文字を添える
• 角度切替ボタン（view-toggle）: 白い四角ボタンを3+2個並べる。選択中だけ赤地に白文字
• 動画タブ（video-tab）: 黒と灰の2タブ。白線で囲んだ動画枠につなげる
• 白いリンクボタン（button-secondary）: 幅いっぱいの白い四角ボタン。先頭に「>」をつけた黒い太字
• 申込CTA（button-primary）: オレンジ地に白の太字。前に白地の小さなラベルを添える
• 数量限定バッジ（limited-badge）: 黄色の円に黒い太字で限定数を入れる
• 特典パネル（gift-panel）: 上端に赤・黒・黄の3本線。ダークグリーンまたはゴールド地の箱に写真とスペックを入れる
• 注意事項ボックス（notice-box）: 濃灰の見出し帯の下に、薄灰地で黒文字の注意事項を並べる
• ホットスポット（hotspot-dot）: 写真の上に黄色の丸い点を置き、パーツ説明を出す

Do's and Don'ts

Do - 地は濃灰に統一し、チェッカー柄は控えめに敷く - 赤い製品写真を主役にして、画面幅いっぱいで見せる - 見出しはリード・赤見出し・副題の3段構成で揃える - 価格と限定性は黄色だけで強調する - 寸法線や角度切替を入れて、模型の精密さを伝える

Don't - 明るい白地を全面に使わない - ボタンを丸くしすぎない - 赤と黄を本文に多用しない - 柔らかいパステル色やイラスト調を混ぜない - チェッカー柄をはっきりした白黒にしない

Page Structure

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

1. ファーストビュー（製品の迫力と初回価格を一度に伝える）: 黒地に斜めの車体写真を置く。白いロゴ風タイトル、丸バッジ、白の2行コピーを重ね、下に価格帯を続ける
2. 写真ギャラリー（細部の質感を見せる）: 接写写真の横スライダー。下に赤と灰のバー型ページネーション
3. 動画（CMで世界観を伝える）: 赤見出しの下に2タブ、白枠の動画プレーヤー
4. 詳細（スケールと再現度を示す）: チェッカー柄の地に側面写真と寸法線を置き、角度切替ボタンと本文を続ける
5. ギミック（可動部と機能を見せる）: 横スクロールの写真に黄色のホットスポットを置く。リモコン機能は白帯の見出しと●箇条書き
6. 組み立てガイド（組み立ての簡単さを伝え、不安を減らす）: 灰地の上に冊子ページの写真を置き、白いリンクボタンと本文を続ける
7. 付属マガジン（付加価値を示す）: 白い区切り線の下に冊子写真、太字の小見出し、本文
8. お届け内容（各回の中身を示す）: 白パネルに回数ごとのパッケージとパーツのカードを横スクロールで並べる
9. 先着プレゼント（申込を後押しする）: エンブレムを中央に置き、3本線つきのダークグリーン枠に黄色の見出し、限定バッジ、写真、スペックを入れる
10. プレミアム特典（追加購入を勧める）: ゴールド地に黒帯の見出し、ケース写真、線枠のお届け予定、注釈
11. 注意事項（契約条件を明示する）: 濃灰の見出し帯と薄灰の本文ボックス
12. フッター（FAQ導線とライセンス表記）: 白いピル型のFAQリンク、白ロゴ、小さな中央揃えの注記

Imagery

• 黒背景のスタジオ撮影で、赤いボディに鋭いハイライトを入れる
• 車体は斜め前から見下ろす構図と真横の構図を使う
• タイヤやエンジンなどは浅い被写界深度の接写にする
• パーツは白背景の物撮りを角丸カードに並べる
• 背景装飾はぼかした遠近のチェッカーフラッグ柄
• 当時のレースのモノクロ写真をパッケージに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約1000pxの幅で置き、FVは写真を左、コピーと価格を右に並べる
• PCではFVに申込CTAを常に見える形で置く
• ギャラリーは5枚並べて左右に矢印をつける
• お届け内容はPCでは3列を一度に見せる
• プレゼント枠はPCでは文章と写真を左右2カラムにする
• マガジン紹介は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 行書くと起動時に読み込まれる。