DESIGN.md — 青×黄×紺の集中線ポップ自動車キャンペーンLP（Pop Comic Burst Car Campaign LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: 集中線・極太見出し・手描きキャラ・黄×紺・ドット柄・マンガ調
• 地の質感: 放射状の集中線とドット柄で、平面の背景に動きをつけます。カードのフチは手描き風のガタついた線にします。
• 形: 大きめの角丸カード、ピル型ボタン、斜めに傾けた台形の見出しプレート、ギザギザの円バッジ。
• 温度感: 高彩度で明るく暖かい。お祭りのようなにぎわい。

Colors

• 地は空色の集中線を基本にします。抽選のブロックだけ赤オレンジの放射背景に切り替えて、温度を上げます。
• 主要ボタンとカード地は黄色、フチと文字は紺で揃えます。
• サポート・店舗検索は黄色のドット地に白カードを載せ、ボタンは紺地＋黄色の矢印アイコンにします。
• 見出しは白文字＋紺の太フチ、または黄文字＋紺のフチにします。
• フッター付近は生成り地に切り替え、黒×赤で別トーンを作ります。
• 赤はアクセントです。プルダウンの矢印や誘導ボタンだけに使います。

Typography

• 見出しには太い紺のフチ文字と影をつけ、ステッカー風にします。
• 見出しは2行に分け、強調したい語を大きくします。
• 数字は特に大きくし、黄＋紺フチで目立たせます。
• 英字の小見出しは日本語見出しの上に小さく載せます。
• 注釈は■区切りで詰めて流し込みます。
• 本文は左揃え、見出しとボタンは中央揃えにします。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品は 2 カラム。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右6%ほどの余白をとり、中央に置きます。
• 車種カードは「ロゴプレート→写真→説明→ボタン」の順に縦に積みます。
• カード同士の間は約24pxあけます。
• セクション見出しにはキャラクターを重ね、カードの上端にかぶせます。
• サポートの項目は紺の波線で区切ります。
• 店舗検索のボタンは縦に並べ、間を約16pxあけます。

Elevation & Depth

• カードは影ではなく、紺の太い手描き風フチで浮かせます。
• 黄ボタンの下側に紺の厚み線（オフセット影）をつけます。
• 見出し文字には紺フチと右下へのずらし影をつけます。
• 賞品バッジは紺のギザ円形でシールのように見せます。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 車・賞品は背景を抜いた切り抜き写真。キャラクターは手描きイラストを切り抜いて配置。
• セクション境界: 背景色の切り替えは斜めの直線にします。集中線からドット地への切り替えも斜めに入れます。
• ボタンはすべてピル型にします。
• カードのフチは4〜6pxで、少しガタついた手描き風にします。
• 車種名は傾けた紺の台形プレートに白文字で載せます。
• 特典はギザギザの円形バッジにします。

Components

• 黄色のピル型詳細ボタン（button-primary）: 黄色地に紺の太字、右端に紺の丸矢印アイコン。下側に紺の厚み線をつける。
• 紺のピル型ボタン（button-secondary）: 紺地に白文字、右に黄色の丸矢印アイコン。サポート項目に使う。
• 車種カード（product-card）: 黄色から下へ淡黄に変わるグラデーション地。紺の手描きフチで、左上に傾けた車名プレート、右上に機能ロゴを置く。
• 傾いた名称プレート（name-plate）: 紺の斜め台形に、白の欧文ロゴとカナ表記を重ねる。
• ステッカー風見出し（section-heading）: 英字の小見出し＋白の極太文字を紺フチの台座に載せ、キャラクターを重ねる。
• 賞品バッジ（prize-badge）: 紺のギザ円に、黄の賞名と白の当選人数を入れる。
• 地域プルダウン（accordion-item）: 黄色のピル型に紺の文字、右に赤のV字矢印。
• 黄帯の訴求ボックス（info-box）: 黄色地に紺フチの帯。リード文の下に大きな数字の訴求を入れる。
• 注釈ボックス（notice-box）: 白地に黒の手描き太フチ。細かい注意書きを小さな文字で流し込む。

Do's and Don'ts

Do - 空色の集中線、黄、紺の3色を軸にします。 - 見出しは極太の書体に紺フチをつけ、ステッカー風にします。 - 手描きキャラクターを見出しやカードの角にのぞかせます。 - ボタンは黄色のピル型に揃え、矢印アイコンを右端に置きます。 - セクションごとに、集中線・放射・ドット・生成りと地の柄を切り替えます。 - 注釈は小さな文字で、本文とは分けて置きます。

Don't - 細い明朝や淡いパステルの配色にしない。 - カードのフチを細い直線やぼかし影にしない。 - 赤を広い面に多用しない（抽選のブロック以外）。 - ボタンを角張った四角にしない。 - 余白を広く取りすぎて勢いを殺さない。 - 写真を背景付きの四角い枠に入れない（切り抜きにする）。

Page Structure

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

1. ファーストビュー（キャンペーン名と期限を伝える）: 空色の集中線背景に、黄＋紺フチの極太タイトルと期限。キャラクターの群像イラストを大きく置く。
2. 来店特典（参加方法と特典を示す）: 白文字の見出し、ギザ円バッジ、特典グッズの写真、小さな注釈。
3. 抽選企画（賞品と当選数で参加を促す）: 赤オレンジの放射背景。大きな数字、賞品の切り抜き写真、ギザ円の賞バッジを2カラムで並べる。
4. 確率アップ訴求（追加の参加条件を示す）: 黄色の帯ボックスに紺の大文字。下に■区切りの注釈。
5. 診断コンテンツへの誘導（自分に合う商品探しに誘導する）: 黄ドット地に白い大カード。中に空色のパネル、丸く切り抜いた車のアイコン群、白のピル型ボタン。
6. おすすめラインアップ（車種を一覧で見せる）: 集中線背景に見出しとキャラクター。黄色の車種カードを縦に積み、それぞれに詳細ボタンを置く。
7. 購入サポート（オンライン見積り・商談などの導線）: 黄ドット地の白カードに、アイコン・項目名・紺ボタンを波線で区切って並べる。
8. 店舗検索（近くの店舗へ誘導する）: 白カードに説明文と、地域別の黄色ピル型プルダウンを縦に並べる。
9. ファンサイト誘導（関連コンテンツに送客する）: 生成り地に音符などの装飾。黒の極太ロゴ風の文字と赤のピル型ボタン、キャラクターの顔のアップ。
10. 注意事項（法的な注釈を載せる）: 黒の手描きフチの白ボックスに、小さな文字で注釈を流し込む。

Imagery

• キャラクターは太い輪郭線で描く、ゆるい手描きイラストにします。黒縁メガネ、白シャツ、ベージュ系の体色。
• 商品は背景を抜いた斜め前からの切り抜き写真にし、カード中央に大きく置きます。
• 背景は空色の集中線、赤の放射線、黄色地に薄いドット柄を使います。
• 星・音符・稲妻などの小さな装飾を散らします。
• サポートのアイコンはフラットなイラスト（電卓、PC、虫眼鏡など）にします。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はタイトルを左、キャラクターを右に置く横並びの FV にします。
• PC の車種カードは3カラムのグリッドにします。
• PC のサポート項目は4カラムを横一列に並べ、縦の区切り線を入れます。
• PC の地域プルダウンは3カラムのグリッドにします。
• PC の診断誘導カードは、左に車アイコン群、右にロゴとボタンを置く横長にします。
• PC のファンサイト誘導は、キャラクターと文字を横に並べ、ボタンも横に置きます。

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