DESIGN.md — ピンク×藤色の女性向けがん保険 LP（Soft Pink Illustrated Women's Insurance LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: やさしい・柔らかい、かわいい、情報量多め・訴求型、信頼・誠実
• キーワード: コーラルピンク・藤色グラデーション・手描き女性イラスト・吹き出し会話・丸ゴシック・チェック柄地
• 地の質感: 水彩ぼかしの地、細かいギンガム/ドット柄の淡黄地、紙のようなやわらかい質感
• 形: 角丸カード、ピル型ボタン、下向き三角のセクション境界、リボン状の見出しタブ
• 温度感: 暖かく親しみやすい。不安パートは藤色でやや落ち着かせる

Colors

• 悩み・リスク提起は藤色グラデーション地、解決・商品訴求はコーラルピンク地に切り替える
• ポイント解説は淡黄チェック地、口コミと事例はミント地で区切る
• 数字や金額はピンク〜マゼンタの大きな文字で強調する
• 本文はこげ茶で、純黒は使わない
• 濃色帯の上の文字は白にし、要所に淡黄のマーカーを引く
• 表のヘッダーはコーラル、行見出しセルは淡ピンクにする
• button-primary は文字 #E66780 × 背景 #FFF4C5 のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#D62346、4.54:1）を使う。
• cta-band は文字 #FFFFFF × 背景 #FE5C72 のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#ED0122、4.54:1）を使う。
• tab-heading は文字 #FFFFFF × 背景 #CC538C のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C84583、4.53:1）を使う。
• benefit-box は文字 #FE5C72 × 背景 #FFEEEE のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#ED0122、4.53:1）を使う。
• badge-circle は文字 #FFFFFF × 背景 #FE5C72 のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#ED0122、4.54:1）を使う。

Typography

• 見出しは丸ゴシックの太字で、重要語だけ色を変えるかマーカーを引く
• 見出しの上に手書き風の小さなリードを添える
• 金額の数字は単位の約2倍の大きさにする
• 本文は中央揃えを基本とし、カード内のみ左揃えにする
• 注釈は ※ 付きの小さな文字でブロックの下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。表と比較のみ 2〜4 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 18px（375px 幅換算）
• イラストと吹き出しを左右交互に配置する
• カードは画面幅の約 88% で中央に置く
• グラフや事例は横スライダー（左右矢印＋ドット）にする
• セクションごとに地色を変えて区切る
• CTA は帯の中に 1 本で中央配置する

Elevation & Depth

• カードは影ではなく細いピンク線で囲む
• ボタンは下側に濃色の段差影をつけて立体的に見せる
• 藤色地の上のカードはぼかし影で少し浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物は背景を抜いた切り抜きイラスト。アイコンは丸く切り抜く
• セクション境界: 下向きの V 字三角、またはまっすぐな色の切り替え
• 吹き出しは角丸の四角形で、小さな三角のしっぽをつける
• point 見出しは上辺が台形のタブにする
• 番号バッジはピンクの角丸四角に白数字を入れる
• チェックリストはピンクのチェックボックスアイコンを使う

Components

• 申込ピル型ボタン（button-primary）: 淡黄の面にピンク文字、右端に丸矢印、下に段差影
• CTA帯（cta-band）: コーラル地に斜線で挟んだ小見出しとボタンを中央に置く
• 会話吹き出し（speech-bubble）: 女性イラストの横に白い角丸の吹き出し、重要語はピンクにする
• ポイントカード（point-card）: 左上にピンクの番号バッジ、白カードに見出しと強調語
• point タブ見出し（tab-heading）: 台形のマゼンタタブに白い point 番号を入れる
• 給付金ボックス（benefit-box）: ピンク枠のカードの上辺にピル型ラベル、中に大きな金額
• 比較表（data-table）: コーラルの見出しセル、淡ピンクの行見出し、細いピンクの罫線
• 実績バッジ（badge-circle）: ピンクの円形に白抜きで数字の実績を入れ、3つ並べる
• 注意事項アコーディオン（accordion）: 上下に罫線、右端にマゼンタの丸いプラスアイコン

Do's and Don'ts

Do - 不安を語るパートは必ず女性イラストと吹き出しで会話調にする - 統計にはグラフや表を添え、出典を小さく書く - 金額や割合は大きなピンク数字で見せる - 地色を藤色→ピンク→淡黄→ミントの順に切り替えて流れをつける - 手書き風のリードで親しみを出す

Don't - 原色の赤や純黒は使わない - 角の尖った硬いボタンにしない - 写真の実写人物は使わず、イラストで統一する - 注釈を本文と同じ大きさにしない - 1セクションに強調色を3色以上混ぜない

Page Structure

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

1. ファーストビュー（商品名と実績、主要ポイントを一目で伝える）: 淡ピンク水彩地に右側の女性イラスト、大きな丸ゴシックの商品名、円形実績バッジ3つ、番号付きのポイントを4行
2. CTA帯（すぐ申し込める導線）: コーラル帯にピル型ボタンと注釈
3. 共感の導入（読者への呼びかけと会社の紹介）: 家族イラスト＋会話吹き出し、リボン見出し
4. 悩みの提起（リスクへの不安を言語化する）: 藤色グラデーション地に手書き見出しと2人の吹き出し
5. 統計データ（罹患率や受診率で根拠を示す）: 淡藤カードの中に折れ線グラフ・表、スライダー、出典の注釈
6. 経済的リスク（費用負担の大きさを示す）: 濃い藤色帯の白文字見出し、費用表、円グラフ
7. まとめと解決提示（リスクを要約し、商品へつなぐ）: 白地のチェックリストからコーラル地の吹き出しへ、大きな月額訴求
8. 4つのポイント（保障の特長を一覧で見せる）: マゼンタ柄地に番号付きの白カードを4枚
9. ポイント詳細（各保障を金額付きで説明する）: 淡黄チェック地、台形のタブ見出し、給付金ボックス、案内役イラストの吹き出し
10. おすすめ対象と満足度（自分ごと化と信頼の獲得）: チェックリストのカードと、大きなピンク数字の満足度
11. お客様の声・支払事例（実例で安心してもらう）: ミント地に白カードのスライダー、金額内訳のミニ表
12. 詳細メニュー（詳細情報への目次）: コーラル地に淡黄ピル型ボタンを縦に5つ
13. プラン・保障内容の表（条件を正確に伝える）: コーラル見出しの多列表、プラン色のラベル、トップへ戻る丸ボタン
14. 保険料シミュレーター（見積もりから申込へ誘導する）: マゼンタの項目セル＋白の入力欄の縦型フォーム

Imagery

• 細い線画に淡い水彩で塗った20〜30代女性のイラスト。表情豊かで、指さしや頬に手を当てるポーズ
• 案内役のスーツ姿女性を全編に繰り返し登場させる
• 背景は淡いピンクや藤色の水彩ぼかし、花や葉の線画を添える
• アイコンは細い線のモノトーンイラスト（食事・交通・日用品など）
• グラフはピンクとグレーの2系列、ピーク部分に淡ピンクの帯を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央の約 340〜400px 幅に SP と同じ 1 カラムで表示し、左右は地色で埋める
• PC では見出しを 1 行にまとめ、ポイントカードは横長の 1 行表示にする
• スライダーは PC で隣のカードの一部を見せる
• イラストと吹き出しの左右配置は PC でも同じにする

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