--- version: alpha name: Clean Blue Illustrated Insurance LP description: 水色の地に白カードを重ね、紺の見出しと赤・緑の2色CTAで構成した、賃貸入居者向けの家財保険 LP。フラットな線画イラストと生活写真を組み合わせ、補償内容・料金表・FAQを情報量多めに整理して、安心感と手軽さを伝える。 colors: primary: '#50A4D2' secondary: '#1E4A96' cta: '#FC5456' accent-1: '#01C285' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F2F2F2' tint-1: '#E3F2F9' tint-2: '#E4F3FA' dark-section: '#1A2B41' text: '#333333' line: '#C7E0E8' accent-2: '#F5A623' cta-accessible: '#ED0407' accent-1-accessible: '#01855B' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.15em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px 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.sm}' height: 52px button-apply: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px button-sub: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px reason-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 240px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 60px case-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 110px faq-item: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 44px price-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 140px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 260px --- # DESIGN.md — 水色×紺の線画イラスト保険 LP（Clean Blue Illustrated Insurance LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 水色の地・白カード・紺の見出し・線画イラスト・2色CTA・表組み - **地の質感**: フラットな単色面に細かいドット柄をうっすら敷く。影はごく弱い - **形**: 角丸は小さめ（4〜8px）。円形のイラスト枠と番号アイコンを多用する - **温度感**: やや寒色寄りの爽やかさ。赤とオレンジのCTAで温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#50A4D2` | ブランドの水色（FV・フロー・CTA帯の地） | 13% | 画素の主要色に補正 | | `secondary` | `#1E4A96` | 紺（見出し・サブボタン） | 3% | 推定 | | `cta` | `#FC5456` | 主CTA（見積り）の赤 | 1% | 画素の実測 | | `accent-1` | `#01C285` | Web申込ボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | カード・基本の白地 | 26% | 画素の主要色に補正 | | `background-alt` | `#F2F2F2` | グレーの地（理由・補償・FAQ帯） | 15% | 画素の実測 | | `tint-1` | `#E3F2F9` | 淡い水色地（悩み・プラン帯） | 11% | 画素の実測 | | `tint-2` | `#E4F3FA` | 事例・FAQ行の淡い水色カード | 8% | 画素の実測 | | `dark-section` | `#1A2B41` | 理由パネルの濃紺 | 2% | 画素の実測 | | `text` | `#333333` | 本文の濃いグレー | 2% | 推定 | | `line` | `#C7E0E8` | 表・枠の罫線 | 1% | 画素の主要色に補正 | | `accent-2` | `#F5A623` | バッジ・吹き出し強調のオレンジ | 0% | 推定 | | `cta-accessible` | `#ED0407` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#01855B` | AA を満たす補正値（計算） | | 計算 | - 地は水色・白・グレー・淡い水色をセクションごとに交互に切り替える - 見出しと番号は紺で統一する - CTAは赤（見積り）と緑（申込）の2色を必ず並べる - 赤・緑はボタン以外に使わない - 注意書きや強調語にだけ赤文字を少し使う - 濃紺の面はアイコン一覧パネルなど、ごく一部に限る - `button-primary` は文字 `#FFFFFF` × 背景 `#FC5456` のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#ED0407`、4.54:1）を使う。 - `button-apply` は文字 `#FFFFFF` × 背景 `#01C285` のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#01855B`、4.66:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ風見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 36px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.05em | | `headline-md` | カード見出し・理由タイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.03em | | `headline-sm` | 下線付きの小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | 本文・リスト | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | 注釈・表の補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Montserrat | 700 | 10px | 1.2 | 0.15em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.03em | - 見出しの上に小さな英字ラベル、下に紺の菱形3つを置く - 番号は細めの数字に「01.」形式で添える - リストはチェックアイコン付きの箇条書きにする - ボタンは上段に小さな補足、下段に太字の本文の2段組 - 本文は左揃え、見出しは中央揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。理由セクションは PC で文字と画像の左右交互 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 白カードを色付きの地に浮かせて内容をまとめる - CTAブロックは複数箇所に繰り返し置く - 補償項目はアイコンタイルのグリッドで並べる - 料金は罫線つきの表で見せる - FAQは淡い水色の行を縦に積む ## Elevation & Depth - カードは影なし、または非常に薄い影 - CTAボタンには下方向に濃い色の影を付けて立体感を出す - FV内の白カードはわずかな影で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの長方形。人物イラストは円形の淡い背景に置く - **セクション境界**: 直線で色を切り替える。FVだけ下端を緩い弧にする - ボタンは角丸4〜6pxの横長長方形 - サブボタン（一覧へ）だけピル型の紺 - 3つの補償は円形の枠を＋記号でつなぐ - 番号付きのステップは矢印丸でつなぐ ## Components - **見積りCTA**（`button-primary`）: 赤地に白の太字。左上にオレンジの円形バッジが少しはみ出す - **Web申込CTA**（`button-apply`）: 緑地に白文字の2段ボタン。赤ボタンと横並びにする - **一覧ボタン**（`button-sub`）: 紺のピル型で白文字、右にアイコンを付ける - **セクション見出し**（`section-heading`）: 英字ラベル、大見出し、紺の菱形3つを縦に積む - **理由カード**（`reason-card`）: 番号、2行見出し、チェックリストを持つ白カード。写真と左右交互に並べる - **悩みの吹き出し**（`speech-bubble`）: 白い角丸の吹き出しに赤の強調文字。人物イラストを囲む - **事例カード**（`case-card`）: 左に写真、右に淡い水色地。番号丸付きの見出しと本文を入れる - **FAQ行**（`faq-item`）: 淡い水色の行の左にQマーク、右端に＋アイコン - **料金表**（`price-table`）: 見出しセルは淡い水色、紺文字。選択中の列は紺の太枠で囲む - **ステップカード**（`step-card`）: 大きな番号、円形のイラスト、説明文を持つ白カード。矢印丸でつなぐ ## Do's and Don'ts **Do** - 赤と緑のCTAを必ずセットで繰り返し配置する - 色付きの地の上に白カードを置いて情報をまとめる - イラストは水色と紺の2〜3色で揃えた線画にする - 補償項目はアイコンタイルで視覚化する - 見出しには英字ラベルと菱形の飾りを統一して付ける **Don't** - 黒や原色の濃い面を大きく使わない - 大きな角丸やピル型を主CTAに使わない - グラデーションや強い影で装飾しすぎない - 明朝体を使わない - リアル写真とイラストを同じ枠の中で混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の価値と手軽さを伝える）: 水色の地に白い角丸パネル。ロゴ見出し、アイソメ図の部屋のイラスト、スマホを持つ手、円形のバッジ3つ、2色のCTA 2. **悩みの提起**（対象の読者を絞り込む）: 水色の地に3人の人物イラストを円で囲み、周りに吹き出しを配置する 3. **選ばれる理由**（5つの強みを示す）: グレーの地に白カードと写真を左右交互に並べ、番号付き見出しとチェックリストを入れる 4. **CTA**（見積り・申込へ誘導する）: 水色の写真帯の上に白カードを置き、キャラクター、見出し、2色ボタンを並べる 5. **商品の紹介**（補償のセット内容を説明する）: 円形の枠3つを＋でつなぎ、続いて白カードの中にアイコンタイルのグリッドを並べる 6. **付帯サービス**（駆け付けサービスを訴求する）: 淡い水色のボックスに白い角丸アイコン3つと、白枠の注意事項リスト 7. **補償事例**（具体的な場面を想像させる）: 写真と淡い水色のテキスト欄を横並びにしたカードを5件積む 8. **プラン料金**（価格の透明性を示す）: 淡い水色の地に罫線の表を2つ。紺の一覧ボタンを添える 9. **申込の流れ**（手続きの簡単さを示す）: 水色の地に必要な物のリストカードと、3ステップのカードを矢印でつなぐ 10. **よくある質問**（不安を解消する）: カテゴリ別の紺の下線見出しと淡い水色のアコーディオン 11. **見積りシミュレーション**（その場で料金を確認させる）: グレーの地に、人数を選ぶ家アイコンのタイルと料金の表、緑のCTA 12. **コラム**（関連情報で信頼を高める）: 3列のカードにサムネイル、日付、タグ、見出し、抜粋。紺の一覧ボタンを付ける 13. **フッター**（会社情報とナビゲーション）: 淡い水色の地にロゴと会社情報、横並びのリンク ## Imagery - 水色・紺・白の3色に絞ったフラットな線画イラスト（人物・家・アイコン） - 部屋はアイソメ図の線画で描き、トラブルの場面を丸い吹き出しアイコンで示す - 生活写真は自然光で明るい室内。人物は笑顔の若いカップルや家族 - 事例の写真は水漏れ・鍵・空き巣などの物を寄りで撮ったもの - マスコットキャラクターを要所に置いて親しみを出す - 背景に細かいドット柄をうっすら敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP は 1 カラム。理由セクションは写真を上、文字を下に縦に積む - 2色CTAは縦に積むか、横幅いっぱいにする - アイコンタイルは PC の6列から SP では2〜3列にする - 料金表は横スクロールにするか、プランごとのカードに分ける - コラムのカードは SP で縦に1列 - PC のヘッダーには横並びのナビと右上の2色ボタンを固定する ## 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-26a96b03`（元 LP の URL から採番） - **元 LP**: https://1st.rescue-sonpo.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。