DESIGN.md — 水色×紺の線画イラスト保険 LP（Clean Blue Illustrated Insurance LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、親しみ・手作り感
• キーワード: 水色の地・白カード・紺の見出し・線画イラスト・2色CTA・表組み
• 地の質感: フラットな単色面に細かいドット柄をうっすら敷く。影はごく弱い
• 形: 角丸は小さめ（4〜8px）。円形のイラスト枠と番号アイコンを多用する
• 温度感: やや寒色寄りの爽やかさ。赤とオレンジのCTAで温度を足す

Colors

• 地は水色・白・グレー・淡い水色をセクションごとに交互に切り替える
• 見出しと番号は紺で統一する
• CTAは赤（見積り）と緑（申込）の2色を必ず並べる
• 赤・緑はボタン以外に使わない
• 注意書きや強調語にだけ赤文字を少し使う
• 濃紺の面はアイコン一覧パネルなど、ごく一部に限る
• button-primary は文字 #FFFFFF × 背景 #FC5456 のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#ED0407、4.54:1）を使う。
• button-apply は文字 #FFFFFF × 背景 #01C285 のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#01855B、4.66:1）を使う。

Typography

• 見出しの上に小さな英字ラベル、下に紺の菱形3つを置く
• 番号は細めの数字に「01.」形式で添える
• リストはチェックアイコン付きの箇条書きにする
• ボタンは上段に小さな補足、下段に太字の本文の2段組
• 本文は左揃え、見出しは中央揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。理由セクションは PC で文字と画像の左右交互
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 白カードを色付きの地に浮かせて内容をまとめる
• CTAブロックは複数箇所に繰り返し置く
• 補償項目はアイコンタイルのグリッドで並べる
• 料金は罫線つきの表で見せる
• FAQは淡い水色の行を縦に積む

Elevation & Depth

• カードは影なし、または非常に薄い影
• CTAボタンには下方向に濃い色の影を付けて立体感を出す
• FV内の白カードはわずかな影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。人物イラストは円形の淡い背景に置く
• セクション境界: 直線で色を切り替える。FVだけ下端を緩い弧にする
• ボタンは角丸4〜6pxの横長長方形
• サブボタン（一覧へ）だけピル型の紺
• 3つの補償は円形の枠を＋記号でつなぐ
• 番号付きのステップは矢印丸でつなぐ

Components

• 見積りCTA（button-primary）: 赤地に白の太字。左上にオレンジの円形バッジが少しはみ出す
• Web申込CTA（button-apply）: 緑地に白文字の2段ボタン。赤ボタンと横並びにする
• 一覧ボタン（button-sub）: 紺のピル型で白文字、右にアイコンを付ける
• セクション見出し（section-heading）: 英字ラベル、大見出し、紺の菱形3つを縦に積む
• 理由カード（reason-card）: 番号、2行見出し、チェックリストを持つ白カード。写真と左右交互に並べる
• 悩みの吹き出し（speech-bubble）: 白い角丸の吹き出しに赤の強調文字。人物イラストを囲む
• 事例カード（case-card）: 左に写真、右に淡い水色地。番号丸付きの見出しと本文を入れる
• FAQ行（faq-item）: 淡い水色の行の左にQマーク、右端に＋アイコン
• 料金表（price-table）: 見出しセルは淡い水色、紺文字。選択中の列は紺の太枠で囲む
• ステップカード（step-card）: 大きな番号、円形のイラスト、説明文を持つ白カード。矢印丸でつなぐ

Do's and Don'ts

Do - 赤と緑のCTAを必ずセットで繰り返し配置する - 色付きの地の上に白カードを置いて情報をまとめる - イラストは水色と紺の2〜3色で揃えた線画にする - 補償項目はアイコンタイルで視覚化する - 見出しには英字ラベルと菱形の飾りを統一して付ける

Don't - 黒や原色の濃い面を大きく使わない - 大きな角丸やピル型を主CTAに使わない - グラデーションや強い影で装飾しすぎない - 明朝体を使わない - リアル写真とイラストを同じ枠の中で混ぜない

Page Structure

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

1. ファーストビュー（商品の価値と手軽さを伝える）: 水色の地に白い角丸パネル。ロゴ見出し、アイソメ図の部屋のイラスト、スマホを持つ手、円形のバッジ3つ、2色のCTA
2. 悩みの提起（対象の読者を絞り込む）: 水色の地に3人の人物イラストを円で囲み、周りに吹き出しを配置する
3. 選ばれる理由（5つの強みを示す）: グレーの地に白カードと写真を左右交互に並べ、番号付き見出しとチェックリストを入れる
4. CTA（見積り・申込へ誘導する）: 水色の写真帯の上に白カードを置き、キャラクター、見出し、2色ボタンを並べる
5. 商品の紹介（補償のセット内容を説明する）: 円形の枠3つを＋でつなぎ、続いて白カードの中にアイコンタイルのグリッドを並べる
6. 付帯サービス（駆け付けサービスを訴求する）: 淡い水色のボックスに白い角丸アイコン3つと、白枠の注意事項リスト
7. 補償事例（具体的な場面を想像させる）: 写真と淡い水色のテキスト欄を横並びにしたカードを5件積む
8. プラン料金（価格の透明性を示す）: 淡い水色の地に罫線の表を2つ。紺の一覧ボタンを添える
9. 申込の流れ（手続きの簡単さを示す）: 水色の地に必要な物のリストカードと、3ステップのカードを矢印でつなぐ
10. よくある質問（不安を解消する）: カテゴリ別の紺の下線見出しと淡い水色のアコーディオン
11. 見積りシミュレーション（その場で料金を確認させる）: グレーの地に、人数を選ぶ家アイコンのタイルと料金の表、緑のCTA
12. コラム（関連情報で信頼を高める）: 3列のカードにサムネイル、日付、タグ、見出し、抜粋。紺の一覧ボタンを付ける
13. フッター（会社情報とナビゲーション）: 淡い水色の地にロゴと会社情報、横並びのリンク

Imagery

• 水色・紺・白の3色に絞ったフラットな線画イラスト（人物・家・アイコン）
• 部屋はアイソメ図の線画で描き、トラブルの場面を丸い吹き出しアイコンで示す
• 生活写真は自然光で明るい室内。人物は笑顔の若いカップルや家族
• 事例の写真は水漏れ・鍵・空き巣などの物を寄りで撮ったもの
• マスコットキャラクターを要所に置いて親しみを出す
• 背景に細かいドット柄をうっすら敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラム。理由セクションは写真を上、文字を下に縦に積む
• 2色CTAは縦に積むか、横幅いっぱいにする
• アイコンタイルは PC の6列から SP では2〜3列にする
• 料金表は横スクロールにするか、プランごとのカードに分ける
• コラムのカードは SP で縦に1列
• PC のヘッダーには横並びのナビと右上の2色ボタンを固定する

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