DESIGN.md — 桜色×深緑の和風春キャンペーン金融 LP（Spring Festival Pastel Bank Campaign LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 和風、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 桜ピンク・深緑・黄色の特大数字・梅の花・霞雲・市松帯
• 地の質感: フラットなパステル面に、ごく薄い和紙調の粒子と霞のグラデーションを重ねる
• 形: 角丸の白カード、ピル型ボタン、梅形のバッジ、大きな円形の白抜き
• 温度感: 暖かく華やか。春のお祝いムード

Colors

• 地は白・生成り・若草色・桜ピンクのパステルを交互に使う
• 見出しと重要語は深緑で統一する
• 賞金などの数字は黄色に深緑の太縁取りで最大の主役にする
• 主 CTA はオレンジ 1 色に限定し他で使わない
• 表やカードの見出し帯は桜ピンク、条件の帯は濃いピンク
• セクション境界にピンク・水色・黄緑・クリームの市松帯を入れる
• button-primary は文字 #FFF8F2 × 背景 #FD5D03 のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C64802、4.61:1）を使う。
• condition-tag は文字 #FFF8F2 × 背景 #E2447D のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DB2265、4.51:1）を使う。
• rate-table は文字 #E2570F × 背景 #F6F9E6 のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C34B0D、4.53:1）を使う。

Typography

• 数字は単位より 2〜3 倍大きくし、単位は小さく添える
• セクション見出しは丸みのある太字で両脇に梅アイコンを置く
• 見出しは中央揃え、本文は左揃え
• 強調語は深緑太字＋黄色の太アンダーライン
• FV 文字は白い縁取りと深緑の縁取りの二重にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 5% 余白で中央配置
• 賞・条件は横長カードを縦に積む
• 詳細は桜ピンク見出し行＋白本文行の定義リスト形式
• 長い補足はアコーディオンに格納
• 最下部に固定のピル型 CTA を置く

Elevation & Depth

• 白カードは淡い影（0 2px 6px 薄グレー）
• CTA ボタンは下にぼかし影で浮かせる
• 表・詳細枠は影なしで罫線のみ

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: イラストは切り抜きで配置、バナーは角丸 12px の矩形
• セクション境界: パステル 4 色の市松帯、または直線切り替え
• 見出しは上下二重線＋黄線で挟む帯型
• CTA エリアは大きな白い円で囲む
• 等級バッジは梅の花形

Components

• 主 CTA ボタン（button-primary）: オレンジのピル型、白太字、下に影
• テキストリンク（link-text）: 深緑太字に右矢印、または下線付き
• 帯型セクション見出し（section-title-band）: 白地をピンク二重線と黄線で上下に挟み、両脇に梅アイコン
• 等級カード（prize-card）: 白角丸カード左に梅形の等級バッジ、黄色の縁取り金額、点線リーダーで人数
• 条件帯（condition-tag）: 濃いピンクの矩形に白太字で条件を表示、間に＆
• 番号付き方法カード（method-card）: 桜ピンクの見出し帯に大きな番号、白地本文に若草色の内側ボックス
• 口数表（rate-table）: 桜ピンク枠とヘッダーの角丸表、数値はオレンジ大きめ
• アコーディオン（accordion）: 白地にグレー罫線、深緑太字と右端の下向き山形
• Q&A カード（faq-item）: 左に深緑の Q、白カードに淡い影、右に開閉矢印

Do's and Don'ts

Do - 数字を圧倒的に大きく、黄色＋深緑縁取りで見せる - 梅・霞雲・市松帯で季節の和柄を散りばめる - パステル地を交互に切り替えてセクションを区切る - 細かい条件はアコーディオンと表で整理する - CTA はオレンジに統一し複数箇所に置く

Don't - 濃い色の大面積背景を使わない - CTA 以外にオレンジを使わない - 見出しに明朝体を使わない - 和柄を本文の上に重ねて可読性を下げない - 数字と単位を同じサイズにしない

Page Structure

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

1. ファーストビュー（季節感と最大特典額を一目で伝える）: ピンク〜クリームの霞背景に巻物風タイトル、白円の上に特大数字、下にひな人形風キャラ
2. 賞品一覧（等級ごとの特典と人数を示す）: 梅形バッジ付きの白カードを 4 段に積む
3. 参加条件（必要な条件を簡潔に示す）: 帯型見出しの下に濃いピンクの条件帯を＆でつなぐ
4. 倍率表（金額に応じた抽選口数を示す）: 大きな倍率コピーと桜ピンク枠の 2 列表
5. エントリー CTA（申込を促す）: 若草地に大きな白円、キャラと紙吹雪、オレンジのピルボタン
6. 達成方法（条件達成の手段を提案）: 番号付きの桜ピンク見出しカードを縦に並べる
7. キャンペーン詳細（正式な規約情報を示す）: ピンク見出し行と白本文行の定義リスト、表を内包
8. 留意事項（注意点を格納）: 赤い警告アイコン付きアコーディオン
9. よくある質問（疑問を解消）: Q 付き白カードのアコーディオン
10. 関連キャンペーン（回遊を促す）: アイコン＋見出しの下に角丸バナーとテキストリンク
11. 固定 CTA（常時申込導線）: 画面下に固定のオレンジピルボタン

Imagery

• 緑色の動物キャラをフラットイラストで描き、季節衣装を着せる
• ひな人形風の人物を太い輪郭のフラットイラストで並べる
• 梅の花アイコンをピンクで散らす
• 霞雲は黄〜ピンクのグラデーションの横長角丸で表現
• 金色の紙吹雪や小さな四角を散らして祝祭感を出す
• バナー写真は使わずイラストと文字組みで構成
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後のカラムに SP レイアウトを維持
• 左右余白にパステル背景と和柄を広げる
• 等級カードや方法カードは PC で 2 列化してもよい
• 固定 CTA は PC では幅を 400px 程度に抑える

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