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

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

Overview

• 業種: 金融・保険 ／ 雰囲気: ポップ・元気、信頼・誠実、情報量多め・訴求型
• キーワード: 濃紺の地・白カード・2 色の色分け・特大の金額・黄色マーカー・斜めストライプ
• 地の質感: フラットな塗り。陰影はボタンの影だけ
• 形: 角丸の小さいカード、ピル型ボタン、台形のラベル
• 温度感: 信頼感のある寒色の地に、暖色で明るさを足す

Colors

• 地の色は、濃紺の帯 → 白カード → 淡い水色の帯 → 灰色の帯の順に切り替える
• キャンペーン 1 はオレンジ、キャンペーン 2 はピンクで、ラベル・見出し・条件文までまとめて色分けする
• 金額と条件のキーワードには、黄色の太いマーカーを下半分に敷く
• 申込はティール、エントリーは青のグラデーションのピル型ボタンにする
• 注意事項は白地に黒い小さな文字。見出しの頭に小さな色付きの四角を置く
• button-primary は文字 #FFFFFF × 背景 #018A8B のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#018283、4.64:1）を使う。
• button-entry は文字 #FFFFFF × 背景 #0582D4 のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#057AC8、4.54:1）を使う。
• button-sub は文字 #FFFFFF × 背景 #EC6F7F のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#E32941、4.51:1）を使う。
• campaign-label は文字 #FFFFFF × 背景 #F2944C のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BD5A0E、4.53:1）を使う。
• condition-tag は文字 #FFFFFF × 背景 #F2944C のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BD5A0E、4.53:1）を使う。
• amount-marker は文字 #F2944C × 背景 #FFF100 のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BD5A0E、4.58:1）を使う。
• step-card は文字 #FFFFFF × 背景 #F2944C のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BD5A0E、4.53:1）を使う。

Typography

• 金額の数字は特大にし、『円』や後ろの語は 6 割ほどの大きさに落とす
• 見出しは中央揃えの太字にし、字間を広めにとる
• 条件文はキャンペーンの色で 3〜4 行に分け、中央揃えにする
• 注意事項だけは左揃えの小さな文字で、ぎっしり組んでよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典例の 3 ステップは PC で横 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 濃紺の帯の上に、左右 5% の余白をとって白カードを置く
• カード内は帯ラベル → キャンペーン名 → 金額 → 条件 → ボタンの順に縦に並べる
• 条件 A と B は、点線と中央の丸い『＋』アイコンで区切る
• 合計は『＝』アイコンの区切りのあとに出す

Elevation & Depth

• ボタンには、下方向にやわらかい影をつける
• カードは影なしのフラットにする
• 電話番号の枠は紺の太い線と、薄い影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: イラストは切り抜きでカードの上端からはみ出させる
• セクション境界: 直線で地の色を切り替える。ファーストビューの下端は斜めの黄色い帯
• キャンペーンのラベルは角のない横長の帯
• 条件ラベルは、下に小さな三角がついたピル型
• ボタンの上に、白い吹き出しのピルを重ねて補足を書く

Components

• 申込ボタン（button-primary）: ティールのグラデーションのピル型ボタン。上に白い吹き出しの補足を重ねる
• エントリーボタン（button-entry）: 青のグラデーションのピル型ボタン。吹き出しをつける
• 案内ボタン（button-sub）: ピンクのピル型ボタン。2 行の文字と右端に三角をつける
• キャンペーン帯ラベル（campaign-label）: カードの上部に置く、横幅いっぱいの色帯の白文字
• 条件タグ（condition-tag）: 下に三角がついたピル型のラベル
• 金額の強調（amount-marker）: 特大の数字に、黄色い波線マーカーを敷く
• ＋の区切り（plus-divider）: 紺の点線の中央に、紺の円形の＋または＝を置く
• ステップカード（step-card）: オレンジとピンクを交互に使うカード。白文字とイラストを入れ、カードの間に黄色の矢印を置く
• 電話番号枠（tel-box）: 紺の太枠の角丸ボックスに、大きな紺の番号を入れる
• 注意事項のアコーディオン（accordion）: 淡い青の帯に太字の項目名を置き、右端に＋をつける

Do's and Don'ts

Do - 2 つの施策は、色をはっきり分けて対比させる - 金額は必ず特大の数字にして、黄色いマーカーを敷く - 人物は同じタッチの線画イラストに統一する - 申込ボタンはカード内と終盤の CTA で繰り返して置く

Don't - 写真を多用して、フラットな統一感を崩さない - グレー系の暗い配色にしない - オレンジとピンクを同じ施策の中で混ぜない - 注意事項を省いたり、大きな文字にしたりしない

Page Structure

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

1. ファーストビュー（キャンペーンを一目で伝える）: 空色の地に斜めの多色ストライプを敷き、極太の白・オレンジ・ピンクの文字と人物イラストを置く。下端は黄色の斜め帯に最大の特典額
2. 期間と案内ボタン（開催期間の明示と初心者への誘導）: 濃紺の地に白文字で期間を書き、ピンクのピル型ボタンを置く
3. キャンペーン1（施策 1 の条件と特典を説明する）: 白カードにオレンジの帯ラベル、金額、条件 A・B を並べ、＋で区切る。申込ボタンを入れる
4. キャンペーン2（施策 2 の条件と特典を説明する）: 同じ構成をピンクで組み、エントリーボタンを入れる
5. 特典の受け取り例（家族の例で流れを具体化する）: 淡い水色の地に、ステップカード 3 枚と黄色矢印を並べる。その後に白カードで金額の合計を示す
6. まとめの CTA（申込への最終誘導）: 濃紺の地に白カードを置き、マーカー付きの見出しと 2 つのボタン、期間を並べる
7. お問い合わせ（電話窓口の案内）: 白地に中央見出しと、紺の太枠の電話番号ボックスを置く
8. 店舗相談（来店予約への誘導）: 灰色の地に、白い枠線のボタンを置く
9. バナー（関連イベントへの誘導）: ファーストビューと同じストライプ調の横長バナー
10. 注意事項（規約の提示）: 小さな文字の本文を置き、その下にアコーディオンを 3 つ並べる
11. フッター（会社情報とページトップへの導線）: 濃紺の地に白文字。上にページトップへ戻る帯を置く

Imagery

• 人物は、細い紺の線と青・ピンク・ベージュの平塗りで描いたフラットなイラスト
• ガッツポーズなど前向きなポーズにし、黄色いキラキラを添える
• ファーストビューは、青・オレンジ・赤・緑の太い斜めストライプで、文字の影を伸ばしたように見せる
• 写真は使わず、イラストとタイポグラフィで構成する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 60% 幅のカードにし、外側は濃紺の地を広く見せる
• ファーストビューは PC で横長にし、文字を左、人物を右に置く
• ステップカードは PC で横 3 列にし、間に右向きの黄色矢印を置く
• 受け取り例の合計カードは、PC ではイラストを左、文字を右に並べる

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