DESIGN.md — 水色×青の清潔な自動車ローン訴求 LP（Clean Blue Auto Finance Campaign LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: 水色の地・青い線枠・赤の金額強調・マーカー下線・表組み・番号カード
• 地の質感: フラットで光沢なし。細い青の線枠と単色面だけで組む
• 形: 角丸はほぼなし。四角い枠のボックスと、上部だけ丸いタブ
• 温度感: 涼しげで誠実。数字の赤だけが温度を上げる

Colors

• 白地と淡い水色地をセクション単位で交互に切り替える
• 見出し・表ヘッダ・アイコン円は青で統一する
• 赤は金額とCTA、注意書きだけに限定する
• 見出し下は水色の太いマーカー線で強調する
• 表の項目列はライトグレー、値は白地に青枠
• 関連サービス誘導だけオレンジ系で差別化する

Typography

• 見出しは太ゴシックで中央揃え
• 金額は数字だけ大きく、単位の円は小さく添える
• 注釈は小さいグレー、注意喚起だけ赤
• 本文の説明は中央揃えで短く改行する
• 見出し下に青の短い横線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、表は横スクロール
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに背景色の帯を全幅で敷く
• 水色地の上に白い大きなパネルを置き、中に表やCTAを入れる
• 価格見出しバーと金額ボックスを縦に積み、下向き三角でつなぐ
• 特長カードは縦に並べ、左上に大きな番号を重ねる
• CTAは主要ブロックの後に全幅で置く

Elevation & Depth

• 影はほぼ使わない
• CTAボタンだけ下辺に濃い赤の薄い影と上から下へのグラデーション
• 奥行きは枠線と背景色の差で作る

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 車は白背景の切り抜き。FVは人物の小さな切り抜き写真を散らす
• セクション境界: 直線で背景色を切り替える
• ボックスは角丸なしの細い青枠
• タブは上の角だけ大きく丸める
• アイコンは青い正円の中に白抜きで描く
• CTAは角丸4px程度の長方形

Components

• 見積りCTA（button-primary）: 赤のグラデーションに白太字、右端に外部リンクアイコンと矢印
• 左縦線見出し（heading-bar）: 左に青の太い縦線、青文字のグレード見出し
• マーカー見出し（heading-marker）: 濃グレー太字の下半分に水色マーカー
• 価格比較ボックス（price-box）: ダークグレーの見出しバー＋赤数字の定価枠、下向き青三角、青枠の月額ボックス
• グレード切替タブ（tab-switch）: 上角丸タブ。選択中は青塗り白文字、非選択は白地青枠
• 支払い例表（payment-table）: グレーの項目列と青ヘッダ、青罫線の値セル
• 概要表（spec-table）: 左列が青塗り白文字、右列が白地の2列表
• 番号付き特長カード（feature-card）: 白地青枠、左上に大きな斜体の青番号、青円アイコン、マーカー見出し
• 関連サービスバナー（banner-related）: オレンジ枠の横長バナー、右端に薄いオレンジの矢印帯

Do's and Don'ts

Do - 金額と金利は大きな数字で目立たせる - 青・水色・白の3色で全体を組み、赤は要点だけに使う - 注釈は該当ブロックのすぐ下に小さく置く - 表は罫線をきちんと引いて比較しやすくする - CTAは表や特長のあとに繰り返し置く

Don't - 赤を見出しや背景に広く使わない - 濃い影や立体的な装飾を付けない - ピル型ボタンにしない - 手書き風や丸文字の書体を使わない - 背景に写真を全面に敷かない

Page Structure

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

1. ファーストビュー（キャンペーンと低金利を一目で伝える）: ベージュ地に車の切り抜き写真、右上にサービスロゴと青の金利コピー、周囲に生活シーンの小写真
2. リード（月々の負担が軽いことを伝える）: 白地に中央揃えの太字2〜3行、一部に水色マーカー
3. グレード別価格（定価と月額の差を見せる）: 左縦線見出し、車写真と注釈、価格比較ボックスをグレード数だけ繰り返す
4. 支払い例の詳細（具体的な支払い内訳を示す）: 水色地に白パネル、マーカー付きリード、切替タブ、比較表、注釈、CTA
5. キャンペーン概要（条件と期間を明示する）: 水色地に青見出しと下線、左列青の2列表
6. 仕組みの説明（商品の仕組みを図で理解させる）: 白地にマーカー見出し、中央揃えの説明文、青枠の図解ボックスと番号付きプラン一覧
7. 特長（メリットを3つ伝える）: 水色地に番号付き特長カードを縦に3枚、下に注釈
8. CTA・関連サービス（見積りへ誘導し別プランも案内する）: 赤の見積りボタンの下にオレンジ枠の横長バナー

Imagery

• 車は斜め前からのスタジオ撮影を白背景で切り抜く
• FVは海辺・買い物・キャンプなどの生活シーンの小さな切り抜き写真を周囲に散らす
• アイコンは青い円に白のシンプルなピクトグラム
• 図解は青の実線と点線で車のシルエットを分割して描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約900pxで中央に寄せ、両脇は背景色を延ばす
• PCのグレード別価格は左に価格ボックス、右に車写真の2カラム
• PCは比較表をすべて横に並べ、横スクロールなし
• 特長カードはPCで3列横並び
• 図解ボックスはPCで左に図、右にプラン一覧の2カラム

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