DESIGN.md — 赤×淡ピンクのポイント還元型保険LP（Pop Red Point-Reward Insurance LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、信頼・誠実
• キーワード: 赤ベースのFV・花柄の背景・雲形の境界・角丸カード・大きな価格数字・2色のCTA
• 地の質感: フラットな塗りが中心。淡い花模様と紙吹雪のようなコインを散らして賑やかさを出す
• 形: 角丸8〜12pxのカードとボタン。FVの下端は雲形の波線
• 温度感: 暖色。赤とピンクの温かさに、緑と水色を少しだけ差して清潔感を出す

Colors

• FVだけ赤の全面塗りにし、以降は白と淡ピンクの地を交互に敷く
• 主CTAは赤、副CTAは緑の2色で、必ず横並びのペアにする
• 価格・%・ポイント数は赤の太字で大きく見せる
• 商品カードは商品ごとにピンク・水色・ミント・黄の淡色ヘッダーで分ける
• 注釈はグレーの小さい文字にし、面の色は使わない
• button-primary は文字 #FFFFFF × 背景 #FF3B45 のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#ED000C、4.56:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #049D8B のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#038475、4.6:1）を使う。

Typography

• 見出しはスラッシュ型の括弧「＼ ／」で挟んで小見出しにする
• 数字は本文の2〜3倍の大きさにし、単位は小さく添える
• 見出しは中央揃え、本文は左揃えにする
• 注釈には※を付け、10px前後のグレー文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。商品カードと特長も縦積みにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• CTAペアは各商品カードの下とセクションの区切りごとに置く
• カードは白地で薄い影を付け、角丸にする
• セクションごとに地の色を切り替えて区切る
• 表は横スクロールさせず、列を詰めて収める

Elevation & Depth

• カードにはごく薄い影（0 2px 8px rgba(0,0,0,.08)）を付ける
• ボタンは下側に少し濃い影を付けて押せる感じを出す
• バナーは影なしの平面で置く

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは切り抜きで配置する。ロゴは角丸の白枠に入れる
• セクション境界: FVの下端は雲形の波線。それ以外はまっすぐな地の色の切り替え
• ボタンは角丸6〜8pxの長方形にし、右端に矢印を付ける
• 特長カードは色付きの枠線と、左上の番号タブで作る
• タブは上だけ角丸にし、選択中は赤で塗る

Components

• 見積CTA（button-primary）: 赤の塗りに白文字、右端に＞矢印
• 資料請求CTA（button-secondary）: 緑の塗りに2行の白文字（小さな補足を付ける）
• 詳細リンクボタン（button-outline）: 白地に赤い枠線と赤文字、右に外部リンクのアイコン
• 番号付き特長カード（feature-card）: 色付きの枠線＋左上の番号タブ＋右側にイラスト
• 商品カード（product-card）: 淡色のヘッダーにロゴ、価格ボックス、保障内容ラベル、CTAペア
• 価格ボックス（price-box）: 淡ピンクの地に条件バッジと大きな赤い月額
• 条件ラベル（badge-label）: 赤い枠線の小さなラベル（年齢・保障の種類）
• 口コミ吹き出し（review-bubble）: 丸いアバターの横に淡色の見出し帯と本文
• 切替タブ（tab-switch）: 選択中は赤の塗り、それ以外は白地
• 還元率の比較表（compare-table）: 赤の見出し帯、推奨の列はオレンジの枠で囲む

Do's and Don'ts

Do - FVは赤地に白の大見出しを置き、下端を雲形にする - CTAは赤と緑のペアを繰り返し配置する - 価格・率の数字は赤の太字で大きく見せる - 白とピンクの地を交互にして、セクションのリズムを作る - キャラクターやコインのイラストで親しみを出す

Don't - 暗い背景や重いグラデーションは使わない - ボタンをピル型や細い線だけのボタンにしない - 明朝体を使わない - 注釈を本文と同じ大きさにしない - 原色をたくさん並べず、赤・緑以外は淡色にとどめる

Page Structure

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

1. ファーストビュー（還元の特典と代表価格を伝える）: 赤地に花柄とコインを散らし、白の大見出しを置く。タブ付きの価格カードを中央に、下端は雲形
2. CTA帯（すぐ見積・資料請求に誘導する）: 赤と緑のボタンを横に並べ、上に告知ボタン、下に注釈
3. キャンペーンバナー（抽選プレゼントを告知する）: 水色地の横長バナーに商品写真と期間を入れる
4. 3つの特長（選ぶ理由を示す）: 淡ピンク地に番号付きの枠線カードを2＋1で並べ、下に外枠ボタン
5. 商品一覧（各商品を比較してもらう）: 色分けしたナビボタンの下に、価格・保障内容・CTAペアを入れた商品カード
6. 加入しやすい商品（健康に不安がある人の受け皿を示す）: ピンク地に淡色のロゴカードを2×2で並べる
7. お客様の声（利用者の評価で安心させる）: タブ切替＋アバター付きの吹き出しを縦に並べる
8. 決済・還元率（ポイント還元の仕組みを説明する）: 赤い見出し帯の比較表を置き、推奨の列を強調する
9. よくある質問（疑問を解消する）: ピンク地に外枠ボタンを1つ置く
10. 問い合わせ（電話での相談を促す）: 淡ピンクの角丸ボックスに大きな電話番号と受付時間
11. フッター（法定の表記）: 灰色地に小さな文字で代理店情報、浮きバナーを添える

Imagery

• 丸みのあるゆるキャラ調のイラストを、カードの角やFVに添える
• 金色のコインや紙吹雪を散らして、ポイントが貯まる感じを出す
• 白い花柄のシルエットを背景に淡く敷く
• アイコンはフラットな線と塗りで、スマホやチェックマークを描く
• 写真は商品パッケージなどの切り抜き程度にとどめる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約700pxのコンテンツ幅を取り、両端は薄い地の色
• PCでは商品カードを2列にし、SPでは1列にする
• PCの特長カードは2＋1の配置、SPでは縦に並べる
• CTAペアはSPでも横に並べ、高さを48pxにする
• 比較表はSPでは文字を11pxに詰める

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