生成り×焦茶の静謐な注文住宅 LP

Quiet Washi Architect Housing LP

生成りの地に建築写真を大きく敷き、明朝の小さな文字と細い線だけで構成した静かな住宅工務店 LP。装飾を削ぎ、余白と写真の陰影で上質さを出す。

住宅・不動産・リフォーム上品・高級ナチュラル和風シンプル・ミニマルSPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は生成り一色が基本。コンセプト帯だけ一段濃いグレージュにする
色の面積は写真に任せ、UI 色は墨・灰・焦茶に限る
主ボタンのみ焦茶塗り、サブは白面に細枠
フッターは濃グレーで締め、上に写真 2 分割の CTA を置く
彩度の高い色・グラデーションは使わない

TYPOGRAPHY

書体

displayコンセプトの縦書き見出し明朝／ Shippori Mincho 500 ／ 16px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出し明朝／ Shippori Mincho 500 ／ 13px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm事例名・イベント名明朝／ Shippori Mincho 500 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

body-mdリード文・本文明朝／ Noto Serif JP 400 ／ 9px ／行間 2.0

あなたの LP を、もっと伝わる形に。Aa 123

note日付・カテゴリ・住所ゴシック／ Noto Sans JP 400 ／ 7px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタン・テキストリンク明朝／ Shippori Mincho 500 ／ 9px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

accent件数表示などの欧文数字欧文セリフ／ Cormorant Garamond 400 ／ 9px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

文字は全体に小さく、余白で読ませる
見出しも太字にせず中字の明朝
コンセプトは右から縦書きで複数段組み
字間は広め 0.08〜0.2em、行間 2 前後
注記類のみゴシックの灰文字

PAGE STRUCTURE

セクション構成

ファーストビュー世界観を一枚で伝える全幅の静物写真、中央に小さなロゴ、右上に小ボタン2つ、右下に短い一文
お知らせ帯最新情報細い一行帯に日付・カテゴリ・タイトル
コンセプト家づくりの思想グレージュ帯に縦書きの見出しと本文
カテゴリ導線主要ページへ誘導縦長写真5枚を隙間なく並べ白ラベル
施工事例実績を見せる左見出し右リード、事例ごとに写真スライダーを縦に積む
モデルハウス見学誘導中央見出し、横スライドの大きな写真と住所
住まいの基本性能・保証の導線リード文と下線リンク3本、下に全幅外観写真
イベント予約獲得3列×2段のカードに詳細・予約ボタン
見学会・リノベーション・暮らしサービス紹介写真とテキストを左右交互に配置
サブ導線・お知らせ補足情報左にリンクリスト右に写真、下にお知らせ罫線リスト
CTA資料請求・見学予約写真を2分割し白文字とリンク
フッターサイトマップ濃グレー地に4列のリンク

COMPONENTS

部品

予約ボタン button-primary焦茶塗りの小さな矩形に白い明朝文字
詳しく見るボタン button-secondary白面に細い灰枠、墨文字
下線リンク text-link-arrow文字の下に細線、右端に焦茶の小さな矢印ピル
縦書きコンセプト vertical-conceptグレージュ帯に縦書きの見出しと複数段の本文
写真カテゴリ帯 photo-category-strip縦長写真を5枚横並びし左下に白文字ラベル
施工事例スライダー case-slider写真列の下に種別・地域・事例名と枚数・矢印ボタン
イベントカード event-cardカテゴリ小文字、写真、日付、タイトル、2ボタン
お知らせリスト news-list日付とカテゴリ、タイトルを細罫線で区切る
写真2分割CTA split-cta写真を暗くし中央に白文字の見出し・説明・リンク

守ること

写真を主役にして文字は小さく控えめに
余白を惜しまず取る
明朝を中字で使い、字間を広く
写真は自然光の柔らかい建築・暮らしのカット
リンクは下線＋矢印で静かに見せる

DON'T

避けること

太いゴシックや大きな見出しを使わない
赤や黄など強い色の強調をしない
角丸カード・影・グラデーションを使わない
バッジや吹き出しで煽らない
写真に文字を重ねすぎない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 生成り×焦茶の静謐な注文住宅 LP（Quiet Washi Architect Housing LP）

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

Overview

業種: 住宅・不動産・リフォーム／ 雰囲気: 上品・高級、ナチュラル、和風、シンプル・ミニマル
キーワード: 余白・建築写真・明朝の小文字・縦書き・生成り・細罫線
地の質感: 和紙のような生成りの無地。光と影が柔らかい写真が質感を担う
形: 角丸ほぼなしの矩形。ボタンも小さな角丸のみ
温度感: やや暖かいニュートラル。木と漆喰の色

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#F1F1E9`	ページ基本の生成り地	45%	画素の実測
`background-alt`	`#D5D5CD`	コンセプト縦書き帯のグレージュ地	8%	画素の実測
`primary`	`#4E3B32`	予約ボタン等の焦茶	2%	画素の実測
`cta`	`#4D3C33`	予約する主ボタン	1%	画素の実測
`on-cta`	`#F4F4ED`	ボタン上の白文字	0%	画素の主要色に補正
`text`	`#2D302C`	見出し・本文の墨色	2%	画素の主要色に補正
`text-muted`	`#97978C`	日付・カテゴリ等の灰文字	0%	画素の主要色に補正
`line`	`#DCDCD3`	リンク下線・リスト区切り	0%	画素の主要色に補正
`surface`	`#F3F2EB`	サブボタンの白面	1%	画素の実測
`dark-section`	`#3D3D3B`	フッターの濃グレー地	8%	画素の実測
`on-dark`	`#F1F1EA`	フッター上の白文字	0%	画素の主要色に補正
`accent-1`	`#887459`	写真内の木の焼き色	5%	画素の主要色に補正

地は生成り一色が基本。コンセプト帯だけ一段濃いグレージュにする
色の面積は写真に任せ、UI 色は墨・灰・焦茶に限る
主ボタンのみ焦茶塗り、サブは白面に細枠
フッターは濃グレーで締め、上に写真 2 分割の CTA を置く
彩度の高い色・グラデーションは使わない

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	コンセプトの縦書き見出し	明朝	Shippori Mincho	500	16px	1.8	0.2em
`headline-lg`	セクション見出し	明朝	Shippori Mincho	500	13px	1.6	0.15em
`headline-sm`	事例名・イベント名	明朝	Shippori Mincho	500	10px	1.6	0.08em
`body-md`	リード文・本文	明朝	Noto Serif JP	400	9px	2.0	0.08em
`note`	日付・カテゴリ・住所	ゴシック	Noto Sans JP	400	7px	1.6	0.05em
`label-button`	ボタン・テキストリンク	明朝	Shippori Mincho	500	9px	1.4	0.1em
`accent`	件数表示などの欧文数字	欧文セリフ	Cormorant Garamond	400	9px	1.4	0.05em

文字は全体に小さく、余白で読ませる
見出しも太字にせず中字の明朝
コンセプトは右から縦書きで複数段組み
字間は広め 0.08〜0.2em、行間 2 前後
注記類のみゴシックの灰文字
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。事例は写真横並びスライダー、イベントは 3 列カード
本文ブロックの幅: 画面幅の約 85%
余白: セクション間 100px、基本単位 8px、カード内 0px（375px 幅換算）
見出しを左、リード文を右に置く非対称 2 分割
写真は画面端まで裁ち落とし、左右にずらして配置
テキストリンクは下線＋小さな矢印ピル
写真とテキストを互い違いに配置しリズムを作る
セクション間は大きな余白のみで区切る

Elevation & Depth

影は一切使わない
奥行きは写真の陰影と余白で表現

Shapes

角丸: 小 2px ／中 2px ／大 0px。ボタンは角丸の長方形。
写真の切り抜き: 角丸なしの矩形。縦長・横長を混在
セクション境界: 直線。境界線なしで余白か写真で切り替え
矢印アイコンだけ小さなピル型
カードに枠や背景を付けない
写真同士は細い隙間で並べる

Components

予約ボタン（button-primary）: 焦茶塗りの小さな矩形に白い明朝文字
詳しく見るボタン（button-secondary）: 白面に細い灰枠、墨文字
下線リンク（text-link-arrow）: 文字の下に細線、右端に焦茶の小さな矢印ピル
縦書きコンセプト（vertical-concept）: グレージュ帯に縦書きの見出しと複数段の本文
写真カテゴリ帯（photo-category-strip）: 縦長写真を5枚横並びし左下に白文字ラベル
施工事例スライダー（case-slider）: 写真列の下に種別・地域・事例名と枚数・矢印ボタン
イベントカード（event-card）: カテゴリ小文字、写真、日付、タイトル、2ボタン
お知らせリスト（news-list）: 日付とカテゴリ、タイトルを細罫線で区切る
写真2分割CTA（split-cta）: 写真を暗くし中央に白文字の見出し・説明・リンク

Do's and Don'ts

Do - 写真を主役にして文字は小さく控えめに - 余白を惜しまず取る - 明朝を中字で使い、字間を広く - 写真は自然光の柔らかい建築・暮らしのカット - リンクは下線＋矢印で静かに見せる

Don't - 太いゴシックや大きな見出しを使わない - 赤や黄など強い色の強調をしない - 角丸カード・影・グラデーションを使わない - バッジや吹き出しで煽らない - 写真に文字を重ねすぎない

Page Structure

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

ファーストビュー（世界観を一枚で伝える）: 全幅の静物写真、中央に小さなロゴ、右上に小ボタン2つ、右下に短い一文
お知らせ帯（最新情報）: 細い一行帯に日付・カテゴリ・タイトル
コンセプト（家づくりの思想）: グレージュ帯に縦書きの見出しと本文
カテゴリ導線（主要ページへ誘導）: 縦長写真5枚を隙間なく並べ白ラベル
施工事例（実績を見せる）: 左見出し右リード、事例ごとに写真スライダーを縦に積む
モデルハウス（見学誘導）: 中央見出し、横スライドの大きな写真と住所
住まいの基本（性能・保証の導線）: リード文と下線リンク3本、下に全幅外観写真
イベント（予約獲得）: 3列×2段のカードに詳細・予約ボタン
見学会・リノベーション・暮らし（サービス紹介）: 写真とテキストを左右交互に配置
サブ導線・お知らせ（補足情報）: 左にリンクリスト右に写真、下にお知らせ罫線リスト
CTA（資料請求・見学予約）: 写真を2分割し白文字とリンク
フッター（サイトマップ）: 濃グレー地に4列のリンク

Imagery

自然光で撮った木・漆喰・石の室内写真
彩度を抑えた柔らかい色調、影を残す
庭木の緑と外観を曇天の空で
器や花の静物で暮らしを示す
人物は手元や後ろ姿程度に留める
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は提供画像と同等の構成で、見出し左・本文右の 2 分割
SP では見出しと本文を縦積みに
イベントカードは SP で 1〜2 列に
写真の左右ずらし配置は SP では全幅に寄せる
縦書きコンセプトは SP でも縦書きを維持し段数を減らす

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

---
version: alpha
name: Quiet Washi Architect Housing LP
description: 生成りの地に建築写真を大きく敷き、明朝の小さな文字と細い線だけで構成した静かな住宅工務店 LP。装飾を削ぎ、余白と写真の陰影で上質さを出す。
colors:
  background: '#F1F1E9'
  background-alt: '#D5D5CD'
  primary: '#4E3B32'
  cta: '#4D3C33'
  on-cta: '#F4F4ED'
  text: '#2D302C'
  text-muted: '#97978C'
  line: '#DCDCD3'
  surface: '#F3F2EB'
  dark-section: '#3D3D3B'
  on-dark: '#F1F1EA'
  accent-1: '#887459'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.2em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.15em
  headline-sm:
    fontFamily: Shippori Mincho
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 7px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.05em
  label-button:
    fontFamily: Shippori Mincho
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.1em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 2px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 0px
  section: 100px
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}'
    rounded: '{rounded.sm}'
    height: 14px
  button-secondary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 14px
  text-link-arrow:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 16px
  vertical-concept:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 300px
  photo-category-strip:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 150px
  case-slider:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 190px
  event-card:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 180px
  news-list:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 28px
  split-cta:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 150px
---

# DESIGN.md — 生成り×焦茶の静謐な注文住宅 LP（Quiet Washi Architect Housing LP）

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

## Overview

- **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: 上品・高級、ナチュラル、和風、シンプル・ミニマル
- **キーワード**: 余白・建築写真・明朝の小文字・縦書き・生成り・細罫線
- **地の質感**: 和紙のような生成りの無地。光と影が柔らかい写真が質感を担う
- **形**: 角丸ほぼなしの矩形。ボタンも小さな角丸のみ
- **温度感**: やや暖かいニュートラル。木と漆喰の色

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F1F1E9` | ページ基本の生成り地 | 45% | 画素の実測 |
| `background-alt` | `#D5D5CD` | コンセプト縦書き帯のグレージュ地 | 8% | 画素の実測 |
| `primary` | `#4E3B32` | 予約ボタン等の焦茶 | 2% | 画素の実測 |
| `cta` | `#4D3C33` | 予約する主ボタン | 1% | 画素の実測 |
| `on-cta` | `#F4F4ED` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `text` | `#2D302C` | 見出し・本文の墨色 | 2% | 画素の主要色に補正 |
| `text-muted` | `#97978C` | 日付・カテゴリ等の灰文字 | 0% | 画素の主要色に補正 |
| `line` | `#DCDCD3` | リンク下線・リスト区切り | 0% | 画素の主要色に補正 |
| `surface` | `#F3F2EB` | サブボタンの白面 | 1% | 画素の実測 |
| `dark-section` | `#3D3D3B` | フッターの濃グレー地 | 8% | 画素の実測 |
| `on-dark` | `#F1F1EA` | フッター上の白文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#887459` | 写真内の木の焼き色 | 5% | 画素の主要色に補正 |

- 地は生成り一色が基本。コンセプト帯だけ一段濃いグレージュにする
- 色の面積は写真に任せ、UI 色は墨・灰・焦茶に限る
- 主ボタンのみ焦茶塗り、サブは白面に細枠
- フッターは濃グレーで締め、上に写真 2 分割の CTA を置く
- 彩度の高い色・グラデーションは使わない

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | コンセプトの縦書き見出し | 明朝 | Shippori Mincho | 500 | 16px | 1.8 | 0.2em |
| `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 500 | 13px | 1.6 | 0.15em |
| `headline-sm` | 事例名・イベント名 | 明朝 | Shippori Mincho | 500 | 10px | 1.6 | 0.08em |
| `body-md` | リード文・本文 | 明朝 | Noto Serif JP | 400 | 9px | 2.0 | 0.08em |
| `note` | 日付・カテゴリ・住所 | ゴシック | Noto Sans JP | 400 | 7px | 1.6 | 0.05em |
| `label-button` | ボタン・テキストリンク | 明朝 | Shippori Mincho | 500 | 9px | 1.4 | 0.1em |
| `accent` | 件数表示などの欧文数字 | 欧文セリフ | Cormorant Garamond | 400 | 9px | 1.4 | 0.05em |

- 文字は全体に小さく、余白で読ませる
- 見出しも太字にせず中字の明朝
- コンセプトは右から縦書きで複数段組み
- 字間は広め 0.08〜0.2em、行間 2 前後
- 注記類のみゴシックの灰文字
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。事例は写真横並びスライダー、イベントは 3 列カード
- **本文ブロックの幅**: 画面幅の約 85%
- **余白**: セクション間 100px、基本単位 8px、カード内 0px（375px 幅換算）
- 見出しを左、リード文を右に置く非対称 2 分割
- 写真は画面端まで裁ち落とし、左右にずらして配置
- テキストリンクは下線＋小さな矢印ピル
- 写真とテキストを互い違いに配置しリズムを作る
- セクション間は大きな余白のみで区切る

## Elevation & Depth

- 影は一切使わない
- 奥行きは写真の陰影と余白で表現

## Shapes

- **角丸**: 小 2px ／ 中 2px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの矩形。縦長・横長を混在
- **セクション境界**: 直線。境界線なしで余白か写真で切り替え
- 矢印アイコンだけ小さなピル型
- カードに枠や背景を付けない
- 写真同士は細い隙間で並べる

## Components

- **予約ボタン**（`button-primary`）: 焦茶塗りの小さな矩形に白い明朝文字
- **詳しく見るボタン**（`button-secondary`）: 白面に細い灰枠、墨文字
- **下線リンク**（`text-link-arrow`）: 文字の下に細線、右端に焦茶の小さな矢印ピル
- **縦書きコンセプト**（`vertical-concept`）: グレージュ帯に縦書きの見出しと複数段の本文
- **写真カテゴリ帯**（`photo-category-strip`）: 縦長写真を5枚横並びし左下に白文字ラベル
- **施工事例スライダー**（`case-slider`）: 写真列の下に種別・地域・事例名と枚数・矢印ボタン
- **イベントカード**（`event-card`）: カテゴリ小文字、写真、日付、タイトル、2ボタン
- **お知らせリスト**（`news-list`）: 日付とカテゴリ、タイトルを細罫線で区切る
- **写真2分割CTA**（`split-cta`）: 写真を暗くし中央に白文字の見出し・説明・リンク

## Do's and Don'ts

**Do**
- 写真を主役にして文字は小さく控えめに
- 余白を惜しまず取る
- 明朝を中字で使い、字間を広く
- 写真は自然光の柔らかい建築・暮らしのカット
- リンクは下線＋矢印で静かに見せる

**Don't**
- 太いゴシックや大きな見出しを使わない
- 赤や黄など強い色の強調をしない
- 角丸カード・影・グラデーションを使わない
- バッジや吹き出しで煽らない
- 写真に文字を重ねすぎない

## Page Structure

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

1. **ファーストビュー**（世界観を一枚で伝える）: 全幅の静物写真、中央に小さなロゴ、右上に小ボタン2つ、右下に短い一文
2. **お知らせ帯**（最新情報）: 細い一行帯に日付・カテゴリ・タイトル
3. **コンセプト**（家づくりの思想）: グレージュ帯に縦書きの見出しと本文
4. **カテゴリ導線**（主要ページへ誘導）: 縦長写真5枚を隙間なく並べ白ラベル
5. **施工事例**（実績を見せる）: 左見出し右リード、事例ごとに写真スライダーを縦に積む
6. **モデルハウス**（見学誘導）: 中央見出し、横スライドの大きな写真と住所
7. **住まいの基本**（性能・保証の導線）: リード文と下線リンク3本、下に全幅外観写真
8. **イベント**（予約獲得）: 3列×2段のカードに詳細・予約ボタン
9. **見学会・リノベーション・暮らし**（サービス紹介）: 写真とテキストを左右交互に配置
10. **サブ導線・お知らせ**（補足情報）: 左にリンクリスト右に写真、下にお知らせ罫線リスト
11. **CTA**（資料請求・見学予約）: 写真を2分割し白文字とリンク
12. **フッター**（サイトマップ）: 濃グレー地に4列のリンク

## Imagery

- 自然光で撮った木・漆喰・石の室内写真
- 彩度を抑えた柔らかい色調、影を残す
- 庭木の緑と外観を曇天の空で
- 器や花の静物で暮らしを示す
- 人物は手元や後ろ姿程度に留める
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は提供画像と同等の構成で、見出し左・本文右の 2 分割
- SP では見出しと本文を縦積みに
- イベントカードは SP で 1〜2 列に
- 写真の左右ずらし配置は SP では全幅に寄せる
- 縦書きコンセプトは SP でも縦書きを維持し段数を減らす

## 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-18b527a0`（元 LP の URL から採番）
- **元 LP**: https://neie.jp/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://neie.jp/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

住宅・不動産・リフォームフラットイラストとくすみ水色のペット共生リノベ LPFlat Illustration Pet-Friendly Renovation LP 住宅・不動産・リフォーム淡グレー×深緑の上質インテリアデザイン LPGallery Gray Interior Design Studio LP 住宅・不動産・リフォーム水色方眼×紺ボタンの防災住宅技術 LPBlue Grid Technical Disaster-Resilient Housing LP 住宅・不動産・リフォーム深緑写真×ライトグレーの静かな建築事務所 LPQuiet Forest Minimal Architecture LP 住宅・不動産・リフォーム生成り×紺の分譲住宅物件一覧 LPWarm Beige Property Listing LP 住宅・不動産・リフォーム生成りと若葉色の水彩造園 LPWatercolor Leaf Natural Garden LP