DESIGN.md — 紺×赤×水色の銀行キャンペーン特典 LP（Navy and Red Bank Campaign Benefit LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、力強い・インパクト、清潔・爽やか
• キーワード: 濃紺・大きな金額数字・特典番号帯・ステップフロー・筆ストローク装飾・キャンペーン感
• 地の質感: フラットな単色面が中心。水色のグラデーション地と、筆で塗ったような青い帯の装飾で動きを出す
• 形: 角丸が小さめのカードとピル型ボタン。全幅の色帯で特典を区切り、下向き三角で流れを示す
• 温度感: クールな青系に、赤とオレンジの暖色を差して高揚感を出す

Colors

• 地は白と淡い水色を交互に使い、締めの部分は濃紺で受け止める
• 特典ごとに帯の色を変える（青・紫グラデ・赤）
• 主 CTA は赤、エントリーはオレンジ、サブは濃紺ボタンにして使い分ける
• 金額は濃紺の文字か、濃紺のバッジに白抜きで入れる
• 提携先は赤、自社は濃紺で、左右・＋記号でペアにして見せる
• 黄色マーカーは短い語句の強調だけに使う
• button-entry は文字 #FFFFFF × 背景 #F26B21 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CA4F0C、4.53:1）を使う。

Typography

• 金額の数字は特大にし、『円相当』など単位は数字の 1/3 程度の大きさにする
• 見出しは極太ゴシックで、上品さより読みやすさを優先する
• 条件文の頭は『＼ ／』で挟むか、チェックアイコンを付ける
• 注釈は※を付け、小さい灰色の文字で必ず添える
• 特典の番号は『特典＋数字』を白抜きで帯の中央に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典の比較だけ 2 カラムにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 特典ごとに全幅の色帯で始め、その中は中央寄せで組む
• 獲得方法は角丸の枠の中に白いステップカードを縦に並べ、カードの間を下向き矢印でつなぐ
• 金額ブロックは条件テキストを左、濃紺バッジを右に置く
• ボタンは中央揃えで幅 80% 程度にする
• FAQ は細い罫線で区切ったリストにする

Elevation & Depth

• カードは影を付けず、細い枠線か淡い地色で区切る
• ボタンにだけ下側へ弱い影を付けて押せる感じを出す
• ファーストビューの人物写真は背景より前に重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜いて背景に重ねる。動画サムネイルは 16:9 の角丸なし
• セクション境界: 全幅の直線の色帯。帯の下中央に小さな下向き三角を付け、所々に筆のストロークを入れる
• ボタンはピル型にし、右端に丸い矢印アイコンを付ける
• 金額バッジは角丸 8px の濃紺の箱にする
• ステップ枠は角丸 12px で、淡い水色の地に濃紺の細枠を付ける
• 特典の一覧は円グラフ風に 4 分割した円で見せる

Components

• 主CTAボタン（button-primary）: 赤いピル型ボタン。白抜きの文字で、右に矢印アイコンを付ける
• エントリーボタン（button-entry）: オレンジのピル型ボタン。上に『＼まだの方は／』の小見出しを付ける
• サブボタン（button-secondary）: 濃紺のピル型ボタン。関連サービスの申込に使う
• 特典番号帯（benefit-band）: 全幅の色帯の中央に『特典＋番号』を白文字で入れ、下に三角を付ける
• 金額バッジ（amount-badge）: 濃紺の箱に、白い特大の数字と小さな単位を入れる。左に丸いポイントラベルを付ける
• 獲得ステップカード（step-card）: 水色の枠の中に白いカードを並べる。チェックアイコン、見出し、注釈を入れ、カードの間に青い矢印を置く
• GET強調見出し（get-headline）: 金額と GET! を極太で組み、下に水色の太い下線を引く
• 詳細条件リンク（condition-link）: 細枠の横長ボックス。右に＋アイコンを付けて注意事項を開く
• FAQ行（faq-item）: 先頭に丸いQアイコン、右端にコピーアイコンを付け、下線で区切る

Do's and Don'ts

Do - 金額は大きな数字で、どの特典でも同じ型でくり返す - 条件、ボタン、獲得金額の順をステップで見せる - ※注釈と期間は省略せずに添える - 色帯は特典ごとに色を変えて区別できるようにする - 自社は濃紺、提携先は赤で一貫させる

Don't - 淡いパステルや明朝体で上品に寄せない - 1 つのステップカードに CTA を 3 つ以上置かない - 金額を本文と同じ大きさにしない - 濃紺と赤以外の色をブランド色として増やさない - 写真の上に注釈の小さい文字を載せない

Page Structure

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

1. ファーストビュー（キャンペーンの最大金額と期間を伝える）: 青い筆の装飾と切り抜いた人物を置く。その下の濃紺帯に最大金額を特大で入れ、赤と白の CTA を 2 つ並べる
2. 同時開催キャンペーン（関連企画に誘導する）: 水色地の上に白枠のバナーカードを置き、見出しは濃紺のタブにする
3. CM動画一覧（話題性を出す）: 濃紺の角丸パネルに、16:9 のサムネイルを 2 列 × 3 段で並べる
4. 特典の全体像（4 つの特典をまとめて見せる）: 4 分割した円の周りに 4 枚の特典カードを配置し、中央に『4つの特典』を置く
5. 対象者の振り分け（自分が対象の特典へ案内する）: 街並みの写真の上に、口座の有無を示す 2 つの丸を置く。下は水色の帯にする
6. 特典1〜2（条件と獲得手順を示す）: 色帯、金額バッジ、ステップ枠の順に並べ、最後を GET 見出しで締める
7. 提携カード紹介（関連サービスの魅力を伝える）: 左右に赤い幕を配した舞台風のバナーに、人物とカードを載せ、マーカーで強調する
8. 特典3〜4（ポイントの二重取りを訴求する）: 紺と赤のボックスを＋記号でつなぎ、ステップ枠で手順を見せる
9. よくある質問（不安を解消する）: Q アイコン付きの罫線リストにする
10. アプリ案内（ポイントの確認方法を伝える）: 濃紺地の上に、白いカードとスマホ画面を並べる
11. 締めのメッセージと期間（期間を再確認させる）: 人物写真とメッセージの下に、青から赤へのグラデ帯を置き、期間を大きく入れる
12. 申込方法の選択（最終的な行動を促す）: 濃紺地に、白いアコーディオン型のボタンを 3 つ縦に並べる

Imagery

• 明るいスタジオで撮った人物を切り抜く。笑顔やピースで親しみを出す
• 青い絵の具を刷毛で塗ったようなストロークを背景に流す
• カードやスマホ画面は正面から撮った商品画像にする
• アイコンは線が細めでシンプルなフラットにする（チェック、矢印、Q）
• 晴天の都市の写真を、水色の帯へなじませる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版は中央 約 500px 幅に SP と同じ 1 カラムで組み、左右は背景色を延ばすだけにする
• SP では金額バッジの数字を 36〜44px に抑え、条件テキストはバッジの上に縦に積む
• 特典の 4 分割円は SP でも維持する。カードは 2×2 に縮める
• 動画一覧は SP では 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 行書くと起動時に読み込まれる。