DESIGN.md — 青×赤橙の風船祭り型 通信キャンペーンLP（Festive Balloon Telecom Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 風船・祭り感・特大価格・白カード・市松ライン・番号バッジ
• 地の質感: フラットな単色地に、光沢のある3D風の風船と紙吹雪を重ねる
• 形: 角丸の白カード、両端に半円の切り欠き、市松模様の区切り線、ピル型ボタン
• 温度感: 高温。青の爽快感と赤橙の熱量を組み合わせる

Colors

• 前半の特典は水色の地、後半の親向け特典は橙から赤へ縦にグラデーションする地に切り替える
• 内容は必ず白カードにのせ、地の色の上には注釈の白文字だけを置く
• 価格の数字と主CTAは赤に統一し、比較の数字は黒にする
• 見出し帯は濃い青紫に白の極太文字。赤地のセクションでは帯を赤に変える
• リンク文字は青で、末尾に丸囲みの＋や＞アイコンを付ける
• button-primary は文字 #FFF2F1 × 背景 #FD0101 のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E10101、4.57:1）を使う。
• button-secondary は文字 #FFF2F1 × 背景 #00B1EB のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#0079A1、4.52:1）を使う。
• number-badge は文字 #FFF2F1 × 背景 #FD0101 のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E10101、4.57:1）を使う。
• price-block は文字 #FD0101 × 背景 #FEFEFE のコントラスト比が 4.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E10101、4.59:1）を使う。
• starburst-badge は文字 #FFF2F1 × 背景 #FD0101 のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E10101、4.57:1）を使う。

Typography

• 価格の数字は単位（円/月）の約4倍の大きさにする
• 大見出しは白文字に青紫か赤の太い縁取りを付け、やや斜めに傾ける
• 比較価格は黒の極太数字に小さな単位を添える
• 注釈は箇条書きの小さい文字でまとめ、カードの外の地の色の上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。カードは中央寄せ
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 特典ごとに、風船見出しと白カードを1セットにする
• カード内のブロックは市松ラインと両端の半円切り欠きで区切る
• 価格は左に元値（取消線）、右に特大の数字を置く
• 比較価格は2列の表にする
• 最下部にCTAを縦に3段積む

Elevation & Depth

• 白カードはほぼフラット。影は付けない
• 主CTAには下方向の濃い赤の影を付け、立体感を出す
• 風船は光沢のある3D表現にして、奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物と端末は切り抜きにし、カードの枠から少しはみ出させる
• セクション境界: 市松模様の帯。カードの左右に半円の切り欠きを付ける
• ボタンはすべてピル型
• 特典番号は赤い丸のバッジにする
• 強調バッジはギザギザの星形にする

Components

• 主CTAボタン（button-primary）: 赤のピル型。右に＞を付け、下に影を入れる
• サブCTAボタン（button-secondary）: 水色のピル型ボタンを縦に並べる
• 枠線ボタン（button-outline）: 白地に細い枠線のピル型。比較や詳細を見る導線に使う
• 風船見出し（balloon-heading）: 左右に青と白の風船を置き、中央に縁取りの極太文字と下向きの帯を配置する
• 特典番号バッジ（number-badge）: 赤い丸に、小さなラベルと大きな数字を入れる
• 特大価格（price-block）: 元値に取消線と矢印を付け、データ量の赤いタグと特大の赤い数字を並べる
• 料金明細ボックス（breakdown-box）: 淡グレーの角丸の箱。内訳を左右揃えで並べる
• 星形バッジ（starburst-badge）: 赤か白のギザギザの円に、強調の短い文言を入れる
• 条件カード（condition-card）: 青紫の見出しタブと、淡グレーの本文で3列に並べる

Do's and Don'ts

Do - 特典ごとに番号バッジと風船見出しを繰り返し、リズムを作る - 価格の数字は画面幅の半分以上を使って大きく見せる - 注釈はカード外の地の色の上に、白の小さい文字でまとめる - カード内の区切りには市松ラインを使う

Don't - 価格以外を赤で大きく強調しない - くすんだ色や淡いパステル調の地にしない - 細い明朝体を使わない - カードを使わずに地の色の上へ本文を直接置かない

Page Structure

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

1. ファーストビュー（キャンペーン名と対象者を伝える）: 水色の地に極太ロゴ風タイトル。人物・動物の切り抜きと紙吹雪を置く
2. 特典1 料金プラン（0円などの破格料金を見せる）: 風船見出しと白カード。特大価格、2列の比較、明細ボックスを並べる
3. 特典1 別条件（別パターンの料金を示す）: 市松ラインで区切り、同じ型の価格ブロックを繰り返す
4. 契約条件の明示（付帯契約が不要であることを示す）: 縁取り見出しの下に、3列の条件カードと枠線ボタンを置く
5. 注釈（適用条件を補足する）: 地の色の上に白の小さい箇条書き
6. 特典2 端末価格（人気端末の割引価格を見せる）: 端末写真と人物を並べ、赤い星形の分割バッジと特大の1円表示を置く
7. 特典3 家族割（家族契約の割引を見せる）: 橙の地に切り替え、イラストの人物と特大の割引額を見せる
8. ポイント特典（ポイント還元を訴求する）: 積み上げた3Dのキューブ装飾と、星形バッジの%表示を使う
9. 特典4 おこづかい（親子間の送金特典を説明する）: 赤の地。親と子の吹き出し丸と矢印の図解、ポイント額カードを置く
10. クロージングCTA（来店とオンライン申込へ誘導する）: FVの再掲ビジュアル、来店キャンペーンのカードを置き、CTAを縦に3段並べる
11. 特記事項（規約へ誘導する）: 濃いグレーのピル型アコーディオン

Imagery

• 人物は白背景で撮影して切り抜き、カードからはみ出させる
• 青・水色・白の光沢がある風船を見出しの左右にまとめて配置する
• 青と赤の紙吹雪を画面上部に散らす
• 説明図には線画風のフラットな人物イラストに赤を差し色で入れる
• 端末は正面と背面を重ねた製品写真にし、下に淡いグラデーションの床を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約480px幅のカード列を置き、左右は地の色を全幅で敷く
• SPではカードを画面幅の約92%にし、余白は12px程度にする
• 特大価格はSPで64〜72pxに縮め、単位は改行しない
• 3列の条件カードはSPでも3列を保ち、文字を12pxにする
• 風船装飾はSPでは見出しの左右からはみ出すように配置する

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