DESIGN.md — 青×白とベージュ枠の住宅リフォーム LP（Trust Blue Renovation Consultation LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: 濃紺ブルー・無料相談訴求・施工事例カード・繰り返す CTA 帯・黄マーカー強調・実績バッジ
• 地の質感: フラットな面に薄い影を少し付ける。写真は明るく、全体に清潔な印象。
• 形: 角丸の小さい矩形が基本。丸い写真の切り抜きと金色の円形バッジでアクセントを付ける。
• 温度感: やや涼しい。青が主で、クリーム色とベージュで暖かさを足す。

Colors

• 白とライトグレーの地を交互に置き、セクションの区切りを見せる。
• セクション見出しは濃青の全幅帯に白文字。キーワードだけ黄色にする。
• 見出しのキーワードは水色の大きめ文字で強調する。
• 「無料」のような強い訴求語には黄マーカーを引く。
• CTA 帯は淡い青地。電話は濃青の箱、見積りは濃青のボタンにする。
• 費用の話はクリーム地にして、警戒感を和らげる。
• menu-tile は文字 #FFFFFF × 背景 #5999C1 のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3D7BA3、4.6:1）を使う。

Typography

• 全体を太めのゴシックで統一する。
• 見出しはキーワードだけ 1.3 倍の大きさにして水色にする。
• 金額の数字は単位より大きくし、太字で目立たせる。
• 本文は行間 1.8 で読みやすくする。
• 小見出しの前後に斜線などの記号を付けて導入文に見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メニューと事例の小カードは 2 列のグリッドにする。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 濃青の見出し帯は画面幅いっぱいに敷く。
• CTA 帯は電話と見積りを SP では縦に積む。
• 施工事例はベージュ枠のカード内に Before→After を並べる。
• 選ばれる理由は番号付きの横長ブロックにし、背景に写真を薄く敷く。
• 各大セクションの後に相談 CTA 帯を挟む。

Elevation & Depth

• CTA ボタンと電話の箱は下方向に薄い影を付ける。
• メニュータイルは右下に影を付けて押せる見た目にする。
• 事例カードは影なし。太いベージュ枠だけで区切る。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は矩形が基本。悩みのイラストは円形に切り抜く。
• セクション境界: 直線で区切る。悩みのセクションから解決へは下向きの三角形でつなぐ。
• ボタンは角丸が小さい矩形で、右端に矢印を付ける。
• 実績は金色の円形バッジにする。
• AFTER のラベルは写真の角に三角形で載せる。
• 吹き出しは濃青の雲形にする。

Components

• 電話と見積りの二つ並び CTA（cta-dual-band）: 淡い青地の帯に、左に電話番号の箱、右に見積りボタンを並べる。上に案内文と相談スタッフの写真を置く。
• 見積り依頼ボタン（button-primary）: 濃青の面に白い太字。上段に小さな補足、右端に矢印を付ける。
• 濃青帯の見出し（section-band-heading）: 全幅の濃青帯に白文字。キーワードだけ黄色にする。
• 水色のメニュータイル（menu-tile）: 水色の正方形に白文字と下向きの矢印。2 列で並べるページ内リンク。
• 施工事例カード（case-card）: 太いベージュ枠の白いカード。黄色の事例番号ラベル、Before→After の写真、チェックリスト、本文を入れる。
• 参考費用カード（price-card）: 写真の上に水色のラベルを載せ、半透明の白い帯に参考費用を大きく書く。
• 理由の番号見出し（reason-number）: 濃青の四角に白い数字を入れ、その横に太字の見出しを置く。
• 金色の実績バッジ（award-badge）: 金色の円形メダルに実績の数字を大きく入れ、下に出典の注釈を付ける。
• 雲形の吹き出し（speech-cloud）: 濃青の雲形に白文字で短い問いかけを書き、見出しの左上に重ねる。

Do's and Don'ts

Do - 相談 CTA 帯は大きなセクションごとに必ず入れる。 - 数字（実績・費用・満足度）は大きく太く見せる。 - 見出しのキーワードは水色で大きくする。 - 事例は Before と After を並べ、矢印でつなぐ。 - スタッフや家族の笑顔の写真で親しみを出す。

Don't - 青以外の強い色を主役にしない。 - 大きな角丸やピル型のボタンにしない。 - 暗い地色のセクションを入れない。 - 文字の細い書体や明朝体を使わない。 - 黄マーカーを本文に乱用しない。

Page Structure

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

1. ヘッダー（会社と連絡先を示す）: ロゴと電話番号を並べ、濃青の見積りボタンを置く。
2. ファーストビュー（サービスの内容を一目で伝える）: 明るい室内写真の上に、水色の正方形 1 つに 1 文字ずつ大きく入れる。
3. 相談 CTA（無料相談を案内する）: 淡い青地にスタッフの写真と二つ並びの CTA を置く。
4. ページ内メニュー（各セクションへ移動させる）: 水色のタイルを 4 つ並べる。
5. 悩みの提起（住まいの悩みに共感する）: 円形のイラストに悩みを 4 つ書き、家族の写真の上に並べる。下向きの三角でつなぐ。
6. サービス種別（リフォームの種類を示す）: 写真カードを 3 つ並べ、水色のラベルと短い説明を付ける。
7. 費用の目安（費用への不安を和らげる）: クリーム地に雲形の吹き出しと参考費用カードを 3 つ並べる。
8. 施工事例（実例で納得してもらう）: 濃青帯の見出しの下に、ベージュ枠の事例カードを 2 件置く。間に CTA を挟む。
9. 部位別の案内（一部だけの工事にも対応することを示す）: クリーム枠の小カードを 4 つ並べ、写真とリンクを入れる。
10. 選ばれる理由（強みを根拠と一緒に示す）: 番号付きのブロックを 3 つ置き、背景に写真を薄く敷く。
11. 実績・満足度（信頼を裏付ける）: スタッフの集合写真の下に金色のバッジを 4 つ並べる。
12. 最終 CTA（問い合わせを促す）: グレー地に丸く切り抜いたスタッフの顔写真を置き、資料請求と見積りのボタンを並べる。

Imagery

• 自然光が入る明るい室内写真。白と木目が基調。
• ヘッドセットを付けた女性スタッフの切り抜き写真を CTA に添える。
• 悩みは住まいのイラストを円形に入れ、色の付いた太い輪で囲む。
• 家族やシニア層の写真で暮らしの実感を出す。
• スーツ姿のスタッフの集合写真で組織力を見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 960px 前後の固定幅。SP は全幅の 1 カラムにする。
• PC で 3〜4 列のカードは、SP では 2 列か 1 列にする。
• 電話と見積りの CTA は、PC は横並び、SP は縦積み。電話はタップで発信できるようにする。
• 事例カードの Before/After は SP では縦に並べる。
• PC のグローバルナビは、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 行書くと起動時に読み込まれる。