DESIGN.md — 紺青×石目グレーの中古車販売 LP（Steel Blue Textured Used Car Dealer LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: 信頼・誠実、力強い・インパクト、クール・先進的
• キーワード: 紺青・石目テクスチャ・斜めカット・白抜き箱見出し・実績数字・ピル型ボタン
• 地の質感: 淡いグレーの面にコンクリートや和紙のようなざらついた質感を重ねる。紺の面にも薄い写真を透かして奥行きを出す。
• 形: 大きな斜めの三角形でセクションをつなぐ。カードは角丸 16px 程度。ボタンは完全なピル型。
• 温度感: 寒色寄りで落ち着いた印象。人物写真で親しみを足す。

Colors

• 地の色は、石目グレーと紺青の面を上から交互に並べる。
• 白地はお知らせなど情報系のセクションに限って使う。
• 見出しの強調語は、紺の正方形の箱に白抜きで1文字ずつ入れる。
• CTA はすべて紺のピル型にし、白文字と右端の白い丸矢印を付ける。
• ゴールドは評価バッジだけに使い、ほかでは使わない。
• 紺の面には、写真を薄く透かすか斜めのグラデーションで奥行きを出す。

Typography

• 見出しは字間を 0.1em 以上広げ、角ばったゴシックで組む。
• 強調語は紺の箱に白抜きで入れ、続く語は通常の色で横に並べる。
• 実績数字は細身のコンデンス書体で大きく、単位は小さく添える。
• キーワードには太めの下線を引く。
• 英字見出しは斜体にし、その下に横線ではさんだ和文ラベルを置く。
• 本文は 11px 前後と小さめにし、行間を 2 倍とって読みやすくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。在庫は横スクロールのカルーセルにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 15px。
• 実績カードは縦に 3 枚、間隔 16px で並べる。
• 在庫カードは 1.2 枚分が見える幅にし、左右に丸い矢印を置く。
• 各セクションの末尾に全幅のピル型ボタンを置く。
• 紺のセクションは内側に細い白枠を入れる。

Elevation & Depth

• 影はほぼ使わず、色面とテクスチャの差で層を分ける。
• 写真背景のバナーには暗いオーバーレイをかける。
• 固定の下部バーだけ、上にうっすら影を落とす。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 車の写真は長方形で角丸なしか小さめ。メインビジュアルは角丸付きの縦長にする。
• セクション境界: 大きな斜めの三角形で紺とグレー（または白）を切り替える。
• 吹き出しは円形にし、斜めの線を尾として付ける。
• 丸い PAGE UP ボタンは半円状にする。
• カードは石目グレー地で角丸 16px にする。

Components

• 紺ピル型ボタン（button-primary）: 全幅のピル型。中央に白文字、右端に白い丸の矢印を置く。
• 白抜き箱見出し（heading-box）: 強調語を紺の正方形に1文字ずつ白抜きで入れ、続く語は濃色で並べる。右側に英字ラベルと下線を置く。
• 実績カード（stat-card）: 石目グレーのカード。小見出し、箱見出し、アイコン、下線付きの大きな数字の順に並べる。
• 在庫カード（stock-card）: 上に車の写真、下にグレー地で車名、総額、年式のラベル行、紺のピル型ボタンを並べる。
• お客様の声カード（voice-card）: 左に正方形の車写真、右に購入車種と地域・イニシャルを置く。区切り線の下に本文を入れる。
• 円形吹き出し（speech-circle）: 白い円に紺の太字で短い感想を入れ、斜めの線を尾にする。
• 評価バッジ（rating-badge）: 月桂冠のゴールドで囲み、評価の数字を中央に置く。
• 写真背景の申込バナー（photo-banner-cta）: 暗くした写真の上に、車アイコン、細線、白抜き箱の強調語を置く。
• 下部固定バー（sticky-bar）: 左に紺地の申込導線、右にグレー地の電話・地図・メニューのアイコンを置く。

Do's and Don'ts

Do - 紺とグレーの面を交互にし、斜めカットでつなぐ。 - 強調語は紺の箱に白抜きで入れる。 - 実績は数字を大きくし、下線とアイコンを添える。 - グレー面には石目テクスチャを敷く。 - スタッフ全員の立ち姿写真で、信頼感を出す。

Don't - 暖色やビビッドな色を CTA に使わない。 - 丸ゴシックや手書き書体を使わない。 - グレー面をテクスチャのない平坦なグレーにしない。 - ボタンの形をピル型以外に混在させない。 - ゴールドを評価バッジ以外に広げない。

Page Structure

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

1. ファーストビュー（業種と強みを一目で伝える）: 空と店舗の縦長写真に縦組みの白枠キャッチ、評価バッジ、ロゴを重ねる。
2. 実績（数字で信頼を示す）: 紺地に斜めカットを入れ、石目の実績カードを 3 枚縦に並べる。
3. 企業紹介（人の顔で安心感を出す）: スタッフの集合写真、円形吹き出し 2 つ、下線付きの理念見出し、ロゴ、本文の順に置く。
4. サービス訴求（ローンの強みを説明する）: 紺地に白枠を入れ、数字入りの見出し、本文、写真バナーの CTA、流れへのボタンを並べる。
5. 在庫情報（商品を見せる）: 白地に箱見出しを置き、在庫カードを横スクロールで並べ、一覧ボタンへつなぐ。
6. お客様の声（体験談で後押しする）: 紺の写真帯に英字の斜体見出しを置き、グレー地に声カードを 3 枚並べ、一覧ボタンへつなぐ。
7. お知らせ（更新情報を伝える）: 白地に大見出し、日付とタイトルの線区切りリスト、ピル型ボタンを置く。
8. フッター（連絡先と店舗情報を示す）: 濃紺地にロゴ、大きな電話番号、所在地の表、バナー、SNS アイコン、半円の PAGE UP を置く。

Imagery

• 店舗と在庫車を晴れた空の下で撮り、青みのある色調にそろえる。
• スタッフは私服で横一列に並べ、切り抜いて全身を見せる。
• 車の写真は同じ店舗の外壁を背景に、正面斜めから撮る。
• 作業風景の写真はモノクロ寄りの薄い装飾として端に置く。
• アイコンは紺一色の塗りつぶしにし、車・手・トラックなどの単純な形にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せの最大幅で、背景の斜めカットを画面幅いっぱいに広げる。
• 実績カードは PC で横に 3 列並べる。
• 在庫は PC で 4 列のグリッドにする。
• 声カードは PC で写真を左、本文カードを右に置く横長にする。
• お知らせは PC で見出しを左、リストを右に置く 2 カラムにする。
• 下部の固定バーは SP のみ。PC は上部のグローバルナビと電話番号に置き換える。

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