DESIGN.md — グレージュ×金茶の上質な注文住宅 LP（Warm Greige Premium Housing LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型
• キーワード: グレージュ・金茶・大判写真・番号付き性能訴求・折りたたみ詳細・実績数値
• 地の質感: フラットな単色の面。ところどころに薄い方眼の地紋を敷く
• 形: 角丸は控えめ。ボタンは小さな角丸の帯型と、白いピル型の 2 種類
• 温度感: やや暖かい中間色。グレーに生成りと茶を混ぜた落ち着いた温度

Colors

• 地はグレー（#F1F0EF）と白を交互に使ってセクションを分ける
• 金茶は展開ボタン・実績帯・ナビの矢印など、面の締めに限定して使う
• 本文中の強調はオレンジ文字だけにする。太字や背景色は付けない
• 番号数字は薄いベージュにして、見出しより弱く見せる
• 緑は期間限定の価格訴求にだけ使い、ほかには広げない
• CTA のオレンジ帯はファーストビューと店舗案内に集中させる
• button-expand は文字 #FDF9EA × 背景 #968562 のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7F7053、4.58:1）を使う。
• button-primary は文字 #FDF9EA × 背景 #DB850C のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A36309、4.58:1）を使う。
• tag-label は文字 #FDF9EA × 背景 #E08A1E のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A16316、4.62:1）を使う。

Typography

• 本文は字間を広め（0.08em）、行間を 1.8 前後にして余裕を持たせる
• 見出しは 2 行に分け、中央揃えか左揃えにする
• 番号は細身のセリフ体で大きく置き、横に見出しを左揃えで並べる
• 商品名は細身の欧文セリフ体の大文字にし、カナ読みを小さく添える
• 数値実績は太いゴシックで大きくし、単位は小さくする
• 注釈は本文より 3〜4px 小さくし、グレーで添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の小グリッドは 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 性能訴求は『ラベル＋番号＋見出し → 写真 → 本文』の順で揃える
• 性能ブロックはグレー地、補足ブロックは白地にして交互に並べる
• 詳細は高さを制限して下をフェードさせ、金茶の展開ボタンを重ねる
• 写真は左右に約 18px の余白を取って置く。キービジュアルだけ全幅にする
• 商品写真はカルーセルにし、左右に白い丸の矢印を置く

Elevation & Depth

• 影はほとんど使わずフラットにする
• 展開ボタンの上には白へのグラデーションのフェードを重ねる
• 吹き出しや実績カードは細い線か白地で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角か、わずかに角を丸める。要所の写真カードだけ角を大きく丸める
• セクション境界: 直線で地色を切り替える。区切りには細い横線を使う
• 展開ボタンは角の小さい金茶の帯にし、上に白いピル型の小ラベルを載せる
• 実績帯の中のボタンだけ白いピル型にする
• アイコンや丸ラベルは正円にする
• 吹き出しは角丸の白い枠にして、下に尾を付ける

Components

• 展開ボタン（button-expand）: 金茶の帯に白い小ピルの『さらに』と、下向き矢印。フェードした本文の上に重ねる
• 店舗案内 CTA（button-primary）: オレンジ帯に白文字と下向き矢印。上に特典の白カードを載せる
• 白ピルボタン（button-pill-white）: 金茶の帯の上に置く白いピル型。文字は濃いグレーで右に矢印
• 番号付き見出し（feature-number-heading）: 小さな茶色のラベルの下に大きな薄い番号を置き、右に 2 行の見出し
• 実績数値バッジ（stat-badge）: 左の金茶の箱に順位、右の白箱に棟数を大きく書く 2 分割
• ページ内ナビ（anchor-nav）: ベージュ地に 3 項目を縦線で区切り、下に矢印
• カテゴリタグ（tag-label）: オレンジ地に白文字の小さなピル型。小見出しの上に置く
• お客様の声の吹き出し（voice-bubble）: 白い角丸の枠に要約を 2 行、地域名と名前を小さく添える
• 丸囲みアルファベット（circle-letter）: 写真上の位置を示すオレンジの丸の英字と、本文の見出しを対応させる

Do's and Don'ts

Do - 性能訴求は番号を振って同じ型で繰り返す - 本文のキーワードは 1 段落に 1〜2 か所だけオレンジにする - 写真は明るい自然光の室内と、青空の下の外観を使う - 長い説明は折りたたんで、展開ボタンで続きを見せる - 数値の実績には注釈を必ず添える

Don't - 彩度の高い原色の背景を広い面に使わない - 強い影や立体的なボタンを使わない - 金茶とオレンジを同じボタンに混ぜない - 明朝体を本文に使わない（欧文セリフ体は番号と商品名だけ） - 写真の上に文字をたくさん重ねない

Page Structure

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

1. ファーストビュー（地域名と快適・安心の価値を伝え、実績で信頼をつかむ）: 青空と外観の全幅写真に白い 2 行のキャッチを置く。下に実績バッジと注釈を並べる
2. 来場特典 CTA（Web 予約での来場を促す）: 白カードに特典金額を大きく書き、下にオレンジの店舗案内帯を付ける
3. ページ内ナビ（主要セクションへ移動させる）: ベージュ地に 3 分割のリンクと下向き矢印
4. 商品ラインアップ（住宅商品の幅を見せる）: 茶色の大見出しの下に、欧文セリフの商品名と外観写真。続けてカルーセルと注釈
5. プラン提案（平屋・3 階建てなどの選択肢を示す）: 小見出しごとに写真と短い説明を左右に並べる。月桂冠の実績バッジを添える
6. 限定商品訴求（期間限定の価格で引き付ける）: 白カードの角に緑の丸バッジを置き、価格を大きく緑で書く
7. 実績帯（受注実績で権威を示す）: 金茶の全幅面に白文字の実績と室内写真を置き、白ピルの CTA を付ける
8. 性能訴求（番号付き）（暖かさ・省エネ・耐震などの価値を順に説明する）: グレー地に番号付き見出し・写真・本文。白地の補足と図解、展開ボタンが続く
9. 特別性能の訴求（最高等級の断熱性能を強調する）: 生成りの箱に極太の造語見出しを上下の線で挟み、本文と外観写真を置く
10. お客様の声（オーナーの実感で後押しする）: 吹き出しの要約、室内写真、長めの本文の順に並べる
11. 展示場一覧（来場予約へつなげる）: エリアタグで絞り込み、外観写真のカードを並べて各カードに予約ボタンを付ける
12. イベント・資料請求（来場以外の接点を作る）: イベントカードのカルーセルと、カタログ請求の白カード

Imagery

• 外観は青空の下で撮り、植栽を含めてやや見上げる構図にする
• 室内は白木の床と白壁で、自然光が入る明るい写真にする
• 家族やモデルの自然な暮らしの場面を入れる
• 仕組みはパース図や断面図に、オレンジの丸ラベルや矢印を載せて説明する
• アイコンはシンプルな線画で、太陽・雲などに補色を少し使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 1000px で中央に置き、左右はグレー地にする
• PC のヘッダーは横並びのナビにして、右端にオレンジの CTA を固定する
• 番号付き性能ブロックは PC で写真と文章の 2 カラムにし、左右を交互に入れ替える
• 商品ラインアップは PC で外観写真と室内写真グリッドを横に並べる
• 展示場一覧は PC で 3 カラムのカードグリッドにする

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