DESIGN.md — 赤×黒×金の輸入車買取査定 LP（Bold Red Import Car Buyback LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: 力強い・インパクト、信頼・誠実、情報量多め・訴求型
• キーワード: 朱赤・黒帯・金ボタン・白カード・実績数字・比較表
• 地の質感: フラットな単色面が中心。黒帯だけに細かい菱形パターンを敷き、金のグラデーションボタンで高級感を足す
• 形: 角が小さめの白カードと、赤い上線のカード。ボタンはピル型。見出しの上に赤い短い横線を置く
• 温度感: 赤で熱量を出しつつ、グレーと黒で冷静さを保った、やや温かめの配色

Colors

• 地は白と薄グレーをセクションごとに交互に使う
• 朱赤はFV・見出しのキーワード・数字・バッジに限って使い、広い面はFVだけにする
• 主 CTA は黒の菱形パターン帯の上に、金色グラデーションのピル型で置く
• 見出しの一部の語だけ赤にして、黒文字との2色にする
• 本文の強調は赤文字か、ピンクの下半分マーカーにする
• 口コミのヘッダーとフッターは黒にして、締まった印象を出す
• button-primary は文字 #FDFAED × 背景 #C6A197 のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9C6556、4.55:1）を使う。
• survey-donut は文字 #E83928 × 背景 #FFFFFF のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E32A18、4.55:1）を使う。
• compare-table は文字 #E83928 × 背景 #FFF5F6 のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E32A18、4.56:1）を使う。
• chip-tag は文字 #888888 × 背景 #FFFFFF のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 見出しは太字のゴシックで中央揃えにし、2行に分けて組む
• 見出しのキーワードだけ朱赤にする
• 金額や％の数字は本文の2〜3倍の大きさで太字にし、単位は小さくする
• 特長番号は線だけの縦長な欧文数字にする
• 本文は左揃えで、行間は1.8前後にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。実績カードは横スクロールのカルーセルにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションの見出しの上に、赤い短い横線（約80×3px）を置く
• 特長は番号付きの図版パネルと、見出し＋本文を縦に積む
• ステップは赤の上線が付いた白カードを縦に4つ並べる
• CTA 帯は黒の全幅で、2〜3セクションごとに差し込む
• 口コミは黒ヘッダーの付いた写真＋本文のカードを縦に並べる

Elevation & Depth

• 白カードには、ぼかしの小さい薄い影（0 2px 8px rgba(0,0,0,.08)）を付ける
• 実績カードは影を付けて背景から浮かせる
• Q 見出しの箱には、赤い線の二重ずらし枠を付ける
• CTA ボタンには金色のグラデーションと白い縁取りを付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 車の写真は横長の長方形でトリミングし、角丸は付けない。人物は切り抜く
• セクション境界: 直線で地の色を切り替える。境界は波や斜めにしない
• タグ・チップはピル型で、細いグレーの枠線を付ける
• 増額バッジは赤い正円にする
• 見出しの帯には黒の平行四辺形を使う
• 入力欄は赤い枠線で、角丸4〜6pxにする

Components

• 金色の主 CTA（button-primary）: 左端に円形の『かんたん◯秒』バッジ、右端に矢印を置いた、金グラデーションのピル型ボタン
• 黒の CTA 帯（cta-band）: 菱形パターンの黒い全幅帯。斜線で挟んだリード文の下に主 CTA を置く
• 相場チェックフォーム（search-form）: 赤い枠のセレクト欄と、グレーの検索ボタンを縦に並べる。上に赤い下向き矢印で誘導する
• 買取実績カード（result-card）: 赤い上線の付いた白カード。車の写真の下に、他社額→UP矢印→自社額を並べ、赤い円の増額バッジを添える
• アンケートのドーナツグラフ（survey-donut）: 赤いリングの中に大きな％の数字を置き、右に回答の要約を赤字の強調入りで書く
• ステップカード（step-card）: 赤い上線の付いた白カード。左上に赤い四角の Step ラベルと赤い見出し、その下にイラストと本文を置く
• 比較表（compare-table）: 自社列は赤のヘッダーと淡いピンクの地、他社列はグレーのヘッダーにする
• 口コミカード（review-card）: 黒い帯に満足度と金の星を置き、その下に車の写真、赤い点線下線のラベル、本文を並べる
• 赤線付きの見出し（heading-bar）: 短い赤の横線の下に、2行で中央揃えの太字見出しを置き、キーワードだけ赤にする
• メーカー名のチップ（chip-tag）: 白地に細いグレー枠を付けたピル型のタグ。国旗アイコン付きの見出しの下に折り返して並べる

Do's and Don'ts

Do - 見出しの上には、必ず赤い短い横線を置く - 数字（金額・％・社数）は大きく太く、赤で見せる - 黒の CTA 帯を、ページ中に2回以上繰り返す - 比較表では自社列だけを赤とピンクで目立たせる - 白と薄グレーの地を交互に使い、セクションを区切る

Don't - 朱赤を本文やカードの地に広く使わない - CTA を赤にしない（金色のピル型に統一する） - 大きな角丸や柔らかいパステル調を使わない - 明朝体や手書きの書体を混ぜない - 写真にフィルターをかけたり、角丸で切り抜いたりしない

Page Structure

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

1. ファーストビュー（強みと査定の手軽さを一目で伝える）: 朱赤の全面に、白い箱に入れたキャッチと高級車の切り抜きを置く。右下に所要秒数を示す白い吹き出しを添える
2. 相場チェックフォーム（すぐに入力へ誘導する）: 白地に赤い矢印付きのリード文、赤枠のセレクト欄、検索ボタンを置く
3. 買取実績（高額買取の証拠を見せる）: 薄グレーの地に黒い平行四辺形の見出しを置き、実績カードを横スクロールで並べる。ドットのページ送りを付ける
4. 利用者アンケート（満足度で安心してもらう）: Q 見出しの箱、ドーナツグラフ、王冠アイコン付きの理由ランキングを並べる
5. 選ばれる理由（3つの強みを説明する）: 白抜き番号の付いたグレーのパネルに図版を入れ、その下に太字の見出しと本文を置く
6. 他社との比較（優位性を表で示す）: 3列の比較表にし、自社列を赤で強調する
7. 買取までの流れ（手順の不安をなくす）: Step 1〜4 の赤い上線カードに、イラスト・電話番号・マーカー入りの本文を入れる
8. CTA（申込へ誘導する）: 黒の菱形パターン帯に、金のピル型ボタンを置く
9. メディア掲載（第三者からの信頼を示す）: グレーの地に白いロゴ枠を2列で並べ、記事のキャプチャに赤い WEB ラベルを付ける
10. 安心の約束（契約後のトラブルへの不安をなくす）: 白カードの見出しに、赤い帯の反転文字を入れる。写真と電話窓口のバナーも置く
11. お客様の声（実体験で背中を押す）: 総合評価の星と数値を出し、掲載方針の灰色ボックスと黒ヘッダーの口コミカードを並べる
12. メーカー別の相場リンク（自分の車種へ導く）: 国旗付きの見出しごとに、ピル型のチップを並べる
13. コラム記事（ファンを作り回遊させる）: 左にタイトルと日付、右に正方形に近いサムネイルを置いたリストにする
14. フッター（運営の信頼性とナビゲーション）: 黒地に会社説明、赤い矢印付きのリンクリスト、許可番号を載せる

Imagery

• 高級輸入車を斜め前から撮り、背景を切り抜いた写真を使う
• 実績や口コミには、ガレージや屋外で撮った実車の写真を横長でトリミングして使う
• ステップの説明には、赤・グレー・肌色のフラットな人物と物のイラストを使う
• 特長には、赤一色の線アイコンや車のシルエット、価格の吹き出しを使った図版を描く
• 電話窓口のバナーには、ヘッドセットを付けたオペレーターの切り抜き写真を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約1000pxのコンテナで、FV のキャッチは1行に広げて車の写真で囲む
• PC のフォームは、セレクト欄と検索ボタンを横に並べた白いボックスにする
• PC のアンケートは Q1〜Q3 を3カラム、ステップは2×2のグリッドにする
• PC の特長は、図版と文章を左右交互に置いた横長の白カードにする
• PC の口コミは4カラムのグリッド、コラムは2カラムにする
• PC の CTA 帯は、左に電話番号、右に金ボタンを横に並べる

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 行書くと起動時に読み込まれる。