DESIGN.md — 深緑×金の法人向けクレジットカード LP（Deep Green and Gold Business Card LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、上品・高級、情報量多め・訴求型
• キーワード: 深緑・シャンパンゴールド・比較表・金枠カード・斜めの切り返し
• 地の質感: 白〜明るいグレーのフラットな地。ボタンと帯は深緑のグラデーションと金のグラデーションで、ほんのり光沢がある
• 形: 角丸は小さめ(4〜8px)の長方形ボタン。FV と見出し帯で斜めのカットを使う
• 温度感: やや寒色寄りで落ち着いた印象。金で少し温かみを足す

Colors

• 一般カードは深緑、上位カードは金で表し、ボタン・タブ・比較表のヘッダーも同じ色分けにする
• 地は白と薄いグレーを交互に置いてセクションを区切る
• 金額・還元率の数字だけ赤で大きくする
• キャンペーン枠は白地に細い金の線で囲む
• 見出し帯と診断エリアの背景には薄いミントを使う
• 英字の小見出しは深緑の文字にする
• button-gold は文字 #FFFFFF × 背景 #DAB154 のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#947020、4.57:1）を使う。

Typography

• 数字は本文の 2〜2.5 倍の大きさにし、単位は小さく添える
• 英字ラベル→日本語見出しの 2 段で見出しを組む
• 見出しは中央揃え、本文は左揃え
• 注釈は ※1 のような番号付きで小さく、まとめて置く
• 装飾的なスラッシュ（＼ ／）で小見出しを挟む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表は 2 列を維持する
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• CTA は 2 種類を緑・金の並びでセットにして置く
• セクションごとに地の色を変える
• 比較表は項目列＋カード 2 列
• メリットは横スライドのステップカードで見せる
• 注釈は各セクションの末尾にまとめる

Elevation & Depth

• ボタンとアコーディオンにうすい影(0 2px 4px rgba(0,0,0,.15))
• ステップカードは白地に弱い影
• それ以外は影を付けないフラットな面

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: カードは券面画像を角丸のまま切り抜いて置く。写真は横長の帯に裁ち落とす
• セクション境界: 基本は直線。FV とポイント帯は斜めのカット
• ボタンは角丸が小さい長方形で、右端に＞の矢印を付ける
• アコーディオンは右端に丸い＋アイコン
• 悩みは薄いグレーの円にイラストを入れる
• タブは上側だけ角丸にする

Components

• 深緑の申込ボタン（button-primary）: 深緑のグラデーション。左にカード画像、右に＞を置く
• 金の申込ボタン（button-gold）: 上位カード用。金のグラデーションに白文字
• 枠線ボタン（button-outline）: 白地に深緑の枠線。問い合わせや詳細へのリンクに使う
• 金枠のキャンペーンカード（campaign-card）: 白地に金の線で囲み、中に黄色マーカーの見出し・赤い金額・金枠の小さなボタンを置く
• 2 列の比較表（compare-table）: 列ヘッダーを深緑と金に分け、ゴールド列のセルは薄いクリームにする
• ポイント帯（point-band）: 左に深緑の斜めカットで POINT 番号、右は薄いミント地に見出し
• 特典アコーディオン（accordion）: 深緑のグラデーション帯に白文字、右に＋アイコン
• FAQ 行（faq-item）: グレーのグラデーション帯。先頭に金の Q、右に金の＋
• 注釈（note）: ※1 のように番号を付けた小さなグレー文字

Do's and Don'ts

Do - 2 種類の商品を深緑と金で一貫して色分けする - 数字は赤で大きく、単位は小さく - CTA はファーストビュー直下とページ末尾に、2 種類のボタンを並べて置く - 注釈は番号付きで省略せずに載せる - 白と薄いグレーの地を交互に置いてリズムを作る

Don't - 深緑・金・赤以外の鮮やかな色を足さない - 丸いピル型ボタンや強い角丸を使わない - 強い影や立体的な装飾を使わない - カジュアルな手書き書体を使わない - 赤を面の塗りに使わない

Page Structure

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

1. ファーストビュー（対象者と主要なメリットを伝える）: 人物写真 2 枚の間にカード画像を置き、左に深緑、右に金の斜め帯で特典を示す。下に白い小カードで数字を 3 つ並べる
2. CTA（すぐ申し込めるようにする）: 深緑と金のボタンを横に並べ、下に赤い注意書きを添える
3. キャンペーン（入会特典を訴求する）: 英字ラベル＋見出しの下に、金枠カードを 2 枚縦に並べる
4. カード比較（2 種類の違いを示す）: 深緑・金のヘッダーを持つ比較表と注釈
5. 利用ステップ（申込の流れを示す）: グレー地の上で白カードを横にスライドさせ、深緑の矢印ボタンで送る
6. 特長（使い分けのメリットを伝える）: スマホ画面を中心に、カードを斜め配置で見せる。チェックリストの枠を添える
7. ポイント解説（個別のメリットを詳しく説明する）: タブで 2 種類を切り替え、POINT 帯の下に図解とテキストを置く
8. 悩みの提起（利用シーンへの共感を得る）: グレーの円の中に、短い悩みとイラストを 3 つ並べる
9. タイプ診断（自分に合うかを確かめさせる）: 薄いミント地の中に、イラスト付きのタイルを 4 つ置く
10. 特典（付帯サービスを伝える）: 暗くした写真帯に白文字の見出し。その下に深緑のアコーディオンを並べる
11. よくある質問（不安を解消する）: Q 付きのグレー帯を開閉式で並べる
12. 基本情報（スペックを開示する）: カード画像と箇条書き、罫線の表
13. クロージング CTA（申込・問い合わせへ誘導する）: 2 色のボタンと、枠線の問い合わせボタン

Imagery

• ビジネスパーソンの明るい自然光のポートレート
• カード券面を斜めに置き、光沢を見せる
• シンプルな線画の人物・アイコンイラスト（黒線＋深緑のアクセント）
• 出張・移動シーンの写真は横長の帯にし、暗いオーバーレイをかける
• スマホアプリの画面モックアップ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 65% 幅に収める。SP は 90% 幅の 1 カラムにする
• SP では CTA の 2 ボタンを縦に積み、全幅にする
• SP の比較表は文字を縮めて 3 列を維持し、必要なら横スクロールにする
• FV は SP ではカード画像を中央に置き、特典の斜め帯をその上下に分ける
• 悩みの 3 つの円は、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 行書くと起動時に読み込まれる。