DESIGN.md — 黄×紺×緑の賑やか新車リースキャンペーンLP（Bold Yellow Campaign Car Lease LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: 情報量多め・訴求型、ポップ・元気、力強い・インパクト
• キーワード: 抽選キャンペーン・月額定額・太ゴシック・価格の大きな数字・桜の装飾・ブランド色でブロックを分ける
• 地の質感: ベタ塗りの面に、斜めの色帯・立体文字・桜の切り抜き写真を重ねたチラシ風
• 形: 角丸の白カード、ピル型の見出し枠、矢印付きの角丸ボタン
• 温度感: 暖色の黄・オレンジと、寒色の紺・緑が共存する明るく賑やかな温度感

Colors

• ブランドやプランごとに地の色を変える（緑＝メイン、黒×オレンジ＝サブ、黄×紺＝キャンペーン）。
• 地が色付きのセクションは、中身を白カードに載せて読みやすくする。
• プランの比較は黒・青・緑のボタンで期間を色分けする。
• 補償の見出しや強調はマゼンタ寄りの赤だけを使う。
• セクション見出しは紺の文字か、白地に紺枠のピル形にする。
• 淡いミントやグレーは表や補足のブロックの地に使う。
• compensation-list は文字 #E0336B × 背景 #FEFEFE のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#DE2863、4.54:1）を使う。

Typography

• 見出しは極太のゴシックにし、斜体や縁取り、立体の影で目立たせる。
• 金額は数字だけを大きくし、「円」「税込」は小さく添える。
• 本文は 13px 前後のゴシックで、行間を広めにとる。
• 注釈は 9〜10px の細かい文字でまとめてブロックにする。
• 英字のブランド名は太いサンセリフで字間を広めにとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。車種カードは 3 列、特長は 3〜4 列の小さなグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
• 色付きの地の中に、角丸の白カードを幅 88% ほどで置く。
• 車種カードは 3 枚を横に並べ、各カードに写真・車名・価格・ボタンを縦に積む。
• プラン比較は横にスワイプするカルーセルにし、左右に隣のカードを少しのぞかせる。
• 比較表は罫線で区切った中央揃えの行にする。
• お客様の声は、丸いアバターと属性の下に本文を置く 2 列の配置。

Elevation & Depth

• カードは基本的に影なし。白い面と地の色の対比で浮かせる。
• 立体見出しには、太い縁取りとずらした影をつける。
• ボタンに影はつけない。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: 車は背景を切り抜き、人物はイラストを丸く切り抜く
• セクション境界: 基本は直線で区切る。キャンペーン部だけ斜めの色帯、プラン帯の下に三角の矢印をつける
• セクション見出しは左右が丸いピル型の枠にする。
• ボタンは角丸 4〜6px で、右端に三角の矢印を置く。
• 特長のボックスは細い色の線で囲む。
• 番号は丸いバッジにする。

Components

• 問い合わせボタン（button-primary）: 紺地に白文字、右に白い三角をつけた角丸ボタン
• プラン別の見積もりボタン（button-plan）: 期間ごとに黒・青・緑で色分けした小型ボタンを縦に並べる
• ピル型の見出し（heading-pill）: 白または色の線で囲んだ横長のピル枠に、見出しを中央揃えで置く
• 車種カード（car-card）: 白い角丸カードに、メーカーロゴ・切り抜き写真・車名・含まれるものの小さなタグ・大きな価格を載せる
• プランのカルーセルカード（plan-card）: 黒地のカードに、大きなプラン名・特長 4 つの番号ボックス・利用者の声の吹き出しを並べる
• ポイントの 3 列ボックス（point-box）: 上に丸い番号バッジを重ね、太字の短い見出しと小さな説明を入れた枠囲みのボックス
• 補償の一覧（compensation-list）: 左に赤い縦線、小見出し、赤い大見出し、説明を置き、右に写真を並べる行
• お客様の声（voice-card）: 黄色い縁の丸いアバターと太字の属性を並べ、その下に本文を置く

Do's and Don'ts

Do - ブランドやプランごとに地の色を変え、どこに何の情報があるかを色で区別する。 - 価格は太い数字を大きく見せ、カードの下に色分けしたボタンを置く。 - 季節感を出すため、桜などの切り抜き素材を見出しの左右に添える。 - 色付きの地の上の情報は白カードに載せる。 - 注釈は小さな文字でブロックにまとめ、本文から離す。

Don't - 淡いパステルだけでまとめない。彩度の高いベタ塗りを主役にする。 - 見出しに細い書体や明朝を使わない。 - 1 つのセクションに、ブランド色を 3 系統以上混ぜない。 - 価格の数字と単位を同じ大きさにしない。 - カードに強い影やグラデーションの背景をつけない。

Page Structure

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

1. ヘッダー（ロゴと問い合わせへの導線）: 白地の左にロゴ、右に紺の小さな問い合わせボタン
2. ファーストビュー（キャンペーン）（抽選キャンペーンの告知）: 黄色地にピンク・紺の斜め帯。立体のロゴ文字、車の切り抜き写真、キャラクター、期間、最大金額のバッジ
3. 賞品と抽選日（当たる額と日程を示す）: 白カードに斜体の大きな金額を 3 つ。抽選日は番号バッジ付きで 4 列のグリッド
4. 申込みの流れ（店舗とWebの 2 通りの申込み方法を示す）: アイソメトリックのイラストを左右に置き、矢印で成約の車へつなぐ
5. キャンペーン概要と注意事項（期間・応募方法・規約を示す）: ラベル付きの表、紺の帯で賞品の要約、細かい注釈の段落
6. ブランドの導入（定額リースの紹介へ切り替える）: キャラクターを大きな見出しで挟み、緑地に桜とプランのロゴ
7. 人気車種（車種と月額を比較する）: 白カード 3 列に、価格と期間ごとの見積もりボタン
8. プラン比較（期間ごとの違いを示す）: 横スクロールの色分けカード、特長 4 つ、吹き出し、比較表
9. 決済方法（カード払いができることを訴求する）: ミントの地に、ブランドのロゴ列と 3 列のメリットの枠ボックス
10. 補償の紹介（安心感を出す）: 緑地の白カードに、大きな補償額と写真付きの補償 4 つのリスト
11. サブブランドの紹介（別サービスへ誘導する）: 黒い外枠にオレンジのカード。0 円などの数字ボックス、車種カード、選ばれる理由 3 つ
12. どちらを選ぶか（2 つのサービスへ振り分ける）: 緑とオレンジを左右に分け、それぞれにカードとボタン
13. お客様の声（実際に使った人の声で信頼を得る）: 紺の見出しを横線で挟み、アバター付きの声を 2 列に並べる
14. 問い合わせ・フッター（電話とフォームへ誘導する）: キャンペーンと同じ黄色の柄に、大きな電話番号と紺のボタン。下に 2 色の固定ナビ

Imagery

• 車は真横か斜め前から撮った、背景を切り抜いた明るい写真にする。
• 桜の枝の切り抜きを見出しの両側に散らし、季節感を出す。
• 人物は線のはっきりした簡単なイラストのアバターにし、丸く切り抜いて黄色い縁をつける。
• 店舗やパソコンはアイソメトリックのフラットなイラストにする。
• アイコンは単色の線画で、ブランドの緑を使う。
• 補償の説明には、傷やガラスの破損などの実写写真を小さく添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅 750px 前後の SP レイアウトを置き、左右を各セクションの地の色で延長する想定。
• 車種カードは PC でも 3 列のまま、余白を広げる。
• プランのカルーセルは、PC では 3 枚を並べて表示してもよい。
• お客様の声は PC で 3 列にする。

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