--- version: alpha name: Soft Pink Friendly Insurance LP description: 淡いピンクの地に白いカードを重ねた、女性向けでやさしい印象の少額保険LP。濃いピンクで数字やキーワードを強調し、等身大のイラストや円グラフで分かりやすく伝える。脚注が多い情報量多めの構成。 colors: primary: '#F4849D' secondary: '#F6B6C6' background: '#FDFEFD' background-alt: '#FEEAF5' surface: '#F7F7F7' text: '#464544' accent-1: '#54CA5B' cta: '#FD0100' on-cta: '#FFEFEB' accent-2: '#FF5402' tint-1: '#FEE3E3' dark-section: '#E57490' line: '#F59BAC' marker: '#FFF3B0' cta-accessible: '#DE0100' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 48px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em accent: fontFamily: Montserrat fontSize: 44px fontWeight: 700 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-underline: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 70px pill-label: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 240px price-table: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px step-card: backgroundColor: '{colors.secondary}' typography: '{typography.label-button}' height: 240px faq-accordion: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 96px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 104px speech-tag: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px --- # DESIGN.md — 桜ピンク×白カードのやさしい保険LP（Soft Pink Friendly Insurance LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: やさしい・柔らかい、かわいい、信頼・誠実、情報量多め・訴求型 - **キーワード**: 淡ピンク地・白カード・大きな数字・アイソメ風イラスト・傍点強調・脚注多め - **地の質感**: フラットな塗り。淡ピンク地にごく薄い斜めストライプ柄 - **形**: 角が四角いカード、ピル型ラベル、吹き出し付きの見出し帯 - **温度感**: 暖かくやわらかい。親しみがある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F4849D` | ブランドピンク（見出し帯・強調文字・FAQボタン） | 8% | 画素の実測 | | `secondary` | `#F6B6C6` | 中間ピンク（データセクション地・ステップカード） | 8% | 画素の実測 | | `background` | `#FDFEFD` | 白地（カード・本文地） | 30% | 画素の実測 | | `background-alt` | `#FEEAF5` | 淡ピンクのセクション地 | 12% | 画素の実測 | | `surface` | `#F7F7F7` | 薄グレーのセクション地 | 10% | 画素の実測 | | `text` | `#464544` | 見出し・本文のダークグレー | 3% | 画素の実測 | | `accent-1` | `#54CA5B` | キャンペーン帯のグリーン | 1% | 画素の実測 | | `cta` | `#FD0100` | キャンペーンボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#FFEFEB` | ボタン上の白文字 | 0% | 画素の実測 | | `accent-2` | `#FF5402` | 円グラフのオレンジ強調 | 1% | 画素の実測 | | `tint-1` | `#FEE3E3` | 料金表の淡ピンク列 | 2% | 画素の実測 | | `dark-section` | `#E57490` | フッターの濃いピンク | 3% | 画素の実測 | | `line` | `#F59BAC` | 見出し下の細いピンク線 | 0% | 画素の主要色に補正 | | `marker` | `#FFF3B0` | 強調文字下の黄色マーカー | 0% | 推定 | | `cta-accessible` | `#DE0100` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡ピンク・薄グレーを交互に使い、セクションを区切る - 数字とキーワードだけを primary のピンクで大きく強調する - データセクションは中間ピンクの全面塗りに白文字で見せる - ステップや病名リストはピンクの濃淡を段階的に変えて並べる - キャンペーン情報だけ緑と赤を使い、通常部分と区別する - フッターは濃いピンクの2段で締める - `button-primary` は文字 `#FFEFEB` × 背景 `#FD0100` のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DE0100`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し・袋文字 | 丸ゴシック | M PLUS Rounded 1c | 900 | 48px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.4 | 0.12em | | `headline-md` | カード見出し・強調コピー | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.08em | | `accent` | 価格や統計の大きな数字 | 欧文サンセリフ | Montserrat | 700 | 44px | 1.1 | 0.0em | | `body-md` | 本文・FAQ | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.06em | | `note` | 脚注・出典 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.02em | | `label-button` | ピル型ラベル・ボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.08em | - 見出しは字間を広めにとる - 強調語だけピンクにして文字を大きくし、他は濃いグレーにする - 強調語の上に傍点（ドット）を打つ - 数字は単位より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 ```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-d0f6291a`（元 LP の URL から採番） - **元 LP**: https://www.nissay-plus.co.jp/medical-aeon-001 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。