DESIGN.md — オーロラパステルの女性向けクレカ LP（Pastel Aurora Credit Card LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: やさしい・柔らかい、かわいい、信頼・誠実、情報量多め・訴求型
• キーワード: オーロラグラデーション・パステル・線画イラスト・白カード枠・手書き見出し・数字強調
• 地の質感: 淡い三角形パターンが透けるグラデーション地と、フラットな白面の組み合わせ
• 形: 細い濃グレー線の角丸カード、ピル型サブボタン、斜線ストライプの帯見出し
• 温度感: やや暖色寄りのパステルで軽やか

Colors

• 地は白とパステルグラデーションを交互に置き、セクションを区切る
• 強調数字と還元率はピンクで大きく
• 主申込は紫ボタン、上位商品はゴールドボタンで色分け
• 情報カードは白面＋濃グレー細枠で統一
• 帯見出しは水色かピンクの淡色面に斜線ストライプ
• 原色は使わず、彩度の高い色は数字とボタンに限定
• badge-pill は文字 #FFFFFF × 背景 #D36681 のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CA4869、4.52:1）を使う。
• point-banner は文字 #FFFFFF × 背景 #D36681 のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CA4869、4.52:1）を使う。

Typography

• 見出しは中央揃えのゴシック太字
• 情緒的なキャッチのみ手書き風書体
• 数字は単位より2倍以上大きくピンクで
• 小見出しは \ / のスラッシュで挟む
• 注釈は小さいグレーで必ず添える
• 番号はピンクの斜体細めで 01/02/03
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、特長アイコンは 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 主要コンテンツは細枠の白カードで囲む
• カード内は帯見出し→図解→説明の順
• 特長は3つ並べて点線で区切る
• 各ブロック末に小さな詳細ボタンを中央配置
• 注釈はブロック直下にまとめる

Elevation & Depth

• 影はほぼ使わずフラット
• カードは1px濃グレー枠で立体感の代わりにする
• ボタンにわずかな影のみ可

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: カード券面は角丸長方形、イラストは切り抜きで白地に配置
• セクション境界: 背景色の直線切替。グラデ地に淡い三角形パターン
• 詳細ボタンはピル型白地に細枠と下向き矢印
• 申込ボタンは角丸小の長方形に右矢印
• 帯見出しは角なし全幅の淡色帯
• バッジはピンクのピル型

Components

• 主申込ボタン（button-primary）: 紫地に白太字、右端に矢印。上位商品はゴールド地＋濃文字で並べる
• 詳細ボタン（button-more）: 白地に細枠のピル型、右に矢印
• 枠付き情報カード（card-frame）: 白面に濃グレー1px枠、角丸大。中に帯見出しと図解
• ストライプ帯見出し（band-heading）: 水色の斜線ストライプ帯に中央太字見出し
• ピンクバッジ（badge-pill）: ピンク地白文字のピル、星キラキラ装飾付き
• 番号付き特長（feature-numbered）: ピンク番号＋線画アイコン＋2行説明を3列、点線区切り
• 比較表（compare-table）: 列ヘッダーをラベンダー/ゴールド淡色で色分けした表
• ステップリスト（step-list）: 白枠の横長ボックスにピンク番号、間にピンク下三角
• 還元率バナー（point-banner）: ピンク→紫グラデ面に白文字と巨大数字
• 切替タブ（tab-switch）: 選択中は濃色地白文字、非選択は白地枠

Do's and Don'ts

Do - 地にパステルのオーロラグラデを使う - 数字はピンクで大きく強調する - 情報は白い枠付きカードにまとめる - 線画イラストとアイコンで説明する - 各ブロックに注釈を添える - 女性の日常シーンのイラストを使う

Don't - 濃い原色の大面積背景を使わない - 重いドロップシャドウを付けない - 手書き書体を本文に使わない - 写真を大きく全面に敷かない - ボタン色を3色以上に増やさない

Page Structure

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

1. ファーストビュー（商品と主なメリットを一目で伝える）: オーロラグラデ地に女性イラストと券面、斜めの白帯キャッチ、メリット3枚のタイル
2. CTA（早期申込を促す）: 短い発行訴求文と紫・ゴールドの2ボタンを横並び
3. 比較表（2種の商品を比較）: 色分けヘッダーの表と注釈
4. 特長（基本商品の魅力を3点）: 券面画像、ピンクバッジ、番号付き3列
5. 還元訴求（ポイント還元と対象店舗）: グラデバナー、手書き見出し、シーンイラスト、ロゴ一覧
6. シミュレーション（年間で貯まる額を具体化）: 枠カード内に水色パネルの計算表と大きな合計数字
7. 使い道（ポイント活用を想像させる）: グラデ地の枠カードに線画3点
8. アップグレード（上位商品への誘導）: ピンク帯見出しと券面2枚
9. 提携サービス（投資連携を紹介）: グラデ地に大見出しとメリットチップ4つ
10. キャンペーン（特典で申込を後押し）: ピンク地、白カードに巨大金額、特典ラベルとバナー
11. 安心・安全（セキュリティで不安解消）: ハートアイコン見出し、枠付きカード3+2
12. 決済方法（使い方の説明）: 水色帯見出しとイラスト、決済ロゴ
13. 申込の流れ（手順を示す）: タブ切替とピンク番号のステップリスト
14. 基本情報（仕様のまとめ）: ラベンダー帯見出し、券面、ピンクチェックの箇条書き

Imagery

• 細い黒線＋淡い水彩塗りの女性イラスト
• 黒線とピンク差し色の線画アイコン
• パール調グラデの券面モック
• 背景に淡い三角形ポリゴン模様
• 手書き風の短い吹き出しラベル
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は1カラムで枠カードを幅90%に
• PC の3列特長は SP で横3列小さめか縦積み
• 申込ボタン2つは SP で縦積み全幅
• 比較表は SP で横スクロールか2列に圧縮
• PC はコンテンツ幅約680pxで中央寄せ

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