DESIGN.md — ピンク×紺のやさしいイラスト保険 LP（Soft Pink Illustrated Insurance LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: やさしい・柔らかい、かわいい、信頼・誠実、情報量多め・訴求型
• キーワード: 淡ピンク地・手描き風イラスト・マスコット・2色CTA・料金表・紺の信頼帯
• 地の質感: フラットな塗り。柔らかい影と淡いボケ玉を少し使う
• 形: 角丸の大きいカード、ピル型ボタン、下向き三角の吹き出し
• 温度感: 暖色ピンクを主にして、後半は紺と水色で落ち着かせる

Colors

• 地は淡ピンクを基本にする。後半の手続きパートは水色、ブランド紹介はクリームに切り替える
• 濃いピンクは帯見出しとアコーディオンだけに使う
• CTA はオレンジ（見積もり）とティール（資料請求）の 2 色を常にペアで置く
• 紺は締めの帯と流れの外枠に使い、信頼感を出す
• 料金は男性を青、女性をピンクで色分けする
• 白カードで情報をまとめ、地色との差で区切る
• button-estimate は文字 #FFFFFF × 背景 #FB7302 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C15802、4.5:1）を使う。
• button-request は文字 #FFFFFF × 背景 #03A5AB のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#028388、4.56:1）を使う。
• point-accordion は文字 #FFFFFF × 背景 #EA658A のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E1265A、4.54:1）を使う。
• step-list は文字 #3A3A3A × 背景 #010165 のコントラスト比が 1.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#9A9AFE、4.56:1）を使う。

Typography

• 見出しは太い丸ゴシックで柔らかく見せる
• 小見出しの左右に「＼ ／」形の斜線を付ける
• 見出し内のキーワードは一段大きく、色を変える
• 料金の数字はとても大きく、円の単位は小さく添える
• 注釈は小さい文字で、行頭に●を付けて詰めて並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。CTA だけ 2 列に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• CTA ペアはセクションの区切りごとに繰り返す
• 特長はポイントカードを点線で区切って縦に並べる
• 料金表は 3 列で、左の年齢列はピンク地にする
• ステップは白と薄紫を交互にし、間を下向き三角でつなぐ
• セクションの冒頭にマスコットを置く

Elevation & Depth

• CTA ボタンは下に濃い色の影を付け、押せる立体感を出す
• 白カードには淡い影を付ける
• それ以外はフラットにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: イラストは切り抜き。背景にボケ玉を散らす
• セクション境界: 下向き三角の吹き出しと、ゆるい円弧で切り替える
• CTA は右端に白丸の矢印を付けたピル型
• アコーディオンは右に白丸の＋／−アイコン
• ポイントの番号は白枠の吹き出し型ラベル
• 見出しは白い角丸ボックスに下向きの尻尾を付ける

Components

• 見積もり CTA（button-estimate）: オレンジのピル型。左に電卓アイコン、右に矢印丸。上に斜線で挟んだ小コピーを置く
• 資料請求 CTA（button-request）: ティールのピル型。見積もりボタンと横並びで同じ形にする
• ポイントアコーディオン（point-accordion）: 濃いピンクの角丸カード。左に番号ラベル、右に＋アイコンを置く
• 料金比較カード（price-card）: 上部を青とピンクのヘッダーで 2 分割し、下に大きな料金数字を並べる
• 料金表（price-table）: ピンクの枠線で 3 列の表にする。年齢列はピンク地に白文字
• 契約の流れ（step-list）: 紺の枠の中に、アイコン・Step ラベル・説明を並べる。白と薄紫を交互にする
• 電話窓口カード（phone-box）: 紺のヘッダー付きの白カード。電話アイコンと大きな番号、受付時間を載せる
• 吹き出し見出し（speech-heading）: 白い角丸ボックスに下向き三角を付けた見出し

Do's and Don'ts

Do - CTA ペアはセクションごとに繰り返す - マスコットをセクションの冒頭や流れのそばに添える - 料金は性別で色を分け、数字を大きく見せる - 注釈は省略せず、小さい文字で必ず載せる - 後半は寒色の地に切り替えて信頼感を出す

Don't - 写真ばかりの硬い構成にしない - CTA に第 3 の色を足さない - 角を立てた四角いボタンにしない - 濃いピンクを本文の地に広く使わない - 見出しを細い明朝にしない

Page Structure

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

1. ヘッダー・お知らせ（企業ロゴと重要なお知らせ）: 白地にロゴを置き、その下に青帯でマスコット付きのお知らせ文を載せる
2. ファーストビュー（商品の価値を一言で伝える）: スラッシュ付きの小見出しとピンクの大見出し。下に家族の手描き風イラストを置く
3. 料金訴求と CTA（安さを見せて行動につなげる）: ピンクの帯の下に男女 2 分割の料金カード、注釈、CTA ペアを並べる
4. 特長（3 つの強みを伝える）: ピンクの見出し帯を両側のマスコットで挟み、アコーディオンを 3 枚、点線で区切って並べる
5. CTA（行動を促す）: 斜線で挟んだ小コピーを付けたアイコン入りの CTA ペア
6. プラン紹介（年齢別の料金を見せる）: 吹き出し見出しの下に 3 列の料金表と注釈、さらに給付例のアコーディオンを置く
7. 申込の導入（資料請求へ気持ちを切り替える）: 紺の帯にマスコットを置き、白文字で書いて、下向き三角で次へつなぐ
8. 契約の流れ（手続きが簡単だと伝える）: 水色地に紺の枠のアコーディオンを置き、6 ステップを交互の地色で見せる
9. 電話相談（不安な人の受け皿になる）: スラッシュ付きの見出しの下に電話番号カード
10. ブランド紹介と CTA（企業の安心感を伝える）: クリーム地にキラキラ装飾とマスコット。白いマーカーで強調した文の下に CTA ペア
11. 注意事項（法的な表示）: 白地に本文サイズの文字で記載する

Imagery

• 人物は細い線画に淡い水彩風の塗りで、家族の笑顔を描く
• 白くて丸いマスコットにピンクの頬。小道具（ペン・スマホ・ヘッドセット）を持たせる
• 背景にはピンクやクリームの半透明のボケ玉を置く
• アイコンは紺の線画で、白い丸の中に入れる
• キラキラの星形をクリーム地にアクセントとして置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP 幅の本文を中央に固定し、周りをピンクの地で埋める
• PC の左側にページ内ナビとブランドの実績バッジを置く
• PC の右側にお客様の声の短いカードと、縦に並べた CTA ボタンを固定する
• 本文の中身は SP と同じ 1 カラム構成のままにする

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