DESIGN.md — グレージュ×チャコールの上質モデルハウス LP（Greige Monotone Model House LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、シンプル・ミニマル、信頼・誠実
• キーワード: 無彩色・グレージュ・明朝本文・英字見出し・余白・線画イラスト
• 地の質感: フラットな単色面。影やグラデーションはほぼ使わず、写真と細い線画で質感を出す
• 形: 角丸ゼロの長方形。ボタン・カード・写真すべてシャープな四角
• 温度感: やや暖かみのあるニュートラル。グレージュとゴールドベージュでほんのり温度を足す

Colors

• 地は白→グレージュ→薄グレーを交互に置き、セクションの切り替えを色面で示す
• 予約ブロックとフッターだけチャコール面で締める
• 主 CTA はくすんだゴールドベージュ、電話ボタンは黒。この 2 色を縦に並べる
• 彩度の高い色は使わない。色味は写真のインテリアに任せる
• 人物写真はモノクロにして、全体を無彩色にそろえる
• button-primary は文字 #FFFFFF × 背景 #A19273 のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#847558、4.5:1）を使う。
• slider-arrow は文字 #FFFFFF × 背景 #A19273 のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#847558、4.5:1）を使う。
• tab-bar は文字 #F5F8F5 × 背景 #898D90 のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#6E7275、4.54:1）を使う。

Typography

• 見出しは英字大文字＋小さな日本語訳の 2 段にして中央に置く
• 日本語は全部明朝。ゴシックは使わない
• 本文は字間を広め、行間 2 以上でゆったり組む
• 太字は英字見出しだけ。日本語は細めのまま
• 写真ラベルは白い短冊に縦書きで置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ギャラリーは写真を横にずらして並べる
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション上下に 70〜90px の余白
• 本文の左右余白は約 26px
• スライダーは中央 1 枚＋左右に隣のカードを少し見せる
• 予約ブロックは左右 15px 内側に入れたチャコール箱
• 背景の色面は画面いっぱいに広げる

Elevation & Depth

• 影はほぼ使わない。フラットな面
• 重なりは写真の上に白い短冊を置く程度
• 地図だけ埋め込み UI の軽い影がある

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。縦長・正方形・横長を混ぜてずらして配置
• セクション境界: 直線の背景色の切り替えだけ
• ボタンは角丸ゼロの四角
• スライダー矢印だけゴールドベージュの正円
• 細い線画イラストを余白の隅に添える

Components

• 予約ボタン（button-primary）: カレンダーアイコン＋文言＋細い右向き矢印。幅いっぱいの四角
• 電話ボタン（button-tel）: 受話器の線アイコン＋電話番号。黒地に白文字
• 予約ボックス（reserve-box）: 英字見出し・悩みの問いかけ・中黒の箇条書き 5 つ・ボタン 2 つを入れたチャコールの箱。途中で 2 回繰り返す
• 英字＋和文見出し（section-heading）: 大文字英字の下に小さな日本語訳を中央に置く。PC では横並びにして斜線で区切る
• 縦書き短冊ラベル（photo-label）: 写真左上の白い縦長短冊に、部屋名を縦書きで入れる
• スライダー矢印（slider-arrow）: ゴールドベージュの円に白い細い山形の矢印
• スタッフ紹介カード（profile-card）: モノクロ人物写真の下に薄グレーの面を置き、役職・英字の名前・本文・線画イラストを入れる
• 特徴タブ（tab-bar）: 横スクロールのテキストタブ。選択中はグレー面に白文字、下に細線
• お知らせリスト（news-list）: 上下をグレーの細線で区切り、日付と本文を 2 段で並べる

Do's and Don'ts

Do - 日本語の文字は全部明朝体にする - 写真は明るく白っぽいインテリアを大きく使う - 予約ボックスはページの途中で繰り返す - 人物写真はモノクロにする - 余白の隅に細いグレーの線画を添える

Don't - 彩度の高い色やグラデーションのボタンは使わない - 角丸・ピル型・ドロップシャドウは付けない - 太いゴシックで強く訴求しない - 派手なバッジや吹き出しを置かない - セクションの間を詰めすぎない

Page Structure

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

1. ファーストビュー（モデルハウスの空気感を一目で伝える）: リビングの全面写真の下部に半透明の黒帯。明朝の白文字 3 行を中央に置き、右上に黒四角のハンバーガー
2. モデルハウス紹介（部屋ごとの魅力を見せる）: グレージュ地にスライダー。縦書き短冊ラベル、丸い矢印、下に明朝の説明文
3. ギャラリー（内外観をまとめて見せる）: 白地に大小の写真を 3 段ずらして並べ、下にリード見出しと本文
4. 来場予約 CTA（見学したい悩みに共感させて予約へ誘う）: チャコールの箱に問いかけ、箇条書き 5 項目、ゴールドの予約ボタンと黒の電話ボタン
5. 間取り（建物の構成を伝える）: 白地にグレー線の間取り図を 1 階・2 階で縦に並べ、方位記号を添える
6. メッセージ（家づくりの姿勢を伝える）: 写真 3 枚を段違いに並べ、本文の脇に線画。背景に薄い縦書き英字
7. スタッフ紹介（設計者・コーディネーターへの信頼をつくる）: モノクロ人物写真＋薄グレーカードに役職・名前・コメントと線画
8. 来場予約 CTA（再掲）（読み終えた人をもう一度予約へ誘う）: 同じチャコールの予約ボックスを繰り返す
9. 特長（メーカーの強みを伝える）: 横スクロールのタブで切り替え、写真スライダーと本文
10. 新着情報（キャンペーンやお知らせを伝える）: 薄グレー地に細線で区切ったリスト
11. トピックス（関連施設・分譲地へ誘導する）: 横長のバナー画像を縦に 2 枚
12. フッター・アクセス（所在地と予約方法を示す）: チャコール地に所在地、地図、電話アイコンと大きな番号、予約フォームボタン、コピーライト

Imagery

• 自然光で明るく白飛び気味に撮ったインテリア写真。グレーのソファと観葉植物が基本
• 外観は白い石調の壁や木目のドアを青空の下で撮る
• 人物は無地の背景の前でモノクロのポートレート
• 家具・照明・家族を描いた細いグレーの線画を余白に添える
• 間取り図はグレーの壁線と点線の動線矢印で描く
• 背景に大きな英字を縦書きで極薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では見出しを英字＋斜線＋日本語訳の横並びにする
• PC のモデルハウス紹介は左に大きな写真、右にサムネイル列と本文
• PC のギャラリーはグレーの帯の上で写真をモザイク状に並べ、白いテキストボックスを重ねる
• PC の予約ボックスは横長にして、見出し・箇条書き・ボタンを 3 列に並べる
• PC のスタッフ紹介は写真と文を左右交互に置く
• PC の特長は左に縦のタブ、中央に写真、右にグレーの本文ボックス

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