DESIGN.md — 白×チャコールと木目の注文住宅 LP（Monochrome Natural Wood Custom Home LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、ナチュラル、シンプル・ミニマル、やさしい・柔らかい
• キーワード: 白とチャコール・木目の写真・欧文セリフ見出し・植物の線画・余白多め・ギャラリー調
• 地の質感: フラットな単色の面に、明るい自然光で撮った室内写真を大きく敷く。影はほとんど使わない。
• 形: 角はほぼ直角。四角いカード、細い線のアウトラインボタン、小さな丸い矢印アイコンを組み合わせる。
• 温度感: 白とグレーの無彩色が中心で、木の色と写真がぬくもりを足す、やや暖かめの中間。

Colors

• 地は白とライトグレーを交互に置いて、セクションを区切る。
• チャコールは見出し帯・特長パネル・ボタンのアイコンだけに使う。
• 鮮やかな色は使わない。暖かさは写真の木の色で出す。
• CTA も派手な色にせず、白い面に細い枠線とチャコールの丸い矢印で示す。
• 文字はすべてチャコール〜グレー。最大のコントラストが要る数値だけ白抜きにする。

Typography

• セクション見出しは英字セリフを大きく置き、その下に小さな和文明朝のサブ見出しを添える。
• コンセプト文は明朝で中央揃え、行間を広く取る。
• 本文はゴシックの細字で、13px 前後に抑える。
• ボタンの文字は大文字の英字にして、字間を広げる。
• 手書き風スクリプトは 1 ページに 1 か所だけ使い、写真の上に少し重ねる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード一覧は横スクロールのカルーセル（PC では 3 列）。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは中央揃えにし、上下に余白を大きく取る。
• チャコールの帯を見出しの背面に敷き、その下側にカード列を重ねる。
• 写真は画面幅いっぱい、または左右どちらかに寄せて非対称に置く。
• テキストブロックは写真の下に左揃えで置き、植物の線画を背景に添える。
• 一覧の最後には、中央に枠線ボタンを 1 つ置く。

Elevation & Depth

• カードには、ごく薄い影（0 1px 4px rgba(0,0,0,.08)）だけ付ける。
• それ以外は影を使わず、面の色の差で階層を出す。
• 問い合わせボタンは白い面をグレーの地に置いて、浮いて見せる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角く切り抜く。全幅か、左右どちらかへ裁ち落とす。
• セクション境界: 直線で切り替える。1 か所だけ、細い線のアーチ（家の屋根の形）で区切る。
• ボタンは長方形にし、1px の枠線と右端の小さな黒丸の矢印を付ける。
• 問い合わせボタンだけは角丸 8px の白いカードにする。
• アイコンは線画か、塗りの単純な家・ピンの形にする。

Components

• 枠線の一覧ボタン（button-outline）: 白地に 1px のチャコール枠。英字ラベルを中央に置き、右端に黒丸の矢印を付ける。
• MORE 小ボタン（button-more）: チャコールの小さな四角に白で「MORE →」と書く。
• 問い合わせカード（contact-card）: 白い角丸カード。左に英字＋和文のラベル、右に黒丸の矢印を置く。縦に 3 つ並べる。
• 英字＋和文の見出し（section-heading）: 英字セリフの大見出しの下に、小さい和文明朝を付ける。上に線画のアイコンを置くこともある。
• イベントカード（event-card）: 白いカードに正方形のバナー画像、日時と会場を並べ、黒い小さな予約ボタンを付ける。
• こだわりパネル（feature-panel）: チャコールの面に、英字ラベル・細い線・2 行の白い和文を中央揃えで置く。
• 性能値パネル（spec-panel）: チャコールの面に、項目名と大きな明朝の数値を白抜きにする。下に小さな注釈を付ける。
• 左線つきリンク行（list-link）: 左に太い縦線、下に細い線を引いた行。左にラベル、右に MORE と丸い矢印を置く。

Do's and Don'ts

Do - 見出しは英字セリフと和文明朝の 2 段で組む。 - 白・グレー・チャコールの 3 段階の面で、セクションにリズムを作る。 - 自然光で撮った木の床や白い壁の写真を、大きく見せる。 - 植物の細い線画を、余白にさりげなく置く。 - ボタンは細い枠線と丸い矢印でそろえる。

Don't - 赤やオレンジなど彩度の高い CTA 色を使わない。 - 太いゴシックの大見出しで煽らない。 - 大きな角丸やピル型のボタンを使わない。 - グラデーションや強い影を使わない。 - 余白を詰めて情報を詰め込まない。

Page Structure

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

1. ファーストビュー（暮らしの雰囲気を一目で伝える。）: リビングの写真を全幅に敷き、中央に白い英字セリフのロゴタイプと短い英文、スクロール用の丸いマークを置く。
2. お知らせ・イベント（見学会への予約を促す。）: チャコールの帯に見出しを置き、帯の下側に白いイベントカードの横スクロールを重ねる。最後に枠線ボタンを置く。
3. 想い・コンセプト（ブランドの価値観を伝える。）: 全幅の写真の下に英字見出しと線画を置き、明朝の文章を中央揃えで組む。
4. 施工事例（デザインの実例を見せる。）: チャコールの帯に大きな写真を置き、その下に事例番号と明朝のタイトルを添えたカードのカルーセルを並べる。
5. お客様の声（信頼感を高める。）: 灰色の枠の左に写真、右に見出し・抜粋・MORE ボタンを並べる。
6. モデルハウス（来場を促す。）: アーチの線と家のアイコンで区切り、写真の上に文字を重ねたカードと、外観イラスト入りの灰色カードを 2 列で並べる。
7. 家づくりの特長（素材とこだわりを伝える。）: 手書きスクリプトのタイトルを写真に重ね、チャコールのパネル 3 つと性能値パネルを置く。
8. アフターサポート（建てたあとの安心を伝える。）: 写真を左右に寄せて置き、明朝の見出しと短い本文を添える。
9. SNS・ブログ（日々の発信を見せる。）: SNS は正方形の写真を横に並べる。ブログはグレー地に、日付と下線つきのリストで並べる。
10. 施工エリア（対応できる地域を示す。）: グレーの濃淡で塗った地図と、地名をテキストで並べる。
11. 問い合わせ CTA（問い合わせ・来場予約・資料請求へ誘導する。）: グレー地の左に店舗写真、右に白い角丸の問い合わせカードを 3 つと電話番号を置く。
12. アクセス・フッター（所在地と各ページへの導線をまとめる。）: 暗くした写真の上に白文字でアクセス案内を置き、リンク行、取り組みの説明、グレーのフッターを続ける。

Imagery

• 白い壁・無垢の床・大きな窓のある室内を、自然光で明るく撮る。
• 少し高めの位置から、ソファやダイニングが写る広い画角で撮る。
• 木の小物や床の質感がわかるアップを、余白を大きく取って撮る。
• 植物の葉を描いた細い線画を、グレーで薄く添える。
• モデルハウスの外観は、やわらかい色の小さなイラストで描く。
• アクセスなどの背景写真は暗く落として、白文字を乗せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP ではカード 3 列を横スクロール 1.2 枚見せにする。
• モデルハウスの 2 列は SP で 1 列に積む。
• 左右に寄せた写真は、SP では片側を裁ち落としたまま幅 90% 程度にする。
• 問い合わせ CTA は SP で写真を上、カードを下に縦に積む。
• 英字見出しは SP で 24px 前後に縮め、余白は 72px 程度にする。

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