DESIGN.md — 生成り×紺の上品な住宅見学会 LP（Warm Greige Navy Open House LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、ナチュラル、信頼・誠実、シンプル・ミニマル
• キーワード: 生成り・濃紺・欧文セリフ見出し・実邸写真・漆喰テクスチャ・余白
• 地の質感: 漆喰や和紙のような白い塗り壁テクスチャと木目を背景にうっすら敷き、マットな質感を出す
• 形: カードは角丸なしか小さめの角丸。ボタンとタグはピル型。区切りには細い横線を使う
• 温度感: 温かみのある中間色に、濃紺で引き締めた落ち着いた温度感

Colors

• 地は生成り系 2 段階を交互に使い、白は物件カードや声カード、CTA 帯に限る
• 文字と線とボタン枠は濃紺に統一し、黒は使わない
• オレンジはボタン右端の丸アイコンだけに使う小さな差し色
• くすみティールはカテゴリラベルとサブ CTA アイコンだけに使う
• 淡いブルーグレーの帯は告知やピックアップの区画を分けるときに使う
• フッターは濃紺のベタ面に白文字

Typography

• セクション見出しは左揃えで、英字セリフの下に小さな和文を添える
• 情緒的なコピーは明朝、情報はゴシックで分ける
• 文字間は全体に 0.05〜0.12em ほど広めにとる
• 本文は小さめのサイズで行間を広くとり、静かな印象にする
• 背景を横切る英字コピーは白で大きく置き、セクションの境目に重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。物件一覧も縦に 1 件ずつ並べる
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 64px、基本単位 8px、カード内 14px（375px 幅換算）
• 左右の余白は約 17px
• 物件カードは中央に画像、その下に左揃えでラベル・日付・タイトル・タグ・詳細リンクを並べる
• カード同士は濃紺の細線で区切る
• ポイント紹介は画面いっぱいの写真に白文字を重ねる
• CTA ボタンは中央に置き、幅は約 60%

Elevation & Depth

• 影はほぼ使わず、地の色の差と線で階層をつける
• 特長セクションは木目背景の上に生成りのパネルを浮かせて重ねる
• 写真上の文字は下側を暗くするグラデーションで読みやすくする

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。ポイント紹介は全幅、物件写真は約 3:2
• セクション境界: 直線で地の色を切り替え、白い大きな英字の帯で境目を示す
• ボタン・都道府県バッジ・絞り込みチップはピル型
• カテゴリラベルは角丸なしの小さな四角
• ポイント番号は白い細線の円の中に入れる

Components

• アウトラインピル CTA（button-outline-pill）: 白地に濃紺 2px の枠線。文字は中央に置き、右端にオレンジの丸矢印アイコンを付ける
• 英字セリフ見出し（section-heading-en）: 濃紺の大きな英字セリフ体と、その下の小さなグレーの和文サブを左揃えで置く
• 物件カード（property-card）: 写真の右上に濃紺のピル型県名バッジ。下にティールのラベル、日付、タイトル、グレーのタグ、右寄せの詳細リンクを並べ、最後に区切り線を引く
• 絞り込みチップとタブ（filter-chip）: エリアは 4 分割のタブ。県はアウトラインのピル型チップで、選択中は濃紺で塗る
• ポイント写真パネル（point-photo）: 全幅の写真の左上に丸囲みの番号、下部に白い明朝の見出しと本文を重ねる
• 特長リスト行（feature-row）: 淡いグレーの角型アイコン、明朝の見出し、右側に白抜きの大きなセリフ数字を置き、細線で区切る
• お客様の声カード（voice-card）: 白いカード。上に小さな地域ラベル、線画アバターの横に濃紺の見出し、下に本文を置く
• FAQ アコーディオン（faq-item）: 丸枠の Q アイコン、質問文、右端の＋を置き、上下を細線で区切る
• 予約・資料請求の帯（cta-band）: 白い帯に小さな英字と明朝の大きな文字を置き、右端に丸アイコンを付ける。予約は濃紺、資料請求はティール

Do's and Don'ts

Do - 地は生成りとグレージュで落ち着かせ、濃紺で締める - 英字セリフ見出しには必ず小さな和文サブを添える - 写真は自然光の実邸写真を大きく使う - オレンジは小さな丸アイコンだけに使う - 情報は細い線と余白で区切る

Don't - 原色や蛍光色の大きな面を使わない - ボタンを濃い色のベタ塗りや強い影付きにしない - 太いゴシックの大見出しで煽らない - カードに大きな角丸やドロップシャドウを付けない - 純黒の文字を使わない

Page Structure

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

1. ファーストビュー（理想の住まいに出会える期待感をつくる）: スライド写真に小さなサムネイルを重ね、下に白帯を敷いた明朝のキャッチと短いリードを置く。背景には大きな白い英字コピーを流す
2. キャンペーンバナー（来場特典を伝える）: 淡いブルーグレーの帯の中央にバナー画像を置く
3. 物件検索（近くの見学会を探してもらう）: 英字見出しの下に地図、エリアタブ、県チップ、縦並びの物件カード、ページ送り、CTA を置く
4. 見学会とは（ポイント）（見学会ならではの価値を説明する）: 縦線と中央寄せの明朝見出しの後に、全幅の写真パネルを 3 つ重ねる
5. 特長（会社の強みを示す）: 木目背景の上に生成りのパネルを置き、アイコン・見出し・大きな番号の行を 4 つ並べる
6. お客様の声（参加者の実感で安心してもらう）: 白いカードを 4 枚縦に並べ、最後にもっと見るボタンを置く
7. ピックアップ事例（こだわりの施工事例で憧れをつくる）: ブルーグレー地に番号ナビ付きのカルーセル写真を置き、最後に CTA
8. よくある質問（来場前の不安をなくす）: 漆喰テクスチャの地に Q アイコン付きのアコーディオンを 4 つ並べ、一覧ボタンを置く
9. CTA 帯（予約と資料請求に誘導する）: 白い帯を 2 段重ね、英字ラベル・明朝の文字・丸アイコンを置く
10. フッター（会社情報とナビゲーション）: 濃紺の地に白文字の住所とリンク一覧を置き、下に写真付きのコーポレートサイト導線を置く

Imagery

• 自然光で明るく撮った吹き抜け・リビング・キッチンの実邸写真
• 家族が暮らしている様子を、構えないスナップ風に撮る
• 物件サムネイルには細い白枠や英字セリフのオーバーレイで統一感を出す
• アイコンは細い線画をグレー地の正方形に入れる
• 背景に漆喰テクスチャ・木目・ぼかしたオレンジの光を薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダー右に濃紺の予約ボタンとティールの資料請求ボタンを置く
• PC の FV はキャッチを縦書きの明朝にして、写真の左に置く
• PC の物件一覧は 3 カラム、お客様の声は 2 カラムにする
• PC の見出しは英字と和文サブを横に並べる
• PC の CTA 帯は予約と資料請求を左右に並べる

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