DESIGN.md — 青空と紺×段階色の保険プラン比較 LP（Sky Blue Trust Insurance Plan LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 青空と雲・紺の帯見出し・段階ごとの色分け・比較表・マスコット・ピル型CTA
• 地の質感: 白地に淡い水色の面を重ねたフラットな質感。写真の空と雲は FV とセクションの境目にだけ使う。
• 形: 表と保障カードは角丸なしの四角。吹き出しと CTA は大きな角丸かピル型。
• 温度感: 爽やかで少し冷たい青が基調。オレンジとピンクで温かさを加える。

Colors

• 地は白にする。保障内容のセルだけを淡い水色・緑・黄・ピンクで塗る。
• 治療の段階で色を固定する。治療前は青、治療中は緑、治療後は黄土、女性向けはマゼンタ。見出し帯・タグ・セルを同じ系統の色でそろえる。
• 紺はセクション帯見出しと特約の見出しに限って使う。
• オレンジは主 CTA だけに使う。
• 金額は赤の大きな数字で強調し、単位は小さくする。
• 男女の料金比較では、男性を青、女性をピンクで区別する。
• button-primary は文字 #FFFFFF × 背景 #F26A1E のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CA500C、4.5:1）を使う。

Typography

• 見出しは太いゴシックで組み、明朝は使わない。
• 金額は数字を大きくし、「円」「万円」は約半分の大きさにする。
• 見出しの中で強調する語だけを青やマゼンタにする。
• 注釈は ※ 付きの 11px 灰色で、表の直下に置く。
• 表のラベルは中央揃えにし、条件文は左揃え、金額は右揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表のみ 4〜5 列のグリッドにする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 保障カードは、色帯の見出しの下に「左が項目名、右が条件と金額」の 2 列セルを置く。
• カードの直下に、保険期間ラベルとタグを左揃えで添える。
• カードとカードの間は 32〜40px 空ける。
• 大きな区切りには点線の水平線を使う。
• 長い詳細は「閉じる／詳細を見る」のアコーディオンにまとめる。
• 紺の帯見出しは画面幅いっぱいに敷く。

Elevation & Depth

• 影はほとんど使わず、フラットに保つ。
• 白い角丸カードを空の写真の上に置き、ごく薄い影で浮かせる。
• CTA は下側にわずかな影を付けて立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物やマスコットは切り抜きイラストで置き、写真は空の背景にだけ使う
• セクション境界: 直線の帯か点線で区切る。空の背景は雲で柔らかく切り替える。
• 表と保障セルは角丸なしの四角にする。
• 吹き出しやまとめのボックスは大きな角丸の枠線ボックスにする。
• タグは小さなピル型にする。
• POINT 番号はリボン付きの丸バッジにする。

Components

• 資料請求 CTA（button-primary）: オレンジのピル型ボタン。左に白地の「無料」ラベルを置き、右端に矢印を付ける。
• 紺の帯見出し（section-band）: 画面幅いっぱいの紺帯に、白文字で見出しを中央揃えにする。
• POINT 番号バッジ（point-badge）: 円形のバッジに「POINT」と数字を入れる。横に 2 行の大見出しを置く。
• 保障内容カード（coverage-card）: 段階色の見出し帯の下に、淡色の 2 列セルを置く。項目名・条件・赤い金額を並べる。
• プラン比較表（comparison-table）: 段階色の縦見出しを付けた表。対応はオレンジの○、非対応は－で示す。保険料表は男女で行の色を分ける。
• マスコット付きまとめ枠（mascot-callout）: 段階色の太い枠線で囲んだ角丸ボックス。2〜4 行の補足とキャラクターのイラストを入れる。
• 期間タグ（tag-pill）: 段階色で塗った小さなピル型タグ。文字は白。
• アコーディオン（accordion-toggle）: 上下に細い線を引いた行。中央にラベル、右にシェブロンを置く。
• 相談導線カード（consult-card）: 緑系の枠線カード。左にイラスト、右に見出しと説明、端に矢印を置く。

Do's and Don'ts

Do - 治療の段階と色の対応を、ページ全体で一貫させる。 - 金額は赤い大きな数字で目立たせる。 - 細かい注釈は表の直下に必ず添える。 - 長い情報はアコーディオンで畳む。 - 要所にマスコットのまとめ枠を挟み、硬さを和らげる。

Don't - オレンジを CTA 以外に使わない。 - 表やセルを角丸にしない。 - 暗い背景や重い影を使わない。 - 段階色を混ぜたり入れ替えたりしない。 - 明朝や手書き書体を使わない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（商品の価値と最安の月額を伝える）: 青空と雲の背景に、ロゴ風のタイトルとマスコットを置く。2 つの円形バッジ、オレンジの CTA、男女の人物イラストと料金を並べる。
2. 実績・強み（信頼性を示す）: 金の月桂樹付きの No.1 表記を置き、強み 2 つを見出しと説明の横並びで示す。
3. ポイント帯（章の始まりを示す）: 紺の全幅帯に白文字の見出しを置く。
4. プラン紹介と比較表（プランの違いを一覧で見せる）: POINT バッジ、3 色のプランタブ、○－の比較表、男女別の保険料表を順に置く。
5. 保障の全体像（段階ごとの保障を整理する）: 青・緑・黄の帯を縦に積み、PLUS 記号を挟んで紺の特約ボックスを置く。
6. 保障の詳細（支払条件と金額を伝える）: 段階色の保障カードを縦に連ね、間にマスコットのまとめ枠を挟む。
7. 特約一覧（オプションを紹介する）: ◆付きの小見出しの下に、紺かマゼンタの帯付きカードを置き、最後をアコーディオンで畳む。
8. 相談サポート（付帯サービスを訴求する）: 空の背景にピンクの POINT 2 を置き、マゼンタの雲形吹き出しとアコーディオンを続ける。
9. 他プランへの導線（対象者別に資料請求へ誘導する）: 空の背景に白い角丸パネルを置き、その中に 2×2 のグラデーション枠ピルボタンを並べる。
10. 相談予約 CTA（店舗・オンライン・電話の相談へ誘導する）: イラスト付きの枠線カードを 3 段に積む。
11. 注意事項・フッター（法的な表記を載せる）: 淡い水色の面に ● 付きの注記を並べ、下にロゴと所在地を置く。

Imagery

• 空の背景は、明るい青空に白い雲が広がる写真にする。
• 人物はベージュ肌に黄色い服の、線画風フラットイラストにする。
• マスコットは白い鳥のキャラクター風イラストで、まとめ枠の右側に置く。
• 相談カードの人物は、淡い色の線画イラストにする。
• タクシーなどの小物を立体感のあるイラストで添え、用途の例示に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元の PC 版は約 950px 幅の中央 1 カラムで、SP とほぼ同じ構成。
• SP では比較表の文字を 11px 程度まで詰め、表は横スクロールさせずに収める。
• 保障カードの 2 列セルは SP でも維持し、左列は 35% 幅にする。
• 他プランへの 2×2 ボタンは、SP では 1 列に積む。
• FV の 2 つの円形バッジは、SP でも横並びのまま縮小する。

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 行書くと起動時に読み込まれる。