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

• 白地を基本にする。色は深紅と黒の2つだけで構成する
• 深紅は主CTA・吹き出しの質問文・番号バッジ・強調する数字に限って使う
• 黒はサブCTA・図解の対比面・カードのずらし影に使う
• 補足ボックスと質問吹き出しは薄いグレー(#F0F0F0)の面にする
• 要点は文字色を変えず、ピンクのマーカーを下半分に敷いて強調する
• グラフは強調したい項目を深紅、それ以外をライトグレーにする

Typography

• 見出しは太字の中央揃えにし、字間を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

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

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