DESIGN.md — 赤×黄CTAとポイント色分けの保険LP（Red and Yellow Point-Coded Insurance LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、ポップ・元気
• キーワード: 濃い赤の帯・黄色ピルCTA・3色ポイント分け・極太の価格数字・淡い地色の切り替え・白カード
• 地の質感: フラットな単色面。白カードに薄い影を付ける。CTAボタンの下側には濃い影を落とす
• 形: 小さな角丸のカード、ピル型ボタン、円形のQバッジ、角張ったラベル
• 温度感: 暖色の赤と黄が主役。緑と淡い地色で安心感を足す

Colors

• CTA帯は必ず赤の全幅帯にし、その上に黄色ボタンと白い吹き出しラベルを置く
• 特長セクションはポイント1を赤とピンク地、2を橙とクリーム地、3を緑とミント地で統一する
• 各ポイントの見出しの下にはその色の全幅ラインを引き、地色の切り替わりを示す
• 価格の数字はその色で塗る。FVだけは黄の塗りに黒の縁取りで目立たせる
• 強調したい語句は色文字にするか、黄色マーカー下線を引く
• 本文は濃いグレー、注釈は小さい灰色の文字にする

Typography

• 全体を太字のゴシックで組み、細い字は使わない
• 価格は数字を大きくし、「円」の字を約半分のサイズにする
• 見出しのキーワードだけを色文字にする
• 見出しの左右に斜めの点線を付けて小見出しを強調する
• 見出し・説明文・ボタンは中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。チップやカードは3列、プラン比較は2列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• CTA帯は各特長セクションの直後とFAQの前後に繰り返し置く
• CTA帯の高さは約150px。上端に吹き出しラベルと車のイラストをはみ出させる
• カードは左右12px程度の余白で3列に均等に並べる
• 補償の説明は横長の白カードにし、左にアイコン、右に文章を置いて縦に積む
• 特長セクションは中央の大きなPoint番号から始め、その下に色付きの全幅線を引く

Elevation & Depth

• 白カードには薄くぼかした影（0 2px 6px 程度、rgba 0,0,0,0.08）を付ける
• 黄CTAボタンの下には濃い赤茶色の影（0 4px 0）を付け、立体的に見せる
• そのほかの要素はフラットで、影を付けない

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: FVの写真は全幅の長方形。アイコンは単色のフラットな線画・塗りにする
• セクション境界: 直線で地色を切り替える。ポイント見出しの下にはその色の太い水平線を引く
• ラベルやタグは角丸2pxほどの角張った形にする
• Qバッジは赤い正円にする
• プラン比較の枠は緑の線で囲み、角丸は約8pxにする
• 吹き出しラベルは白地に赤い枠線と赤い文字にする

Components

• 黄色ピルCTA（button-primary）: 幅は約90%。右端に黒い「>」を付け、下に影を落とす
• 赤いCTA帯（cta-band）: 全幅の赤い面。上に白い吹き出しラベル、白い太字のキャッチ、黄色ボタンの順に並べる
• 四角い強調ラベル（badge-label）: 赤や緑の塗りに白文字の短い語を入れ、横に並べる
• ポイント目次タブ（point-tab）: 色付きの枠と上部の帯に番号を入れる。下端に丸い下向き矢印を付ける
• 料金カード（price-card）: 白いカードに枠線付きの時間ラベルと大きな赤い価格を入れる
• ステップカード（step-card）: STEP番号と線画アイコンを入れたカードを3列に並べ、間に三角の矢印を置く
• 補償説明カード（coverage-card）: 左に緑のアイコン、右に下線付きの見出しと説明を置く。金額は緑で大きくする
• プラン比較枠（plan-compare）: 緑の線で囲んだ2列の枠。緑のラベル帯と大きな緑の価格を入れる
• FAQ行（faq-item）: 左に赤い丸のQ、中央に質問文、右に赤い下向きの山形を置くアコーディオン

Do's and Don'ts

Do - CTAは赤帯と黄ボタンの組み合わせで毎回同じデザインにする - 特長ごとにテーマ色を決め、地色・線・数字までその色でそろえる - 価格は極太の大きな数字で見せる - アイコンは単色のフラットなものにそろえる - 強調には色文字と黄色マーカーを使う

Don't - CTAボタンを黄以外の色にしない - 1つのセクションに3色のテーマ色を混ぜない - グラデーションや写真の背景を多用しない - 細い字や明朝体を使わない - カードに大きな角丸を付けない

Page Structure

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

1. ヘッダー（ブランドの提示）: 白地の左にロゴを置き、下に赤い線を引く。その下に、商品名を赤いピルで挟んだ帯を置く
2. ファーストビュー（価格と補償の訴求）: 全幅の車の写真に金色の受賞風バッジを重ねる。下に黄色の極太価格と赤い四角ラベルを並べる
3. CTA（申込への誘導）: 赤帯に吹き出しラベル、白いキャッチ、黄色ピルボタンを置く
4. 利用シーン（使い方のイメージ）: 薄グレーの地に白カードを3列に並べ、場面を短い言葉とイラストで示す
5. サポート体制（安心感の提示）: 赤いラベルの下に連絡手段のアイコンカードを3列に並べ、下部を赤い帯にする
6. 選ばれる理由の目次（特長の一覧）: 赤・橙・緑の色分けタブを3つ並べる
7. ポイント1（価格）（安さの訴求）: ピンクの地に、矢印型のラベルと極太の価格、白い料金カードを2段で置く
8. ポイント2（手軽さ）（手続きの簡単さ）: クリームの地にスマホのイラストを置き、ステップカードを3つ並べる
9. ポイント3（補償）（補償内容の説明）: ミントの地に緑のラベルを置き、補償カードを縦に積む
10. 上位プラン比較（アップセル）: 緑の枠で囲んだ2列の料金表
11. よくある質問（不安の解消）: 白地に、赤い丸Qのアコーディオンを3つ置く
12. 注釈・フッター（法的表記）: 小さい注釈文の下に、赤いフッター帯と白いコピーライトを置く

Imagery

• FVは青空と道路にコンパクトカーを置いた、明るい屋外の写真にする
• アイコンは黒・赤・緑の単色フラットで、家・車・鍵などをシンプルに描く
• CTA帯には走る赤い車のイラストにスピード線を付けて添える
• 金色の月桂樹風バッジで実績を示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも1カラムで中央寄せにし、中身の幅は約600〜700pxに抑える
• 地色の帯とCTA帯は全幅のまま伸ばす
• PCでは補償カードを2列に並べる
• PCでは料金カードを横に並べる
• PCではFVの写真を中央に置き、幅を制限する

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