DESIGN.md — 青×黄の集中線で値下げを訴える光回線LP（Bright Blue Burst Internet Plan LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、情報量多め・訴求型、清潔・爽やか、信頼・誠実
• キーワード: 集中線の青背景・巨大な価格数字・線画イラスト・黄色の強調・比較カード・番号付きステップ
• 地の質感: フラットな塗りと放射状の集中線、斜めストライプ、四芒星のきらめき。写真は切り抜きでフラットに配置。
• 形: 角丸カード、円形バッジ、下に濃色の影帯が付いた立体ボタン、セクション下端のV字や弧形の境界。
• 温度感: 明るく爽やかな寒色が主で、黄・オレンジ・ピンクの暖色で価格や手順を温かく強調。

Colors

• 地は白と青系の濃淡（鮮青・薄青・極薄青）を交互に切り替えてリズムを作る
• 価格数字はオレンジグラデーションまたは濃青の極太イタリックで最大に扱う
• 黄色は価格訴求セクションの面と、キーワードのマーカー・CTA内の強調語に限定
• オレンジ赤は手順セクション専用、ピンクは別プラン専用と役割で色を分ける
• 見出しはキーワードだけ青、残りを黒にする2色組みが基本
• 注意事項など法的リンクのみ赤文字
• step-header は文字 #F0FEFF × 背景 #FD2309 のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#E61A02、4.5:1）を使う。

Typography

• 価格は「月額」を縦2文字で左に積み、数字を巨大に、円と（税込）を右に小さく添える
• 見出しはキーワードのみ大きく青・残りは黒で組む
• 青地上の見出しは白抜き＋濃い影で立体感を出す
• 強調語には黄色の半帯マーカーを敷く
• 注釈は※付きで小さく、数字の横に添える
• 本文は左揃え、見出しは中央揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、アイコン・バッジは 3〜4 列横並び
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションごとに背景色を全幅で切り替える
• カード・ボックスは左右に約28pxの余白を残して中央配置
• 条件バッジは円形を4つ横並び
• 比較表はラベルと値の2列の定義リスト
• CTAは主要セクションの後に繰り返し配置

Elevation & Depth

• CTAボタンは真下に濃紺の帯状ハード影を付けて押せる見た目にする
• 円形バッジは右下に青いオフセット影
• 悩み吹き出しは青のずらし影付き白カード
• 黒枠カードは下辺に青グラデーション帯を敷く
• その他はフラットで影なし

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は背景を抜いた切り抜き、または円形マスク
• セクション境界: 基本は直線、一部で下向きV字・上向きの弧
• ボタンは角丸6px程度の横長長方形
• 状態ラベル（有料・無し等）はピル型
• 比較カードは角丸20pxで太い色枠
• Q見出しは右上を斜めにカットした青グラデ帯
• 手順番号帯は角丸の横長帯に白抜き大数字

Components

• 申込CTAボタン（button-primary）: 左に白丸の再生アイコン、上段に小さく白文字、下段に黄色の強調語＋白文字。青グラデ地に濃紺の下影。
• 条件の円形バッジ（badge-condition）: 白い円に濃紺の太字で条件を2行、下に小さく限定表記。4つ横並び。
• 悩み吹き出しカード（worry-bubble）: 白カードにキーワード青・他黒の文。青いずらし影で3枚縦積み、下に考える人物線画。
• 価格表示ブロック（price-block）: 白地に縦組み「月額」と極太イタリックの数字、税込と注釈を小さく添える。
• プラン比較カード（plan-compare-card）: 太い色枠の角丸カード。上部にプラン名、薄色帯に価格、内部白ボックスにアイコンとピル型状態ラベル、項目リスト。
• 手順の番号帯（step-header）: オレンジ赤グラデの角丸帯に白抜きアウトラインの大数字と白見出し。下に灰色本文ボックスと下向き三角。
• Q&Aカード（faq-item）: 青グラデのQ見出し帯（右端斜めカット）と、灰枠白ボックス内に薄青丸のAアイコン＋回答。
• 据え置き訴求ボックス（highlight-box）: 黒太枠の白角丸ボックス、強調語に黄色マーカー、右に注釈、下辺に青帯。
• 特典タグ（tag-pill）: 薄ピンクの角丸タグに黒文字で特典を並べる。

Do's and Don'ts

Do - 青地セクションには放射状の集中線と白い四芒星のきらめきを入れる - 価格は必ず極太イタリック数字で画面幅いっぱいに大きく見せる - CTAは同じデザインを3回以上繰り返す - 人物は青1色＋黒線の線画イラストで統一する - 見出しのキーワードだけを青や黄で色替えする - プランごとに青・ピンクとテーマ色を分ける

Don't - くすんだ色や暗い背景を広く使わない - 価格を本文サイズで控えめに書かない - 影をぼかしの強いソフトシャドウにしない - 明朝体や細い書体を見出しに使わない - オレンジ赤を手順以外に多用しない - 注釈の※を省略しない

Page Structure

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

1. 周年帯（実績で信頼を出す）: 金色のリボン帯を最上部に配置
2. ファーストビュー（新プランと価格を一目で伝える）: 青地にロゴ・プラン名、電卓を持つ子ども切り抜き写真、白帯に黄色の斜めラベルとオレンジの巨大価格、円形条件バッジ4つ、CTA
3. 悩みの提起（必要最低限で良いという悩みに共感）: 薄青地に白い吹き出しカード3枚と考える人物線画
4. 解決提示（プランの概要と開始日を伝える）: 黄色ラベル→集中線の青地に白抜きプラン名、説明文、喜ぶ線画、黄色の日付
5. 特長（シンプル）（省いたサービスで値下げを説明）: 薄青地に立体ロゴ風キャッチ、斜線入りアイコン3つ、ガッツポーズ線画
6. 対象者リスト（向いている人を明示）: 黒枠ボックスと青丸の箇条書き
7. 価格訴求（安さを再強調）: 黄色地に大見出しと白ボックスの青い巨大価格、線画
8. 早期開通（スピードの利点を伝える）: 薄青地に大見出し、青ラベル、オペレーター線画、注釈
9. 従来との違いQ（疑問を先回りして解消）: 子ども写真＋Q見出し、白い角丸本文カード
10. 別プラン案内（サポートが必要な人の受け皿）: V字境界の青地にピンクタグと白い価格カード、子ども写真
11. サービス比較（2プランを比較して申込へ）: 青とピンクの比較カードを縦に並べ各直下にCTA
12. サポート・動画（安心感と認知補強）: 枠付きバナー、動画、弧形青地にCTA
13. ご利用までの流れ（申込手順を示す）: オレンジの円形写真と装飾玉、番号帯＋灰本文の4ステップ
14. よくある質問・注意事項・フッター（不安解消と法的表記）: 青グラデQ帯のFAQ、極薄青地にスクロール枠の注意事項、青フッター

Imagery

• 子どもモデルを背景切り抜きで撮影し、黄色の帽子と服で青地に映えさせる
• 人物イラストは黒の主線＋青1色塗りのシンプル線画
• 機能アイコンは黒枠の角丸四角に青アイコン、不要なものは斜線で消す
• 背景装飾は白い四芒星のきらめきと放射状集中線、斜めストライプ
• 手順セクションはオレンジ〜赤のグラデーション球体を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはコンテンツ幅を約800px前後に絞り中央寄せ、背景色は全幅
• FVは子ども写真を左、ロゴ・価格を右に横並び
• 悩み吹き出しは左にずらして並べ、人物線画を右に配置
• 解決・特長セクションは線画とテキストを左右2カラム
• 比較カード内の項目リストはPCで2列に展開
• 手順は写真を右上に置きステップを中央の狭い列で縦並び

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