DESIGN.md — グレージュと煉瓦色の上質な住宅 LP（Calm Greige Architectural Housing LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、信頼・誠実、シンプル・ミニマル、ナチュラル
• キーワード: 建築写真・グレージュ・明朝見出し・大きな番号・余白・データ訴求
• 地の質感: フラットな単色面と高品質な室内写真。影はほぼ使わない
• 形: 角丸なしの四角が基本。円グラフと人物アイコンの円形がアクセント
• 温度感: やや温かいニュートラル（グレー＋ブラウン）

Colors

• 白地と薄グレー地を交互に置いてセクションを分ける
• データや図版はくすんだオリーブブラウン1色でまとめる
• 煉瓦色は資料請求CTAとその枠だけに使う
• 来場予約は黒枠と黒ボタンで、資料請求と役割を分ける
• 鮮やかな色は図解の矢印など説明用だけに抑える
• 数字の強調も墨色のまま。色ではなく大きさで目立たせる

Typography

• 情緒的な大見出しは細めの明朝で、字間を広く取る
• データやプラン名は太いゴシックで明快に見せる
• 特長番号は大きな細い欧文セリフを白や淡いグレーで敷く
• 本文は小さめにして行間を2.0とり、余白を生かす
• 写真ラベルは白地に黒い欧文セリフで左上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文の 2 カラムを左右交互に置き、データは 3 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面端まで寄せ、テキストは反対側に余白多めで置く
• 番号見出しは薄グレーの帯を左右どちらかに寄せて配置
• CTAブロックは各章の区切りに繰り返し挿入
• 声カードは左上に人物アイコン、右と下に細い罫線

Elevation & Depth

• 影は使わずフラットに作る
• 奥行きは写真と面色の重なりで出す
• カードは細い罫線か色の枠で区切る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形の全面写真。斜めの線で2枚を分割したコラージュも使う。円形クロップはデータ用
• セクション境界: 直線の切り替え。グレー帯を左右にずらしてリズムを出す
• ボタンとカードは角丸なし
• 円は円グラフと人物アイコンだけ
• 吹き出し型の小見出しは角丸の細線枠に下向きの三角

Components

• 資料請求ボックス（cta-catalog-box）: 煉瓦色の太枠の中に冊子写真3点と見出し・ボタン。左上に円形の煉瓦色バッジ
• 資料請求ボタン（button-primary）: 煉瓦色の角ばったボタン。先頭に小さな矢印
• 来場予約ボックス（cta-visit-box）: 黒い太枠。左に見出しと黒ボタン、右に外観写真
• 来場予約ボタン（button-dark）: 黒地に白文字の角ばったボタン
• 円グラフ統計（stat-pie）: 人物写真の上にオリーブ色の円グラフを重ね、白い大きな数字と％
• 吹き出し小見出し（speech-label）: 細線の角丸枠に問いかけを入れ、下に三角
• 番号つき特長見出し（numbered-heading）: 薄グレーの帯に明朝見出しと大きな白い細番号
• 利用者の声カード（voice-card）: 線画の人物アイコンと太字の要約、属性、本文。右と下に罫線
• 写真ラベル（photo-label）: 写真左上に白地の英字ラベル、右下に白地の短い説明
• 年数タイムライン（timeline-bar）: 濃茶とベージュの矢羽型の帯に年数を並べる

Do's and Don'ts

Do - 余白を大きく取り、写真を主役にする - 数字のデータは円グラフと大きな欧文数字で見せる - CTAボックス2種をセットで何度も入れる - プランごとに写真の並びを左右交互に替える - 声は線画アイコンと罫線で控えめに見せる

Don't - 角丸やピル型ボタンは使わない - 原色や蛍光色を面に使わない - 影やグラデーションの装飾をつけない - 見出しを詰めて組まない（字間は広く） - 煉瓦色をCTA以外に多用しない

Page Structure

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

1. ファーストビュー（上質な暮らしと実績を印象づける）: 全面の室内写真に明朝のコピーを白帯で重ね、右下に黒地の受賞バッジ
2. CTA（資料請求・来場予約）（早めの行動を促す）: 煉瓦色枠の資料請求と黒枠の来場予約を縦に並べる
3. データ提示（需要と満足度を数字で示す）: グレー地に円グラフを大1つ・小3つ。吹き出しの小見出しを添える
4. ブランド訴求（長く満足できる家だと伝える）: 大きな明朝4行と、白い外観写真を右下に配置
5. 特長1：プラン紹介（住まい方の選択肢を見せる）: 番号見出しの後、3プランを写真コラージュと声カードで左右交互に紹介
6. CTA（途中で資料請求を促す）: 資料請求ボックスを再掲
7. 特長2：性能（技術を図解で伝える）: 番号見出しの後、断面図と床構造の図解。文と図を左右に並べる
8. 特長3：耐久・点検（長く安心できると示す）: 耐用年数を示す構造イラストと矢羽型の年数タイムライン
9. 特長4：安全性（災害への強さを示す）: 番号見出しと構造躯体の全面写真
10. クロージングCTA（資料請求と来場予約へ送る）: 冒頭と同じCTAボックス2種

Imagery

• 暖かい間接照明の広い室内を、広角で低めの位置から撮る
• 白い外壁の外観は白背景に切り抜き、植栽を添える
• 家族写真は自然光で穏やかな表情。円グラフの下に敷く
• 断面図や構造の図解はベージュ・グレー基調にオレンジ矢印
• 人物アイコンは細い黒の線画
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は文と写真の 2 カラム。SP では写真を先、文を後にして縦に積む
• データの3カラム円グラフは SP で縦並び、または2+1に組み直す
• CTAボックスは SP で写真を上、文とボタンを下にする
• 番号見出しのグレー帯は SP では全幅にし、番号は右上に置く
• 大見出しは SP で 26〜28px にして改行を整える

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