DESIGN.md — 漆黒×明朝の高級輸入車買取 LP（Black Luxury Serif Car Buyback LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、信頼・誠実、クール・先進的
• キーワード: 漆黒・明朝体・欧文セリフ・ショールーム・余白・モノトーン
• 地の質感: マットな黒の面とわずかにグレーがかった白の面。ツヤのない静かな質感。
• 形: 角丸なしの直角の矩形。カードも写真も四角で、円形は矢印ボタンだけ。
• 温度感: 冷たく静かな寒色寄りのモノトーン。差し色の赤だけに熱がある。

Colors

• 地色は黒（primary）とオフホワイト（background）をセクション単位で交互に切り替える。
• 白地のセクションでもカードは黒にし、黒い面の割合を常に多めに保つ。
• 赤（cta）は査定ボタンと送信ボタンだけに使い、ほかの場所には使わない。
• 黒地の背景に入れる大きな欧文は、背景よりわずかに明るいグレーで透かしのように見せる。
• 写真は彩度を抑えたダークトーンにし、下端を黒へグラデーションさせて白文字を載せる。

Typography

• 見出しはすべて明朝体で組み、字間を広めにとって品よく見せる。
• 見出しの上には、小さな欧文セリフ体の英字ラベルを添える。
• 本文は細めのゴシック体を小さめのサイズで使い、行間を広くとる。
• 番号は「01」「02」の 2 桁表記で、欧文セリフ体を使う。
• 金額は欧文セリフ体で大きく、単位は和文で小さく組む。
• 太字の多用や装飾文字は避ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC は写真と文字の左右 2 分割、カードは 3 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長は大きな写真ブロックと文字ブロックの左右配置を、交互に入れ替えて並べる。
• 大きな写真は画面端まで寄せ、文字側はゆったりとした余白で組む。
• セクションの頭には、画面幅いっぱいの欧文ウォーターマークを置く。
• 実績・ポイント・お客様の声は、黒いカードを等幅のグリッドに並べる。
• 流れのセクションは、左に見出しと写真、右に縦に積んだステップカードを置く。

Elevation & Depth

• 影はほぼ使わず、色面の明暗差だけで階層をつくる。
• 写真の上は下端から黒へのグラデーションで文字を読ませる。
• ヘッダーは黒地で上部に固定する。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形で裁ち落とし。写真同士を少し重ねてずらす配置も使う。
• セクション境界: 直線で色面を切り替える。斜めや波形の境界は使わない。
• カードとボタンは角丸なし、または 2px 程度にとどめる。
• 円形は最終 CTA の矢印ボタンだけに使う。
• 線は 1px の細線のみ使う。

Components

• 無料査定ボタン（button-primary）: 深紅の矩形ボタン。白の太字で、右端に細い矢印を付ける。
• ファーストビュー内の簡易査定フォーム（hero-form）: 黒地に白い入力欄を縦に並べ、各項目に「必須」ラベルを付ける。下に赤い送信ボタンを置く。
• 欧文ウォーターマーク（watermark-heading）: 画面幅からはみ出す大きな欧文セリフ体。背景よりわずかに明るい色で透かし状に敷く。
• 写真＋英字キャプションブロック（photo-caption-block）: 大判写真の左下に、小さな英字ラベルと明朝の大きな見出しを白で重ねる。
• ポイントカード（point-card）: 黒いカードに英字ラベルと大きな番号を置き、内側のグレー枠に箇条書きを並べる。
• 実績カード（result-card）: 上半分に車の写真、下に車名とスペックのタグ、さらに「査定額」ラベルと大きなアップ額を置く。
• 流れのステップカード（step-card）: 濃いグレーのカード。左に欧文の Step 番号、右に明朝の見出しと短い説明を置く。
• FAQ アコーディオン行（faq-row）: 濃いグレーの帯に「Q.」と質問文を入れ、右端に＋アイコンを置く。
• 取扱メーカーのロゴタイル（brand-logo-tile）: 濃いグレーの小さなタイルにロゴを白で入れ、下にメーカー名を添えてグリッド状に並べる。
• 円形の矢印ボタン（circle-arrow）: 最終 CTA に置く、黒い正円に白の細い矢印を入れたボタン。

Do's and Don'ts

Do - 黒の面を主役にし、白地のセクションでもカードは黒で統一する。 - 見出しは明朝体、ラベルや数字は欧文セリフ体で、上品さを保つ。 - 写真は暗めのトーンと低めの彩度にそろえ、高級車やショールームの光沢を見せる。 - 英字ラベル→明朝見出し→小さな本文の 3 段組みを繰り返す。 - 余白を広くとり、情報を詰め込まない。

Don't - 赤を CTA 以外に使わない。 - 丸ゴシック体やポップな書体を使わない。 - 大きな角丸やピル型ボタンにしない。 - 明るいパステル色や鮮やかなグラデーションを入れない。 - 派手なアイコンやイラストを使わない。 - ドロップシャドウを強くかけない。

Page Structure

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

1. ファーストビュー（実績と専門性を示し、その場で査定を始めてもらう）: 夜の店舗写真の上に明朝の大見出しを置き、右に黒い簡易フォームを置く。下に欧文ウォーターマークを敷く。
2. 導入メッセージ（目利きの価値を伝える）: 黒地に縦長の写真と小さな写真を非対称に配置し、明朝の 3 行見出しと短い本文を添える。
3. 選ばれる理由（4 つの強みを示す）: 白地に写真ブロックと番号付きの文字ブロックを左右交互に置く。写真には英字キャプションを重ねる。
4. 査定のポイント（評価の基準を示す）: 白地に黒いポイントカードを 3 列で並べる。
5. 取扱メーカー（対応できる車種の幅を示す）: 黒地にロゴタイルを 6 列のグリッドで並べる。
6. 買取実績（具体的な金額で信頼を得る）: 白地に写真付きの黒い実績カードを 3 列×2 段で並べる。
7. お約束（不安を取り除く 3 つの約束を示す）: 全幅の暗い写真に「01—03」の番号、大きな明朝見出し、右寄せの本文を重ねる。
8. 取引の流れ（手順を明確にする）: 黒地の左に見出しと重ねた写真、右にステップカードを 4 段積む。
9. お客様の声（利用者の実感を伝える）: 巨大な欧文ウォーターマークの下に、黒い口コミカードを 3 列で並べる。
10. ギャラリー（店舗の在庫の雰囲気を見せる）: 車の写真 3 枚を横一列に隙間なく並べる。
11. よくある質問（疑問を解消する）: 黒地にアコーディオン行を縦に並べる。
12. 最終 CTA（無料査定へ誘導する）: 白地の左に車の写真、中央に欧文の大見出しと明朝のコピー、右に円形の矢印ボタンを置く。
13. フッター（店舗情報を示す）: 暗くした店内写真の上に、ロゴ・住所・地図リンクを中央にそろえて置く。

Imagery

• 高級輸入車を夜のショールームや照明の下で撮り、光沢と陰影を強調する。
• スーツ姿のスタッフが車を検査する手元のクローズアップを使う。
• 全体を低彩度・高コントラストのダークトーンに補正する。
• 写真の下端を黒へグラデーションさせ、文字を載せる余地をつくる。
• 装飾は欧文ウォーターマークと細線だけにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では左右分割をやめ、写真→文字の順に縦に積む。
• 3 列のカードは SP で 1 列、ロゴタイルは 3 列にする。
• ファーストビューのフォームは SP ではヒーローの下に置き、赤い CTA を画面下に固定する。
• 欧文ウォーターマークは SP で 48px 程度に縮め、はみ出させたまま使う。
• 流れのセクションは SP で写真を省き、ステップカードを縦に並べる。

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