DESIGN.md — 木目×茶×橙の住宅断熱リフォームLP（Warm Wood Orange Home Renovation LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 情報量多め・訴求型、親しみ・手作り感、力強い・インパクト、信頼・誠実
• キーワード: 木目・焦げ茶帯・オレンジ強調・黄色ラベル・電話CTA反復・手描きイラスト
• 地の質感: 木目のフローリング写真と、クリーム・薄灰の無地面を交互に置く。放射線の集中線を背景に敷く箇所もある
• 形: ピル型ボタン、角丸の白カード、右端を矢印状に切った見出し帯、円形のバッジ
• 温度感: 暖色寄り。茶とオレンジで暖かさを、クリームで柔らかさを出す

Colors

• CTAセクションは必ず焦げ茶の帯に白カードを載せる
• 強調したい語句だけオレンジにして文字を大きくする。それ以外は濃茶か黒
• 黄色はラベル帯・下線・『0』など短い要素だけに使う
• セクションの地はクリーム・薄灰・淡ピンクを交互に置く
• FAQの質問行はくすんだ橙のピルに白文字
• cta-phone-block は文字 #DF5B1E × 背景 #FEFEFE のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C6511B、4.53:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #FD6B24 のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D34602、4.52:1）を使う。
• button-sub は文字 #FFFFFF × 背景 #9E9E9E のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら line-accessible（#767676、4.54:1）を使う。
• feature-heading は文字 #FFFFFF × 背景 #DF5B1E のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C6511B、4.57:1）を使う。
• merit-circle は文字 #FFFFFF × 背景 #DF5B1E のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C6511B、4.57:1）を使う。
• faq-item は文字 #FFFFFF × 背景 #CF7D4D のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B16030、4.58:1）を使う。

Typography

• 見出しの中で強調語だけオレンジにし、1.3〜1.5倍に拡大する
• 数字は助詞よりかなり大きくして目立たせる
• 見出しの最後に『！』を付け、少し斜体ぎみにして勢いを出す
• 本文は灰色で14px程度。2〜3行で区切る
• 小さな前置きの語（例:『さらに』『だから』）は見出しの上に小さく載せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。テキストと写真の2列はSPでは縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 電話CTAブロックは2〜3セクションごとに繰り返し入れる
• 特長は番号と帯見出し、写真＋本文の順で組む
• 比較表は左の見出し列を茶色で塗る
• FAQはSPでは1列のアコーディオンにする
• 見出しの近くに人物イラストを置いて感情を補う

Elevation & Depth

• 白カードと写真には薄い影をつける（0 2px 6px rgba(0,0,0,.12)）
• グレーのサブボタンは上が明るいグラデーションと影で立体感を出す
• CTA帯の上端は中央を山形に尖らせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸10pxの長方形。FVだけ全幅で裁ち落とす
• セクション境界: 基本は直線。CTA帯の上端は中央を三角に尖らせる
• 特長見出しは右端を矢印状にカットした帯にする
• 円形の橙バッジで3つのメリットを並べる
• FAQはピル型の行で、右端に＋/−を置く

Components

• 電話CTAブロック（cta-phone-block）: 茶色の帯に白カードを載せ、大きな電話番号とグレーのメールボタンを入れる。左上に円形の赤橙バッジ
• メール問い合わせボタン（button-primary）: オレンジのピル型ボタンに封筒アイコンと白文字
• グレーのサブボタン（button-sub）: グラデーションをかけたピル型で、右に矢印
• 黄色ラベル帯（label-yellow）: 見出しの上に置く黄色の角丸帯
• 番号付き特長見出し（feature-heading）: 左に『特長＋大きな数字』、右に矢印形のオレンジ帯と白文字
• メリット円バッジ（merit-circle）: オレンジの円にアイコンと白文字の短い語。3つ横に並べる
• 比較表（compare-table）: 列見出しをオレンジとからし色で塗り、左の見出し列は茶色の面にする
• FAQアコーディオン（faq-item）: 橙のピルの中にQ番号の丸と質問文、右端に＋/−。回答はA丸と灰文字
• チェックリスト（check-list）: オレンジの丸チェックと本文。強調語はオレンジ。行間に点線を引く

Do's and Don'ts

Do - 電話番号はページ内で最大の数字として何度も繰り返す - 強調語はオレンジで大きくして、ひと目で読めるようにする - 実績の数字や保証を黄色・白の小さなボックスで並べる - 手描き風の人物イラストで感情（寒い・喜ぶ・悩む）を表す - 温度差や金額差は図と大きな数字で見せる

Don't - 寒色を主役にしない（青は温度図に限る） - CTAを1か所だけにしない - 本文を黒の太字で長く書かない - 装飾のない真っ白なページを続けない - 角の鋭い硬いボタンにしない

Page Structure

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

1. ファーストビュー（利点と実績をすぐ伝える）: 木目床の写真の上に大きな白文字のキャッチ。茶色の実績ボックスと白の保証ラベルを重ね、上端に茶色の細い帯
2. ヘッダーCTA（すぐに電話へつなげる）: 黄色の帯に白カードを載せ、フリーダイヤルとオレンジのメールボタンを横に並べる
3. 悩みの提起（寒さの悩みに共感する）: 生活写真を5枚横に並べ、灰色の地に悩みの短文と、角丸カードの解決コピーを置く
4. CTA（問い合わせを促す）: 茶色の帯に黄色の数字見出しと電話CTAカード
5. 効果の説明（電気代が下がる理由を見せる）: 淡いピンクの地。家族のイラスト、温度差の図、下向き矢印で結論を出す
6. 副次効果（健康面のリスクも減ることを伝える）: 小さなラベル、2色の見出し、本文と棒グラフのカードを並べる
7. 解決策の提示（サービスの概要を伝える）: 木目の地に円バッジ3つと施工写真2枚。下に黄色の帯でまとめる
8. 比較（他の方法との違いを示す）: 問いかけの見出しとイラスト、2列の比較表
9. 安心ポイント（不安を取り除く）: 黄色ラベルの見出しとチェックリスト
10. コスパ訴求（お得さを強く印象づける）: 淡い黄色の集中線の地に、茶色の太い大見出しと喜ぶ人物イラスト
11. 特長（4つの強みを詳しく説明する）: クリームの地。価格ボックスのあとに番号付き帯見出し、写真＋本文、施工の流れの円ステップ
12. 締めの訴求とCTA（信頼から行動へつなげる）: 矢印と大きな見出しで締め、茶色の帯の上端を山形にしてCTAを置く
13. よくある質問（最後の疑問を解消する）: 薄灰の地に橙のピル型アコーディオン
14. 最終CTA（問い合わせを確定させる）: 同じ茶色の帯の電話CTAブロックを置く

Imagery

• 明るい木目のフローリングを真上から撮った写真を背景に使う
• 裸足や家族団らんなど、暖かい生活のシーンの写真
• 床下の配管や断熱材など、作業現場を記録した写真
• 線画に淡い色を塗った人物イラスト（寒がる・喜ぶ・考える）
• サーモ画像風の図と家のアイコンで温度差を示す
• 認証マークを持ったスタッフの笑顔の写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央480px相当の固定幅で、左右は各セクションの地色を伸ばす
• SPではFVの実績ボックスを写真の下に縦に積む
• ヘッダーCTAの電話とメールボタンはSPでは縦に並べる
• 比較表はSPでは横スクロールにするか、文字を12pxに縮める
• 特長の写真＋本文はSPでは写真を上に置いて縦に積む
• FAQの2列はSPでは1列にする

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