---
version: alpha
name: Refined Architectural Housing LP Pattern
description: 生成りに近いオフホワイトの地に、墨色・チャコールと少しの金茶を合わせたモノトーン寄りの配色にする。見出しは欧文セリフと明朝の組み合わせ、本文は行間を広く取った明朝または細めのゴシック。角丸と影はほぼ使わず、直線と細い罫線、たっぷりの余白、大判の建築・インテリア写真で、ホテルのような静かな高級感を出す。CTA は墨色の角ばったボタンに絞り、彩度の高い色は使わない。
colors:
  background: '#F8F8F7'
  background-alt: '#EDEDEC'
  surface: '#FAF9F8'
  tint-1: '#F1F4F0'
  primary: '#383633'
  dark-section: '#2D2C2C'
  on-dark: '#EAE9E6'
  text: '#302F2E'
  text-muted: '#8B8784'
  line: '#D7D2C8'
  accent-1: '#BCA16F'
  cta: '#13100C'
  on-cta: '#FCFCFC'
  accent-2: '#9C2A2A'
typography:
  display:
    fontFamily: Cormorant Garamond
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.09em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.06em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 29px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.025em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
rounded:
  sm: 0px
  md: 4px
  lg: 6px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 48px
  button-outline:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 44px
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 80px
  case-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 320px
  voice-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 180px
  data-panel:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 200px
  cta-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 260px
  badge-new:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 32px
  note-text:
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    height: 16px
---

# DESIGN.md — 住宅・不動産の上品・高級なLPの型（Refined Architectural Housing LP Pattern）

designmark が、住宅・不動産・リフォーム・主な雰囲気「上品・高級」の LP の設計書 23 件を集計して合成した型です。特定の LP のデザインではありません。
AI コーディングツール（Claude Code / Cursor / v0 など）に渡すと、この業種・雰囲気の LP を同じトンマナで作れます。上の YAML（トークン）が正、本文はその使い方の説明です。
ライセンス: CC BY 4.0（表示: designmark / 株式会社 XECIN）

## Overview

- **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: 上品・高級、信頼・誠実、シンプル・ミニマル、ナチュラル
- **キーワード**: 余白・明朝体・欧文セリフ見出し・グレージュ・大判の建築写真・細い罫線
- **地の質感**: マットで平らな単色面。影とグラデーションはほぼ使わず、写真の木目・光・陰影で質感を出す。濃色の帯は部分的に使い、明暗の切り替えで落ち着いたリズムを作る
- **形**: 角を立てた矩形が基本。写真もカードもボタンも角丸なし（あっても 4px 程度）。区切りは 1px の細い罫線と地色の切り替えで行う
- **温度感**: やや暖かいニュートラル。生成り・グレージュ・墨色に、金茶や木の色で少しぬくもりを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F8F8F7` | ページ全体の基本の地色（オフホワイト） | 30% | 集計の代表色 |
| `background-alt` | `#EDEDEC` | 中盤セクションに交互に入れる淡いグレー地 | 12% | 集計の代表色 |
| `surface` | `#FAF9F8` | カード・事例・声などを載せる白に近い面 | 6% | 集計の代表色 |
| `tint-1` | `#F1F4F0` | 理由・データボックスなどの淡い色面 | 5% | 集計の代表色 |
| `primary` | `#383633` | ブランドを担うチャコール（見出し帯・ボタン枠・小ボタン） | 8% | 集計の代表色 |
| `dark-section` | `#2D2C2C` | 特長・性能値・クロージングに使う濃い墨色の帯 | 7% | 集計の代表色 |
| `on-dark` | `#EAE9E6` | 濃色帯の上の生成り白の文字 | 1% | 集計の代表色 |
| `text` | `#302F2E` | 見出し・本文の濃いグレー茶 | 3% | 集計の代表色 |
| `text-muted` | `#8B8784` | 注釈・欧文ラベル・キャプションの淡いグレー | 1% | 集計の代表色 |
| `line` | `#D7D2C8` | 区切り線・カードの細い罫線（グレージュ） | 0% | 集計の代表色 |
| `accent-1` | `#BCA16F` | 金茶のアクセント（数字・欧文ラベル・細い装飾線） | 1% | 集計の代表色 |
| `cta` | `#13100C` | 資料請求・来場予約の主ボタンの塗り（墨黒） | 1% | 集計の代表色 |
| `on-cta` | `#FCFCFC` | 主ボタン上の白文字 | 0% | 集計の代表色 |
| `accent-2` | `#9C2A2A` | NEW バッジや小さな強調に限って使う深紅 | 0% | 集計の代表色 |

- 地はオフホワイトと淡いグレーの 2 段階を交互に使い、白に近い surface はカード・声・CTA の箱に限る
- UI はチャコール・墨・生成りのモノトーンで組み、色味は写真の木や照明に任せる
- 金茶（accent-1）は数字・欧文ラベル・細い装飾線だけに使い、広い面や本文には使わない
- 主 CTA は墨黒の塗りに白文字で統一し、金色や鮮やかな色にしない
- 深紅（accent-2）は NEW バッジなど 1 か所の小さな目印に限る
- 濃い墨色の帯は特長・性能値・クロージング・フッターに使い、文字は生成り白にする
- 見出しにも本文にも真っ黒は使わず、濃いグレー茶にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューや章の欧文タイトル（大文字） | 欧文セリフ | Cormorant Garamond | 500 | 34px | 1.2 | 0.08em |
| `headline-lg` | セクションの和文大見出し（中央揃え） | 明朝 | Shippori Mincho | 500 | 24px | 1.4 | 0.08em |
| `headline-md` | 日本語のリード見出し・問いかけコピー | 明朝 | Shippori Mincho | 600 | 20px | 1.6 | 0.09em |
| `headline-sm` | 事例タイトル・物件名・声の見出し | 明朝 | Noto Serif JP | 500 | 15px | 1.5 | 0.05em |
| `body-md` | 本文・コンセプト文 | 明朝 | Noto Serif JP | 400 | 13px | 2.0 | 0.06em |
| `accent` | 見出し上の欧文ラベル・大きな数字・透かし文字 | 欧文セリフ | Cormorant Garamond | 400 | 29px | 1.15 | 0.025em |
| `label-button` | ボタン・ラベル帯の文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.08em |
| `note` | 注釈・写真のキャプション | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em |

- 見出しは「大きな欧文セリフ＋その下に小さな和文明朝」の 2 段で組む
- 日本語の見出しと本文は明朝でそろえ、注釈とボタンだけゴシックにする
- 太さは 400〜500 を中心にし、太いゴシックで強く訴えない
- 本文は行間 2.0 前後、字間 0.06em ほどにして、ゆったり読ませる
- サイズの差は控えめにし、強さではなく余白と字間で階層を作る
- 数字は大きな欧文セリフで置き、単位は小さく添える
- 注釈は 9〜10px の灰色で、該当するブロックのすぐ下に置く
- 書体は集計で多かった分類に近い Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC は 2 カラムのグリッドと、写真をずらした非対称の配置
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
- 各セクションは「欧文見出し→和文サブ→明朝リード→コンテンツ→罫線ボタン」の順で組む
- 見出しとリードは中央揃え、仕様や説明文は左揃え
- 1 画面に入れる情報を絞り、セクションの間は 72px 前後空ける
- コンセプトでは写真の大きさを変え、左右にずらして配置する
- CTA はファーストビューの後、中盤、最後の 3 か所に中央揃えで置き、幅は 70〜80% にする
- 一覧の最後には、中央に枠線ボタンを 1 つ置く

## Elevation & Depth

- 影は基本的に使わず、地色の差と細い罫線で階層を分ける
- カードは淡いグレー地の上に白に近い面を置いて浮かせる
- 奥行きは写真の陰影と余白、背後にずらして敷いた色面で表す
- どうしても必要な横スライドのカードだけ、0 2px 8px rgba(0,0,0,.08) 程度のごく薄い影にする

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は角丸なしの矩形。横長 16:9〜4:3 を基本にし、コンセプトでは縦長の写真も混ぜる
- **セクション境界**: 水平の直線で地色を切り替える。写真と単色面の境目もまっすぐにする
- 角丸は最小限にして、建築らしい直線を保つ
- ボタン・カード・写真は角を立てる
- 線は 1px の細線を基本にする
- カテゴリラベルは角丸なしの小さな四角にする
- 矢印アイコンなど小さな部品に限り、円形を使ってよい

## Components

- **墨色の主 CTA**（`button-primary`）: 墨黒の矩形に白文字。右端に細い矢印を置く幅広のボタン。資料請求・来場予約に使う
- **細枠のサブボタン**（`button-outline`）: 白に近い面に 1px のチャコール枠。欧文または和文のラベルを中央に置き、右に小さな丸い矢印を付ける
- **欧文＋和文の見出し**（`section-heading`）: 大文字の欧文セリフの大見出しの下に、小さな和文明朝を添え、その下に短い細線を引く
- **施工事例カード**（`case-card`）: 角丸なしの写真の下に、小さなカテゴリラベル・明朝のタイトル・短い説明を置く。下に細い罫線を引く
- **お客様の声カード**（`voice-card`）: 白に近いカードの上に地域や家族構成のラベル、明朝の要約見出し、本文の順に置く。枠は 1px の罫線
- **性能値パネル**（`data-panel`）: 濃い墨色の帯に、大きな欧文セリフの数字と小さな単位、生成り白の説明を並べる
- **CTA ボックス**（`cta-box`）: 淡いグレー地の上に白に近い箱を置き、明朝の問いかけ、カタログ写真、主ボタンとサブボタンを縦に並べる
- **NEW バッジ**（`badge-new`）: カードやカタログの角に重ねる小さな深紅の印。欧文で NEW と白く入れる
- **注釈**（`note-text`）: ブロックの直下に置く 10px の灰色のゴシック。※から始める

## Do's and Don'ts

**Do**
- 余白を大きく取り、1 画面に置く情報を絞る
- 見出しは欧文セリフと明朝の 2 段にし、字間を広めに取る
- オフホワイトと淡いグレーの帯を交互に置いて、区切りを見せる
- 情報は白に近いカードと 1px の罫線で整理する
- インテリアや外観の写真を大きく使い、色味は低めにそろえる
- CTA は墨黒の主ボタンと細枠のサブボタンの 2 種類に固定する

**Don't**
- 濃いドロップシャドウやグラデーションのボタンを使わない
- 彩度の高い原色を広い面に使わない
- 太いゴシックの大見出しで煽らない
- 丸ゴシックやポップな書体を使わない
- 大きな角丸のカードやピル型ボタンにしない
- 金を本文や広い背景に使わない

## Page Structure

この業種・雰囲気の LP に多いセクションの並び。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（ブランドの考え方と空間の質の高さを一目で伝える）: 画面いっぱいの建築・インテリア写真に、大きな欧文セリフのタイトルと明朝の一言を重ねる。下に主 CTA を置く
2. **コンセプト**（家づくりの考え方や企業の想いを伝える）: オフホワイトの地に、中央揃えの明朝リードを行間広く置く。大きさの違う写真を左右にずらして散らす
3. **施工事例**（デザインの実例と実績を見せる）: 欧文＋和文の見出しの下に、角丸なしの写真カードを縦に並べるか横スライドにする。最後に細枠のボタンを置く
4. **間取り・プラン**（建物の構成とプランを比較できるようにする）: 淡いグレー地に、細い線画の間取り図と白に近いカードを並べ、面積などの数字は欧文セリフで置く
5. **特長・選ばれる理由**（性能や強みを数字と一緒に示す）: 濃い墨色の帯に、細い欧文セリフの番号、生成り白の見出し、性能値パネルを並べる
6. **CTA**（資料請求・見学予約へ誘導する）: 白に近い箱に明朝の問いかけとカタログ写真を入れ、墨黒の主ボタンと細枠のサブボタンを中央に縦に並べる
7. **お客様の声**（実際の住み心地を伝えて共感を得る）: 淡いグレー地に白に近いカードを置き、属性ラベル・明朝の要約・本文を罫線で区切る
8. **お知らせ・イベント**（見学会や相談会などの最新情報を伝える）: 日付を欧文セリフで置き、タイトルを細い罫線で区切ったリストにする。末尾に一覧への枠線ボタンを置く
9. **フッター**（会社情報・ナビゲーション・著作権表示）: 濃い墨色の面に生成り白の小さな文字で、ロゴ・リンク・注釈を静かに並べる

## Imagery

- 自然光が入る明るい室内を、低めの位置から広角で撮る。木の床、漆喰の壁、グレーのソファ、観葉植物を基本にする
- 外観は夕暮れ時に撮り、窓から漏れる暖かい明かりを見せる
- 写真は彩度をやや落とし、明るい室内と暗い帯の明暗差でリズムを作る
- 人物はほとんど入れず、空間そのものを主役にする
- アイコンや間取り図は細いグレーの線画にする
- 装飾は、背景に大きく薄く敷いた欧文の透かし文字と、写真の後ろにずらして置いた淡い色面に限る
- 写真・イラストは自社で撮影・作成するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は本文の幅を 960px ほどにして中央に寄せ、左右は地色で埋める
- PC では写真と文章を 2 カラムにし、セクションごとに左右を入れ替える
- 事例やカードは PC で 2〜3 列、SP で 1 列か横スライドにする
- SP では写真を上、文章を下にして縦に積む
- SP のボタンは幅 80% ほどにし、高さは 44〜48px にする
- 電話番号はタップで発信できるようにし、SP では画面下に追従する CTA を置いてもよい

## 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**: `pk-real-estate-elegant`
- **種類**: 型パック（複数の LP の設計書を集計して合成。特定の LP のデザインではない）
- **合成元**: designmark で公開中の「住宅・不動産・リフォーム」・主な雰囲気「上品・高級」の設計書 23 件（2026-10-24 時点）
- **生成**: 2026-10-24、claude-opus-5-5、書式 xecin-lp-design-md-pack 0.1（DESIGN.md 仕様 alpha 準拠）
- **ライセンス**: CC BY 4.0（https://creativecommons.org/licenses/by/4.0/deed.ja）。表示の例:「designmark（株式会社 XECIN）の型パックを利用」
- **詳細**: https://designmark.jp/packs/pk-real-estate-elegant/

:root {
  --color-background: #f8f8f7;
  --color-background-alt: #ededec;
  --color-surface: #faf9f8;
  --color-tint-1: #f1f4f0;
  --color-primary: #383633;
  --color-dark-section: #2d2c2c;
  --color-on-dark: #eae9e6;
  --color-text: #302f2e;
  --color-text-muted: #8b8784;
  --color-line: #d7d2c8;
  --color-accent-1: #bca16f;
  --color-cta: #13100c;
  --color-on-cta: #fcfcfc;
  --color-accent-2: #9c2a2a;
  --spacing-unit: 8px;
  --spacing-card: 20px;
  --spacing-section: 72px;
  --rounded-sm: 0px;
  --rounded-md: 4px;
  --rounded-lg: 6px;
  --rounded-full: 999px;
}

W3C のデザイントークンの形式（Design Tokens Format Module 2025.10）の JSON です。Figma のプラグインや Style Dictionary などで読み込めます。