DESIGN.md — 桜ピンク×白カードのやさしい保険LP（Soft Pink Friendly Insurance LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: やさしい・柔らかい、かわいい、信頼・誠実、情報量多め・訴求型
• キーワード: 淡ピンク地・白カード・大きな数字・アイソメ風イラスト・傍点強調・脚注多め
• 地の質感: フラットな塗り。淡ピンク地にごく薄い斜めストライプ柄
• 形: 角が四角いカード、ピル型ラベル、吹き出し付きの見出し帯
• 温度感: 暖かくやわらかい。親しみがある

Colors

• 地は白・淡ピンク・薄グレーを交互に使い、セクションを区切る
• 数字とキーワードだけを primary のピンクで大きく強調する
• データセクションは中間ピンクの全面塗りに白文字で見せる
• ステップや病名リストはピンクの濃淡を段階的に変えて並べる
• キャンペーン情報だけ緑と赤を使い、通常部分と区別する
• フッターは濃いピンクの2段で締める
• button-primary は文字 #FFEFEB × 背景 #FD0100 のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE0100、4.57:1）を使う。

Typography

• 見出しは字間を広めにとる
• 強調語だけピンクにして文字を大きくし、他は濃いグレーにする
• 強調語の上に傍点（ドット）を打つ
• 数字は単位より2倍程度大きくする
• 脚注は※番号を付けて、ぶら下げインデントで組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ステップは3列・費用は2列のカード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約5%の余白をとり、縦に積む
• セクション見出しは中央寄せにし、上下に余白を大きくとる
• カード内の見出しの下にピンクの細線を引く
• 脚注はセクションの末尾にまとめる

Elevation & Depth

• 基本はフラットで影なし
• FAQカードとボタンは右下に薄い影を落とす
• 赤ボタンに柔らかいドロップシャドウ

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 背景を透過したイラストをカード内に配置する。写真は白へのフェードで溶け込ませる
• セクション境界: 直線で地色を切り替える。強調の手前に下向きの三角矢印を置く
• カードは角丸なしかごく小さい角丸
• ラベル・見出し帯はピル型
• 見出しの下線は途中で段差が付いた吹き出し型の線

Components

• 段差下線付き見出し（heading-underline）: ピンクの大見出しの下に、途中で切り欠きのある太線を引く
• ピル型ラベル（pill-label）: カード上部に付けるピンクのラベル。白文字
• おすすめ白カード（feature-card）: 見出し・細線・イラスト・強調コピーで構成する白カード
• 料金表（price-table）: 左が年齢のグレー縞、右が淡ピンクの保険料列の2列表
• ステップカード（step-card）: STEP番号・白線・線画アイコン・ラベルを縦に並べ、ピンクの濃淡で順番を表す
• FAQアコーディオン（faq-accordion）: 白カードの左にピンクのQ、右端にピンクの＋/−ボタンを置く
• キャンペーンボタン（button-primary）: 赤い面に白い太字を載せた、横幅いっぱいの角丸ボタン
• 吹き出しタグ（speech-tag）: 下に三角が付いたピンクのピル型吹き出しで、話題の転換を示す

Do's and Don'ts

Do - 強調はピンクの文字色・傍点・マーカーで行う - 数字は大きく、単位と※番号は小さく添える - 白カードと淡い地色のコントラストで区切る - イラストは淡い色調のアイソメ風にそろえる - 注釈は省略せず、小さい文字でまとめる

Don't - 濃い色や黒を広い面に使わない - ピンク以外の強調色を多用しない（緑・赤はキャンペーン部分だけ） - 大きな角丸や強い影を付けない - 明朝体や手書き書体を混ぜない - 写真を全面に敷き詰めない

Page Structure

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

1. ファーストビュー（安さと手軽さを伝える）: 袋文字の大見出しと人物イラスト、保障内容のスライダーを置く
2. キャンペーン（期間限定の特典を訴求する）: 緑の帯と大きな数字のバナー、赤いボタン、その下に脚注
3. おすすめの方（悩み別に共感を得る）: 淡ピンク地に白カードを3枚縦に積み、それぞれにイラストを添える
4. 商品内容（保障額と料金を示す）: グレー地に白カードを置き、ラベル付きの保障枠と年齢別の料金表
5. データ提示（短期入院が多い根拠を示す）: ピンクの全面地に円グラフと白い吹き出しの統計
6. 費用の説明（入院中の自己負担を具体的に示す）: 2列の費用カードの下に、合計額の計算式を大きな数字で見せる
7. 短期入院の例（自分ごと化を促す）: 吹き出しタグの後、ピンクの濃淡で病名を帯状に並べる
8. 安心訴求（商品価値をまとめる）: 三角矢印の下に、淡ピンク地にマーカー付きのコピーとハートのイラスト
9. 手続きと3ステップ（スマホで簡単に申し込めることを伝える）: 白カード2枚と、3列のステップカード
10. よくある質問（不安を解消する）: グレー地にアコーディオンのFAQ
11. フッター（重要事項を案内する）: 濃いピンク2段の地に、白文字で中央寄せ

Imagery

• パステル調のアイソメトリックなイラスト（スマホ・カード・ベッド・食事）
• ピンクの服を着た女性のフラットなイラストで、親しみを出す
• 円グラフは赤橙からピンクのグラデーションで、厚みを持たせる
• 医療の写真は白く飛ばし気味に、背景へフェードさせる
• ステップには白い線画のアイコンを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約70%幅のコンテンツに収める
• おすすめカードは PC で3列に横並び
• データセクションは PC で左に見出し・右にグラフの2カラム
• 病名リストと FAQ は PC で2列グリッド
• FV のスライダーには PC で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 行書くと起動時に読み込まれる。