DESIGN.md — グレージュ×紺の住宅展示場来場予約LP（Greige and Navy Model House LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、ナチュラル、信頼・誠実、シンプル・ミニマル
• キーワード: グレージュ・紺帯・白カード・明朝・室内写真・余白
• 地の質感: マットで平坦な面。影はほぼなく、写真の木目や光で質感を出す
• 形: 角丸なしの四角いカードと帯。菱形の『OR』バッジと雲形の吹き出しが少しだけ入る
• 温度感: やや暖かめの中間色。紺の帯で引き締める

Colors

• 地はグレージュと白を交互に置き、本文は必ず白カードに載せる
• 紺はデザイン紹介の帯と来場予約ボタンだけに使う
• 赤ワイン色はキャンペーン部の特典バッジ・菱形・リボンに限る
• 展示場別ボタンはくすみ水色で、主CTAの紺と分ける
• 大きな欧文見出しは地色より少し明るい淡色で、背景に溶かす
• 文字は真っ黒でなく焦げ茶を使う
• button-location は文字 #E8F3FE × 背景 #6DA3BB のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#41748B、4.56:1）を使う。
• or-badge は文字 #E8F3FE × 背景 #B35352 のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B14F4E、4.56:1）を使う。

Typography

• 日本語の見出しは明朝で字間を広く取る
• 本文はゴシックの細めで行間を広くする
• 欧文の大見出しは淡い色にして、日本語見出しの上に重ねる
• 数字は大きなセリフ体にして淡いグレーで置く
• 縦書きの明朝見出しを白カードの左端に入れてもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品写真は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右にほぼ余白なしの全幅、または片側に寄せる
• 説明の白カードは写真の上に半分重ねて左右交互に置く
• セクションごとに地色を切り替える
• 番号つきステップは写真と文字を左右交互にし、矢印でつなぐ
• 予約ボタンは中央に置き、幅は 60〜80%

Elevation & Depth

• 影は基本使わない。白カードと地色の差で層を作る
• ステップ番号の数字だけ、薄い白の縁取りや影で浮かせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。室内写真は横長、外観写真は切り抜き
• セクション境界: 直線で地色を切り替える
• ボタン・カードは角を立てる
• OR は菱形の赤ワイン色バッジ
• 悩みは雲形の吹き出しで描く
• 特典は斜めに切った三角の帯や丸メダルで表す

Components

• 来場予約ボタン（button-primary）: 紺の長方形。白文字の右に下向き三角を付ける
• 展示場別予約ボタン（button-location）: くすみ水色の横長ボタンを縦に 3 つ並べる。上に斜線で挟んだ小見出しを置く
• 重ね説明カード（caption-card）: 写真の端に重ねる白い横長カード。2〜3 行の説明文を入れる
• 淡色欧文見出し（ghost-heading）: 大きなセリフ体の英字を淡く敷き、下に日本語の明朝見出しを置く
• 菱形ORバッジ（or-badge）: 赤ワイン色の菱形に白い OR。選べる商品の間に置く
• 仕様写真グリッド（product-grid）: 黒帯の見出し付きの大きな写真の下に、キャプション付きの小さな写真を 2〜3 列で並べる
• 番号ステップ（step-number）: 大きなセリフ数字と短い 2 行の見出しを写真の横に置き、曲がった矢印でつなぐ
• 順位表彰台（ranking-podium）: 1位を中央で高くした白い箱を 3 つ並べ、上に雲形の吹き出しで内容を書く
• キャンペーンラベル（campaign-ribbon）: ベージュの横帯。左に丸メダル、右に斜体の英字と下向き三角を置く

Do's and Don'ts

Do - 室内写真を大きく使い、余白を広く取る - 見出しは明朝と淡い欧文見出しの組み合わせにする - 本文は白カードに載せ、写真と左右交互に重ねる - 予約ボタンはセクションの区切りごとに繰り返す - 色数は抑え、グレージュ・白・紺の 3 色を軸にする

Don't - 角丸ボタンや原色のポップな配色は使わない - 濃い影やグラデーションの装飾を入れない - 赤ワイン色をキャンペーン部以外で多用しない - 本文を写真の上に直接置かない - 太いゴシックの見出しを並べない

Page Structure

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

1. ファーストビュー（展示場の世界観とコンセプトを伝える）: 縦長の室内写真の全面に白い明朝コピーを 2 段で置き、上にロゴ、下に小さな実績注記
2. キャンペーン告知（期間限定の特典で来場と成約を促す）: ベージュ地に大きな斜体英字と枠付きの日本語見出し。右上に赤ワイン色の三角帯で期限と数量
3. 特典の選択肢（選べる仕様を具体的に見せる）: 黒帯見出し付きの大きな写真と小さな仕様写真のグリッド。間に菱形の OR
4. 注意事項と予約（条件の明記と予約への導線）: 上下の線で挟んだ注記。下に展示場別のくすみ水色ボタンを 3 つ
5. コンセプト（会社の想いを伝える）: グレージュ地に全幅写真。白カードの左に縦書き明朝、右に本文
6. 展示場一覧と地図（拠点の場所を示す）: 切り抜いた外観写真を 2+1 で並べ、地図上に白い吹き出しで拠点名。下に紺の予約ボタン
7. デザイン紹介（空間の魅力を見せる）: 紺の帯に淡い欧文見出し。全幅写真に白い説明カードを左右交互に重ねる
8. アイデア紹介（間取りの工夫を伝える）: グレージュ地に淡い欧文ラベルと明朝の小見出し、白カード、全幅写真を繰り返す
9. 受賞トピック（第三者の評価で信頼を補う）: 白カード内に写真、赤いリボン見出し、受賞ロゴ、本文
10. 動線ステップ（暮らしやすさを順を追って説明する）: 白カード内に番号 1〜4 と写真を左右交互に置き、曲がった矢印でつなぐ
11. よくある失敗（不安を出して支援の必要性を示す）: 雲形の吹き出しと 3 段の表彰台で順位を見せ、線で挟んだ見出しと出典

Imagery

• 自然光の明るい室内写真。木の床・白い壁・観葉植物を入れる
• 写真は横長で、生活感を抑えたモデルルーム調
• 外観は白い背景に切り抜いて置く
• キッチンの設備は真上や斜めからの物撮りでグリッドにする
• 地図は淡い色にして、拠点を白い吹き出しで示す
• 装飾は細い線・菱形・雲形の吹き出し程度に抑える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅の 1 カラムをPCでも中央に置く作り
• PCでは中央 375〜480px のカラムを置き、左右は地色で埋める
• PCでは写真グリッドを 3〜4 列に増やしてもよい
• 重ね説明カードはPCで写真の横に並べてもよい
• 右下に丸い TOP ボタンを固定表示する

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