グレージュと木目のリノベーション LP

Warm Gray Minimal Renovation LP

白とライトグレーの地に、グレージュ（くすんだ茶）のピル型ボタンと黒のフッターを合わせたミニマルな住宅リノベーション LP。大判のインテリア写真と細い欧文見出しで、落ち着いた上質さを出している。

住宅・不動産・リフォームシンプル・ミニマル上品・高級ナチュラル信頼・誠実PC

ダウンロード

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

COLORS

配色

地は白を基本に、淡グレーとベージュの帯で区切る
ボタンはグレージュブラウン塗り＋白文字のピル型に統一
強い色は最下部のお問い合わせ帯のくすみブルーだけ
フッターとオンライン展示の帯は黒に近いチャコール
写真の色を主役にし、UI色は彩度を抑える

TYPOGRAPHY

書体

displayファーストビューの欧文コピー欧文セリフ／ Cormorant Garamond 400 ／ 34px ／行間 1.5

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

headline-lgセクションの欧文見出し欧文サンセリフ／ Raleway 400 ／ 26px ／行間 1.2

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

headline-md和文リード見出しゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.7

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

headline-sm事例・記事カードのタイトルゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.6

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

body-md本文ゴシック／ Noto Sans JP 400 ／ 14px ／行間 2.0

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

note見出し下の和文小見出し・日付・注釈ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

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

accent特集帯の筆記体タイトル欧文スクリプト／ Great Vibes 400 ／ 40px ／行間 1.2

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

label-buttonボタン文字ゴシック／ Noto Sans JP 500 ／ 12px ／行間 1.0

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

セクション見出しは細い欧文の大文字＋下に小さい和文訳の 2 段
和文見出しは字間を広めにとる
本文は行間 2.0 前後でゆったり組む
筆記体は特集帯の 1 か所だけに使う
太字の多用を避け、文字色は黒とグレーの 2 段階

PAGE STRUCTURE

セクション構成

ファーストビュー世界観を伝える全幅のインテリア写真に白い欧文セリフのコピー。右下に事例のキャプションボックス
コンセプト考え方を伝える写真を 3 枚コラージュし、隣に字間の広い和文見出しと本文、ピルボタン
施工事例実績を見せる左に見出しとボタン、右に 3 列の事例カードグリッド
サービス事業領域を案内する上段 2 枚・下段 3 枚の全幅写真タイルに白文字のタイトル
特集魅力を印象づけるベージュ地に筆記体タイトル、写真 3 枚と短いキャプション
流れ手順を示す5 つの円形ステップを横線でつなぐ
店舗案内来店を促す左に住所とボタン 2 つ、右に店舗写真のスライダー
口コミ信頼を補強する淡グレー地に星評価と口コミカードのカルーセル
お知らせ活動の新しさを伝える白パネルの中にサムネイル付きリストを 2 列で並べる
コラム情報で集客する横スクロールの記事カードと丸い送りボタン
CTA問い合わせへ誘導するオンライン展示の暗色バナー、細枠のリンク 2 つ、ブルーの問い合わせ帯、SNS アイコン
フッターサイト内を回遊させるチャコール地に多列のテキストリンク

COMPONENTS

部品

グレージュのピル型ボタン button-primary小さめの塗りボタン。白文字と右矢印
欧文＋和文の見出し section-heading細い欧文の大見出しの下に、小さい和文訳を添える
施工事例カード work-card写真の下に細枠のタグピル、太字タイトル、灰色の面積・費用データ
サービス写真タイル service-tile全幅の写真の左下に白の欧文タイトルと和文の説明
工程ステップ flow-step淡ベージュの円にアイコンと STEP 番号。円どうしを細線でつなぐ
口コミカード review-cardアバター、名前、星評価、本文抜粋の白カード
問い合わせ帯 contact-bannerくすみブルーの横長バナー。欧文タイトル、和文の説明、右矢印
オンライン展示バナー dark-bannerチャコール地に細い欧文タイトル、間取り CG、黒のピルボタン

守ること

写真を大きく見せ、文字は控えめに
ボタンはグレージュのピル型で統一する
見出しは欧文と和文の 2 段構成にする
余白をたっぷりとる
背景は白・淡グレー・ベージュを交互に使う

DON'T

避けること

原色や蛍光色をボタンに使わない
太く重い和文見出しを並べない
写真に角丸や装飾枠をつけない
グラデーションや強い影を使わない
筆記体を何度も使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（世界観を伝える）: 全幅のインテリア写真に白い欧文セリフのコピー。右下に事例のキャプションボックス
コンセプト（考え方を伝える）: 写真を 3 枚コラージュし、隣に字間の広い和文見出しと本文、ピルボタン
施工事例（実績を見せる）: 左に見出しとボタン、右に 3 列の事例カードグリッド
サービス（事業領域を案内する）: 上段 2 枚・下段 3 枚の全幅写真タイルに白文字のタイトル
特集（魅力を印象づける）: ベージュ地に筆記体タイトル、写真 3 枚と短いキャプション
流れ（手順を示す）: 5 つの円形ステップを横線でつなぐ
店舗案内（来店を促す）: 左に住所とボタン 2 つ、右に店舗写真のスライダー
口コミ（信頼を補強する）: 淡グレー地に星評価と口コミカードのカルーセル
お知らせ（活動の新しさを伝える）: 白パネルの中にサムネイル付きリストを 2 列で並べる
コラム（情報で集客する）: 横スクロールの記事カードと丸い送りボタン
CTA（問い合わせへ誘導する）: オンライン展示の暗色バナー、細枠のリンク 2 つ、ブルーの問い合わせ帯、SNS アイコン
フッター（サイト内を回遊させる）: チャコール地に多列のテキストリンク

Imagery

自然光で撮る明るいインテリア写真。木の床、白い壁、コンクリートを入れる
広角で水平垂直をそろえ、生活感は少なめにする
建物の外観は青空を背景にする
写真に文字を重ねるときは暗い部分に白文字を置く
アイコンは細い線画をベージュの円に入れる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC の左右分割（見出し＋説明、写真＋本文）は SP で縦積みにする
事例グリッドは PC 3 列、SP 2 列にする
サービスタイルは SP で 1 列の全幅写真にする
工程ステップは SP で縦並びか横スクロールにする
グローバルナビは SP でハンバーガーメニューにし、右上の 2 ボタンは残す

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: 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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.a-find.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