DESIGN.md — 青×黄×橙の訴求型 水まわり修理LP（Bold Blue Emergency Repair Service LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、清潔・爽やか、力強い・インパクト
• キーワード: 水・駆けつけ・低価格訴求・電話CTA・青と黄
• 地の質感: 水しぶき写真や水面テクスチャを背景に敷き、白カードはフラットで薄い影
• 形: 角丸8〜12pxのカード、ピル型ラベル、橙の円形番号バッジ、V字の青セクション上辺
• 温度感: 清涼な寒色が基調、黄と橙で温度感のある強調

Colors

• 地は白・淡い水色・濃い青を交互に切り替え、セクションの区切りを色面で示す
• 価格や数字は黄色（青地上）か橙（白地上）の極太斜体で強調する
• 見出しは青文字、本文は黒に近い濃灰
• お客様の声では本文中の要点を橙太字、ブランド名を青で色分けする
• 電話番号だけは赤系で目立たせ、固定バーは明るいシアン地
• 注意喚起は黒地に黄黒ストライプ枠で警告色を使う
• sticky-call-bar は文字 #D02828 × 背景 #01B3FE のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D6F3FF、4.51:1）を使う。
• compare-table は文字 #FD5314 × 背景 #FEFEFE のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D73B02、4.61:1）を使う。

Typography

• 見出しは太字ゴシックで青、中央揃えが基本
• 数字だけを極太斜体の欧文で大きくし、単位の「円〜」は小さくする
• セクション見出しの上に小さな英字ラベル＋下線を置く
• FVの大見出しは白フチと影で立体感を出す
• 本文は左揃え、行間1.7以上
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ステップは画像左＋文字右の2列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右約5%の余白で幅いっぱいに並べる
• ケースカードはやや狭め（約72%幅）で中央配置
• カード間隔は16〜20px
• 番号バッジはカード上辺に重ねて中央配置
• ステップ間は細線＋下向き三角で区切る

Elevation & Depth

• 白カードはごく薄い影か影なし
• FVの実績バッジは金縁の円形で軽い立体感
• 比較表の自社列は橙枠で浮かせ、上下にはみ出させる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸カード内に横長矩形で全幅配置、ステップ写真は小さめ横長
• セクション境界: 基本は直線の色面切替、エリア紹介の青セクションは上辺をV字にする
• 価格ラベル・会社概要ボタンはピル型
• 番号バッジは橙の正円
• FAQは角丸小の青い帯
• 地図は白シルエットに橙のピンを散らす

Components

• 固定電話バー（sticky-call-bar）: 画面下に固定。左に橙の円形バッジ2つ、右に白枠の電話番号ボタン
• 訴求帯（feature-banner）: 青地上の白い横長枠に、黄色極太数字と青文字で強みを1行ずつ
• 番号付き特長カード（numbered-card）: 白カード上辺に橙の円形番号、左に線画アイコン、右に青見出し＋本文
• 料金ケースカード（case-card）: 青地の角丸カード。英字番号・白タイトル・白ピルの料金ラベル＋黄色価格、写真、チェック付き箇条書き
• 英字ラベル見出し（section-label）: 小さな英字＋短い青下線、その下に青の大見出し
• 比較表（compare-table）: 左列は青地白字の項目、自社列は橙太枠で強調、他社列は淡色
• お客様の声カード（voice-card）: 青地上の白カード、左に丸角アバターイラスト、属性行と色分け強調の本文
• FAQアコーディオン（faq-item）: 青帯にQと白文字の質問、右端に＋アイコン
• 注意喚起バナー（warning-banner）: 黒地に黄黒ストライプ枠の白パネル、悪役シルエットとCHECK誘導

Do's and Don'ts

Do - 数字（料金・分・件数）は必ず極太斜体で大きく見せる - 青・水色・白の地を交互に使い区切りを明確に - 特長は番号バッジ付きカードで6つ程度並べる - 電話番号を最上部と下部固定バーに常に表示 - 料金の注釈は小さな文字でケース下に添える

Don't - パステルや淡い色だけで構成しない - 明朝体や細いフォントを使わない - 強調色を赤・橙・黄以外に増やさない - 写真を暗く加工しない（清潔感を優先） - CTAを電話以外に分散させない

Page Structure

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

1. ヘッダー（サービス名と電話番号の提示）: 白地に左ロゴ、右にフリーダイヤルアイコンと大きな赤い電話番号
2. ファーストビュー（対応範囲と最低料金の訴求）: 水しぶき背景、作業着スタッフ写真、立体文字の大見出し、黄色円の実績バッジ3つ、カード対応表示、対応エリア地図
3. 強み3点（年中無休・割増なし・最低料金）: 青地に白い横長枠を3段、下に白文字の安心メッセージと注釈
4. 注意喚起（悪質業者との差別化）: 黒地、警告ストライプ枠のバナー
5. 実績と6つの安心（信頼性の提示）: 金メダル風実績2つ、番号付き白カードを縦に6枚
6. トラブル事例と料金（場所別の対応内容と価格）: 白地に青い料金ケースカードを6枚縦積み
7. 対応エリア（駆けつけの速さを示す）: V字上辺の青い水面背景、白地図に橙ピン、敬礼するスタッフ
8. 料金比較（他社比較で優位性を示す）: マーカー付き見出し、自社列を橙枠で強調した比較表
9. ご利用の流れ（依頼から支払いまでの不安解消）: 4ステップ、写真左＋文字右、三角付き区切り線、最終ステップは橙見出し
10. お客様の声（体験談で安心感）: 青地に白カード3枚、アバター＋色分け強調文
11. よくある質問（疑問解消）: 水色地に青いアコーディオン帯5本
12. フッター・固定CTA（会社情報と電話誘導）: 青地に白ピルの会社概要ボタンとコピーライト、下部にシアンの固定電話バー

Imagery

• 清潔で明るい住宅の水まわり写真（トイレ・キッチン・浴室など）を横長で
• 作業着とキャップ姿の笑顔のスタッフ写真を切り抜きで配置
• 水しぶきや水面テクスチャを青系背景に使用
• 特長アイコンは淡い青と黄の線画フラットイラスト
• お客様の声は丸角背景付きのシンプルな人物線画
• 地図は白シルエット＋橙のチェックピン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約70%幅に内容を収め、背景色は全幅
• 訴求帯3点はPCで横3列
• 特長カードはPCで2列×3段
• ケースカードはPCで3列×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 行書くと起動時に読み込まれる。