DESIGN.md — 黄×青のポップなポイント告知キャンペーンLP（Pop Yellow and Blue Point Program Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、清潔・爽やか、力強い・インパクト
• キーワード: 黄色地・濃紺の極太見出し・漫画風の集中線・マスコットの吹き出し・水色のマーカー下線・図解イラスト
• 地の質感: グラデーションや質感のないフラットな単色の面。3D風のマスコットとフラットイラストを組み合わせる
• 形: 角丸の大きい白カードとボタン、傾けた帯、トゲ型の爆発フレーム、四角い吹き出し
• 温度感: 明るく元気で、親しみやすい中にも公共サービスらしい誠実さがある

Colors

• 地の色は黄色・白・青の3種類。冒頭と手順ブロックだけ黄色、説明は白、締めは青の全幅面にする
• 見出しはすべて濃紺の太ゴシック。キーワードの下に黄色か水色の帯マーカーを敷く
• 赤は主CTAボタンと日付・割引数字だけに使う
• 誘導や開閉のボタンは水色、詳細リンクは濃い青で、CTAの赤と役割を分ける
• 説明カードは淡い水色の面に、白い吹き出しと濃紺の文字を合わせる
• button-primary は文字 #FEF9F8 × 背景 #FC0202 のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E80202、4.53:1）を使う。
• button-accordion は文字 #FEF9F8 × 背景 #00BEEB のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#007E9C、4.51:1）を使う。
• point-badge は文字 #FEF9F8 × 背景 #00BEEB のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#007E9C、4.51:1）を使う。

Typography

• 見出しは中央揃えで、2行に分けて改行位置を調整する
• 日付・金額などの数字は一回り大きくし、赤か濃紺で目立たせる
• リード文は行間を広く取り、短い行を中央にリズムよく並べる
• 注釈は※付きの小さな文字で、ボタンや図のすぐ下に置く
• 英字の多い見出しも、和文と同じ極太ゴシックでそろえる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アプリアイコンやバナー、商品は 2 列で並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• ボタンとカードは左右に約8%の余白を取って中央に置く
• 黄色地の上に白い角丸カードを重ねて、手順を区切る
• 見出し・図解・注釈・ボタンの順で1ブロックを組む
• バナー画像は横いっぱいに近い幅で、縦に3枚程度積む
• セクションの切り替えは、地の色を変えるか斜めの帯で示す

Elevation & Depth

• 影はほとんど使わず、フラットに仕上げる
• 白カードは影なしで、黄色地との色の差だけで浮かせる
• ロゴ枠やバナーには細いグレーの線を付ける程度にとどめる

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形バナー。人物とマスコットは切り抜きで配置する
• セクション境界: 直線で地の色を切り替える。強調の帯は少し傾け、上下に紺の曲線を添える
• ボタンは角丸16px前後の横長の長方形にする
• FVは上下にトゲ型の爆発フレームを置く
• 吹き出しは角ばった四角形にしっぽを付ける
• 見出しの両脇に斜めの集中線を置いて盛り上げる

Components

• 赤の主CTAボタン（button-primary）: 白の太字2行に、右端の三角矢印を添える
• 濃紺の詳細ボタン（button-secondary）: 「詳しく見る」系のリンク。右端に三角矢印を付ける
• 水色の開閉ボタン（button-accordion）: 条件ごとの案内を開く。右端に下向きの山形矢印
• マーカー帯の見出し（heading-marker）: 濃紺の太字の下半分に、水色か黄色の帯を敷く
• 傾いた黄色の訴求帯（tilted-band）: 全幅の黄色帯を少し傾け、上下に紺のライン、中央に特大の数字コピーを置く
• 白い手順カード（step-card）: 黄色地の上に置く大きな角丸カード。見出し・アイコン・画面図・注釈を入れる
• 水色の説明カード（info-card）: 左に短いコピーとアイコン、右にスマホを持つ手のイラスト。角に濃紺の吹き出しバッジを付ける
• 料金比較表（price-table）: 青い線で囲んだ表。割引後の数字は赤で示し、左に黄色いトゲ型の割引バッジを付ける
• ポイント数の丸バッジ（point-badge）: 水色の円に白文字で必要ポイント数を入れ、商品画像の右上に重ねる
• 白地の枠線ボタン（button-outline）: 青地の上に置く白いボタン。水色の太い枠線、青文字、右に長い矢印

Do's and Don'ts

Do - 冒頭は黄色地にトゲ型フレームと集中線、マスコットを置いて、警告する空気を作る - キーワードには必ずマーカー帯を敷き、濃紺の極太文字で示す - 手順は白カードの中で、アイコン・画面図・注釈の順に見せる - マスコットの短いセリフを手書き風の文字で添える - 締めは青の全幅面に、白文字の見出しと人物写真を置く

Don't - 赤を本文や装飾に多用しない - 明朝体や細いウェイトを見出しに使わない - 黒やグレーで重い地のセクションを作らない - ボタンをピル型や細い線だけのデザインにしない - 影やグラデーションを強くかけて、フラットな印象を崩さない

Page Structure

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

1. ファーストビュー（期限が迫っていることを知らせ、注意を引く）: 黄色地の上下にトゲ型フレーム。ロゴ、日付入りの極太見出し、困り顔の大きな3Dマスコットと縦書きのセリフを置く
2. 問題の説明（制度の仕組みと損をする可能性を伝える）: 白地に中央揃えの短い文を行間広く並べ、日付は赤で大きく。間に水色の逆三角ラベルと小さなマスコットを入れる
3. CTA・確認手順（残高確認の行動を促す）: 黄色地に赤の主CTA。その下に白カードでアプリアイコン2つと、スマホ画面の拡大図を示す
4. 条件別の案内（ログイン方法を条件ごとに案内する）: 白カードにマーカー見出しを置き、水色の開閉ボタンを縦に並べる
5. 使い道の紹介（ポイントの価値を伝える）: 集中線付きの見出し、大きなロゴ、傾いた黄色帯の換算コピー、店頭でのやり取りを描いたフラットイラストを置く
6. 使い方の説明カード（提示するだけで使える手軽さを見せる）: 水色カードにアイコンとスマホを持つ手のイラスト。下に濃紺の詳細ボタンを置く
7. 関連サービスの紹介（使える場所の広さを伝える）: マーカー見出し、サービスのロゴ、目印マーク、濃紺帯の見出しの下に店舗リスト、DLボタンの順に並べる
8. おトクな使い方（交通での高い還元を訴求する）: 傾いた黄色帯、比較表と割引バッジ、乗客のイラストに黄色い吹き出しを添え、詳細ボタンを置く
9. キャンペーンバナー（期間限定の商品へ誘導する）: 横長のバナーを3枚、縦に積む
10. 交換商品（ギフトやグルメとの交換を紹介する）: 斜線で挟んだ小見出しの下に商品画像を2列で並べ、ポイント数の丸バッジを重ねる。その下にバナーを置く
11. アプリDLのCTA（アプリのダウンロードで締める）: 青の全幅面に白の極太見出し、白い枠線ボタン、動作環境、スマホを掲げる人物写真を置く

Imagery

• ツヤのある3Dの黒猫マスコットを、表情を変えて複数のシーンに登場させる
• 人物は青と水色を基調にしたフラットイラスト。輪郭線は入れない
• スマホ画面のUIは、赤枠と矢印で拡大して手順を示す
• 背景にコインやアイコンを散らし、落下線で動きを出す
• 締めには明るい自然光の人物写真をスマホと一緒に切り抜いて置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像は届いていないため、以下はPCに広げるときの推奨です
• PCでは本文の幅を最大600〜720px程度にして中央に置き、黄色や青の地だけ全幅に伸ばす
• アプリアイコンや商品は、PCで3〜4列に広げる
• ファーストビューは左に見出し、右にマスコットの2カラムにしてもよい
• ボタンは最大幅400px程度に収める

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