DESIGN.md — 桃色地×緑と赤の銀行キャンペーンLP（Pink and Green Bank Campaign LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、親しみ・手作り感、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 淡ピンク地・白カード・赤タブ見出し・緑の帯・番号付き条件・金額の大きな数字
• 地の質感: 平塗りのフラットな面だけを使う。グラデーションは使わず、細い罫線と薄い影で区切る
• 形: 角丸が小〜中の長方形カードを使う。見出しは上の角だけ丸めたタブ型、ボタンは角丸長方形
• 温度感: 暖かいピンクに落ち着いた緑を合わせ、やや暖色寄りにする

Colors

• 地はすべて淡ピンクにし、内容は白いカードに載せる
• 大きなセクション見出しは赤ピンクのタブにし、白抜きの文字を載せる
• セクション内のサブ見出しは緑の帯か緑の文字にする
• 金額などいちばん目立たせたい数字は赤ピンクで大きく組む
• 条件の強調には黄色マーカーを使う
• ボタンは行動ごとに色を分ける。エントリーは赤、オンラインはオレンジ、来店・検索は黄緑
• button-primary は文字 #FFFFFF × 背景 #EB545C のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E5242E、4.54:1）を使う。
• button-online は文字 #FFFFFF × 背景 #FD6D02 のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C35402、4.58:1）を使う。
• button-store は文字 #FFFFFF × 背景 #76AD01 のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#598201、4.55:1）を使う。
• reward-table は文字 #E8555F × 背景 #FEFEFE のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E22A37、4.51:1）を使う。

Typography

• 数字は単位よりはっきり大きくし、単位は小さく添える
• 見出しはすべて太字のゴシックにする
• 重要な語句は太字に黄色マーカーを重ねる
• 注釈は※付きの小さい文字にし、本文のすぐ下に置く
• ファーストビューのコピーは縁取りのある極太の書体で組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。条件カードは縦積み、アイコンは 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは白カードの上辺に赤タブを重ねて始める
• カードの左右にピンクの地が見えるよう少し余白を取る
• 条件は番号付きのカードで並べる
• 表は 2 列で組み、ヘッダーを色面にする
• CTA はセクションの末尾に中央揃えで置く

Elevation & Depth

• 白カードには影をほぼ付けず、地との色差で浮かせる
• ボタンは平面で、下側にごく薄い影を付ける程度にする
• スマホ画面のキャプチャは細い枠線で囲む

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは切り抜きで配置する。画面キャプチャは角丸の長方形にする
• セクション境界: 直線で区切る。赤タブの下に赤い横線を引く
• 見出しタブは上の角だけ丸める
• ボタンは角丸 6〜8px の長方形にする
• 条件の番号は小さな赤い正方形にする

Components

• 赤タブ見出し（section-tab）: 上の角だけ丸めた赤いタブ。白い太字を載せ、下に赤い線を引く
• エントリーボタン（button-primary）: 幅広の赤い角丸ボタン。白い太字で組む
• オンライン手続きボタン（button-online）: オレンジのボタン。メインの文言の下に小さい補足を 2 行目に入れる
• 来店・検索ボタン（button-store）: 黄緑のボタン。外部リンクのアイコンを付ける
• 緑帯のサブ見出し（green-band）: カードの幅いっぱいの緑の帯。白文字を中央に置く
• 番号付きの条件カード（condition-card）: 白いカードの左上に赤い番号を置く。重要な語句は黄色マーカーで強調する
• 特典の金額表（reward-table）: ヘッダーはくすんだピンク。右の列に赤く大きな金額を入れる
• 特長アイコン列（feature-icons）: 淡緑の面に緑の線のアイコンを並べ、短い説明を添える
• 詳細の 2 列表（detail-table）: 左に淡ピンクの項目欄、右に白の内容欄を置き、ピンクの罫線で区切る
• ポイント吹き出し（point-bubble）: 黄色の吹き出しに赤い「Point」の見出しを付ける。図解の説明に使う

Do's and Don'ts

Do - 地は淡ピンク、内容は白カードという構成を守る - セクションの開始は必ず赤タブにする - 金額は大きな赤い数字にして目立たせる - 条件や注釈は省略せず、表と※で整理して載せる - ボタンの色は行動の種類ごとに一貫させる

Don't - 濃い色の背景のセクションを入れない - グラデーションやきらびやかな装飾を使わない - ボタンをピル型にしない - 赤と緑の役割を入れ替えない - 注釈を本文と同じ大きさにしない

Page Structure

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

1. ファーストビュー（キャンペーン名・最大特典額・期間を一目で伝える）: 淡ピンクの地に人物とお金のイラストを散らす。中央に極太の金額、下に緑の期間帯を置く
2. 受賞・実績バッジ（第三者の評価で信頼を示す）: 濃い緑の横長バナーに、トロフィーと No.1 の表記を入れる
3. ページ内ナビ（各セクションへ移動しやすくする）: 赤〜ピンクの角丸タブを 4 つ横に並べる
4. キャンペーン概要（条件）（参加条件を示す）: 番号付きの白カード 4 枚と注釈で構成する
5. 特典（金額ごとの特典を示す）: 金額表を置き、その下に赤いエントリーボタンを配置する
6. 必要情報の確認方法（エントリーの準備方法を案内する）: 開閉できるアコーディオンにし、カード画像と画面キャプチャで手順を説明する
7. 取引の考え方（図解）（対象になる金額の計算方法を説明する）: 棒グラフと矢印の時系列で示し、黄色のポイント吹き出しで補足する
8. 手続き方法（オンラインでの手続き手順を示す）: 緑帯の見出しの下に 3 ステップのカルーセルを置き、オレンジのボタンで締める
9. 店頭相談（対面での相談へ誘導する）: 相談のイラストと実績バナーを置き、特長アイコン 6 個と黄緑のボタンを続ける
10. 関連リンク（商品選びの参考情報へ案内する）: 緑の枠のボックスに、線のボタンと塗りのボタンを並べる
11. キャンペーン詳細（規約をすべて掲載する）: 2 列の詳細表にし、注意事項は赤い丸の箇条書きにする

Imagery

• 人物は細い線と平塗りのフラットなイラストで描く。色はピンク・緑・からし色を使う
• コイン・豚の貯金箱・棒グラフ・虫めがねなど、お金に関するモチーフを散らす
• 操作手順はスマホ画面のキャプチャを白枠で見せる
• アイコンは緑の単色で、線と面を組み合わせて描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では内容の幅を約 840px にして中央に置き、左右にピンクの地を見せる
• 条件カードは PC で 4 列、SP で 1〜2 列にする
• 特長アイコンは PC で 6 列、SP で 3 列×2 段にする
• SP では詳細表の項目欄を上に、内容を下に積む
• ファーストビューのイラストは、SP では文字の周りに縮小して配置する

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