DESIGN.md — 青×緑×橙の生活インフラ申込 LP（Bright Blue Utility Bundle Signup LP）

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

Overview

• 業種: その他 ／ 雰囲気: 情報量多め・訴求型、ポップ・元気、信頼・誠実、清潔・爽やか
• キーワード: ブルー基調・2 系統 CTA・縁取り大数字・吹き出し見出し・白カード・カルーセル
• 地の質感: フラットな単色面が中心。FV と大数字だけに立体的な縁取り・ドロップシャドウがある。
• 形: 角丸カードと濃紺の太枠。見出しは吹き出し型のピル、ドーム型タブで区切る。
• 温度感: 爽やかな寒色ベースに、暖色の CTA と赤い数字で熱量を足す。

Colors

• 地は淡水色・濃青・空色の帯を交互に置き、セクションの切れ目を色で示す。
• 申込 CTA は緑（新規）とオレンジ（転居・停止込み）の 2 色を必ずペアで並べる。
• 割引額や「無料」は赤い太字。白フチと影を付けて目立たせる。
• 黄色は数字・波線・小ラベルにだけ使う。
• 濃い青地の上では文字を白、淡色地の上では文字を濃青か濃グレーにする。
• ピンクは診断の実行ボタンだけに使う。
• button-primary は文字 #FFFFFF × 背景 #2EB84A のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#228736、4.58:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #FF7300 のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C25700、4.51:1）を使う。
• button-diagnose は文字 #FFFFFF × 背景 #E0306E のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#DF2969、4.51:1）を使う。

Typography

• 数字は単位より 2〜3 倍大きくし、単位は小さく下に揃える。
• 大見出しは極太ゴシックにして、白フチと濃青の影を付ける。
• 見出し内の強調語だけをオレンジや赤にする。
• 注釈は小さいグレーで、ブロックの直下にまとめる。
• 電話番号は等幅の太いサンセリフで大きく見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。CTA と特長タブは 2〜3 列に分ける。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右 12px 前後の余白を取って画面いっぱいに置く。
• 申込 CTA の帯をページ内に 4 回繰り返す。
• 特長と口コミは左右矢印付きのカルーセルにし、下にドットを置く。
• プラン紹介はドーム型タブを付けた枠カードを縦に並べる。

Elevation & Depth

• CTA ボタンには下方向に濃い影を付け、押せそうな立体感を出す。
• 吹き出し見出しにはずらした黒影（オフセット 3px）を付ける。
• 白カードは影を付けず、背景色との差で浮かせる。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は切り抜きで FV の右下に置く。画面キャプチャは角丸の白カードに収める。
• セクション境界: 直線の色切り替え。吹き出しの三角で次のブロックにつなぐ。
• CTA は角丸 12px の長方形にする。
• 見出しはピル型の吹き出しにし、下向きの三角を付ける。
• プランカードは太さ 3px の濃紺枠にし、上に半円ドーム型のタブを載せる。
• 番号は円形バッジ。

Components

• 新規申込CTA（button-primary）: 緑の角丸ボタン。白縁があり、上に白い吹き出しラベル、中にトラックのアイコンを置く。
• 転居込み申込CTA（button-secondary）: オレンジのグラデーションの角丸ボタン。2 段の文言を「＋」でつなぐ。
• 吹き出し見出し（bubble-heading）: 白いピルに濃紺の文字。ずらした黒影と下向きの三角を付ける。
• 割引訴求カード（benefit-card）: 白地に濃紺枠のカード。上辺にラベル文字が重なり、左にアイコン、右に赤い大数字を置く。
• ドーム型タブ付きプランカード（dome-tab-card）: 半円のタブにアイコンとカテゴリ名を載せ、その下に枠付きのカードを付ける。
• 番号バッジ（number-badge）: 濃青またはオレンジの円に白い 2 桁の番号を入れる。
• 診断ラジオ選択肢（radio-option）: 白いバーに丸いラジオを置く。選択中は濃青の地に白文字。
• 診断実行ボタン（button-diagnose）: ピンクの立体的なピル型ボタン。虫眼鏡アイコンを付ける。
• 濃青ラベル（pill-label）: 小見出しに使う濃青のピル型ラベル（白文字）。
• 電話受付ブロック（phone-block）: 緑のフリーダイヤルマークと大きな番号を並べ、青い受付時間ラベルを添える。

Do's and Don'ts

Do - 申込 CTA は緑とオレンジの 2 つを必ず横並びのセットで置く。 - 金額・割合は縁取りを付けた極太の数字で大きく見せる。 - セクションごとに淡水色・濃青・空色の地を切り替える。 - 注釈は該当ブロックの直下に小さい文字で添える。 - 特長は番号付きの 3 タブで先に一覧させてから、詳しく説明する。

Don't - 暗い色や黒の大きな面を使わない。 - CTA の色を緑とオレンジ以外に変えない（ピンクは診断ボタン専用）。 - 明朝体や細いウェイトの書体を使わない。 - 写真を全面に敷いて文字を読みにくくしない。 - 赤い数字を多用しすぎない。割引額に限って使う。

Page Structure

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

1. ファーストビュー（セット割引額を伝え、すぐ申し込んでもらう）: 青地に放射状の模様を敷き、サービス名のアイコンを並べる。縁取りの大数字を置き、右下にスタッフの切り抜き写真、その下に緑とオレンジの CTA を縦に並べる。
2. 割引内訳（組み合わせごとの得額を示す）: 組み合わせのタブ 3 つと、割引訴求カード 3 枚を縦に並べる。
3. 最短利用日（急いでいる人の不安を解消する）: 黄色の極太見出しを置き、白カードに日付を赤で大きく見せる。
4. 申込CTA帯（申込への導線）: 濃青の帯に、所要時間を黄色の数字と波線で見せる。2 色の CTA を横並びにし、下にテキストリンクを置く。
5. ポイント特典（登録のメリットを訴求する）: 空色地に白い大カードを置き、「貯まる・使える・もらえる」をラベルで区切る。アイコンはグリッドで並べ、3 ステップで見せる。
6. おすすめプラン（カテゴリ別の料金プランを紹介する）: 淡水色地に、ドーム型タブ付きのカードを 3 種並べる。電気はカルーセルにする。
7. プラン診断（最適なプランに誘導する）: タブで住居を切り替える。ラジオ選択肢を縦に並べ、最後にピンクの実行ボタンを置く。
8. 選ばれる理由（安心感と手軽さを伝える）: 番号付きの 3 タブで一覧させる。続いて吹き出し見出しと白文字のリードを置き、白カードのカルーセルで説明する。
9. お客様の声（利用者の実感を伝える）: 円形のイラストアバターと属性を並べ、本文は白カードのカルーセルにする。
10. 電話窓口（電話での相談を受け付ける）: 淡い水色の地に、フリーダイヤル番号を特大で表示し、受付時間を添える。
11. フッター（ロゴと規約リンクを置く）: 青地にロゴを白抜きで置き、小さい白文字のリンクを並べる。

Imagery

• 人物は作業着のスタッフが笑顔でガッツポーズをする写真にし、背景を抜いて置く。
• アイコンは濃青とオレンジの 2 色の線画にする。
• 人物イラストは線画に淡い色を塗ったフラットなタッチにする。
• キラキラの星形装飾を数字のまわりに散らす。
• アプリ画面はスマホのモックアップにはめて見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅 約 520px のカラムを置き、左右は背景色を伸ばす。
• PC の FV は横長にし、人物を右上、CTA を横並びにする。
• PC ではポイント特典の「貯まる・使える」を 2 カラムにする。
• PC では診断の選択肢を 2〜3 列のグリッドにする。
• 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 行書くと起動時に読み込まれる。