DESIGN.md — 赤×淡ピンクベージュの保険相談 LP（Trustworthy Red Insurance Consultation LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 赤のアクセント・カード型レイアウト・繰り返す CTA・線画アイコン・淡い色のセクション地・安心感
• 地の質感: フラットな単色の面。影はごく弱い
• 形: 角丸は小さめ（4〜8px）。主ボタンだけ大きな角丸のピル型
• 温度感: やや暖かい。赤とピンクベージュで親しみを出す

Colors

• 地は白とライトグレーを基本にし、大きなまとまりごとに淡ピンクや生成りに切り替える
• 赤はボタン・見出し下の短い線・アイコン・強調語に限って使う
• 赤い文字は見出しの中のキーワードなど一部だけにする
• カードは白地にして、色付きの地から浮かせる
• ステップ番号は淡いローズから濃いローズへの段階で順番を表す
• 電話番号は赤文字にし、下に赤い線を引く

Typography

• 見出しは中央揃えにし、下に短い赤線（幅 40px・太さ 3px）を置く
• 見出し内のキーワードだけ赤文字にする
• 本文は左揃えにし、行間を広めにとる
• 数字は大きく太く、単位は小さくする
• 注釈は小さい灰色の文字でブロックの末尾に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列のグリッド（PC は 2〜4 列）
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションの最後に、ネット予約と電話の CTA を横に並べた組を置く
• 色付きのセクション地の上に、白いカードを並べる
• 見出しの上下の余白は 24〜32px にする
• 図表やイラストは白いパネルに収める
• PC では本文幅を約 560px に絞り、中央に寄せる

Elevation & Depth

• カードは 1px の薄い灰色の枠線だけにし、影は付けない
• ファーストビューのキャッチの白い箱にだけ、弱い影を付ける
• 強調するカードは赤い 1px の枠線で示す

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 四角いままで切り抜き、角丸は付けないかごく小さくする。人物写真は横長にする
• セクション境界: 直線で背景色を切り替える
• 主ボタンはピル型にし、右端に円形の矢印を付ける
• カードやパネルの角丸は 4〜6px
• バッジは円形か小さな角丸の赤い面
• ステップは帯状のブロックを縦に積む

Components

• ネット予約ボタン（button-primary）: 赤いピル型。左に PC のアイコン、右に矢印の円を置く
• 電話予約ブロック（phone-cta）: 小さい説明の下に赤い大きな電話番号を置き、赤い下線を引く
• 赤線付きのセクション見出し（heading-underline）: 中央揃えの太字の見出しの下に、短い赤線を置く
• 番号付きのケースカード（case-card）: 白地に枠線。左上に大きな薄い数字、中央に赤い線画アイコンと 2 行の説明
• 実績を示す赤いパネル（stat-badge）: 赤い四角に白文字。数字を大きく見せるパネルを 3 つ並べる
• 悩みの丸い吹き出し（bubble-circle）: 白い円に短い悩みを数行書き、写真のまわりに散らして置く
• ステップのブロック（step-block）: 左に STEP の番号を書いたローズ色の帯、右に赤い見出しと説明。段ごとに番号の色を濃くする
• FAQ のアコーディオン（faq-row）: 左に Q、右に赤い＋を置いた行。行の間を細い線で区切る
• お客様の声カード（voice-card）: 白いカードの上部に人物アイコンと太字の見出し、下に本文
• エリアのタグ（area-tag）: 小さな四角い枠線のタグを地方ごとに並べる

Do's and Don'ts

Do - CTA の組（ネット予約と電話）はセクションごとに繰り返し置く - 赤は面積を絞り、アクセントとして効かせる - アイコンは赤の線画にそろえる - 大きなまとまりは淡ピンク・生成り・グレーの地で区切る - 数字や実績は大きな太字で見せる - 注釈や出典は小さい文字で正確に添える

Don't - 濃い色や暗い色をセクション全体の背景に使わない - 赤を本文や広い面に多用しない - 強い影やグラデーションを付けた派手なボタンにしない - 手書き風の書体や装飾の多い書体を使わない - カードの角を大きく丸めすぎない

Page Structure

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

1. ヘッダー（問い合わせ先をすぐ示す）: 白地。左にロゴ、右に電話番号と赤いピル型のボタン
2. ファーストビュー（比較して相談できることを伝える）: 相談の場面の写真の左に、白い箱に入れた太字のキャッチを重ね、下に CTA の組を置く
3. 想定ケース（補償の範囲を示す）: 番号付きのカードを 2×2 で並べ、各カードに赤いアイコンを置く
4. 必要性の訴求（データでリスクを示す）: 淡ピンクの地に、棒グラフと説明の白いパネル、タブ、アイコンカード 3 つを置く
5. 悩みの提起（読み手に共感する）: 手に家の模型を乗せた写真のまわりに、丸い吹き出しを 4 つ置く
6. よくある質問の例（相談の内容を具体的に示す）: 左に写真、右に箇条書きで質問を並べる
7. お客様の声（社会的な証明）: グレーの地に白いカードを 3 列×2 段で並べる
8. 専門家・実績（信頼できることを示す）: 赤い数字パネルを 3 つ、店舗の写真、サービスの説明を写真付きで並べる
9. オンライン相談（別の相談手段を案内する）: 左に文字とチェックリスト、右に人物写真を置いた横長の帯
10. 選ばれる理由（他との違いを示す）: 生成りの地に、比較イラスト、3 つのカード、ツール画面のパネルを置く
11. 相談の流れ（手順を示す）: 写真付きの STEP カードを 4 つ横に並べ、間を矢印でつなぐ
12. よくある質問（不安を解消する）: Q と＋を置いたアコーディオンを縦に並べる
13. 店舗検索と予約（最後に行動を促す）: 地図のイラストと地方ごとのタグ、ローズ色の段階で示す 4 ステップ、最後の CTA
14. フッター（会社情報）: 白地に小さい文字のリンクとコピーライトを中央揃えで置く

Imagery

• 明るい店舗やオフィスで、スーツのスタッフが相談に応じる写真
• 自然光のもとで穏やかな表情の人物を撮った写真
• アイコンは赤い単色の線画（家・炎・水・地震など）
• 説明のイラストは、青いシャツの人物を線と淡い色で描いた素朴なもの
• グラフは淡ピンクと灰色の棒グラフに赤い矢印を添える
• 地図は日本地図を緑で塗りつぶしたシンプルなもの
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにし、ケースカードと声カードは 2 列か 1 列にする
• CTA の組は SP で予約ボタンと電話を縦に積み、どちらも幅いっぱいにする
• ファーストビューは写真を上、キャッチを下に積む
• 相談の流れの 4 ステップは SP で縦に並べるか、2×2 にする
• PC では本文幅を約 560px に絞り、背景色を左右いっぱいまで広げる

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