--- version: alpha name: Warm Gray Minimal Renovation LP description: 白とライトグレーの地に、グレージュ（くすんだ茶）のピル型ボタンと黒のフッターを合わせたミニマルな住宅リノベーション LP。大判のインテリア写真と細い欧文見出しで、落ち着いた上質さを出している。 colors: primary: '#7E7367' background: '#FFFFFF' background-alt: '#F0F0F0' tint-1: '#E1DDD2' tint-2: '#EBE9DD' dark-section: '#222222' on-dark: '#FFFFFF' text: '#1E1E1E' text-muted: '#888888' line: '#BCB9B6' cta: '#426FA9' on-cta: '#FFFFFF' surface: '#FFFFFF' typography: display: fontFamily: Cormorant Garamond fontSize: 34px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.12em headline-lg: fontFamily: Raleway fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.15em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Great Vibes fontSize: 40px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.08em rounded: sm: 2px md: 6px lg: 8px full: 999px spacing: unit: 8px card: 12px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px work-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 240px service-tile: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 220px flow-step: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 80px review-card: backgroundColor: '{colors.surface}' typography: '{typography.note}' rounded: '{rounded.md}' height: 150px contact-banner: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 100px dark-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 120px --- # DESIGN.md — グレージュと木目のリノベーション LP（Warm Gray Minimal Renovation LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: シンプル・ミニマル、上品・高級、ナチュラル、信頼・誠実 - **キーワード**: 余白多め・細い欧文見出し・インテリア写真・グレージュ・ピル型ボタン・モノトーン - **地の質感**: フラットで質感はない。写真の木目とコンクリートが素材感を担う - **形**: 写真は角丸なしの矩形。ボタンだけ完全なピル型。カードは角丸ごく小さめ - **温度感**: やや暖かいニュートラル（白・グレー・ベージュ・茶） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7E7367` | ボタン・アクセントのグレージュブラウン | 2% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地色 | 36% | 画素の実測 | | `background-alt` | `#F0F0F0` | 口コミ・ニュース帯の淡グレー地 | 12% | 画素の実測 | | `tint-1` | `#E1DDD2` | 特集帯のベージュ地 | 10% | 画素の実測 | | `tint-2` | `#EBE9DD` | 工程アイコンの丸背景 | 1% | 画素の実測 | | `dark-section` | `#222222` | フッター・オンライン展示帯 | 12% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗色面の文字 | 1% | 画素の主要色に補正 | | `text` | `#1E1E1E` | 見出し・本文の文字 | 2% | 画素の実測 | | `text-muted` | `#888888` | 日付・注釈の灰色文字 | 1% | 推定 | | `line` | `#BCB9B6` | 区切り線・枠線 | 1% | 画素の主要色に補正 | | `cta` | `#426FA9` | お問い合わせ帯のくすみブルー | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ブルー帯上の文字 | 0% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | カード面 | 8% | 画素の実測 | - 地は白を基本に、淡グレーとベージュの帯で区切る - ボタンはグレージュブラウン塗り＋白文字のピル型に統一 - 強い色は最下部のお問い合わせ帯のくすみブルーだけ - フッターとオンライン展示の帯は黒に近いチャコール - 写真の色を主役にし、UI色は彩度を抑える ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの欧文コピー | 欧文セリフ | Cormorant Garamond | 400 | 34px | 1.5 | 0.12em | | `headline-lg` | セクションの欧文見出し | 欧文サンセリフ | Raleway | 400 | 26px | 1.2 | 0.1em | | `headline-md` | 和文リード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.7 | 0.15em | | `headline-sm` | 事例・記事カードのタイトル | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.05em | | `note` | 見出し下の和文小見出し・日付・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.05em | | `accent` | 特集帯の筆記体タイトル | 欧文スクリプト | Great Vibes | 400 | 40px | 1.2 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 500 | 12px | 1.0 | 0.08em | - セクション見出しは細い欧文の大文字＋下に小さい和文訳の 2 段 - 和文見出しは字間を広めにとる - 本文は行間 2.0 前後でゆったり組む - 筆記体は特集帯の 1 か所だけに使う - 太字の多用を避け、文字色は黒とグレーの 2 段階 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。事例・記事は 2 カラムグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算） - セクション間は余白を大きくとる - 見出しを左、説明文を右に置く左右分割を SP では縦積みにする - サービスは全幅の写真タイルで並べる - コラムは横スクロールのカルーセル - 白カードを淡グレー地に浮かせて区切る ## Elevation & Depth - 基本は影なしのフラット - 口コミ・コラムカードはごく薄い影 - ニュースは淡グレー地の上に白パネルを置いて浮かせる ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの矩形。横長の 4:3 や 3:2 - **セクション境界**: 直線。背景色の切り替えだけで区切る - ボタンは完全なピル型に右矢印をつける - 工程アイコンは淡ベージュの正円 - サブリンクは角なしの細枠ボックス - カルーセル送りは細枠の丸ボタン ## Components - **グレージュのピル型ボタン**（`button-primary`）: 小さめの塗りボタン。白文字と右矢印 - **欧文＋和文の見出し**（`section-heading`）: 細い欧文の大見出しの下に、小さい和文訳を添える - **施工事例カード**（`work-card`）: 写真の下に細枠のタグピル、太字タイトル、灰色の面積・費用データ - **サービス写真タイル**（`service-tile`）: 全幅の写真の左下に白の欧文タイトルと和文の説明 - **工程ステップ**（`flow-step`）: 淡ベージュの円にアイコンと STEP 番号。円どうしを細線でつなぐ - **口コミカード**（`review-card`）: アバター、名前、星評価、本文抜粋の白カード - **問い合わせ帯**（`contact-banner`）: くすみブルーの横長バナー。欧文タイトル、和文の説明、右矢印 - **オンライン展示バナー**（`dark-banner`）: チャコール地に細い欧文タイトル、間取り CG、黒のピルボタン ## Do's and Don'ts **Do** - 写真を大きく見せ、文字は控えめに - ボタンはグレージュのピル型で統一する - 見出しは欧文と和文の 2 段構成にする - 余白をたっぷりとる - 背景は白・淡グレー・ベージュを交互に使う **Don't** - 原色や蛍光色をボタンに使わない - 太く重い和文見出しを並べない - 写真に角丸や装飾枠をつけない - グラデーションや強い影を使わない - 筆記体を何度も使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観を伝える）: 全幅のインテリア写真に白い欧文セリフのコピー。右下に事例のキャプションボックス 2. **コンセプト**（考え方を伝える）: 写真を 3 枚コラージュし、隣に字間の広い和文見出しと本文、ピルボタン 3. **施工事例**（実績を見せる）: 左に見出しとボタン、右に 3 列の事例カードグリッド 4. **サービス**（事業領域を案内する）: 上段 2 枚・下段 3 枚の全幅写真タイルに白文字のタイトル 5. **特集**（魅力を印象づける）: ベージュ地に筆記体タイトル、写真 3 枚と短いキャプション 6. **流れ**（手順を示す）: 5 つの円形ステップを横線でつなぐ 7. **店舗案内**（来店を促す）: 左に住所とボタン 2 つ、右に店舗写真のスライダー 8. **口コミ**（信頼を補強する）: 淡グレー地に星評価と口コミカードのカルーセル 9. **お知らせ**（活動の新しさを伝える）: 白パネルの中にサムネイル付きリストを 2 列で並べる 10. **コラム**（情報で集客する）: 横スクロールの記事カードと丸い送りボタン 11. **CTA**（問い合わせへ誘導する）: オンライン展示の暗色バナー、細枠のリンク 2 つ、ブルーの問い合わせ帯、SNS アイコン 12. **フッター**（サイト内を回遊させる）: チャコール地に多列のテキストリンク ## Imagery - 自然光で撮る明るいインテリア写真。木の床、白い壁、コンクリートを入れる - 広角で水平垂直をそろえ、生活感は少なめにする - 建物の外観は青空を背景にする - 写真に文字を重ねるときは暗い部分に白文字を置く - アイコンは細い線画をベージュの円に入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の左右分割（見出し＋説明、写真＋本文）は SP で縦積みにする - 事例グリッドは PC 3 列、SP 2 列にする - サービスタイルは SP で 1 列の全幅写真にする - 工程ステップは SP で縦並びか横スクロールにする - グローバルナビは SP でハンバーガーメニューにし、右上の 2 ボタンは残す ## 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-ab4edde7`（元 LP の URL から採番） - **元 LP**: https://www.a-find.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（8/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。