DESIGN.md — 紺×金×グレージュの分譲住宅 LP（Navy and Gold Suburban Housing Development LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: 紺と金・明朝体の見出し・グレージュの帯・数字で示す徒歩分数・欧文セリフの章タイトル・暮らしの写真
• 地の質感: フラットな単色の面に写真を組み合わせる。金はグラデーションのリボンやボタンで光沢を出す。
• 形: 角が四角い写真とボックスが基本。円形の訴求バッジや、両端が尖ったリボン帯、丸いピル型ボタンをアクセントに使う。
• 温度感: やや涼しめ。紺と白を中心に、グレージュや生成りで少し温かみを足す。

Colors

• 地は白を基本に、章ごとにグレージュの帯を挟んでリズムを作る。
• 見出しと本文の文字は黒ではなく濃紺に統一する。
• 紺の面はアコーディオン・ラベル帯・バッジなど小さな面だけに使う。
• 金はリボン帯と主 CTA だけに使い、特別感を出す。
• 数字の強調は臙脂か紺の大きな文字で行う。
• 終盤の区画図と CTA の前は鮮やかな青の全幅面にして、締めくくりを目立たせる。

Typography

• 情緒的な見出しとリード文は明朝、データと説明はゴシックで分ける。
• 章タイトルは欧文セリフの大文字にし、下に「── 和訳 ──」を罫線つきで小さく添える。
• リード文はセンター揃えで、行間 2 倍以上の長めの改行にする。
• 数字だけを 2 倍ほど大きくし、単位は小さくする。
• 注釈は 10px の灰色で、写真やボックスのすぐ下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真 2 枚の横並びと、データ 2 列の対比だけ 2 カラムにする。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は 16px。ヒーロー写真・章の扉写真は全幅で敷く。
• 各テーマは「見出し→写真→リード→データボックス→徒歩分数リスト→写真2枚→注釈」の順で繰り返す。
• 徒歩分数のリストは紺の細い線で区切って縦に積む。
• 性能の章はグレージュの大きな枠の中に白カードを入れて二重にする。
• 章の扉は写真の上部を白にフェードさせ、見出しを重ねる。

Elevation & Depth

• 基本は影なしのフラット。
• 横スライドのカードだけに薄い影（0 2px 8px rgba(0,0,0,.1)）をつける。
• ピル型の白ボタンは青地の上に置き、影はつけない。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。右下に小さく「image」と表記する。
• セクション境界: 直線で背景色を切り替える。資料請求の見出し帯の下には下向きの三角を付ける。
• 円形のバッジに訴求キーワードを入れ、2 個並べて少し重ねる。
• 金のリボン帯は両端を矢羽根形に切る。
• 仕様カードは紺の 1px 枠で角丸 8px にする。
• 区画図ブロックは角丸 16px の白いパネルにする。

Components

• 金グラデーションの主 CTA（button-primary）: 金のグラデーションのピル型ボタン。左端に紺のひし形と矢印アイコンを置く。
• 白いピル型サブボタン（button-pill-white）: 青地の上に置く白いピル型ボタン。紺の文字で、右端に紺の丸い点を付ける。
• 紺のアコーディオン帯（accordion-navy）: 紺の帯に白の明朝文字を置き、右にシェブロンを付ける。章へのナビとして 3 本縦に並べる。
• 金のリボン帯（ribbon-gold）: ヒーローのタイトル下に置く、斜めに傾いた金の帯。アクセスの分数を大きく入れる。
• 紺のラベル見出し（label-navy）: 小見出しを紺の帯に白抜きで入れる。下には全幅の紺の細線を引く。
• 施設数データボックス（data-box）: グレージュの面に施設名と大きな数字を 2 列で並べる。中央に縦線を引き、下に出典の注釈を入れる。
• 円形キーワードバッジ（badge-circle）: グラデーションの円に白文字で特長を 2〜3 行入れる。2 つを少し重ねて並べる。
• 枠線の仕様カード（spec-card）: 白地に紺の細い枠を付けた角丸カード。太字の見出しと説明文を入れる。
• 電話番号ボックス（tel-box）: 臙脂の細い枠の中に、イタリックの大きな番号と受付時間を入れる。

Do's and Don'ts

Do - 見出しとリード文は明朝・センター揃えにし、余白を広くとる。 - 距離や件数は「徒歩約◯分」「◯か所」のように数字で示し、数字を大きくする。 - 章ごとに欧文タイトル＋和訳サブタイトルの形をそろえる。 - 写真の下には撮影日やイメージ表記などの注釈を小さく添える。 - 白とグレージュの帯を交互に置いて、情報の区切りを見せる。

Don't - 原色の赤やオレンジを主役の色に使わない（キャンペーンのバナーだけは例外）。 - 丸ゴシックや手書き風の書体を使わない。 - 金を本文や広い面に使わない。 - 写真に大きな角丸やイラストの枠を付けない。 - 1 つのセクションに複数の CTA ボタンを並べない。CTA は末尾にまとめる。

Page Structure

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

1. ファーストビュー（物件名とアクセスの良さを一目で伝える）: 全幅の室内写真の上に紺の物件名パネルと金のリボン帯を重ねる。下部に白帯の明朝キャッチを置く。
2. コンセプト（暮らしの価値観を伝える）: 欧文セリフの大見出しの下に、センター揃えの明朝リード文を 8 行ほど並べる。
3. 街づくりの紹介（住宅と街の 2 つの強みを示す）: グレージュ地に紺のリボンバッジを置き、大きな白い円の中に円形バッジを並べる。続けて受賞ロゴと枠付きの説明を置く。
4. 章ナビ（3 つのテーマへ誘導する）: 紺のアコーディオン帯を 3 本縦に並べる。
5. 交通利便性（通勤のしやすさを示す）: 航空写真に地点ラベルを付ける。欧文タイトルの後に、写真とグレージュのボックスで分数を大きく見せ、線路の路線図を添える。
6. 動画紹介（物件の雰囲気を動画で伝える）: 明朝の見出しの下に動画の埋め込みを全幅で置く。
7. 子育て・医療・公園・買い物（周辺環境の安心感を伝える）: テーマごとに、見出し→写真→リード→データボックス→徒歩分数リスト→写真 2 枚の順で繰り返す。
8. 周辺地図・街並みの計画（位置関係と景観のこだわりを伝える）: イラストの地図を全幅で置き、写真のコラージュと横スライドのカードで計画を紹介する。
9. 住宅性能（スマート）（省エネ設備を説明する）: グレージュの大きな枠の中に白カードを置き、設備ごとに見出し・説明・写真を縦に並べる。
10. 住宅性能（レジリエンス）（災害への強さを伝える）: 紺のラベル見出しで区切り、ラベンダー面・枠線の仕様カード・3 つのキーワード枠を使う。
11. サポート（入居後の安心を伝える）: 同じ二重の枠の中で、セキュリティと長期保証を写真付きで紹介する。
12. 区画図（区画数と配置を示す）: 青の全幅面に角丸の白パネルを置き、外観パース・円で囲んだ区画数・緑の区画図・ショールームのバナーを入れる。
13. CTA（来場予約・資料請求に誘導する）: 白のピル型ボタン、モーブの見出し帯と三角、キャンペーンバナー、金のボタン 2 つ、電話番号ボックスの順に並べる。
14. フッター（会社情報と規約へのリンクを示す）: 白地にロゴと規約リンクをセンター揃えで縦に並べる。

Imagery

• 明るい自然光の中の、木の床と白い壁のモデルハウス室内写真。
• 緑の多い公園や並木で家族が歩く後ろ姿や、子どもの笑顔の写真（右下に image 表記）。
• 晴天の航空写真に、白枠の地点ラベルと線を重ねる。
• 周辺施設は青空の正面外観を 2 枚並べる。
• 夕暮れの外観パースで、窓の暖色の明かりが見える写真。
• 線画の路線図やイラスト地図は紺・臙脂・淡い色で整理する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 800px にし、中央寄せにする。
• ファーストビューは写真を左右に分割し、キャッチ文を縦書きの明朝にする。
• 円形バッジは 2 つ横並び、アコーディオン帯も 3 列横並びにする。
• 徒歩分数のリストは縦線で区切って 3 列横並びにする。
• 性能カードや仕様カードは 2〜3 列のグリッドに広げる。
• CTA の金ボタンは 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 行書くと起動時に読み込まれる。