DESIGN.md — 濃紺×水色×オレンジの銀行キャンペーンLP（Navy Bold Bank Campaign LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、力強い・インパクト、ポップ・元気
• キーワード: 濃紺・大きな数字・ステップ応募フロー・特典カード・フラットイラスト・キャンペーン
• 地の質感: フラットな単色面が中心。FVと締めには青い筆ストローク状のグラフィックを使う。
• 形: 角丸の白カード、濃紺の矩形ラベル、ピル型ボタン、下向き三角の吹き出し。
• 温度感: 寒色の濃紺と水色が基調で、オレンジと赤を差して温度を上げる。

Colors

• 地は白と淡い水色を交互に使い、区切りや強調部分は濃紺の全幅帯にする。
• 金額・見出しはすべて濃紺で塗る。強調ワードだけオレンジか赤にする。
• 主CTAの口座開設は赤、エントリーはオレンジ、外部サイトへのボタンは濃紺にして役割を分ける。
• 大きな金額の下にシアンの太い下線、強調文の下に黄色マーカーを引く。
• オレンジは帯やラベルの小面積に留め、全体の5%以下にする。
• button-entry は文字 #FFFFFF × 背景 #F37122 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C5510B、4.61:1）を使う。
• pill-tag は文字 #FFFFFF × 背景 #F37122 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C5510B、4.61:1）を使う。

Typography

• 数字だけを約2倍に大きくし、円・ポイントの単位は小さく添える。
• 見出しは極太ゴシックにして、中央揃えで1〜2行に収める。
• 誘導の一言は「＼ ／」のような斜線で挟んだ小見出しにする。
• 注釈は※付きの小さいグレー文字にして、ボタンやカードのすぐ下に置く。
• 明朝体や細いウェイトは使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典の比較だけ左にラベル、右に金額を置く 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 全幅の色帯でセクションを区切り、中身は中央寄せの角丸パネルに収める。
• 応募フローは白カードを縦に積み、間をシアンの下向き矢印でつなぐ。
• 各フローの最後は下線付きの大きな獲得金額で締める。
• 特典の見出しは濃紺の矩形ラベルにし、下向き三角で吹き出し状にする。
• 条件・注意事項は細枠のアコーディオンにまとめる。

Elevation & Depth

• 影はほぼ使わず、枠線と面の色の差で階層を表す。
• フローを囲むパネルは濃紺の1.5px枠に角丸12px。
• スマホ画面のモックなどには薄いドロップシャドウを付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 人物はイラストを切り抜いて使い、カード画像は角丸の長方形で見せる。
• セクション境界: 直線の全幅色帯。FVと締めには青い筆ストロークを置く。
• CTAはピル型にし、右端に丸い＋や外部リンクのアイコンを付ける。
• 特典ラベルは角丸なしの濃紺の矩形にする。
• 小さいラベルや吹き出しは角丸大きめにする。

Components

• 口座開設CTA（button-primary）: 赤いピル型ボタン。右端に外部リンクのアイコンを付ける。
• エントリーボタン（button-entry）: オレンジのピル型ボタン。右端に白丸の＋を付ける。
• 外部サイト誘導ボタン（button-secondary）: 濃紺のピル型ボタン、または白地に濃紺枠のボタン。
• 特典番号ラベル（benefit-label）: 全幅の濃紺矩形に白い太字を載せ、下向き三角を付ける。
• 金額ボックス（amount-box）: 濃紺の箱に白い大きな数字と小さな単位を載せる。
• ステップカード（step-card）: 水色のパネル内に白いカードを置き、チェックアイコン付きの見出しと注釈を入れる。カード間は矢印でつなぐ。
• 小見出しタグ（pill-tag）: オレンジのピル型タグか、白いピル型の見出し札。
• イラスト吹き出し（speech-bubble）: 人物イラストの横に淡い色の角丸吹き出しを置く。
• 注意事項アコーディオン（accordion）: 白地に濃紺の細枠を付け、右端に濃紺の丸い下矢印を置く。
• 問い合わせボックス（contact-box）: 上半分を水色にして大きな電話番号を入れ、下半分の白地に受付時間を書く。

Do's and Don'ts

Do - 金額はページで一番大きく、極太の数字で見せる。 - 応募条件は番号順のステップカードと矢印で視覚化する。 - 対象者別に色を分ける（未保有＝青、保有＝オレンジ）。 - 注釈は省かず、小さい文字で必ず添える。 - 全幅の濃紺帯でリズムを作る。

Don't - パステルや多色のグラデーションを多用しない。 - 金額を細字や小さいサイズで書かない。 - CTAの色の役割を混ぜない。 - 影や立体表現を強く付けない。 - 写真を背景いっぱいに敷かない。

Page Structure

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

1. ファーストビュー（キャンペーン名、最大特典額、期間を伝える）: 青い筆ストロークの上に白パネルを置き、ロゴ風の題字と巨大な金額を載せる。下に濃紺の期間帯を敷く。
2. CTA帯（対象者別にすぐ申し込めるようにする）: 濃紺の帯に、斜線で挟んだ見出しと赤・白のボタンを2つ並べる。
3. ポイント説明（もらえる特典の価値を説明する）: 水色の地に、オレンジのタグと見出し、コインのイラストと交換先アイコンを並べる。
4. 特典内訳一覧（特典の合計と内訳を一覧で見せる）: 濃紺の帯見出しの下に白い表カードを置く。丸い番号、特典名、金額を行ごとに並べる。
5. 対象者の分岐（自分の該当ルートへ誘導する）: 男女のイラストに青とオレンジの選択ボタンを付け、巨大な数字入りの見出しを置く。
6. 特典1の詳細（条件と応募手順を伝える）: 濃紺ラベル、金額ボックス、水色パネル内のステップカード、獲得額の順に並べる。
7. 特典2の詳細（既存客向けの条件を伝える）: オレンジの帯と吹き出しで始め、あとは特典1と同じ構成にする。
8. 特典3の詳細（提携カードの特典を伝える）: 紺から紫へのグラデーションパネルにカード画像を載せ、黄色マーカーの金額とステップを続ける。
9. アプリ案内とブランドメッセージ（確認方法と締めのメッセージを伝える）: 濃紺地に白カードとスマホのモックを置き、次に青いストロークを背景にした太字メッセージを入れる。
10. おすすめ情報・期間（関連施策と締切を再告知する）: 濃紺地にバナーを2つ並べ、その下のオレンジ帯に大きな日付を入れる。
11. 申込方法・注意事項（申込手段の選択と規約を示す）: 白地に枠線のアコーディオンを縦に並べる。
12. 問い合わせ・フッター（連絡先と法定表記を載せる）: 電話番号のボックスを置き、その下に濃紺のフッターとリンクのグリッドを入れる。

Imagery

• 人物は線の少ないフラットなイラストにし、青やオレンジの服を着せ、手を振るなど明るいポーズにする。
• FVと締めには、濃い青から水色へ流れる太い筆ストロークのグラフィックを使う。
• コインやポイントは金色の立体風イラストで描く。
• カードやアプリは実物に近いモックで見せる。
• アイコンは単色のシンプルな線か面で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約480px相当の1カラムで組み、両端は水色や濃紺の帯を全幅に伸ばす。
• SPでは同じ1カラムをほぼ全幅で使い、金額の文字は40〜48pxにする。
• SPではCTA帯の2ボタンを縦に積む。
• SPでは特典内訳表の金額を名称の下に回す。
• フッターのリンクはPCで3列、SPで1〜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 行書くと起動時に読み込まれる。