DESIGN.md — グレージュ×白の上質ミニマル住宅LP（Greige Minimal Custom Home LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: シンプル・ミニマル、上品・高級、ナチュラル、信頼・誠実
• キーワード: グレージュ・余白・細い欧文見出し・インテリア写真・角なし・落ち着き
• 地の質感: 質感はフラット。木や素材の温かみは写真に任せ、面は単色のグレージュで抑える
• 形: 角丸はほぼ使わず直角。細い線と矩形ブロックで構成する
• 温度感: やや暖かいニュートラル（茶みのグレー）

Colors

• 地は白。主要なブロックはグレージュ一色で塗り、面の切り替えでリズムを作る
• グレージュ面の上の文字は白にする
• 強い色は使わない。赤は必須バッジだけに使う
• 送信ボタンとFVの誘導バーはチャコールにして引き締める
• 電話・メールボタンはグレージュ系の面に白文字
• 白カードをグレージュ面の上に置いて二層にする
• button-contact は文字 #FFFFFF × 背景 #91897A のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#7D7668、4.5:1）を使う。
• reason-card は文字 #FFFFFF × 背景 #918879 のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7D7567、4.55:1）を使う。
• category-tag は文字 #FFFFFF × 背景 #918879 のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7D7567、4.55:1）を使う。
• step-item は文字 #FFFFFF × 背景 #918879 のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7D7567、4.55:1）を使う。

Typography

• セクション見出しは細い欧文を大きく置き、下に小さな和文を添える二段構成にする
• 本文は小さめにして、字間と行間を広く取る
• 太字はカード見出しとボタンだけに使う
• カード見出しの下には白い細線の下線を引く
• 欧文見出しは左寄せが基本。想い・問い合わせ・会社概要だけ中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。理想イメージと実績一覧は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 14px（375px 幅換算）
• 写真カードは画面の端から約14pxの余白で配置する
• 理由カードは写真の真下にグレージュの説明面をつなげる
• 実績の詳細は、大きな写真1枚＋小さな写真2枚の非対称グリッドにする
• 実績の小見出しはグレージュのタグ帯を左端に置く
• 流れのステップは縦書きのステップ番号＋縦線、その横に写真と文を並べる

Elevation & Depth

• 影は使わない。フラットにする
• 立体感はグレージュ面の上に白カードを重ねることで出す
• FVのコピーは半透明のグレージュ面に載せる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 直角の矩形。横長のカード写真と、正方形に近いサムネイル
• セクション境界: 直線。面の色の切り替えだけで区切る
• 角丸は付けない
• サブボタンは白地に細い枠線の矩形
• テキストブロックの左に太めの縦線を引いて引用風にする

Components

• 送信ボタン（button-primary）: チャコールの全幅矩形。アイコンと太字の文字を載せる
• 電話・メールボタン（button-contact）: グレージュ面にアイコンと白文字。縦に2段並べる
• 詳細リンク（button-outline）: 白地に細枠の右寄せ矩形ボタン
• 理由カード（reason-card）: 写真の下にグレージュ面をつなげる。白い見出しに下線を引き、白の本文を続ける
• カテゴリタグ帯（category-tag）: 左端に置くグレージュの小さな帯。白い太字を載せる
• ステップ項目（step-item）: 縦書きのStep番号と縦線、正方形の写真、太字見出しと本文を並べる
• フォーム項目（form-field）: 必須（赤）・任意（灰）の小バッジ付きラベルと、細枠の入力欄
• 会社概要表（info-table）: グレージュ面に白カードを置く。右寄せの項目名を縦線で区切る

Do's and Don'ts

Do - グレージュと白の2色を基調に、面の交互配置でリズムを作る - 写真は明るく自然光のインテリアを大きく見せる - 欧文の細い見出しと小さな和文サブを必ずセットにする - 余白は広く、本文の字間も広めに取る

Don't - 鮮やかな色やグラデーションは使わない - 角丸・ドロップシャドウは付けない - 太く大きな和文で煽るコピーは載せない - 装飾アイコンを多用しない

Page Structure

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

1. ファーストビュー（上質な住空間の印象と、提供領域を伝える）: 全面のインテリア写真に半透明のグレージュ面を重ね、細字のキャッチを載せる。下にチャコールの誘導バーを置く
2. 連絡導線（電話・メールの入口を早めに出す）: 短い説明文の下に、グレージュのボタンを縦2段で並べる
3. 理想イメージの提示（読み手の願望を短い言葉で5つ並べる）: 大きな細字の欧文見出しの下に、2カラムの写真＋太字キャプション
4. 受け止めの文章（地域の会社として相談を促す）: 左に縦線を引いた引用風の本文ブロック
5. 選ばれる理由（強みを5つ示す）: 写真とグレージュの説明面をつなげたカードを縦に並べる
6. 実績一覧（施工例を分類別に一覧で見せる）: グレージュの帯の中に、縦線付きの分類見出しと2カラムのサムネイル
7. 実績詳細（事例ごとの写真と一言を見せる）: タグ帯、欧文の事例名、一言、大1＋小2の写真グリッド、枠線の詳細ボタン
8. 流れ（引き渡しまでの手順を5段階で示す）: グレージュ面に、縦書きの番号・写真・白文字のステップを並べる
9. 想い（会社の姿勢を伝える）: グレージュ面に白カードを置き、中央揃えの見出しと本文を入れる
10. お問い合わせフォーム（相談の受付）: 白地に必須・任意バッジ付きの入力欄、スクロールする規約欄、チャコールの送信ボタン
11. 会社概要（信頼の担保）: グレージュ面に白い表カードを置き、下にコピーライトを入れる

Imagery

• 自然光の入る明るいリビングやキッチン。木の床と白い壁が写る広角写真
• 白・グレー・木目・黒の鉄といった素材感が伝わる構図
• 打ち合わせ・図面・現場など、人の手仕事が見える写真を理由と流れに使う
• 写真はフィルターなしの自然な色味で、トリミングは直角の矩形
• イラストや装飾モチーフは使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーに電話番号とお問い合わせボタンを常時表示する
• PC の理由カードは、写真と説明面を左右交互にずらして重ねる
• PC の理想イメージは3カラム、実績一覧は4カラムにする
• PC はセクションの間に、背景写真＋半透明の白パネルのCTAブロックを挟む
• 電話・メールボタンは PC で横並びにする
• 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 行書くと起動時に読み込まれる。