DESIGN.md — 赤×黄の集中線で押すキャッシュレス特典LP（Bold Red Cashless Campaign LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 赤一色・集中線・極太数字・親子比較・立体アイコン・黄色強調
• 地の質感: フラットな赤地に放射状の集中線とグラデーション。白カードは影なしで平面的。
• 形: 角丸カード・ピルボタン・ギザギザ星バッジ・円形番号
• 温度感: 暖色寄りで熱量が高い

Colors

• ページの大半は赤地。セクションごとに赤の明度を上下させて区切る。
• 赤地の上の見出しは白、最重要語だけ黄色にする。
• 比較カードは白地。親側を青、子側を赤で一貫して色分けする。
• 後半の説明・手順はクリーム地に切り替えて落ち着かせる。
• 本文の強調語は赤太字。他の色は使わない。
• button-primary は文字 #FEFAFA × 背景 #F32F3D のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E70D1D、4.53:1）を使う。
• point-pill-blue は文字 #FEFAFA × 背景 #2F6FE8 のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2D6DE8、4.54:1）を使う。
• point-pill-red は文字 #FEFAFA × 背景 #F32F3E のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E70D1E、4.53:1）を使う。
• badge-burst は文字 #FEFAFA × 背景 #F32F3E のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E70D1E、4.53:1）を使う。
• ribbon-label は文字 #FEFAFA × 背景 #F32F3E のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E70D1E、4.53:1）を使う。

Typography

• 見出しは極太ゴシック。助詞だけ小さくして文字サイズに強弱をつける。
• 数字は欧文の極太書体で大きく、単位は小さく添える。
• 最重要語は大きなダブルクォーテーションで囲み、黄色にする。
• 伸ばし音は長い横線で表してリズムを出す。
• 注釈は小さな文字の箇条書きにまとめ、白文字で赤地の上に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較カード内は親・子の 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 比較カードは左に親、中央に矢印、右に子を置く対称レイアウト。
• 各キャンペーン段は小ラベル→見出し→比較カード→注釈の順で繰り返す。
• 特長カードは見出しタブ、その下に写真左・テキスト右の横並び。
• 手順は左に縦線と円形番号を置くタイムライン。

Elevation & Depth

• カードには基本的に影を付けない。
• 立体アイコンのイラストだけで奥行きを出す。
• CTAには影を付けずフラットにする。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形。人物は角丸の正方形に近い比率で切り抜く。
• セクション境界: V字のくさび型、ジッパー風のギザギザ、上向きの円弧で区切る。
• 特典率バッジはギザギザの星形にする。
• 親・子のラベルは円形の淡い色の地に置く。
• 特長カードは太い赤枠＋角丸にし、見出しは片側が斜めに切れたタブにする。

Components

• 主CTAピルボタン（button-primary）: 幅いっぱいの赤ピル。右端に白丸の矢印アイコン
• 親子比較カード（compare-card）: 白い角丸カード。親と子のイラストと矢印、ポイント額ボタンを並べる
• 親側ポイント表示（point-pill-blue）: 青地の角丸。アイコンと大きな金額の白文字
• 子側ポイント表示（point-pill-red）: 赤地の角丸。＋記号と金額の白文字
• 星形の率バッジ（badge-burst）: 赤地のギザギザ星に、白文字で何％獲得かを書く
• 斜線つき小ラベル（section-kicker）: キャラアイコンと短い言葉を、左右の斜線二本で挟む
• 番号つき特長カード（feature-card）: 太い赤枠のカードに、番号と見出しの赤タブ、写真、赤強調の説明文を入れる
• 手順タイムライン（step-timeline）: 黒丸に白い番号を入れ、縦線でつなぐ。親・子の円ラベルとアプリ画面図を添える
• 赤リボン見出し帯（ribbon-label）: 赤い帯に白文字。下に三角のしっぽを付ける

Do's and Don'ts

Do - 赤地には放射状の集中線を薄く敷き、熱量を出す。 - 特典の数字は画面幅の半分以上の大きさにする。 - 親は青、子は赤の色分けをすべてのカードで守る。 - 背景に立体の四角アイコンを傾けて散らす。 - 注釈は各ブロックの直後に小さな文字でまとめる。

Don't - 淡いパステルだけの配色にしない。 - 細い明朝体や細字の見出しを使わない。 - カードに強いドロップシャドウを付けない。 - 黄色の文字を白地の上に置かない。 - 親と子の色を入れ替えない。

Page Structure

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

1. ファーストビュー（親子で特典が増えることを一目で伝える）: 青帯に白の太字コピー、淡グレー地にキャラクター写真と上向き矢印を置く
2. 特典の要約（最大の還元率を印象づける）: 赤地の集中線、親・子の吹き出しで巨大な数字を挟み、ジッパー柄で締める
3. 特典段階1（基本の特典例を示す）: 斜線ラベル→見出し→親子比較カード→注釈
4. 特典段階2（条件を満たすと親にも付くことを示す）: V字区切りの濃赤地。黄色の強調見出しと比較カード
5. 特典段階3（最大特典の条件を示す）: 集中線と黄色のキラキラ装飾。比較カード内にプラン詳細へのテキストリンク
6. 注意事項（条件や期間を明示する）: 赤地に白い小さな箇条書き
7. 特長（使う利点を3つ伝える）: 円弧で白地に切り替え、リボン帯と大見出しの下に番号つき特長カードを3枚
8. 設定手順（4ステップで簡単だと示す）: クリーム地にタイムラインとアプリ画面のイラスト
9. CTA（設定へ誘導する）: 大きな赤ピルボタンと小さな注記

Imagery

• 親子の人物は線画イラストにし、髪と服の一部だけ青・赤で塗る。
• 赤い立体アイコンキューブを傾けて背景に散らす。
• 実写は明るい自然光で、スマホを見る親子や学生を撮る。
• アプリ画面はグレー線の簡略図で描き、要所に赤丸の指示を入れる。
• 黄色の4点キラキラと集中線で盛り上げる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央約900px幅に固定し、両端まで背景色を伸ばす。
• FVの見出しは2行から1行に近づけて横長に配置する。
• 特長カードはPCで3列の縦型カードにし、写真を上に置く。
• 手順の画面図はPCで3枚を横に並べる。
• 比較カードの構成はSPとPCで同じ。

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