--- version: alpha name: Warm Greige Premium Housing LP description: 明るいグレーと白を交互に敷き、金茶色の帯やボタンで締める住宅メーカーの地域向け LP。大きな住宅写真と番号付きの性能訴求を繰り返し、本文の要所はオレンジ文字で強調する。落ち着いた上質さと、データで示す信頼感を両立させている。 colors: primary: '#968562' background: '#EEEEEE' surface: '#FEFEFE' background-alt: '#F7F4EF' text: '#32302B' text-body: '#5C5B59' secondary: '#746A59' accent-1: '#E08A1E' cta: '#DB850C' on-cta: '#FDF9EA' text-muted: '#B8B1A3' accent-2: '#2B9B5D' line: '#B3A593' dark-section: '#2B437C' primary-accessible: '#7F7053' cta-accessible: '#A36309' accent-1-accessible: '#A16316' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 21px fontWeight: 500 lineHeight: 1.45 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em body-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 500 lineHeight: 1.85 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Cormorant Garamond fontSize: 40px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-expand: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 68px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 44px button-pill-white: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px feature-number-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 80px stat-badge: backgroundColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.sm}' height: 64px anchor-nav: backgroundColor: '{colors.background-alt}' textColor: '{colors.secondary}' typography: '{typography.label-button}' height: 60px tag-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px voice-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 80px circle-letter: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px --- # DESIGN.md — グレージュ×金茶の上質な注文住宅 LP（Warm Greige Premium Housing LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: 上品・高級、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: グレージュ・金茶・大判写真・番号付き性能訴求・折りたたみ詳細・実績数値 - **地の質感**: フラットな単色の面。ところどころに薄い方眼の地紋を敷く - **形**: 角丸は控えめ。ボタンは小さな角丸の帯型と、白いピル型の 2 種類 - **温度感**: やや暖かい中間色。グレーに生成りと茶を混ぜた落ち着いた温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#968562` | 金茶。帯・展開ボタン・実績セクション | 6% | 画素の実測 | | `background` | `#EEEEEE` | ページの基本の地色（明るいグレー） | 30% | 画素の実測 | | `surface` | `#FEFEFE` | カードや交互に入る白いセクション | 23% | 画素の実測 | | `background-alt` | `#F7F4EF` | 生成りのベージュ面（特別訴求の箱） | 6% | 画素の実測 | | `text` | `#32302B` | 見出しの文字色（暖色寄りの濃いグレー） | 2% | 画素の実測 | | `text-body` | `#5C5B59` | 本文の文字色 | 3% | 画素の主要色に補正 | | `secondary` | `#746A59` | セクション見出しの茶色（ラインアップ見出しなど） | 1% | 画素の実測 | | `accent-1` | `#E08A1E` | 本文中の強調語と小見出しのオレンジ | 1% | 推定 | | `cta` | `#DB850C` | ファーストビューの主ボタン（オレンジ帯） | 0% | 画素の実測 | | `on-cta` | `#FDF9EA` | ボタン上の白い文字 | 0% | 画素の実測 | | `text-muted` | `#B8B1A3` | 大きな番号数字と注釈 | 0% | 画素の実測 | | `accent-2` | `#2B9B5D` | 期間限定バッジ・価格の緑 | 0% | 画素の実測 | | `line` | `#B3A593` | 区切り線・見出し下線 | 0% | 画素の主要色に補正 | | `dark-section` | `#2B437C` | ファーストビューの空色の帯 | 1% | 画素の実測 | | `primary-accessible` | `#7F7053` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#A36309` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#A16316` | AA を満たす補正値（計算） | | 計算 | - 地はグレー（#F1F0EF）と白を交互に使ってセクションを分ける - 金茶は展開ボタン・実績帯・ナビの矢印など、面の締めに限定して使う - 本文中の強調はオレンジ文字だけにする。太字や背景色は付けない - 番号数字は薄いベージュにして、見出しより弱く見せる - 緑は期間限定の価格訴求にだけ使い、ほかには広げない - CTA のオレンジ帯はファーストビューと店舗案内に集中させる - `button-expand` は文字 `#FDF9EA` × 背景 `#968562` のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#7F7053`、4.58:1）を使う。 - `button-primary` は文字 `#FDF9EA` × 背景 `#DB850C` のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A36309`、4.58:1）を使う。 - `tag-label` は文字 `#FDF9EA` × 背景 `#E08A1E` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A16316`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ・大見出し | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.4 | 0.08em | | `headline-lg` | セクション見出し（茶色・中央揃え） | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.4 | 0.1em | | `headline-md` | 番号付き性能見出し・小セクション見出し | ゴシック | Zen Kaku Gothic New | 500 | 21px | 1.45 | 0.08em | | `headline-sm` | 見出し下線付きの小見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.06em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 15px | 1.85 | 0.08em | | `note` | 注釈（※） | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.03em | | `accent` | 大きな番号数字・欧文の商品名 | 欧文セリフ | Cormorant Garamond | 400 | 40px | 1.0 | 0.02em | | `label-button` | 展開ボタン・CTA | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | - 本文は字間を広め（0.08em）、行間を 1.8 前後にして余裕を持たせる - 見出しは 2 行に分け、中央揃えか左揃えにする - 番号は細身のセリフ体で大きく置き、横に見出しを左揃えで並べる - 商品名は細身の欧文セリフ体の大文字にし、カナ読みを小さく添える - 数値実績は太いゴシックで大きくし、単位は小さくする - 注釈は本文より 3〜4px 小さくし、グレーで添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真の小グリッドは 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 性能訴求は『ラベル＋番号＋見出し → 写真 → 本文』の順で揃える - 性能ブロックはグレー地、補足ブロックは白地にして交互に並べる - 詳細は高さを制限して下をフェードさせ、金茶の展開ボタンを重ねる - 写真は左右に約 18px の余白を取って置く。キービジュアルだけ全幅にする - 商品写真はカルーセルにし、左右に白い丸の矢印を置く ## Elevation & Depth - 影はほとんど使わずフラットにする - 展開ボタンの上には白へのグラデーションのフェードを重ねる - 吹き出しや実績カードは細い線か白地で区切る ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角か、わずかに角を丸める。要所の写真カードだけ角を大きく丸める - **セクション境界**: 直線で地色を切り替える。区切りには細い横線を使う - 展開ボタンは角の小さい金茶の帯にし、上に白いピル型の小ラベルを載せる - 実績帯の中のボタンだけ白いピル型にする - アイコンや丸ラベルは正円にする - 吹き出しは角丸の白い枠にして、下に尾を付ける ## Components - **展開ボタン**（`button-expand`）: 金茶の帯に白い小ピルの『さらに』と、下向き矢印。フェードした本文の上に重ねる - **店舗案内 CTA**（`button-primary`）: オレンジ帯に白文字と下向き矢印。上に特典の白カードを載せる - **白ピルボタン**（`button-pill-white`）: 金茶の帯の上に置く白いピル型。文字は濃いグレーで右に矢印 - **番号付き見出し**（`feature-number-heading`）: 小さな茶色のラベルの下に大きな薄い番号を置き、右に 2 行の見出し - **実績数値バッジ**（`stat-badge`）: 左の金茶の箱に順位、右の白箱に棟数を大きく書く 2 分割 - **ページ内ナビ**（`anchor-nav`）: ベージュ地に 3 項目を縦線で区切り、下に矢印 - **カテゴリタグ**（`tag-label`）: オレンジ地に白文字の小さなピル型。小見出しの上に置く - **お客様の声の吹き出し**（`voice-bubble`）: 白い角丸の枠に要約を 2 行、地域名と名前を小さく添える - **丸囲みアルファベット**（`circle-letter`）: 写真上の位置を示すオレンジの丸の英字と、本文の見出しを対応させる ## Do's and Don'ts **Do** - 性能訴求は番号を振って同じ型で繰り返す - 本文のキーワードは 1 段落に 1〜2 か所だけオレンジにする - 写真は明るい自然光の室内と、青空の下の外観を使う - 長い説明は折りたたんで、展開ボタンで続きを見せる - 数値の実績には注釈を必ず添える **Don't** - 彩度の高い原色の背景を広い面に使わない - 強い影や立体的なボタンを使わない - 金茶とオレンジを同じボタンに混ぜない - 明朝体を本文に使わない（欧文セリフ体は番号と商品名だけ） - 写真の上に文字をたくさん重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（地域名と快適・安心の価値を伝え、実績で信頼をつかむ）: 青空と外観の全幅写真に白い 2 行のキャッチを置く。下に実績バッジと注釈を並べる 2. **来場特典 CTA**（Web 予約での来場を促す）: 白カードに特典金額を大きく書き、下にオレンジの店舗案内帯を付ける 3. **ページ内ナビ**（主要セクションへ移動させる）: ベージュ地に 3 分割のリンクと下向き矢印 4. **商品ラインアップ**（住宅商品の幅を見せる）: 茶色の大見出しの下に、欧文セリフの商品名と外観写真。続けてカルーセルと注釈 5. **プラン提案**（平屋・3 階建てなどの選択肢を示す）: 小見出しごとに写真と短い説明を左右に並べる。月桂冠の実績バッジを添える 6. **限定商品訴求**（期間限定の価格で引き付ける）: 白カードの角に緑の丸バッジを置き、価格を大きく緑で書く 7. **実績帯**（受注実績で権威を示す）: 金茶の全幅面に白文字の実績と室内写真を置き、白ピルの CTA を付ける 8. **性能訴求（番号付き）**（暖かさ・省エネ・耐震などの価値を順に説明する）: グレー地に番号付き見出し・写真・本文。白地の補足と図解、展開ボタンが続く 9. **特別性能の訴求**（最高等級の断熱性能を強調する）: 生成りの箱に極太の造語見出しを上下の線で挟み、本文と外観写真を置く 10. **お客様の声**（オーナーの実感で後押しする）: 吹き出しの要約、室内写真、長めの本文の順に並べる 11. **展示場一覧**（来場予約へつなげる）: エリアタグで絞り込み、外観写真のカードを並べて各カードに予約ボタンを付ける 12. **イベント・資料請求**（来場以外の接点を作る）: イベントカードのカルーセルと、カタログ請求の白カード ## Imagery - 外観は青空の下で撮り、植栽を含めてやや見上げる構図にする - 室内は白木の床と白壁で、自然光が入る明るい写真にする - 家族やモデルの自然な暮らしの場面を入れる - 仕組みはパース図や断面図に、オレンジの丸ラベルや矢印を載せて説明する - アイコンはシンプルな線画で、太陽・雲などに補色を少し使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 1000px で中央に置き、左右はグレー地にする - PC のヘッダーは横並びのナビにして、右端にオレンジの CTA を固定する - 番号付き性能ブロックは PC で写真と文章の 2 カラムにし、左右を交互に入れ替える - 商品ラインアップは PC で外観写真と室内写真グリッドを横に並べる - 展示場一覧は PC で 3 カラムのカードグリッドにする ## 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-bc8958e4`（元 LP の URL から採番） - **元 LP**: https://www.ichijo.co.jp/area/osaka/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。