DESIGN.md — 青×白の雲と道イラストで寄り添う保険相談 LP（Calm Blue Journey Illustration Insurance LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、清潔・爽やか
• キーワード: 青の道・雲形吹き出し・線画イラスト・黄色マーカー・寄り添い
• 地の質感: グラデーションなしのフラットなベタ塗り。淡い水色の面と白い面を交互に置き、一部にドット柄の地を敷く
• 形: ふくらみのある雲形、太い曲線の道、角丸カード、ピル型の見出しラベル
• 温度感: 爽やかな寒色系。肌色やパステルのタグ色で少しぬくもりを足している

Colors

• 地は白・淡い水色・鮮やかな青の 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

• 見出しは太字ゴシックで、文の区切りごとに改行する
• 悩みの文は話し言葉にし、語尾を「…。」「…？」にする
• インタビュー見出しだけ明朝体にして、体験談らしさを出す
• 強調したい語句には黄色の太い下線マーカーを引く
• 英字ラベルと番号は細い欧文サンセリフで添える
• 説明文は中央揃えにし、行間は 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。