--- version: alpha name: Soft Pink Illustrated Women's Insurance LP description: コーラルピンクとマゼンタ、くすんだ藤色を基調にした女性向け保険 LP。水彩風の女性イラストと吹き出し会話で不安に寄り添い、統計グラフと表でリスクを示したうえで、保障ポイントと料金訴求、詳細表へとつなげる情報量の多い訴求型構成。 colors: primary: '#FE5C72' secondary: '#CC538C' cta: '#FFF4C5' on-cta: '#E66780' background: '#FFFEFE' background-alt: '#FFEEEE' tint-1: '#FDECB3' tint-2: '#C0EBE2' dark-section: '#7A5A8B' surface: '#E1D3D8' text: '#5A4040' accent-1: '#2EB998' marker: '#F7D4D6' on-dark: '#FFFFFF' on-cta-accessible: '#D62346' primary-accessible: '#ED0122' secondary-accessible: '#C84583' typography: display: fontFamily: Zen Maru Gothic fontSize: 40px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em accent: fontFamily: Yomogi fontSize: 17px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.12em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 18px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px cta-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' height: 200px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 90px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 70px tab-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 28px benefit-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 180px data-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px badge-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' rounded: '{rounded.full}' height: 64px accordion: textColor: '{colors.secondary}' typography: '{typography.body-md}' height: 40px --- # DESIGN.md — ピンク×藤色の女性向けがん保険 LP（Soft Pink Illustrated Women's Insurance LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: やさしい・柔らかい、かわいい、情報量多め・訴求型、信頼・誠実 - **キーワード**: コーラルピンク・藤色グラデーション・手描き女性イラスト・吹き出し会話・丸ゴシック・チェック柄地 - **地の質感**: 水彩ぼかしの地、細かいギンガム/ドット柄の淡黄地、紙のようなやわらかい質感 - **形**: 角丸カード、ピル型ボタン、下向き三角のセクション境界、リボン状の見出しタブ - **温度感**: 暖かく親しみやすい。不安パートは藤色でやや落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FE5C72` | ブランドのコーラルピンク。CTA帯・見出しタブ・表ヘッダー | 8% | 画素の実測 | | `secondary` | `#CC538C` | マゼンタ。ポイント帯・強調テキスト・バッジ | 6% | 画素の実測 | | `cta` | `#FFF4C5` | 申込ボタン面の淡黄 | 2% | 画素の主要色に補正 | | `on-cta` | `#E66780` | ボタン文字のピンク | 0% | 画素の主要色に補正 | | `background` | `#FFFEFE` | 基本の白地 | 27% | 画素の実測 | | `background-alt` | `#FFEEEE` | 淡ピンクの地 | 14% | 画素の実測 | | `tint-1` | `#FDECB3` | ポイント解説の淡黄チェック地 | 7% | 画素の実測 | | `tint-2` | `#C0EBE2` | お客様の声のミント地 | 6% | 画素の実測 | | `dark-section` | `#7A5A8B` | 不安パートの藤色帯 | 6% | 画素の実測 | | `surface` | `#E1D3D8` | 藤色地上の淡藤カード | 6% | 画素の主要色に補正 | | `text` | `#5A4040` | 見出し・本文のこげ茶 | 3% | 推定 | | `accent-1` | `#2EB998` | 受診率などの緑系アクセント | 2% | 画素の実測 | | `marker` | `#F7D4D6` | 見出し下の淡ピンクマーカー | 1% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 濃色帯上の白文字 | 1% | 画素の主要色に補正 | | `on-cta-accessible` | `#D62346` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#ED0122` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#C84583` | AA を満たす補正値（計算） | | 計算 | - 悩み・リスク提起は藤色グラデーション地、解決・商品訴求はコーラルピンク地に切り替える - ポイント解説は淡黄チェック地、口コミと事例はミント地で区切る - 数字や金額はピンク〜マゼンタの大きな文字で強調する - 本文はこげ茶で、純黒は使わない - 濃色帯の上の文字は白にし、要所に淡黄のマーカーを引く - 表のヘッダーはコーラル、行見出しセルは淡ピンクにする - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名や大見出し | 丸ゴシック | Zen Maru Gothic | 700 | 40px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 28px | 1.35 | 0.05em | | `headline-md` | ポイント見出し・カード見出し | 丸ゴシック | Zen Maru Gothic | 700 | 21px | 1.4 | 0.04em | | `accent` | 見出し上の手書き風リード・吹き出し内のつぶやき | 手書き・筆 | Yomogi | 400 | 17px | 1.5 | 0.08em | | `body-md` | 本文・吹き出し | 丸ゴシック | M PLUS Rounded 1c | 500 | 15px | 1.7 | 0.02em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | ボタン文字 | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.2 | 0.12em | - 見出しは丸ゴシックの太字で、重要語だけ色を変えるかマーカーを引く - 見出しの上に手書き風の小さなリードを添える - 金額の数字は単位の約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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-8e00713b`（元 LP の URL から採番） - **元 LP**: https://wwwsp.himawari-life.co.jp/lp/support_omamori_courage/009/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。