--- version: alpha name: Dark Racing Diecast Model Kit LP description: チャコール地にチェッカーフラッグ柄を薄く敷き、赤い車体写真と赤い見出しで疾走感を出した、分冊組立模型の定期購読 LP。価格は黄色の大きな数字で強調する。後半は白・ダークグリーン・ゴールドのパネルで特典を区切る。 colors: background: '#252328' primary: '#DA191D' accent-1: '#EB3840' marker: '#F7E21A' on-dark: '#FCFCFC' surface: '#FEFEFE' background-alt: '#393534' dark-section: '#4C696D' tint-1: '#F2DC93' tint-2: '#D3D3D3' secondary: '#43434F' text: '#020102' cta: '#FE7B0C' on-cta: '#FCFCFC' primary-accessible: '#C5171A' cta-accessible: '#BD5701' typography: display: fontFamily: Barlow Condensed fontSize: 44px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.2em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Roboto fontSize: 40px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' price-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 84px scale-badge: backgroundColor: '{colors.primary}' textColor: '{colors.marker}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 64px view-toggle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 34px video-tab: backgroundColor: '{colors.text}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' height: 36px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 56px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px limited-badge: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px gift-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 900px notice-box: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 700px hotspot-dot: backgroundColor: '{colors.marker}' rounded: '{rounded.full}' height: 20px --- # DESIGN.md — 黒×赤のレーシング模型組立キット LP（Dark Racing Diecast Model Kit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、スポーティ、情報量多め・訴求型 - **キーワード**: チャコール地・チェッカーフラッグ・レッドの車体・黄色の価格・ゴールド特典・スタジオ撮影 - **地の質感**: マットな濃灰の地に、ぼかしたチェッカー柄をグレーの濃淡で重ねる。写真は黒背景のスタジオ光で艶を出す - **形**: 四角いボタンとタブが基本。丸型スケールバッジ、ピル型の回数ラベル - **温度感**: 冷たい暗色に赤と黄が熱を加える、高揚感のある配色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#252328` | ページ基調の濃灰地 | 40% | 画素の実測 | | `primary` | `#DA191D` | 赤の見出し・選択中タブ | 3% | 画素の実測 | | `accent-1` | `#EB3840` | 赤いセクション見出しの文字 | 1% | 画素の実測 | | `marker` | `#F7E21A` | 価格数字・プレゼント見出しの黄色 | 1% | 推定 | | `on-dark` | `#FCFCFC` | 暗地上の白文字 | 4% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | お届け内容の白パネル・切替ボタン | 8% | 画素の実測 | | `background-alt` | `#393534` | 価格帯の帯 | 3% | 画素の実測 | | `dark-section` | `#4C696D` | プレゼント枠のダークグリーン | 6% | 画素の実測 | | `tint-1` | `#F2DC93` | プレミアム特典のゴールド地 | 7% | 画素の実測 | | `tint-2` | `#D3D3D3` | 注意事項の薄灰パネル | 6% | 画素の実測 | | `secondary` | `#43434F` | 注意事項の見出し帯 | 1% | 画素の実測 | | `text` | `#020102` | 明るい地の上の黒文字 | 2% | 画素の実測 | | `cta` | `#FE7B0C` | 申込ボタンのオレンジ(PC) | 0% | 画素の実測 | | `on-cta` | `#FCFCFC` | 申込ボタン上の文字 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#C5171A` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#BD5701` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ全体を濃灰にする。チェッカー柄は #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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの商品名ロゴ風タイトル | 欧文サンセリフ | Barlow Condensed | 700 | 44px | 1.1 | 0.0em | | `headline-lg` | 赤いセクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.3 | 0.08em | | `headline-md` | 見出し上の白いリード2行 | ゴシック | Noto Sans JP | 500 | 18px | 1.6 | 0.03em | | `headline-sm` | 赤見出し下の小さい英語・副題 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.2em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.0em | | `accent` | 価格の大きな数字 | 欧文サンセリフ | Roboto | 900 | 40px | 1.0 | -0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | タブ・切替・リンクボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - 各セクションは白いリード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 ```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-89cfda78`（元 LP の URL から採番） - **元 LP**: https://deagostini.jp/fp4/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。