--- version: alpha name: Calm Blue Journey Illustration Insurance LP description: 鮮やかな青と淡い水色を基調にした保険・相談サービスの LP。細線の人物イラストと、うねる青い道を雲形の吹き出しがたどる構成で、患者の時系列の不安を物語のように見せる。黄色はマーカーと CTA だけに絞り、信頼感とやさしさの両方を出している。 colors: primary: '#009BDD' secondary: '#0165AB' background: '#EEF7FE' background-alt: '#EEF7FE' tint-1: '#5CBFE9' tint-2: '#E1F3FF' text: '#124A84' text-body: '#313437' cta: '#FDEA0B' on-cta: '#2A6B9A' marker: '#FFE600' accent-1: '#CDEBDC' accent-2: '#CBCBF2' accent-3: '#EBCBA4' line: '#0897D6' primary-accessible: '#0077AA' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' cloud-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 220px category-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px button-detail: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px worry-nav-tile: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 95px service-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 280px point-box: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 200px interview-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 580px label-heading: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px sticky-nav: backgroundColor: '{colors.secondary}' typography: '{typography.note}' height: 56px --- # DESIGN.md — 青×白の雲と道イラストで寄り添う保険相談 LP（Calm Blue Journey Illustration Insurance LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: 信頼・誠実、やさしい・柔らかい、清潔・爽やか - **キーワード**: 青の道・雲形吹き出し・線画イラスト・黄色マーカー・寄り添い - **地の質感**: グラデーションなしのフラットなベタ塗り。淡い水色の面と白い面を交互に置き、一部にドット柄の地を敷く - **形**: ふくらみのある雲形、太い曲線の道、角丸カード、ピル型の見出しラベル - **温度感**: 爽やかな寒色系。肌色やパステルのタグ色で少しぬくもりを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#009BDD` | ブランドを代表する青。道や帯セクション、詳細ボタン | 14% | 画素の実測 | | `secondary` | `#0165AB` | 濃い青。見出し文字、サブ CTA の帯 | 4% | 画素の実測 | | `background` | `#EEF7FE` | 基本の地の白 | 31% | 画素の実測 | | `background-alt` | `#EEF7FE` | 淡い水色の地。吹き出しエリアや紹介セクション | 17% | 画素の実測 | | `tint-1` | `#5CBFE9` | ファーストビューの空色 | 6% | 画素の実測 | | `tint-2` | `#E1F3FF` | ポイント欄の地やカード内タイルの淡い青 | 7% | 画素の実測 | | `text` | `#124A84` | 見出しや吹き出し本文の濃紺 | 3% | 画素の実測 | | `text-body` | `#313437` | 説明文や注釈の黒寄りグレー | 2% | 画素の実測 | | `cta` | `#FDEA0B` | インタビューを読むボタンの黄色 | 1% | 画素の実測 | | `on-cta` | `#2A6B9A` | 黄色ボタン上の青い文字 | 0% | 画素の主要色に補正 | | `marker` | `#FFE600` | 見出しの強調下線に使う黄色マーカー | 0% | 推定 | | `accent-1` | `#CDEBDC` | カテゴリタグのミントグリーン | 0% | 推定 | | `accent-2` | `#CBCBF2` | カテゴリタグのラベンダー | 0% | 画素の実測 | | `accent-3` | `#EBCBA4` | カテゴリタグのピーチ | 0% | 画素の実測 | | `line` | `#0897D6` | 雲形吹き出しとポイント枠の青い輪郭線 | 1% | 画素の実測 | | `primary-accessible` | `#0077AA` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡い水色・鮮やかな青の 3 段で切り替え、セクションの区切りを色で示す - 見出しは濃紺、ラベル見出しは青の地に白文字にする - 黄色はマーカー下線とインタビュー CTA に限って使い、多用しない - カテゴリタグは淡いパステル色で分類する（ミント＝治療、ラベンダー＝こころ、レモン＝お金、ピーチ＝生活） - イラストは青・黄・肌色・白の少ない色数に抑える - 外部連携の帯だけは緑など、そのサービス固有の色を例外として使う - `service-card` は文字 `#009BDD` × 背景 `#EEF7FE` のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0077AA`、4.59:1）を使う。 - `point-box` は文字 `#009BDD` × 背景 `#EEF7FE` のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0077AA`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのメインコピー（青の地に白文字） | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.6 | 0.08em | | `headline-lg` | 時期ごとの見出し（道の脇に置く） | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.3 | 0.02em | | `headline-md` | セクション見出し、ポイント見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.6 | 0.05em | | `headline-sm` | 吹き出し内の悩み文、タイルの見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.03em | | `accent` | インタビューの見出し（明朝体＋黄色マーカー） | 明朝 | Noto Serif JP | 500 | 22px | 1.6 | 0.03em | | `body-md` | 説明文（中央揃え） | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.03em | | `note` | 注意書き、箇条書きの注記 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em | | `label-button` | ボタンやタグの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | - 見出しは太字ゴシックで、文の区切りごとに改行する - 悩みの文は話し言葉にし、語尾を「…。」「…？」にする - インタビュー見出しだけ明朝体にして、体験談らしさを出す - 強調したい語句には黄色の太い下線マーカーを引く - 英字ラベルと番号は細い欧文サンセリフで添える - 説明文は中央揃えにし、行間は 2.0 前後と広めに取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内のタイルとナビタイルは 2 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 吹き出しは左右交互にずらして並べ、背後の道が蛇行して見えるようにする - 時期の見出しとイラストは、道の曲がり角に置く - サービスカードは白い角丸カードにし、上部にタグとイラスト、その下に 2 列のタイルを置く - ポイントは枠線のボックスを縦に並べ、上端の中央に番号の丸をかぶせる - 画面下に固定ナビを置き、左に小ボタン、右に濃い青の誘導ボタンを並べる ## Elevation & Depth - 影はほぼ使わず、輪郭線と面の色の差で階層を表す - 吹き出しは白い面に 2px の青線で浮かせる - カードは青い地の上に白い面を置くだけで、影は付けない ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は角丸なしの横長の長方形で、3 人を横に並べる。イラストは背景なしで切り抜く - **セクション境界**: 直線で色を切り替える。上部では大きな曲線や雲の形で地をつなぐ - 主要ボタンは角丸 4px 程度の長方形にする - 見出しラベルとカテゴリタグはピル型にする - 吹き出しは不規則にふくらんだ雲形にする - ナビタイルは右下に角丸の三角とシェブロンを付ける ## Components - **雲形の悩み吹き出し**（`cloud-bubble`）: 白い雲形に青い輪郭線を引く。カテゴリタグ、太字の悩み文、詳細ボタンを縦に置く - **カテゴリタグ**（`category-tag`）: パステル色のピル型タグに濃紺の太字を載せ、分類ごとに色を変える - **詳細を見るボタン**（`button-detail`）: 青い長方形に白文字を置き、右に＋アイコンを付ける - **黄色の記事誘導ボタン**（`button-cta`）: 黄色の横長ボタンに濃い青の太字を置き、右端に小さいシェブロンを付ける - **悩みナビタイル**（`worry-nav-tile`）: 水色の正方形に近いタイル。白い帯の上に太字の問いを置き、右上に線画アイコン、右下に青い三角の矢印を付ける - **サービス一覧カード**（`service-card`）: 青い地の上の白い角丸カード。タグとイラストの下に、淡い青のサービス名タイルを 2 列で並べる - **番号付きポイント枠**（`point-box`）: 白い地に青い枠線を引く。上端に番号入りの青い丸を置き、本文には黄色マーカーを入れる - **インタビューカード**（`interview-card`）: 青い枠線の角丸カード。上部の青い札に英字ラベルと番号を置き、その下に線画の人物、明朝の見出しとマーカー、属性、黄色ボタンを並べる - **ピル型見出しラベル**（`label-heading`）: 白いピル型に青文字、または青いピル型に白文字で、セクション名を載せる - **下部固定ナビ**（`sticky-nav`）: 淡い色の小ボタンと濃い青の誘導ボタンを左右に並べ、画面下に固定する ## Do's and Don'ts **Do** - 悩みは短い話し言葉にして雲形の吹き出しに入れ、時系列の道に沿って並べる - 人物イラストは単色の線画にし、青・黄・肌色の少ない色で塗る - 黄色はマーカーと主要 CTA だけに限って使う - カテゴリは同じパステル色のタグで、ページ全体を通して統一する - 注意書きは本文より小さいグレーの箇条書きで、セクションの末尾にまとめる **Don't** - 赤や黒などの強い警告色を使って不安をあおらない - 濃い影やグラデーションで立体的に見せない - 写真をイラストに混ぜて多用しない（人物写真は 1 か所程度に抑える） - 吹き出しを規則正しく 1 列に並べて単調にしない - 明朝体をインタビュー見出し以外に広げない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（サイト名とロゴを示す）: 白い地に小さいコピーを置き、その下に青い太字のサイト名、右にロゴを置く 2. **ファーストビュー**（相談できる存在を、共感とともに伝える）: 空色の地に白い雲を置き、大きな白い太字のコピーと説明文を載せる。下部に蛇行する白い道と、時期ラベル付きの人物線画を描く 3. **悩みナビ**（悩みの種類から記事へ誘導する）: 青い地に、問いを書いた水色のタイルを 2 列で 7 個並べる 4. **時系列の悩み吹き出し**（疑いの段階から治療後までの不安を、体験として見せる）: 淡い水色の地に太い青の道を蛇行させる。時期の見出し、イラスト、雲形の吹き出しを左右交互に並べ、最後に注釈を置く 5. **サービス一覧**（提供している支援を分類ごとに示す）: 青い地の中央にロゴと白い太字の説明を置く。白いピル型のラベルの下に、分類ごとの白いカードを縦に並べる 6. **相談員紹介**（人の顔を見せて信頼を得る）: 淡い水色の地に、白いピル型の見出しと中央揃えの説明を置く。その下に 3 人の写真を横に並べ、濃い青の帯ボタンを置く 7. **3 つのポイント**（サービスの強みを要約する）: 水色の地に、大きな数字を添えた見出しを置き、番号付きの枠線ボックスを 3 つ並べる。強調語句には黄色マーカーを引く 8. **利用者インタビュー**（体験談で納得してもらう）: 白いドット柄の地に青いピル型の見出しを置き、インタビューカードを 2 枚並べる 9. **注意事項**（提供条件を明示する）: 小さいグレーの文字で黒丸の箇条書きにする 10. **関連導線**（商品・LINE・資料請求へ送客する）: 左が白、右が色ベタの 2 分割バナーを置き、その下に濃い青のアイコンタイルを 3 列で並べる 11. **キーワード・フッター**（回遊と企業情報）: 下線付きの青いテキストリンクを並べ、グレーの地にロゴとコピーライトを置く ## Imagery - 人物は一定の太さの線画にし、顔は簡略化する。服は青・ドット柄・黄色のアクセントで塗る - 病院のベッド、診察机、財布、パソコンなど、悩みを象徴する物を線画のアイコンにする - 背景には大きく太い青の曲線の道と、ふわっとした雲の形を使う - 人物写真は、明るい笑顔の正面または斜めのバストアップを、グレーの背景で撮る - ナビタイルのアイコンは、淡いピンク・ベージュ・水色で塗った線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューを横長にし、道と人物を左から右へ時系列で並べる - PC は悩みナビのタイルを 4 列にする - PC は吹き出しを道の左右に広く散らし、1 画面に 4〜5 個見せる - PC はサービスカードを横長にし、タグとイラストを左に、タイルを右に横並びにする - PC はポイントを 3 列にし、インタビューカードはイラストとテキストを横並びにする - PC は関連導線の 2 バナーを横並びにし、下部ボタンはピル型を 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-e5cad494`（元 LP の URL から採番） - **元 LP**: https://www.aflac.co.jp/gan/yokuwakaru/extnl/yorisou.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。