DESIGN.md — 紺×白の端正な輸入車フェア LP（Navy Corporate Spring Car Fair LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、清潔・爽やか、情報量多め・訴求型
• キーワード: 濃紺・白カード・春フェア・車種ラインナップ・点線価格表・角の立った矩形
• 地の質感: フラットな単色面。写真だけで季節感を出し、グラデーションや影はほぼ使わない
• 形: 角丸なしの矩形が中心。ボタンも角丸はほぼなし。見出しの下に細い紺の罫線
• 温度感: クールで落ち着いている。FV の緑と桜で春の温かさを少し足す

Colors

• 濃紺 1 色を主役にし、帯・ボタン・罫線・アイコンの面まで同じ紺でそろえる
• 特典は濃紺の全幅帯の上に白カードを置いて見せる
• 車種の一覧は白地にして、写真の背景だけ薄いグレーにする
• 強調色（赤・金など）は使わない。季節感は FV の写真だけで出す
• FV のボタンは白地に紺文字。白地の部分では紺地に白文字に切り替える
• 特典ラベルは白い四角に黒文字で、紺の帯の上に置く

Typography

• 見出しは極太ゴシックで詰めて組み、太さで階層を作る
• 車種名は大きな欧文で書き、その上に小さな日本語のキャッチを置く
• 価格表は左に項目、右に金額を置き、間を点線リーダーでつなぐ。（税込）は小さくする
• 注釈は 8〜9px の小さな文字で、本文の下にまとめる
• 日付は数字を大きく、曜日は小さな欧文にしてメリハリをつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典のスペックカードだけ 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 濃紺の帯は全幅、白カードは左右に 20px 程度の余白を取る
• 車種ブロックは『キャッチ→車種名→罫線→グレード名→写真→価格表→ボタン 2 つ』の順で毎回同じにする
• ボタンは中央寄せの固定幅（約 170px）で、縦に 2 つ並べる
• セクションの区切りは色面の切り替えだけで行う
• 注釈は本文ブロックのすぐ下に置く

Elevation & Depth

• 影は使わず、フラットにする
• カードは紺地と白の色差だけで浮いて見せる
• スペックカードは紺のヘッダー帯と細い紺枠で区切る

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角のまま。車両は薄いグレーのスタジオ背景で切り抜き、FV は全面写真
• セクション境界: 直線で色面を切り替える
• 角丸は最小限（ボタン 2px 程度）
• アイコンの面だけは小さく角丸にしてよい
• 斜めや波形の区切りは使わない
• 見出しの下に細い直線の罫線を引く

Components

• 来店予約ボタン（button-primary）: 紺地に白文字、外部リンクのアイコンを付けた矩形ボタン
• 電話問い合わせボタン（button-tel）: 来店予約ボタンと同じ形で、電話アイコン付き。すぐ下に並べる
• FV の白ボタン（button-fv）: 写真の上に置く、白地に紺文字のボタン
• 特典番号ラベル（benefit-label）: 白い四角に『特典＋丸数字』を入れ、右側に白抜きの大見出しを並べる
• スペックカード（spec-card）: 紺のヘッダー帯に項目名、白地の本体に太字の数値や説明を入れる
• サービスアイコンのタイル（icon-tile）: 紺の正方形に白い線画アイコンとラベル。間に＋記号を挟む
• 点線の価格表（price-table）: 項目と金額を点線リーダーでつなぎ、最後に合計価格を大きく書く
• 車種見出し（model-heading）: 小さなキャッチ、大きな欧文の車種名、全幅の紺の罫線を組み合わせる
• 最後の問い合わせボックス（cta-box）: 紺の枠の中に白文字のメッセージ、その下の白い面にボタン 2 つ

Do's and Don'ts

Do - 紺・白・グレーの 3 色でまとめる - 車種ブロックは同じ型で繰り返し、比べやすくする - セクションごとに来店予約と電話の 2 つのボタンを置く - 価格や条件の注釈は小さな文字ではっきり載せる - 季節感は FV の写真と和柄のシルエット 1 点に絞る

Don't - ピル型ボタンや大きな角丸を使わない - 赤や黄色の派手な強調色・バッジを使わない - 影やグラデーションの装飾を加えない - 車両写真を斜めや円形に切り抜かない - 手書き風やポップな書体を使わない

Page Structure

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

1. ファーストビュー（特典の内容とフェアの期間を伝える）: 空と芝生の全面写真に、白い枠のラベル、白い極太見出し、欧文のフェア名、日付、白ボタン 2 つを重ねる
2. 特典の導入（特典の合計額と条件を示す）: 白地に極太の 2 行見出しと紺の下線。右上に紺の桜枝シルエットを置く
3. 特典①（コーティングの価値を説明する）: 紺の帯に特典ラベルと見出し。白カードの中に暗い商品画像とスペックカード 3 枚を入れる
4. 特典②（メンテナンスパックを説明する）: ＋記号でつなげて同じ紺の帯に続ける。白カードに作業写真、アイコンのタイル、本文を入れる
5. CTA（来店・電話へ誘導する）: 白地の中央に紺のボタンを 2 つ縦に並べる
6. 車種ラインナップの見出し（すぐ納車できる車を紹介する）: 紺の帯に白い極太の 2 行見出しを置き、下に補足を 1 行
7. 車種ごとの紹介（車種ごとの価格を見せる）: 欧文の車種名、罫線、グレーの背景の車両写真、点線の価格表、ボタン 2 つを 4 回繰り返す
8. 注意事項（価格の条件を明記する）: 小さな文字の注釈を段落にまとめ、重要な部分には下線を引く
9. 最後の CTA（ほかの仕様についての問い合わせを促す）: 紺の枠付きボックスに白文字の 2 行と、ボタン 2 つ
10. 実施店舗（店舗の情報を示す）: 黒い極太の見出しの下に、紺の帯に載せた店舗外観の写真を置く

Imagery

• FV は青空・桜・芝生の屋外で、車と人物を自然光で撮った明るい写真
• 車両は薄いグレーのスタジオ背景で、斜め前 45° から撮る
• サービスの写真は作業着の人物と車を写した実写
• アイコンは白の線画で、紺の正方形に入れる
• 装飾は紺の桜枝シルエットを 1 点だけ置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 600px に固定し、中央に寄せる
• FV の写真は PC で全幅に広げ、文字は中央の列に寄せる
• PC では紺の帯もコンテンツ幅の中に収め、外側は白地にする
• ボタンは PC でも縦 2 段で、少し幅を広げる
• 車種ブロックは PC でも 1 カラムのまま縦に並べる

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