DESIGN.md — 青×黄の稲妻モチーフ自動車キャンペーンLP（Electric Blue Yellow Lightning Campaign LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: ポップ・元気、力強い・インパクト、清潔・爽やか、情報量多め・訴求型
• キーワード: 稲妻・斜めストライプ・電動化・高彩度・グラデーション数字・キャンペーン
• 地の質感: フラットな面に、斜めの帯と半透明の稲妻柄を重ねる。カード内は青のグラデーション
• 形: 大きめの角丸カード、ピル型ボタン、先端を鋭くした稲妻アイコン
• 温度感: 明るく爽やかな寒色が中心。黄で熱量を足す

Colors

• 地の色はセクションごとに、空色・黄緑から黄へのグラデーション・薄グレー・空色の順で切り替える
• 地には斜めの帯や稲妻柄を、半透明の淡い色で重ねる
• 主CTAは黄の面に紺の文字にし、紺の丸い矢印アイコンを添える
• サブCTAは白の面に黄の縁取り、または紺の面に白文字にする
• 特典金額は黄から黄緑へのグラデーション文字にし、白い縁取りを付ける
• 本文中のキーワードは黄色マーカーに紺の太字で強調する
• speech-label は文字 #00B8EE × 背景 #FEFEFE のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#007FA4、4.55:1）を使う。

Typography

• 見出しは極太ゴシックにし、助詞などは小さく細くしてメリハリを付ける
• 数字は本文の3〜5倍の大きさにする
• 価格は細めのサンセリフで大きく見せる
• 見出しの左右に稲妻アイコンを置く
• 本文は中央揃えを基本にし、規約だけ左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。店舗検索のボタンは 2 列にする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面幅の約88%にし、地の色の上に浮かせて置く
• フローは縦に積み、間を下向きの三角矢印でつなぐ
• セクション見出しは中央に置き、上下に細い横線と稲妻の切れ目を入れる
• カード同士をつなぐ所は、下向きの三角の切り欠きで連続感を出す
• ボタンはカード幅の85%前後の大きさにする

Elevation & Depth

• CTAボタンには下に柔らかい影を付ける（0 4px 8px rgba(0,0,0,.2)）
• 店舗ボタンは紺の面に濃紺の縁取りと、小さな影を付ける
• カードは影なしで、色の差だけで浮かせる。最後のカードだけ薄い影を付ける

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 車と製品は背景を切り抜き、正面から見た角度で配置する
• セクション境界: 直線で地の色を切り替え、斜めの帯で動きを出す
• 主ボタンとサブボタンはピル型にする
• ステップの番号は、カードの左上の角を四角く覆うタブにする
• フローのカードは紺の太い枠線（3px）で囲む
• アイコンは黄色の円の上に置く

Components

• 黄色の申込ボタン（button-primary）: 黄のピル型ボタン。紺の太字に、右端に紺の丸い矢印を付ける
• 詳細ボタン（button-secondary）: 紺のピル型ボタン。白文字に、白い丸の矢印を付ける
• 特典金額カード（offer-card）: 紺からシアンへのグラデーションの面に、白い縁取りを付けたカード。巨大なグラデーション数字を載せる
• 稲妻付きの見出し（heading-lightning）: 中央の見出しの左右に稲妻アイコンを置き、下線の中央に小さな稲妻を入れる
• 番号付きのフローカード（step-card）: 白い面を紺の枠で囲み、左上に番号タブを付ける。線画アイコンを入れ、カードの間は三角矢印でつなぐ
• 黄色マーカー（marker-highlight）: キーワードの背景を黄で塗りつぶす
• 地区ボタン（region-button）: 紺の四角いボタンを2列のグリッドに並べる
• 吹き出しラベル（speech-label）: 白い吹き出しに、シアンの太字を載せる
• 規約のスクロール枠（terms-box）: 白いカードの中を固定の高さでスクロールさせる。項目の間は点線で区切る

Do's and Don'ts

Do - 地には斜めの帯と稲妻柄を必ず入れ、勢いを出す - 金額や数値は極端に大きく、グラデーション文字で見せる - カードは角丸を大きめにし、地の色から浮かせる - 手順は番号タブと三角矢印で見せる - CTAはカードの中央に置き、すぐ下に小さな注釈を添える

Don't - くすんだ色や暗いトーンを使わない - 明朝体や細い書体を見出しに使わない - 角張った四角いCTAにしない - 写真に装飾を入れすぎず、製品は切り抜きで見せる - 稲妻以外のモチーフを増やさない

Page Structure

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

1. ファーストビュー（キャンペーン名と期間を伝える）: 空色と黄の斜めの地に、極太タイトルと期間の日付を置き、車2台を切り抜きで並べる
2. 特典の提示とCTA（最大金額を訴求し、申込みへ導く）: 青グラデーションのカードに巨大な金額と黄色のCTAを置く
3. 条件の注釈（適用条件を明示する）: 空色の地に小さな文字で、項目を■で区切って並べる
4. 対象製品（対象製品と価格を見せる）: 黄緑から黄へのグラデーションの地に白カードを置き、製品写真・型番バッジ・大きなグレーの価格を載せる
5. その他のラインナップ（他の選択肢を伝える）: 三角の切り欠きでつないだ青グラデーションのブロックに、マーカー強調と白ボタンを置く
6. 申込みの流れ（手順を伝える）: グレーの地に、番号付きの白カードを3枚縦に並べ、三角矢印でつなぐ
7. 完了の案内（完了の条件を伝える）: 紺のカードに稲妻の感嘆符アイコンと白い大きな文字を置く
8. 対象車種（車種の詳細へ誘導する）: 黄から黄緑へのグラデーションのカードに、車の写真・ロゴ・紺のボタンを縦に並べる
9. 応募規約（規約を掲載する）: 白カードの中をスクロール枠にし、見出しは線と稲妻で飾る
10. 店舗検索（最寄りの店舗へ誘導する）: 空色の地に虫眼鏡アイコンの見出しを置き、紺の地区ボタンをグリッドで並べる
11. オンラインサポート（オンラインでの検討へ誘導する）: シアンのカードに吹き出しラベルを付け、黄色の円アイコン・白いピル型ボタンを縦に3つ並べる

Imagery

• 車と製品は白い背景で正面から撮り、切り抜いて使う
• アイコンは紺一色の線画でフラットに描く
• オンラインサポートのイラストは、黄色の円の上にフラットなイラストを置く
• 稲妻は鋭い多角形で、紺・黄・黄緑のグラデーションで描く
• 背景の稲妻柄は半透明の白で、大きく敷き詰める
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約900pxのコンテナを置き、背景は全幅で塗る
• FVは車を左右に、タイトルを中央に配置する
• フローのステップは横3列に並べ、横向きの矢印でつなぐ
• 製品カードは写真を左、説明を右の2カラムにする
• 地区ボタンは3列、オンラインサポートは横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 行書くと起動時に読み込まれる。