DESIGN.md — 赤×オレンジのポイント還元カード LP（Bold Red Reward Credit Card LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 情報量多め・訴求型、力強い・インパクト、信頼・誠実
• キーワード: 深紅・オレンジグラデーション・巨大数字・白カード・注釈多め・フラットアイコン
• 地の質感: ベタ塗りと赤→オレンジのグラデーション面に白カードを載せる。光沢のある3Dコインやカードの画像を添える。
• 形: 角丸8〜12pxのカード、ピル型のオレンジCTA、円形の番号バッジ、下向き三角の吹き出し。
• 温度感: 暖色寄り。赤とオレンジが熱量を出し、白とグレーで落ち着かせる。

Colors

• 強調したい数字・語句は primary の赤文字で大きくし、他は濃グレー。
• 特典ブロックは赤→オレンジの斜めグラデ面に白カードを載せる。
• 申込CTAはオレンジ一色のピル型。赤との混同を避ける。
• CTA帯はベージュ地で毎回同じ形で繰り返す。
• セキュリティ等の特長はピンク→ピーチの横グラデ帯と白地を交互に。
• 注釈は黒の小さい文字、リンクは赤の下線付き。
• button-primary は文字 #FFFFFF × 背景 #FB921C のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B36003、4.57:1）を使う。

Typography

• 数字は単位より2〜3倍大きくし、％や円は小さく添える。
• 赤の巨大数字はオレンジへのグラデや影を付けて立体感を出す。
• 見出しは太ゴシックのみ。明朝は使わない。
• 数字の横に*を付け、すぐ下に注釈を置く。
• セクション見出しの下に赤の小さな点を5つ並べる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、アイコンだけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約16px空けて置く。
• CTA帯はファーストビュー直後と主要セクションの間に3回繰り返す。
• 特長は円形アイコン＋2行コピーで中央揃えに縦積み。
• 注釈ブロックは左揃えで本文幅いっぱいに置く。
• 詳細表は2列（項目名グレー地／内容白地）。

Elevation & Depth

• 白カードに薄い影（0 2px 8px rgba(0,0,0,.1)）。
• CTAボタンに下方向の柔らかい影。
• グラデ帯の上でカードを浮かせて見せる。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は背景を切り抜いてセクション右下に重ねる。アイコンは淡ピンクの円の中に入れる。
• セクション境界: 基本は水平の切替。一部で斜めの赤帯、大きなアーチ形のグレー面を使う。
• 吹き出しは白地に赤枠、下向きの三角を付ける。
• 条件・Stepは赤い円バッジをカードの上辺中央に重ねる。
• 特長の見出しは、赤ラベルから伸びる赤〜オレンジの曲線フレームで囲む。

Components

• 申込ピルボタン（button-primary）: オレンジのピル型で右に白い山形矢印。左に赤い円の「年会費無料」系バッジを重ねる。
• 赤丸バッジ（badge-circle）: 赤い円に白文字2〜3行。ボタンの左上やキャッチの横に重ねる。
• 番号バッジ（step-badge）: 小さな英字ラベルと数字が入った赤丸。カードの上辺に半分はみ出させる。
• 赤枠吹き出し（speech-box）: 白地に赤い枠と下向きの三角。メリットを短い言葉で入れる。
• 特長カード（benefit-card）: 左に赤い斜めタブとアイコン、右に赤文字の訴求文、右下に赤丸の下矢印を置く。
• 加算条件の行（point-row）: 赤枠の角丸ボックス。左に条件、右に＋数値%を大きく。左上に星を付ける。
• ピンクのアコーディオン（accordion-bar）: 淡い赤のピル型バーに白文字と右端の＋。
• FAQ行（faq-item）: 左に赤〜オレンジのQ丸、質問は太字、右に赤い＋。グレーの線で区切る。
• 基本情報表（spec-table）: 項目名はグレー地、内容は白地の2列表。細いグレーの罫線。

Do's and Don'ts

Do - 主要な数字は赤で画面幅の半分近くまで大きく出す。 - 数字の訴求には必ず*を付け、注釈を近くに置く。 - CTA帯は同じデザインで繰り返す。 - アイコンは淡ピンクの円に入れたフラットなイラストで統一する。 - 人物写真は赤い服、カードを持つか指をさす明るいポーズにする。

Don't - 寒色をメインに使わない（ロゴ類は例外）。 - CTAを赤にしない。オレンジで差を付ける。 - 細い明朝体や繊細な装飾を混ぜない。 - 注釈を省いて誇大に見せない。 - グラデの上に直接長文を置かず、白カードに入れる。

Page Structure

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

1. ファーストビュー（最大還元率を一目で伝える）: 右上に短いキャッチ、赤服の人物がカードを持つ写真、その下に巨大な赤数字と期間を赤枠で囲んだ帯。
2. CTA帯（入会特典と申込導線を示す）: 赤→オレンジのグラデ地に白文字の特典見出し、赤丸バッジ付きのオレンジのピルボタン、注釈。
3. カード紹介（主なメリットを4つ示す）: カード画像の上下に赤枠の吹き出しと赤い四角ラベルを2つずつ配置。
4. 入会特典（条件と特典額を説明する）: グラデ地に白カード。番号バッジ付きの条件カード2枚、階段状の棒グラフ、アコーディオン、カルーセル。
5. ベネフィット要約（おトクと安心の2軸を示す）: 斜めの赤帯に人物、その下に特長カード2枚。
6. 還元詳細（対象店舗と還元の仕組みを説明する）: タブ付きのロゴ一覧、試算カード、加算条件の行を積み上げた赤枠ボックス。
7. 年会費無料（コストの不安を消す）: ピンク→ピーチのグラデ帯に白い円のイラストと黄色マーカーの見出し。
8. セキュリティ（安心感を伝える）: 曲線フレームの見出しのあと、円形アイコンと2行コピーを3つ、白地とグラデ帯を交互に縦に並べる。
9. 入会までの流れ（手順を示す）: Stepバッジ付きのカードをカルーセルで切り替える。
10. その他の機能（付帯サービスを紹介する）: アーチ型のグレー面に白カードを縦に積み、赤い大きな見出しとイラストを入れる。
11. よくある質問（疑問を解消する）: Q丸付きのアコーディオンを8項目前後。
12. 基本情報・注意事項（規約情報を開示する）: 左に赤い縦線の小見出し、2列の表、グレー枠の注意ボックス、問い合わせカード。

Imagery

• 人物は白背景で、赤いジャケットの女性が笑顔でカードやスマホを持つ写真を切り抜く。
• 金色の3Dコインを特典ブロックの周りに散らす。
• スマホ・鍵・カード・端末はフラットなイラストで、淡ピンクの円の背景に置く。
• 黄色のキラキラ星を見出しの装飾にする。
• 店舗ロゴは白地に3〜4列のグリッドで並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央にコンテンツ幅約1000pxで配置し、FVは人物を左、数字を右の横並びにする。
• 条件カードやベネフィットカードはPCで2列にする。
• 流れのStepはPCで5列の横並びにし、カルーセルをやめる。
• 機能カードはPCで3列＋2列のグリッドにする。
• FAQと表はPCで幅約60%に絞って中央に置く。

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