DESIGN.md — 桜ピンク×和紙質感の自動車ローン案内 LP（Soft Pink Paper-Texture Auto Finance LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: やさしい・柔らかい、かわいい、信頼・誠実、情報量多め・訴求型
• キーワード: ピンク・和紙テクスチャ・比較・線画アイコン・角丸カード・大きな価格表示
• 地の質感: 背景全面にうっすら紙の繊維テクスチャ。ピンク帯にも織り目のような質感がある
• 形: 角丸 12px 前後のカード、細いグレー線の枠、点線の区切り、ヒーローの円弧
• 温度感: 暖かく、柔らかい

Colors

• 画面の左右端は常にピンクの細い外枠で囲む
• セクションの導入帯はピンク地に白文字
• 価格カードの下地は生成り、説明の下地は白〜薄グレーの紙質感
• 金額・メリット見出し・CTA だけをピンクにし、本文はグレーにする
• 強調したい語にはピンクの下線マーカーか、黄色の点線下線を引く
• 比較図では対象をピンク、比較相手をグレーで塗り分ける
• button-primary は文字 #FFFFFF × 背景 #E45C82 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD3060、4.5:1）を使う。
• button-outline は文字 #E45C82 × 背景 #FFFFFF のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DD3060、4.5:1）を使う。
• plan-switch は文字 #E45C82 × 背景 #FFFFFF のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DD3060、4.5:1）を使う。
• balloon-label は文字 #FFFFFF × 背景 #E45C82 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DD3060、4.5:1）を使う。

Typography

• 見出しは細めの字で、字間を 0.1em 以上広げて軽く見せる
• 見出し末尾の「？」だけをピンクで大きくする
• 金額は数字を大きくし、「円」「〜」「(税込)」は小さく添える
• 注釈は「※」や「＊番号」で始め、ぶら下げインデントにする
• セクションラベルは小さなピンク文字にし、左に短い線を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ヒーロー直下の比較だけ 2 分割
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右にピンクの外枠（約 5px）を残し、その内側にコンテンツを置く
• カードは画面幅の約 90% で中央に置く
• 見出しと本文は中央揃え、カード内のリストは左揃え
• セクション間には下向きの薄グレー三角を置いて流れを示す
• 金額表は左にラベル、右に大きな数字を並べ、点線で区切る

Elevation & Depth

• カードは基本的に影なしで、細いグレー線の枠かピンク地上の白カードで見せる
• ボタンは下側に薄いピンクのベタ影（2〜3px）を付けて押せる感じを出す
• 最下部のバナーカードにはごく弱いぼかし影を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 車は切り抜きで影付き。動画サムネイルは角丸の長方形
• セクション境界: 直線で切り替える。ヒーローの下は淡ピンクの円弧
• ボタンは角丸 4px の長方形
• POINT ラベルはカード上辺にかかるピンクの四角タグ
• カード内は点線で上下に分ける
• チェックリストの記号はピンク枠の角丸四角

Components

• シミュレーションボタン（button-primary）: 横幅いっぱいのピンクのボタン。右端に小さな三角を付ける
• サブボタン（button-outline）: 白地にピンクの枠と文字。下に影。2 つを横に並べる
• 2 択のプラン比較タブ（plan-switch）: 上はピンク地に白文字のプラン名、下は白地にタイプ名と黄色点線下線、最下部に下向き矢印
• グレード別価格カード（price-card）: 灰色のグレード帯に車の切り抜き。月々の大きなピンク数字と、総額を右揃えで並べる
• POINT 付きメリットカード（point-card）: グレー枠のカード。上辺にピンクの POINT タグ、ピンク見出し、ピンク図解、点線、チェックリストの順
• 番号付き選択肢カード（number-card）: 左上にグレーの数字、ピンク見出し、モノクロの線画、中央揃えの説明
• CHECK ボックス（check-box）: 上部がピンク帯の白抜き CHECK、本文の要点にピンクの下線マーカー
• 吹き出しラベル（balloon-label）: 図解の上に置く角丸の吹き出し。ピンクとグレーで対にする
• 注記アコーディオン（accordion）: 上下だけグレー線の帯。中央に文字、右端に＋

Do's and Don'ts

Do - ピンクは外枠・帯・数字・CTA に絞り、面の大半は白と生成りにする - 背景にはうっすら紙のテクスチャを敷く - アイコンは細い黒の線画かピンクの単色シルエットにそろえる - 見出しの強調語にピンクの下線マーカーを引く - 仕組みは図解とグラフで見せる

Don't - 濃い影やグラデーションのボタンは使わない - ピンク以外の強い色を強調に使わない - 太すぎる見出しで詰めて組まない - 写真を背景いっぱいに敷かない（車は切り抜きで見せる） - 注釈を省いて金額だけを見せない

Page Structure

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

1. ファーストビュー（支払い方法の選び方を問いかける）: ピンクの枠の中に生成りのカード。吹き出しの問いかけ、縁取りピンクのキャッチ、車の切り抜き、線画の街並みと円弧
2. プランの 2 択（自分のタイプを選ばせる）: 左右 2 分割のタブ。タイプ名に黄色の点線下線を引き、下向き矢印を置く
3. プラン A の導入帯（プラン A を紹介する）: ピンク地に白文字。小さなラベル、大見出し、2 行の説明
4. 価格カード（月々の金額を見せる）: 生成りの地に白カードを縦に並べ、大きな数字とボタン 2 つを置く。補助金の一文に下線マーカー
5. 仕組みの説明（支払いの仕組みを図で説明する）: 車のシルエットをピンクとグレーに分けた図解と、吹き出しラベル
6. メリット（メリットを 3 つ見せる）: 枠線カードを縦に 3 つ。左に線画アイコン、右にピンクの文字
7. 満了後の選択肢（終わった後の 3 つの道を示す）: 番号付きカードに線画イラストを入れ、注釈を付ける
8. CHECK と注記（安心できる条件を強調する）: ピンク帯の CHECK ボックスとアコーディオン
9. プラン B の導入帯と動画（プラン B を動画で紹介する）: ピンク帯のあと、薄グレーの枠に動画サムネイルを 2 つ並べる
10. 料金例（具体的な支払額を見せる）: 点線で区切った金額表、吹き出し見出し、車の写真、全幅の CTA
11. 4 つのメリット（プラン B の利点を詳しく説明する）: POINT カードを 4 つ。円形のアイコン配置、棒グラフ、ピンクのシルエット図、チェックリスト
12. 注釈とバナー（条件の明示とカタログへの誘導）: 注釈を並べ、写真と小さなボタンを組み合わせた横長のバナーカードを置く

Imagery

• 車は白背景で切り抜き、斜め前から撮って足元に影を付ける
• アイコンは黒の細い線画で、余白に小さなきらめきを添える
• 図解の車はピンクとグレーの単色シルエットにする
• メリットの図は丸いグレー枠の中にピンクのアイコンを入れ、円形に並べる
• ヒーロー背景には白の線画の家や街並みを薄く描く
• 動画サムネイルには中央にピンクの丸い再生ボタンを置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はピンクの外枠の中に、最大 900px 程度の中央コンテンツを置く
• PC のヒーローではキャッチを 2 行にまとめ、車を中央に大きく見せる
• PC では価格カードを 2 枚横並びにし、上辺をタブ形にする
• PC ではメリット・選択肢カードを 3 列、POINT カードを 2×2 にする
• PC では動画 2 本を横並びにし、金額表と車写真を左右 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 行書くと起動時に読み込まれる。