DESIGN.md — 雪景色の青×橙 保険申請サポート LP（Snowy Blue & Orange Insurance Claim Support LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、清潔・爽やか、力強い・インパクト
• キーワード: 雪景色・濃紺×オレンジ・実績数字・白カード・リボン見出し・地域密着
• 地の質感: 雪の写真背景・雪の結晶の透かし・屋根に積もる雪の装飾。あとはフラットな面で構成する
• 形: 角丸カード、ピル型 CTA、リボンや旗型のラベル、雪の結晶型の番号バッジ
• 温度感: 寒色の地に暖色の CTA を重ねて、冷たさと温かさを対比させる

Colors

• セクション地は淡い水色→白→オレンジ→ベージュの順に切り替えて、内容の区切りを見せる
• 行動を促すのは常にオレンジのグラデーション。LINE は緑、電話は青グレーで役割を分ける
• 見出し帯・ラベル・FAQ の開閉ボタンは濃紺で統一する
• 数字の実績は大きく、赤かオレンジで示す
• 青地に置く強調語は黄色にする
• button-primary は文字 #FDFCF3 × 背景 #F07A1E のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BA590C、4.51:1）を使う。
• button-line は文字 #FDFCF3 × 背景 #3DB838 のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2C8529、4.54:1）を使う。
• button-tel は文字 #FDFCF3 × 背景 #BAC9D3 のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#59778C、4.59:1）を使う。
• comparison-table は文字 #F07A1E × 背景 #FFEBD8 のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BA590C、4.57:1）を使う。

Typography

• 見出しは太いゴシックで、キーワードだけを大きくするか色を変える
• 金額は数字を大きく、単位の「円」「%」を小さく添える
• 本文は太字で要点を示し、強調はオレンジ文字に限る
• 英字ラベルは REASON 01 のようにコンデンスの書体で付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。理由の目次と被害箇所の写真グリッドは 2 カラム、3 ステップは 3 カラム
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約 20px の余白をとって並べる
• カード同士の間隔は 20px
• ラベル（REASON・事例・POINT）はカードの左端からはみ出させる
• CTA ブロックはページ内で 2 回繰り返す

Elevation & Depth

• 白カードには淡いドロップシャドウ（0 4px 12px rgba(0,0,0,.08)）を付ける
• CTA ボタンは下側に濃い影を付けて立体的に見せる
• 事例カードは影をやや強めにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸 6px の長方形。被害写真は 2〜3 列のサムネイルにする
• セクション境界: 直線で切り替える。一部のパネル上端には雪が積もった形の装飾を付ける
• 見出しラベルは右端をギザギザに切った旗型にする
• POINT の番号は雪の結晶型のバッジに入れる
• ポイント見出しの帯は角丸なしの四角形にする
• タグはピル型にする

Components

• 主 CTA（button-primary）: オレンジのグラデーションのピル型ボタン。右端に矢印を付ける
• LINE 相談ボタン（button-line）: 緑のピル型ボタン。左にアイコンを置く
• 電話ボタン（button-tel）: 青グレーのピル型ボタン。上に小さな説明文、その下に大きな電話番号を置く
• REASON 旗ラベル（reason-label）: 濃紺の旗型ラベル。カードの左上からはみ出させる
• 実績バッジ（stat-badge）: 青いパネルの上端に雪を載せ、黄色の大きな数字を入れる
• リボン見出し（ribbon-heading）: 濃紺または赤のリボンに白文字を入れ、左右に月桂樹の装飾を添える
• POINT 見出し帯（point-header）: 濃紺の帯の左に雪の結晶型の番号バッジを置く
• 比較表（comparison-table）: 左の濃紺の見出し列、自社列はベージュ地にオレンジの◎、他社列はグレーで横スクロールさせる
• FAQ アコーディオン（faq-item）: 白地に紺の枠線。右端に濃紺の開閉ボタン（＋）を置く
• 費用なし保証ボックス（guarantee-box）: オレンジの太枠の中に、！アイコンと太字の文を入れる

Do's and Don'ts

Do - 実績の数字は大きく見せ、注釈番号を添える - 地域性を示すモチーフ（雪・地図）を装飾に使う - 理由は目次グリッドの後に詳細カードで展開する - CTA ブロックはページの中盤と後半に繰り返し置く - 事例では金額と証憑画像をセットで見せる

Don't - 濃紺とオレンジ以外の色を主役にしない - 本文を細い書体や明朝にしない - CTA を角張った四角や淡い色にしない - セクションの地色を連続して同じ色にしない - 写真に強いフィルターをかけない

Page Structure

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

1. ファーストビュー（対象地域とサービス内容、実績を一目で伝える）: 雪の写真背景に作業員の写真を置き、大見出しと 3 つの実績バッジを重ねる
2. 事例スライダー（受給実績を具体的に示す）: ベージュ地に白カードを置き、写真・金額・タグを入れる
3. 簡単ステップ（手続きが簡単だと示す）: オレンジ地に、矢印型でつないだ 3 枚の白カードを並べる
4. CTA（相談の申し込みを促す）: 雪の写真背景に半透明のパネルを置き、3 種のボタンを縦に並べる
5. 選ばれる理由（専門性を伝える）: 水色地に青い 2 列の目次を置き、その後に REASON カードを 6 枚続ける
6. 実績率（発見率と認定率で信頼を高める）: 空色のパネルに白カードを置き、リボンと月桂樹で赤い大きな数字を囲む
7. 比較表（他社との違いを示す）: 白地に横スクロールの表を置き、自社列を強調する
8. 成功事例（証拠を示す）: オレンジ地に赤いリボン見出しを置き、事例カードに金額と証憑画像を入れる
9. お客様の声（共感と安心を生む）: タブ切替のスライダーにする。方眼地のカードに声を入れる
10. 制度の解説（制度を理解してもらう）: ベージュ地に POINT 帯と白カードを 3 つ並べる
11. よくある被害箇所（自分ごと化してもらう）: 2 列の写真グリッドにし、各写真の下にラベルを付ける
12. 流れ（手順を示す）: STEP 番号の下に青い見出しと下線、右に写真を置き、矢印のくぼみでつなぐ
13. よくある質問（不安を解消する）: 水色地に枠線付きのアコーディオンを並べる

Imagery

• 雪の積もった住宅や屋根の実写真を使う
• ヘルメット姿の作業員の写真を使う
• 等角投影（アイソメトリック）風のイラスト（建物・電卓）を使う
• フラットなアイコンと青い地図のイラストを使う
• 雪の結晶と積雪のシルエットを装飾に使う
• 証憑書類は個人情報をぼかして見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 900px 幅のコンテンツを置き、背景は全幅にする
• 理由の目次は PC で 3 列にする
• REASON カードは PC で写真を左、文を右の横並びにする
• 事例カードは PC で 2 枚を横に並べる
• CTA は PC で主 CTA と LINE ボタンを横に並べる
• PC のヘッダーには電話番号と CTA を固定表示する

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