DESIGN.md — グレージュ×橙アクセントの注文住宅 LP（Warm Greige Family Housing LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、ナチュラル、情報量多め・訴求型
• キーワード: グレージュ・家族の暮らし写真・番号付き特長・折りたたみ・展示場予約
• 地の質感: フラットな面に写真を大きく敷く。影はごく薄く、紙のような落ち着いた質感
• 形: 写真は小さめの角丸。ボタンはピル型か角丸の帯。吹き出しは角丸の枠線
• 温度感: やや暖かい中間色。生成りと茶で温もりを出し、白とグレーで清潔感を保つ

Colors

• 地は白とライトグレーを交互に使い、特長ブロックはオフホワイトの面で囲む
• ブランドを示す面とボタンはグレージュ茶 1 色にそろえる
• 本文の中の強調はオレンジ文字だけで行い、太字や背景の色は使わない
• オレンジと青の強い色は、FV 直下の予約とカタログの 2 つの CTA だけに使う
• 見出しは濃いブラウン、本文は黒に近いグレーにして、真っ黒は使わない
• フッターはミディアムグレーにして、ページの区切りをはっきりさせる
• button-catalog は文字 #FFFFFF × 背景 #0D8CDA のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#0B7BC0、4.56:1）を使う。
• anchor-nav は文字 #6E6255 × 背景 #DED8C1 のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#675C4F、4.56:1）を使う。
• point-label は文字 #FFFFFF × 背景 #E08A1E のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A86716、4.55:1）を使う。

Typography

• 見出しは字間を広めに取り、2 行に改行して中央揃えにする
• 特長の番号は大きく細い欧文にして、薄いベージュで見出しの左に添える
• 本文は小さめにして行間を広く取る
• 数字の実績は太いサンセリフを大きくし、単位は小さくする
• 商品名の欧文はセリフ体の大文字にし、その下に小さくカナを添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。施工事例の写真は 2〜3 枚のグリッドにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 50px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長ブロックは、オフホワイトの面に番号・見出し・写真・本文を縦に並べる
• 長い解説は途中でフェードさせ、グレージュの『さらに見る』帯を重ねて折りたたむ
• 写真は左右に 10〜20px の余白を残して大きく置く
• 展示場一覧は左に写真、右に名称と住所と予約ボタンを置く横並びのリストにする
• 注釈は画像の直下に小さい文字でまとめる

Elevation & Depth

• CTA カードはごく薄い影と白い面で少し浮かせる
• イベントカードは白地に薄い影
• それ以外は影を使わずフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸 4〜8px の長方形。FV と大きな写真は角なしで画面幅いっぱいに置く
• セクション境界: 背景色の切り替えによる直線。上下にフェードさせて折りたたむ
• 予約ボタンはピル型にする
• 『さらに見る』は角の少ない帯にし、右に下向きの矢印を付ける
• タブは上の角だけ丸くする
• フィルターのタグは小さなピル型の枠線にする
• 吹き出しは角丸の枠線で、下にしっぽを付ける

Components

• 予約特典の CTA カード（cta-campaign-card）: 白いカードに特典金額を大きく見せ、下端にオレンジの帯ボタンを付ける
• カタログ請求ボタン（button-catalog）: 青い帯に白文字と下向きの矢印。上には黄色いマーカーを引いた見出しを置く
• ページ内ナビ（anchor-nav）: ベージュの帯を点線で 3 つに区切り、小さな文字と矢印を置く
• 番号付き特長（feature-number-block）: 小さなラベル、大きく細い番号、2 行の見出し、写真、本文で構成し、強調語はオレンジにする
• さらに見る帯（button-more）: グレージュの帯の中に白いピル型のラベルと 2 行の文字を置く。フェードした本文の上に重ねる
• お客様の声の吹き出し（voice-bubble）: 白い角丸の枠に 2 行の感想と地名を入れ、写真と本文を続ける
• 来場予約ボタン（button-reserve）: グレージュのピル型ボタンに白文字と右向きの矢印
• A〜D の丸ラベル（point-label）: 写真の上に半透明のオレンジ丸で英字を置き、下の解説と対応させる
• 枠線のサブボタン（button-outline）: 白地に茶色の細い枠線と右向きの矢印

Do's and Don'ts

Do - 家族がくつろぐ明るい室内写真を FV と各特長に大きく使う - 性能の要点は、本文中のオレンジ文字で 1 文だけ強調する - 長い解説は折りたたみ、『さらに見る』で開く構成にする - 実績の数字は、グレージュと白の 2 分割パネルで見せる - 展示場は、写真付きのリストと予約ボタンを繰り返して並べる

Don't - 彩度の高い色を背景の面に広く使わない - 見出しを真っ黒や極太の文字にしない - ボタンの色を増やさない（グレージュを基本にし、強い色は冒頭の 2 つの CTA だけにする） - 写真に強い影や太い枠を付けない - 本文を大きくして余白を詰めない

Page Structure

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

1. ファーストビュー（暮らしのイメージと実績で信頼を得る）: 家族の室内写真を全面に敷き、上部にキャッチを置く。下部に No.1 と棟数の 2 分割パネルを置く
2. CTA（来場予約とカタログ請求を促す）: 特典カードとオレンジの帯、無料の文言と青いボタンを縦に並べる
3. ページ内ナビ（主要なセクションへ移動させる）: ベージュの帯を 3 つに区切る
4. 商品ラインアップ（商品の幅を見せる）: セリフ体の商品名を重ねた外観写真、内観の 2 枚組、カルーセルで構成する
5. プラン提案（平屋・二世帯などの選択肢を示す）: 茶色の小見出し、月桂冠のバッジ、写真のスライダーを並べる
6. 期間限定商品（価格で訴求する）: 白いカードにオレンジの大きな価格、丸いバッジ、外観写真を置く
7. 実績の帯（世界一などの権威を示す）: グレージュの面に認定マーク、明朝の見出し、白いピル型ボタンを置く
8. 地域に合う理由（地域に合わせた導入にする）: 中央揃えの 2 行見出しと短い本文
9. 特長 01〜06（暖房・省エネ・換気・子育て・空間・耐震を説明する）: 番号付きブロック、図解、折りたたみの帯を繰り返す
10. 性能バナー（断熱性能の最高等級を強く訴求する）: 黒と金のグラデーションに白い極太の文字と外観写真を置く
11. お客様の声（実際の住み心地を伝える）: 吹き出し、家族写真、本文を並べ、『もっと見る』で折りたたむ
12. 展示場一覧（来場予約へ誘導する）: ベージュの枠の中に白い面を置き、タブ、キャンペーンのバナー、写真付きリストを並べる
13. イベント・カタログ（次の接点をつくる）: 薄い欧文の Event 見出し、カードのカルーセル、カタログ写真とピル型ボタンを置く
14. 体験館・フッター（体験施設への誘導とサイトナビを担う）: 写真 3 枚の帯、電話番号、グレーのフッター（アコーディオンのリスト）

Imagery

• 自然光が入る白い内装と木の床で、家族が笑顔でくつろぐ姿を撮る
• 外観は青空の下、植栽を入れて正面からやや斜めに撮る
• 特長写真は子どもや女性が床や寝具でリラックスしている場面にする
• 図解はやわらかいオレンジ・ピンク・黄緑で、かわいいキャラクターを添える
• 性能を示す写真は実験施設の実写で、信頼感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文幅を約 80% にして中央に置き、両側にグレーの地を見せる
• PC の特長ブロックは写真と文章を左右に並べ、左右を交互に入れ替える
• PC のナビは 3 項目と CTA 2 つを横一列に並べる
• PC の展示場一覧は 3 カラムのカードにする
• 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 行書くと起動時に読み込まれる。