--- version: alpha name: Crimson and Black Comic-Bubble Auto Finance LP description: 白地に深紅と黒の2色だけで組んだ、自動車メーカーのローンプラン解説LP。黒い線画アイコンと、黒いオフセット影を付けた吹き出しカードで、漫画のような親しみやすさを出している。四隅を括弧で囲む見出しと、ピンクのマーカー線で要点を強調する。 colors: primary: '#C30132' cta: '#C40030' on-cta: '#FFFFFF' background: '#FFFFFF' secondary: '#010101' background-alt: '#F0F0F0' text: '#04070D' text-muted: '#555555' line: '#C0C0C0' marker: '#F4CBD5' tint-1: '#D3D3D3' accent-1: '#0000EE' dark-section: '#306080' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.12em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.12em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 28px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.06em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.06em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 6px md: 10px lg: 14px full: 999px spacing: unit: 8px card: 20px section: 80px 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: 44px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 44px button-dark: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 50px heading-bracket: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 70px anchor-nav: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 85px speech-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' rounded: '{rounded.md}' height: 160px qa-bubble: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 140px number-step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 230px check-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 450px price-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 600px --- # DESIGN.md — 白地に深紅×黒の自動車ローン解説 LP（Crimson and Black Comic-Bubble Auto Finance LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自動車・バイク ／ **雰囲気**: 信頼・誠実、シンプル・ミニマル、情報量多め・訴求型、クール・先進的 - **キーワード**: 深紅×黒・線画アイコン・吹き出しカード・オフセット影・括弧見出し・マーカー強調 - **地の質感**: フラットな白地。カードに黒いずらし影を付けて、紙の漫画のような立体感を出す - **形**: 角丸8〜12pxのカード、しっぽ付きの吹き出し、数字を入れる丸バッジ - **温度感**: 白地でやや冷たい印象。深紅で温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C30132` | ブランドの深紅（ボタン・強調文字・番号） | 4% | 画素の実測 | | `cta` | `#C40030` | 主CTAの塗り | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページの地色 | 66% | 画素の実測 | | `secondary` | `#010101` | 黒ボタン・黒の吹き出し・影 | 5% | 画素の実測 | | `background-alt` | `#F0F0F0` | CHECKボックスと質問吹き出しのグレー面 | 7% | 画素の実測 | | `text` | `#04070D` | 見出し・本文の黒 | 3% | 画素の主要色に補正 | | `text-muted` | `#555555` | 注釈のグレー文字 | 1% | 推定 | | `line` | `#C0C0C0` | 区切り線とカードの枠 | 0% | 画素の実測 | | `marker` | `#F4CBD5` | 要点の下に引くピンクのマーカー | 1% | 画素の実測 | | `tint-1` | `#D3D3D3` | グラフの非強調バー | 0% | 画素の実測 | | `accent-1` | `#0000EE` | テキストリンクの青 | 0% | 推定 | | `dark-section` | `#306080` | ファーストビューの写真帯（紺） | 4% | 推定 | - 白地を基本にする。色は深紅と黒の2つだけで構成する - 深紅は主CTA・吹き出しの質問文・番号バッジ・強調する数字に限って使う - 黒はサブCTA・図解の対比面・カードのずらし影に使う - 補足ボックスと質問吹き出しは薄いグレー(#F0F0F0)の面にする - 要点は文字色を変えず、ピンクのマーカーを下半分に敷いて強調する - グラフは強調したい項目を深紅、それ以外をライトグレーにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ（白文字） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.7 | 0.12em | | `headline-lg` | 括弧付きのセクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.6 | 0.12em | | `headline-md` | Q&Aの質問文やカードのタイトル（深紅） | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.04em | | `accent` | 価格の数字・英字ラベル（CHECK!!など） | 欧文サンセリフ | Montserrat | 800 | 28px | 1.2 | 0.06em | | `body-lg` | リード文や吹き出しの回答 | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.1em | | `body-md` | カード内の説明 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.04em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.06em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.04em | - 見出しは太字の中央揃えにし、字間を0.1em以上取る - リード文は字間を広く、行間を1.9前後にとって中央揃えにする - 価格の数字は欧文の太字で大きくし、単位の「円」は小さく添える - 質問文は深紅の太字、回答は黒の標準ウェイトにする - 注釈は10px前後のグレー文字で左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。メリットカードだけ上1枚＋下2枚の配置にする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約22pxで統一する - セクションごとに括弧見出し→リード→図解かカード→注釈の順に並べる - Q&Aは質問を右寄せ・回答を左寄せにして、互い違いに置く - Q&Aの組と組の間はグレーの細線で区切る - CTAボタンは縦に積み、間隔を約16pxにする ## Elevation & Depth - ぼかしの影は使わない - カードと吹き出しには、右下に4〜6pxずらした黒いベタ影を付ける - ボタンには下方向だけに暗い赤か黒の厚みを付ける ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 14px。ボタンは角丸の長方形。 - **写真の切り抜き**: 車は白背景で切り抜き、斜め前から見せる。ファーストビューは全幅の写真 - **セクション境界**: 直線で区切る。CHECKボックス内だけ下向きの山形で面を切り替える - ボタンは角丸6〜10pxの長方形にする - 番号は深紅の正円に白い数字を入れ、カード上辺にまたがらせる - 吹き出しには三角か稲妻形のしっぽを付ける - 見出しはL字の括弧で四隅を囲む ## Components - **主CTAボタン**（`button-primary`）: 深紅の塗りに白い太字を載せ、下に暗い赤の厚みを付ける。右端に矢印を置く場合もある - **サブボタン（枠線）**（`button-outline`）: 白地に深紅の枠と深紅の文字。主CTAのすぐ下に置く - **黒の矢印ボタン**（`button-dark`）: 黒の塗りに白文字を左揃えで置き、右端に細い矢印を付ける - **括弧見出し**（`heading-bracket`）: 見出しの左右に太い黒線とL字の角を置き、四隅を囲む - **アイコン付きページ内ナビ**（`anchor-nav`）: 深紅の枠で囲んだ5分割タブ。各タブはアイコン・ラベル・下向き三角の順。区切りは点線 - **影付き吹き出しカード**（`speech-card`）: 白いカードに黒い枠を付け、黒のずらし影としっぽを付ける。中に線画アイコンと深紅の短いコピーを入れる - **Q&A吹き出し**（`qa-bubble`）: 質問はグレー地で深紅の文字、回答は白地で黒の文字。それぞれの横に線画の人物アイコンとQ/Aの丸を添える - **番号付き選択肢カード**（`number-step-card`）: 細い黒枠のカードの上辺に深紅の丸番号を重ねる。中は見出し・説明・線画イラストの順 - **CHECKボックス**（`check-box`）: グレーの山形ヘッダーに英字ラベルを置く。本文の要点にはピンクのマーカーを敷く - **価格カード**（`price-card`）: 上に車の切り抜きがはみ出す。月々の価格を深紅で大きく見せ、下に赤い下線と上下矢印を付ける ## Do's and Don'ts **Do** - 色は深紅・黒・グレーの3つに限る - アイコンとイラストは黒い単線の線画に揃える - カードには黒いずらし影を付けて、漫画の吹き出しらしく見せる - 注釈は※番号付きで、該当ブロックの直後に置く - 強調はピンクのマーカーで行う **Don't** - グラデーションのボタンや、ぼかした影は使わない - 深紅以外の鮮やかな色を足さない - 写真をカードの装飾として多用しない（図解は線画で描く） - 見出しを左揃えにしたり、括弧の装飾を外したりしない - マーカー以外に、文字の背景に色を敷かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品とプランの魅力を一目で伝える）: 全幅の走行写真にロゴとキャッチを白文字で重ね、下に車名ロゴを置く 2. **ページ内ナビ**（各章への導線をつくる）: 深紅の枠で囲んだ5分割のアイコンタブ 3. **支払い例**（月々の具体的な金額を示す）: 車の切り抜きが乗った価格カードのスライダー。主ボタンと枠線ボタンを並べ、下に折りたたみ式の注釈を置く 4. **仕組みの説明**（プランの仕組みを図で理解させる）: 中央揃えのリード文と、車のシルエットを深紅と黒で塗り分けた図解。上に2色の吹き出しラベルを付ける 5. **メリット**（利点を3つ示す）: 線画アイコンの吹き出しカードを3枚、上1枚・下2枚に並べる 6. **満了後の選択肢**（3つの選択肢を示す）: 丸番号付きのカードを縦に積み、線画イラストを入れる 7. **安心ポイント**（保証の内容と利用者の実績を補強する）: CHECKボックスにマーカー付きの要点を書き、年代別の棒グラフを添える 8. **よくある質問**（不安を解消する）: Q/Aの吹き出しを互い違いに置き、組ごとに細線で区切る 9. **店舗・試乗への誘導**（来店へ誘導する）: ドット質感の深紅の日本地図と、黒の矢印ボタン 10. **CTA**（最終行動を促す）: 深紅の主ボタン1つと黒ボタン2つを縦に積む ## Imagery - 車は白背景で切り抜き、斜め45度の角度で撮った商品写真にする - ファーストビューは街なかを走る、動きのある写真にする - アイコンは黒の単線（太さ約2px）の線画。角は丸く、きらめきの記号を添える - 人物は顔を簡略化した線画にし、深紅の丸枠で囲む - 地図は深紅のベタに細かいドット模様を入れ、黒のずらし影を付ける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約900px幅でまとめ、価格カードやメリット、選択肢を3列に並べる - ナビはPCで横一列の細い帯にする - PCのCHECKボックスは左にテキスト、右にグラフの2カラムにする - Q&AはPCで横長の吹き出しにする - PCでは地図とボタンを横に並べ、最下部のCTA3つも横一列にする ## 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-1e6d9d14`（元 LP の URL から採番） - **元 LP**: https://www2.nissan.co.jp/SP/KICKS/BVC/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。