DESIGN.md — 緑×桃色の春祭り風 銀行キャンペーン LP（Spring Festival Green and Pink Bank Campaign LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、信頼・誠実
• キーワード: 春祭り・桜・大きな金額数字・アーチ型カード・法被・パステル地
• 地の質感: フラットなベタ塗りに白い点の和柄パターンと桜の花びらを散らす。写真は FV と動画サムネだけ。
• 形: 上部がアーチ状のカード、ピル型ボタン、角丸の白カード、立体的な下影付きタブボタン
• 温度感: 暖かく華やか。緑で安心感、ピンクで高揚感を出す。

Colors

• 地の色はセクションごとに、白・淡ピンク・クリーム・ミントを順に切り替える
• 金額数字と強調語はピンク。最大級の数字だけ黄色にしてピンクのフチを付ける
• 主 CTA は必ずピンクのピル型にし、クリーム地の帯に置く
• サブボタンは白地に緑の文字と緑の下影
• ブランド名の強調は緑、得する内容の強調はピンクで分ける
• フッターとPCの外側の背景はブランド緑で塗る
• button-primary は文字 #FFF8FE × 背景 #EA437E のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DF195F、4.53:1）を使う。
• button-secondary は文字 #379E78 × 背景 #FEFEFF のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#2E8464、4.53:1）を使う。
• nav-tab は文字 #D63B70 × 背景 #FEFEFF のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D5376D、4.53:1）を使う。
• label-bubble は文字 #D63B70 × 背景 #FEFEFF のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D5376D、4.53:1）を使う。
• benefit-row は文字 #D63B70 × 背景 #FEF6B5 のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D5376D、4.56:1）を使う。
• accordion は文字 #D63B70 × 背景 #FEFEFF のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D5376D、4.53:1）を使う。

Typography

• 金額は数字を極端に大きくし、「円」は小さくする
• 見出しは黒とピンクを行ごとに分ける
• 強調語には上に点（傍点）を付けたり、下線を引いたりする
• 小見出しの左右に斜線（＼ ／）を置いて囲む
• 見出しはすべて中央揃え。本文はカード内で左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央に約 440px 幅の SP レイアウトを置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約 25px の余白を取って中央に置く
• ナビは 2×2 のタブボタン
• 特典の一覧は行ごとに、左が説明・右が金額の 2 段組
• スライダーは左右の丸い矢印と、下のドットで操作する
• 主 CTA 帯をページ内に 3 回入れる

Elevation & Depth

• CTA ボタンの下に濃いピンクのベタ影（4px 程度）を付けて立体的に見せる
• 白カードには薄いグレーの影
• アコーディオンの下端に灰色の厚み
• 画像は基本フラットにし、ぼかし影は控えめにする

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: FV は全幅の写真。動画サムネは角丸の小さい矩形。人物はイラストで、カードからはみ出させる
• セクション境界: 直線で地の色を切り替える。説明セクションは上部が半円アーチの白い面
• おすすめポイントのカードは上辺を大きなアーチにする
• ラベルはピンク枠のピル型で、下に小さな三角を付けて吹き出し風にする
• 番号は和風の木札風アイコンに入れる

Components

• 主CTAボタン（button-primary）: ピンクのピル型ボタン。下に濃いピンクの影。上に斜線で囲んだ小見出しを添える
• 詳細ボタン（button-secondary）: 白地に緑の枠と文字。下に緑の影。右端に＋
• ページ内ナビ（nav-tab）: 白い角丸ボタンをピンク枠で囲み、下にピンクの帯と矢印を付ける。2×2 で並べる
• 吹き出しラベル（label-bubble）: ピンク枠のピル型で、下に三角を付ける
• アーチ型ポイントカード（arch-card）: 上部がアーチの淡ピンク面。イラストと大見出しを載せ、中に白カードを入れる
• 特典行（benefit-row）: 緑の丸バッジに特典番号を入れ、左に説明、右に大きなピンクの金額を置く
• 注意事項アコーディオン（accordion）: 白い角丸カード。左にピンクの文字、右に V 字の矢印
• ステップカード（step-card）: 白い角丸カードの上に、ピンクのタブで STEP 番号を出す。横にスライドする

Do's and Don'ts

Do - 地の色をセクションごとに切り替え、パステルの色で区切る - 金額は最大級の数字で見せる - 白い点の和柄パターンや桜の花びらを余白に散らす - 人物は緑の服のシンプルな線画イラストにする - 注釈は小さな文字で、関係する箇所の近くに必ず置く

Don't - CTA をピンク以外の色にしない - 暗い背景のセクションを途中に入れない - ピンクと緑を同じ語の中で混ぜない - 角ばった無機質なカードにしない - 写真をたくさん並べない

Page Structure

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

1. ヘッダー・タブ（ブランドを示し、内容を切り替える）: ロゴの下に、緑と淡緑の 2 タブを置く
2. ファーストビュー（キャンペーンと最大特典額を伝える）: 緑地に人物写真と桜を置く。毛筆の大きなコピーと期間の表を載せる
3. CTA帯（申込への誘導）: クリーム地に、斜線で囲んだ小見出し・ピンクのピル型ボタン・テキストリンク
4. 動画紹介（話題性を出す）: 吹き出しラベル、ピンクの見出し、動画スライダー
5. ページ内ナビ（各セクションへ移動させる）: 2×2 のタブボタン
6. キャンペーン概要（もらえる総額を伝える）: 淡ピンク地に白いアーチ面。巨大な金額と、法被姿の 3 人のイラスト
7. 特典一覧（条件と金額を並べて示す）: 番号の木札アイコンとピンク枠のカード。特典行のリスト
8. 口座開設の流れ（手軽さを示す）: クリーム地にステップカードを横スライドで並べる
9. おすすめポイント（サービスの魅力を伝える）: ミント地にアーチ型カードを 3 つ縦に並べ、POINT ラベルを付ける
10. CTA帯（最後のひと押し）: FV 直後と同じクリーム地の CTA
11. ご注意事項（条件の開示）: 淡ピンク地にアコーディオンを縦に並べる
12. フッター（会社情報）: 白地に登録情報、その下に緑の帯でコピーライト

Imagery

• FV は鮮やかな緑の背景に桜の枝。人物が祭り衣装でポーズをとる写真
• 人物イラストは緑の服を着た線画。肌はフラット塗り、輪郭は濃い緑
• コインやカードのアイコンは緑と黄色のフラットなイラスト
• 白い点を菱形に並べた和柄を、余白のアクセントにする
• ピンクの桜の花びらを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP レイアウトを幅 440px 程度で中央に固定する
• PC の左右の余白はブランド緑で塗り、桜の花びらを散らす
• PC の右側に、白地にピンク枠の追従メニューを置く
• 文字サイズは 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 行書くと起動時に読み込まれる。