--- version: alpha name: Warm Wood Orange Home Renovation LP description: 木目の床写真と焦げ茶の帯、オレンジの強調文字、黄色のラベルで組んだ訴求型のリフォームLP。電話番号を大きく出したCTAブロックを何度も挟み、比較表・番号付きの特長・FAQで不安を一つずつ消していく。手描き風の人物イラストで親しみやすさを出している。 colors: primary: '#93551C' accent-1: '#DF5B1E' cta: '#FD6B24' on-cta: '#FFFFFF' secondary: '#FEDE00' background: '#FFFBE2' background-alt: '#F5F5F5' surface: '#FEFEFE' tint-1: '#FEF3EF' tint-2: '#FFFBE2' text: '#6F4225' text-muted: '#72736D' accent-2: '#CF7D4D' line: '#9E9E9E' accent-1-accessible: '#C6511B' cta-accessible: '#D34602' line-accessible: '#767676' accent-2-accessible: '#B16030' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Roboto Condensed fontSize: 32px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' cta-phone-block: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 180px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-sub: backgroundColor: '{colors.line}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px label-yellow: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 36px feature-heading: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 48px merit-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 96px compare-table: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.body-md}' height: 320px faq-item: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 52px check-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px --- # DESIGN.md — 木目×茶×橙の住宅断熱リフォームLP（Warm Wood Orange Home Renovation LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: 情報量多め・訴求型、親しみ・手作り感、力強い・インパクト、信頼・誠実 - **キーワード**: 木目・焦げ茶帯・オレンジ強調・黄色ラベル・電話CTA反復・手描きイラスト - **地の質感**: 木目のフローリング写真と、クリーム・薄灰の無地面を交互に置く。放射線の集中線を背景に敷く箇所もある - **形**: ピル型ボタン、角丸の白カード、右端を矢印状に切った見出し帯、円形のバッジ - **温度感**: 暖色寄り。茶とオレンジで暖かさを、クリームで柔らかさを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#93551C` | CTA帯の焦げ茶の地 | 13% | 画素の実測 | | `accent-1` | `#DF5B1E` | 強調文字・特長見出しの帯 | 4% | 画素の実測 | | `cta` | `#FD6B24` | メール問い合わせのボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 1% | 画素の主要色に補正 | | `secondary` | `#FEDE00` | 黄色のラベル帯 | 3% | 画素の実測 | | `background` | `#FFFBE2` | クリーム色の地 | 19% | 画素の実測 | | `background-alt` | `#F5F5F5` | 薄灰のセクション地 | 12% | 画素の実測 | | `surface` | `#FEFEFE` | 電話CTAの白カード | 13% | 画素の実測 | | `tint-1` | `#FEF3EF` | 淡いピンクベージュの地 | 5% | 画素の実測 | | `tint-2` | `#FFFBE2` | 淡い黄の集中線の地 | 4% | 画素の実測 | | `text` | `#6F4225` | 見出しの濃茶の文字 | 2% | 画素の主要色に補正 | | `text-muted` | `#72736D` | 本文・注釈の灰の文字 | 3% | 画素の主要色に補正 | | `accent-2` | `#CF7D4D` | FAQのくすんだ橙の面 | 6% | 画素の実測 | | `line` | `#9E9E9E` | サブボタンと区切り線の灰 | 1% | 推定 | | `accent-1-accessible` | `#C6511B` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#D34602` | AA を満たす補正値（計算） | | 計算 | | `line-accessible` | `#767676` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#B16030` | AA を満たす補正値（計算） | | 計算 | - 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.3 | 0.02em | | `headline-lg` | セクションの大見出し（強調語はオレンジ） | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.03em | | `headline-md` | 特長の帯見出し・CTA帯の見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em | | `headline-sm` | リード文・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 受付時間・出典などの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 電話番号・価格などの数字 | 欧文サンセリフ | Roboto Condensed | 700 | 32px | 1.1 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.05em | - 見出しの中で強調語だけオレンジにし、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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-9c62a376`（元 LP の URL から採番） - **元 LP**: https://sesco.co.jp/dannetsu/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。