DESIGN.md — 青×ミントの集中線ポイント還元キャンペーンLP（Bright Blue Burst Point Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: 集中線・立体数字・コイン・白カード・料金比較・注釈多め
• 地の質感: フラットな塗りが基本。FVだけ集中線とハイライト付きの立体文字を使う
• 形: 大きめ角丸の白カード、ピル型ラベル、下向き三角の矢印、プラス記号
• 温度感: 涼しい青系の地に、暖色の黄・赤ピンクを差し色にする

Colors

• 地の色は水色→濃青→中間青→水色と、セクションごとに切り替える
• 情報は必ず白カードに載せ、濃青の地には注釈の白文字だけを置く
• 赤ピンクは主CTAだけに使う
• 赤文字は価格・割引名・無料訴求に限る
• 現在のプランはミント、変更後のプランは濃青のラベルで色分けする
• 黄色はFVの数字と手順のマーカーに絞る
• button-primary は文字 #FCFCFE × 背景 #F52269 のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E60A54、4.52:1）を使う。
• ribbon-heading は文字 #FFFFFF × 背景 #66A4D5 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#327BB5、4.53:1）を使う。

Typography

• 全体は太めの角ゴシックで統一する
• 価格の数字は単位や税込表記の3倍ほどの大きさにする
• ※注釈は字下げのぶら下げインデントにする
• 見出しは中央揃え、本文は左揃えにする
• リンクは青文字に下線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、手順だけ 2 カラムのカード
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右に約22pxの余白を取って、色の地の上に置く
• 料金比較は2枚のカードを縦に並べ、間に下向き三角を挟む
• 割引内訳は淡い水色のボックスを並べ、間にプラス記号を置く
• 注釈は濃青の地に、カードの外で長く並べる
• CTAは水色の帯の中央に1つだけ置く

Elevation & Depth

• 影はほとんど使わずフラットに作る
• CTAは下側に濃紺の太い縁をつけて、押せそうな立体感を出す
• FVの数字は赤と濃紺の縁を重ねて押し出し風にする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は使わず、イラストとアイコンを角丸の枠に収める
• セクション境界: FVの下端だけV字に尖らせる。ほかのセクションは直線で区切る
• プランのラベルはピル型にして、カード上端にまたがるように置く
• 手順カードは上に丸い番号バッジを重ねる
• 価格の下には色付きの太い下線を引く

Components

• エントリーCTA（button-primary）: 赤ピンクのピル型。濃紺の縁と下の影で立体的に見せる
• プラン名ラベル（plan-label）: 白カードの上端に重ねるピル型ラベル。現行プランはミント、変更後は濃青
• 料金カード（price-card）: 白い角丸カードに、大きな価格と色付きの下線を載せる
• 割引内訳ボックス（discount-box）: 淡い水色の角丸ボックス。赤文字の割引名、青い区切り線、金額の順に並べる
• 手順カード（step-card）: 青枠の2カラムカード。上に丸い番号バッジ、マーカー付きの説明、水色地のアイコンを入れる
• 手順見出しの帯（ribbon-heading）: 中間青の角丸帯で、下が三角に尖る。白文字の中の数字に黄色い下線を引く
• 注釈リスト（note-list）: 濃青の地に、白の※付き番号の注釈をぶら下げインデントで並べる
• 概要・期間カード（info-card）: 中間青の地に置く白の大角丸カード。中央揃えの見出しと左揃えの本文

Do's and Don'ts

Do - FVは集中線と巨大数字を中心に組み、金額をひと目で伝える - 価格は赤と濃紺で大きさに差をつけ、税込表記は小さく添える - 情報は白カードに分け、地の青は段階的に変える - 条件と注釈は省かず、※番号でまとめて読めるようにする - 手順は2ステップ程度に絞り、アイコンで図解する

Don't - 赤ピンクをCTA以外の面に使わない - 写真素材を多用しない - 細い明朝体を使わない - 白カードに強い影をつけない - 注釈を背景と同化する薄い色にしない

Page Structure

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

1. ファーストビュー（対象者・条件・特典額を一目で伝える）: ミントと青の集中線に、立体的な黄色の数字とコインを散らす。上に対象者のピル帯、左上に斜めのバッジを置き、下端はV字にする
2. CTA（エントリーを促す）: 水色の帯に赤ピンクのピル型ボタンと、サブのテキストリンクを置く
3. 料金比較（プラン変更後のお得さを示す）: 濃青の地に白カードを2枚並べ、間に三角の矢印を入れる。赤の大きな価格と無料訴求の集中線装飾を使う
4. 割引内訳（割引の内訳を見せる）: 白カードの中に水色ボックスを縦に並べ、間をプラス記号でつなぐ
5. 注釈（割引条件の詳細を示す）: 濃青の地に白文字の※リストを並べる
6. キャンペーン概要と手順（特典内容と参加方法を説明する）: 中間青の地に白カードを置き、帯見出しと2カラムのSTEPカードを入れる
7. 実施期間（期間と特典の付与時期を示す）: 白カードに見出しを中央揃えで置き、本文は左揃えにする
8. 注意事項（規約を網羅的に示す）: 水色の地に、黒丸の箇条書きを小さめの文字で並べる
9. フッター（著作権を表示する）: 濃青の帯に、白の小さな文字を中央揃えで置く

Imagery

• FVは放射状の集中線（ミントと青の交互）に、ハイライト付きの金色コインを散らす
• 大きな数字は黄色の塗りに赤と濃紺の縁を重ね、斜めの光沢を入れる
• 手順のアイコンは濃紺の線画で、ボタンのクリックや書類の差し替えを表す
• 小さな星形のきらめきを数字の横に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は内容幅を 600〜760px 程度に絞り、中央に寄せる
• 背景の色帯は全幅に伸ばし、カードだけを中央に置く
• 手順カードは PC でも 2 カラムのままにする
• FVの集中線は横に広げ、数字の大きさに上限を設ける

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