--- version: alpha name: Clean Blue Auto Finance Campaign LP description: 白と淡い水色の地に、青の見出しと赤の価格・CTAを効かせた自動車ローンのキャンペーンLP。価格比較ボックス、支払い表、番号付きの特長カードで金利の安さと月々の支払いを順に伝える。 colors: primary: '#028BD5' background: '#FFFFFF' background-alt: '#DFF5FF' cta: '#E30302' on-cta: '#FEF3EE' accent-1: '#C00404' marker: '#9BDDFE' text: '#4A4A4A' dark-section: '#545454' surface: '#E6E6E6' tint-1: '#F1E7DE' accent-2: '#EE8A00' line: '#0C83C4' typography: display: fontFamily: Roboto fontSize: 44px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 72px fontWeight: 700 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 2px md: 4px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 58px heading-bar: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 32px heading-marker: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px price-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 300px tab-switch: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 90px payment-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 700px spec-table: backgroundColor: '{colors.primary}' typography: '{typography.body-md}' height: 400px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 490px banner-related: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 318px --- # DESIGN.md — 水色×青の清潔な自動車ローン訴求 LP（Clean Blue Auto Finance Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、情報量多め・訴求型 - **キーワード**: 水色の地・青い線枠・赤の金額強調・マーカー下線・表組み・番号カード - **地の質感**: フラットで光沢なし。細い青の線枠と単色面だけで組む - **形**: 角丸はほぼなし。四角い枠のボックスと、上部だけ丸いタブ - **温度感**: 涼しげで誠実。数字の赤だけが温度を上げる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#028BD5` | ブランド青・見出し・表ヘッダ | 5% | 画素の実測 | | `background` | `#FFFFFF` | 基本背景 | 45% | 画素の実測 | | `background-alt` | `#DFF5FF` | 淡い水色のセクション地 | 25% | 画素の実測 | | `cta` | `#E30302` | 見積りボタン | 1% | 画素の実測 | | `on-cta` | `#FEF3EE` | ボタン文字 | 0% | 画素の実測 | | `accent-1` | `#C00404` | 金額・注意書きの赤 | 0% | 画素の実測 | | `marker` | `#9BDDFE` | 見出しのマーカー下線 | 1% | 画素の実測 | | `text` | `#4A4A4A` | 見出し・本文の濃いグレー | 2% | 推定 | | `dark-section` | `#545454` | 価格見出しバーのダークグレー | 1% | 画素の実測 | | `surface` | `#E6E6E6` | 表の項目列グレー | 1% | 画素の実測 | | `tint-1` | `#F1E7DE` | FVの生成りベージュ | 4% | 画素の実測 | | `accent-2` | `#EE8A00` | 関連商品バナーのオレンジ | 0% | 推定 | | `line` | `#0C83C4` | ボックス・表の青枠線 | 1% | 画素の実測 | - 白地と淡い水色地をセクション単位で交互に切り替える - 見出し・表ヘッダ・アイコン円は青で統一する - 赤は金額とCTA、注意書きだけに限定する - 見出し下は水色の太いマーカー線で強調する - 表の項目列はライトグレー、値は白地に青枠 - 関連サービス誘導だけオレンジ系で差別化する ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 金利・月額の大きな数字 | 欧文サンセリフ | Roboto | 700 | 44px | 1.1 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.05em | | `headline-md` | グレード見出し・リード | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.03em | | `headline-sm` | カード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.05em | | `note` | 注釈・写真キャプション | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.03em | | `accent` | 特長カードの斜体番号 | 欧文サンセリフ | Montserrat | 700 | 72px | 1.0 | 0.0em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 900 | 18px | 1.2 | 0.02em | - 見出しは太ゴシックで中央揃え - 金額は数字だけ大きく、単位の円は小さく添える - 注釈は小さいグレー、注意喚起だけ赤 - 本文の説明は中央揃えで短く改行する - 見出し下に青の短い横線を引く - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-c8a9e074`（元 LP の URL から採番） - **元 LP**: https://www.honda.co.jp/WR-V/zankure/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。