DESIGN.md — 冬モチーフ×雲形カードのポイント還元キャンペーン LP（Cozy Winter Campaign Credit Card LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 親しみ・手作り感、ポップ・元気、信頼・誠実、情報量多め・訴求型
• キーワード: 冬のイラスト・雲形パネル・コインと金額の大きな数字・くすみブルーの情報帯・グリーンのボタン
• 地の質感: 紙のような平塗り。イラストは水彩風の軽い手描きで、影はほぼない
• 形: 波打つ雲形の縁取りパネル、丸いバッジ、角丸ボックス、下向き五角形のタブ
• 温度感: 前半は暖色ベージュで温かく、後半は白とグリーンで爽やか

Colors

• 前半のキャンペーン部はベージュ地に白・クリームの雲形パネルを重ねる
• 金額・ポイント数は赤茶、補助見出しはくすみブルーで二色を交互に使う
• 最大の特典額は黄色塗り＋茶色縁の太字で一番目立たせる
• 商品説明部は白地＋くすみブルーの角丸パネルで落ち着かせる
• 一般はチャコール、上位はゴールドで左右の色を分ける
• 主 CTA はオレンジのグラデ1色だけ、サブは黄緑グラデ
• step-badge は文字 #FFFFFF × 背景 #B5704E のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#A66646、4.55:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #F38305 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B26004、4.6:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #93C42B のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#61811C、4.5:1）を使う。
• service-card は文字 #93C42B × 背景 #FFFFFE のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#61811C、4.62:1）を使う。

Typography

• キャンペーン部の数字は極太丸ゴシックで本文の3〜4倍にする
• 単位（P・円）は数字よりひと回り小さくする
• 税込などの補足は小さな丸囲み文字で数字の横に添える
• 説明部は普通のゴシックに切り替え、要点だけ太字にする
• 見出しは中央揃え、長い説明は左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較部は左右 2 列で中央に点線
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算）
• 特典は雲形パネル1枚＝1特典で縦に積む
• パネル上端に丸バッジを半分はみ出させて段階を示す
• パネル内の区切りは細い点線
• 比較は左右同じ幅で中央に縦の点線
• サービス紹介はアイコン→見出し→説明→ボタンの順の枠付きカード

Elevation & Depth

• 基本はフラットで影なし
• ボタンだけ下にうっすら影
• 装飾イラストやコインはパネルの外にはみ出して重ねる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: カード画像・アイテムは角版か切り抜き。キャラクターはパネル下端から顔を出す配置
• セクション境界: 雲形の波縁、後半は色帯の平らな切り替え
• 特典パネルの縁は大きな波形にする
• 段階バッジは正円
• 比較タブは下向き五角形
• ボタンは小さめ角丸の長方形で右端に三角

Components

• 段階バッジ（step-badge）: 茶色の正円に白字で段階を示す。パネル上端に重ねる
• 雲形特典パネル（cloud-panel）: 波縁の白またはクリームのパネルに特典額を大きく置く
• 期間表示ボックス（period-box）: 赤茶の破線で囲み、期間を太字で表示
• ブルー情報パネル（info-panel）: くすみブルー角丸に白字、左にアイコン
• 比較タブ（compare-tab）: 下向き五角形の見出しタブ。左チャコール右ゴールド
• 申込ボタン（button-primary）: オレンジグラデの全幅ボタン、右端に小三角
• 詳細ボタン（button-secondary）: 黄緑グラデのボタン、右に小三角
• リンクカード（link-card）: 白地に黒枠の角丸、左にイラスト、右に緑三角
• サービス紹介カード（service-card）: 淡緑地の上に黄緑枠の白カード。線画アイコンと黄緑見出し

Do's and Don'ts

Do - 特典ごとにパネルを分け、段階バッジで順番を示す - 数字を極太で大きくし、単位は小さく添える - 季節のイラストは余白に軽く散らす - 注釈は※付きの小さな文字で必ず近くに置く - 比較情報は左右で色を分けて対称に並べる

Don't - 前半に濃い原色の地色を使わない - オレンジを申込以外のボタンに使わない - イラストで数字や見出しを隠さない - 雲形パネルに強い影をつけない - 説明部まで装飾書体にしない

Page Structure

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

1. ファーストビュー（最大特典額と期間を一目で伝える）: ベージュ地に冬イラストを散らし、カード画像・極太の特典額・リボン帯・破線の期間ボックスを中央に置く
2. 特典1（入会特典とノベルティを示す）: 白の雲形パネルに段階バッジ、赤茶の額、番号付きリストと商品写真
3. 特典2（利用条件付きの特典を示す）: 白の雲形パネル、下にキャラクターとコインを散らす
4. 特典3（追加キャッシュバック条件を示す）: クリームの雲形パネル、黄色の極太額、条件表、リンクカード2枚
5. 商品紹介（カードの魅力を説明）: 白地に緑の見出し、左揃えの本文で要点を太字にする
6. 限定訴求バナー（若年層向けの年会費特典）: ブルー角丸パネルに水色マーカーの白字見出し
7. ポイント比較（2種類のカードの還元を比べる）: 五角形タブ2列、ブルー帯、大きな数字、段々の棒グラフ
8. 申込 CTA（カード選択と申込へ誘導）: カード画像2列、オレンジの全幅ボタン、黄緑の詳細ボタン2つ
9. 便利な機能（付帯サービスの紹介）: 淡緑の帯見出しの下に黄緑枠のカードを縦に並べる
10. 基本情報表（スペックをまとめる）: 緑の帯見出しと2列の比較表、ヘッダーはチャコールとゴールド

Imagery

• 雪の結晶・ミトン・マフラー・ガーランドを淡い水彩風で余白に置く
• 金色のコインを傾けて散らし、キラキラの星を添える
• 白い猫風のマスコットはパネル下から上半身を出す
• サービスアイコンは黄緑1色の線画
• 商品は白背景か淡いブルー背景の切り抜き写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 900px 幅に同じパネルを置き、ベージュ地とイラストを左右に広げる
• PC の見出しは1行にまとめ、条件文も横に長く組む
• サービスカードは PC でアイコン左・本文右の横並び
• 比較の2列は PC でも同じ構成で幅だけ広げる
• PC の末尾に2列のスペック比較表を置く

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