DESIGN.md — 赤×黄の大胆な通信回線キャンペーンLP（Bold Red Yellow Telecom Campaign LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 巨大価格数字・斜体極太・赤帯見出し・金色グラデ数字・繰り返しCTA・注釈多め
• 地の質感: ベタ塗りが中心。金色グラデの数字と紙吹雪・キラキラ装飾で祝祭感を足す
• 形: 角を少し丸めた長方形。右下に赤いオフセット影を付けた枠見出しと、丸いナビボタン
• 温度感: 暖色寄りで高揚感が強い

Colors

• 地の色は白と淡いピンクを交互に使い、ヒーローとキャンペーン冒頭だけ黄色地にする
• 強調面は赤ベタ。赤の上の文字は白、最重要の語だけ黄色
• 価格の数字は赤文字。赤パネルの上では金色グラデの数字にする
• 申込ボタンは赤（主）と茶（サブ）を必ず並べる
• 関連サービスはそれぞれのブランド色（茶・緑・金）で分け、主色の赤とは混ぜない
• 注釈は灰黒の小さい文字で、色は付けない
• plus-connector は文字 #FAC705 × 背景 #CC0133 のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B0012C、4.59:1）を使う。

Typography

• 数字は本文の3〜5倍に大きくし、「円」「(税込)」「/月」は小さく添える
• キャッチは斜体の極太にして勢いを出す
• 見出しはすべて700〜900の太字
• 注釈は12px前後で本文ブロックのすぐ下に置く
• 重要語は赤文字か、赤帯の白抜き文字にする
• CTAの見出しは左右に斜線を付けて中央に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。申込ボタンと丸ナビだけ 2〜3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの終わりごとに申込ボタンの組を入れる
• 特典カードの下には毎回アコーディオンの注意事項を付ける
• 特典同士は丸い赤の＋アイコンでつなぎ、重ねがけを示す
• 中身の要素はすべて中央揃え
• 淡いピンク地の上に白いカードを載せて関連サービスを並べる

Elevation & Depth

• 申込ボタンには下に濃い色の厚み（3px程度）を付ける
• 枠見出しは右下に赤いオフセット影を付ける
• 丸ナビボタンには薄い影を付ける
• それ以外は影なしのフラット

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は長方形のまま。人物は背景を抜いて黄色地に合成する
• セクション境界: 黄色地の下端は大きな弧か下向きの三角。ほかは直線で切り替える
• ボタンは角丸4〜6pxの長方形
• 丸ナビは正円で、下に矢印を付ける
• 見出しには斜めの帯やリボンの形を使う
• タグは「＋」付きの丸い淡ピンクの帯にする

Components

• 主申込ボタン（button-primary）: 赤い角丸の長方形。2行ラベルで右端に＞を付け、下に厚みを付ける
• サブ申込ボタン（button-secondary）: 茶色で主ボタンと同じ形。主ボタンの横に並べる
• 赤帯見出し（heading-band）: 画面幅いっぱいの赤い角丸帯に、白い斜体の太字。右下にずらした赤い影を付ける
• 枠見出し（heading-outline）: 白地に赤い枠線と赤文字。右下に赤いオフセット影を付ける
• 特典パネル（benefit-card）: 赤ベタのパネル。左上に丸い茶色のアイコン、白い小見出し、金色グラデの巨大な数字を置く
• 注意事項アコーディオン（accordion-note）: 上下の罫線だけで囲み、中央にラベル、右端に＋を置く
• 丸ナビボタン（nav-circle）: 白い正円に赤い枠線と黒・赤の太字。下向き矢印付きで3つ並べる
• ＋コネクタ（plus-connector）: 特典の間に置く赤い小さな正円に黄色の＋
• 吹き出し帯（speech-banner）: 赤または金の長方形で、下中央に三角のしっぽを付ける

Do's and Don'ts

Do - 価格や数字は画面幅の6〜8割を占めるくらい大きくする - 特典ごとに注意事項のアコーディオンを付ける - 各セクションの終わりに申込ボタン2種を並べる - 黄色・赤・ピンクの地をはっきり切り替えてリズムを出す - キラキラや紙吹雪の装飾は数字の周りに少しだけ散らす

Don't - 寒色をメイン色に使わない（関連サービスの緑ボタンだけ例外） - 細い書体や明朝体を見出しに使わない - 注釈を省略しない、本文と同じ大きさにもしない - 赤パネル上の数字を白一色にしない（金色グラデにする） - 余白を広く取りすぎた静かな構成にしない

Page Structure

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

1. ファーストビュー（勢いのあるキャッチと月額価格で一気に引き込む）: 黄色地に人物の切り抜きと、斜体で巨大な赤い文字。下に価格を帯状にまとめ、すぐ下に注釈を置く
2. キャンペーン概要（期間限定の価格特典を伝える）: 黄色地に紙吹雪とリボン見出し、巨大な赤い価格。その下に赤パネルで通常価格との比較を見せ、下端は弧で切る
3. CTA（申込への導線）: 斜線で挟んだ見出しと、赤・茶の2ボタンを横に並べる
4. 目次ナビ（知りたい項目へ飛ばす）: 黄色地の上に赤帯、キャラクター、丸ナビ3つ。下端は三角に切る
5. 特長（速さ）（性能を数字で訴求する）: 赤帯見出し、斜体の赤い巨大コピー、黄色いラベル付きの欧文数字
6. 利用シーン（使う場面をイメージさせる）: 淡いピンク地に写真のカルーセルと、白い斜めキャプションカード
7. 料金（割引価格と通常価格を示す）: キャンペーンのバナー画像と、＋付きのタグ、巨大な価格、アコーディオン
8. 選べるオプション（選べる付帯サービスを示す）: 枠見出し、短い説明、アコーディオン
9. 特典一覧（特典の重ねがけを見せる）: 赤パネルを＋コネクタでつないで縦に並べ、それぞれにアコーディオンを付ける
10. セット割（関連サービスとの組み合わせ割引を見せる）: 淡いピンク地に白いカード。赤タグ、吹き出し、巨大な割引額
11. 関連プラン紹介（関連プランへ送客する）: 白いカードの中を罫線で分け、それぞれのブランド色のロゴとボタンを置く
12. 支払い特典（カード払いの還元を見せる）: 金色の吹き出し、カードの画像、赤い大きなパーセント、金色の枠のボタン

Imagery

• 人物は切り抜いて黄色地に合成する。カメラ目線で、前に差し出す動きのあるポーズ
• コインや金色のポイントアイコンは立体感と光沢を出し、斜めに傾けて動きを出す
• 紙吹雪・キラキラ・集中線で祝祭感を足す
• 丸い茶色の地に白い線でアイコンを描き、特典パネルの角に重ねる
• 利用シーンの写真はテレビ視聴などの生活の場面で、明るめに仕上げる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像がないため推奨案。中身は最大幅750px前後で中央に置く
• 背景の色帯は画面幅いっぱいに伸ばす
• 申込ボタンは2列のまま、ボタン幅を広げる
• 特典パネルはPCで2列に並べてもよい
• 数字は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 行書くと起動時に読み込まれる。