DESIGN.md — 白×ダークブラウンのモダンガレージ住宅LP（Monochrome Modern Garage House LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: クール・先進的、上品・高級、シンプル・ミニマル
• キーワード: ガレージ・モダン・雑誌的レイアウト・写真主導・モノトーン・木目
• 地の質感: 白地はフラットに保つ。ダーク帯は暗い写真に半透明の黒を重ね、締めの帯はヘリンボーンの木目にする。
• 形: 角丸なしの四角い写真。写真同士を少しずらして重ねるコラージュ。ボタンだけ小さく角を丸める。
• 温度感: クールなモノトーンに木目の茶色を少し混ぜた、やや温かいニュートラル。

Colors

• 地は白を基本にして、写真の色をそのまま主役にする。
• 区切りの帯は暗い写真の透かしかダークブラウンの木目にし、文字は白にする。
• 赤はメール問い合わせボタンだけに使う。
• 黄緑は特長の筆記体番号と相談バナーだけに限る。
• 透かしの英字はごく薄いグレーにして、本文の背後に置く。

Typography

• 和文見出しは極太のゴシックで左揃えの1行にする。
• 大きな英字はやや細めのサンセリフにして、薄く透かして背景に置く。
• 番号は緑の筆記体にし、すぐ下に太字の見出しを付ける。
• 本文は小さめにして、行間を2.0と広く取る。
• 中央の見出しは「- LABEL -」形式の英字ラベルと組み合わせる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は1カラム。写真は全幅か左右に寄せて交互に重ねる
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• コンセプトの写真は画面幅いっぱいに裁ち落として配置する。
• 見出しと本文の後に、2枚の写真を左右にずらして重ねる。
• 特長は番号、見出し、写真、本文の順に縦へ積む。
• 右端にページトップボタンを固定する。
• 左右の余白は12px前後と狭めに取る。

Elevation & Depth

• 基本は影なしのフラットにする。
• 問い合わせボタンには弱いドロップシャドウを付ける。
• 間取りは、暗い写真背景の上に白いカードを浮かせて見せる。

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。重ねる写真は大小をずらしてオフセット配置する
• セクション境界: 直線で色帯を切り替える。PCは斜めの切り抜きも使う
• 写真に角丸を付けない。
• ボタンは角を4px程度だけ丸める。
• バナーは黒の枠と斜めの黄緑面で構成する。

Components

• メール問い合わせボタン（button-mail）: 赤い面に白い封筒アイコンと明朝の文字を載せた横長ボタン
• 電話問い合わせボタン（button-tel）: 白い面にグレーの枠線を付け、フリーダイヤルの番号と受付時間を入れる
• 透かし英字（watermark-word）: セクションのテーマを表す英単語を薄いグレーで大きく敷く
• 筆記体の特長番号（feature-number）: 緑の筆記体で番号を書き、太字の見出しと組み合わせる
• ずらし重ね写真（photo-collage）: 2枚の写真を左右に寄せ、一部を重ねて配置する
• 間取りスライダー（plan-slider）: 暗い写真の帯の上に白いカードで間取り図を出し、左右の矢印とドットで切り替える
• 相談誘導バナー（consult-banner）: 黒地と黄緑の斜め面に、白抜きの帯見出しと住宅写真を組み合わせる
• ページトップボタン（pagetop）: 右端に固定するグレーの四角いボタン。上向きの矢印と小さい英字を入れる

Do's and Don'ts

Do - 車と住空間の写真は大きく、角丸なしで見せる。 - 見出しは極太のゴシックで短く言い切る。 - 暗い帯は写真の透かしか木目にして、高級感を出す。 - 強調色は赤のCTAと緑の番号の2色だけに絞る。

Don't - パステル調や丸いポップな装飾は使わない。 - 写真に角丸や太い枠を付けない。 - 赤をCTA以外に使わない。 - 本文を詰めた行間にしない。

Page Structure

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

1. ヘッダー（ロゴと問い合わせ導線を出す）: ロゴとメニューの下に、メールと電話の2つのボタンを横に並べる
2. ファーストビュー（商品の世界観を伝える）: 住宅の外観写真に、黒い英字の大見出しと白帯の日本語サブタイトルを重ねる
3. 写真のモザイク（車の魅力を印象づける）: 車のディテール写真を全幅1枚と2分割で並べる
4. コンセプト（思想を伝える）: 小さい英字ラベル、太字の見出し、行間の広い本文の順に並べる
5. 空間紹介（3テーマ）（暮らしのシーンを見せる）: 全幅写真、見出し、本文、透かし英字、ずらし重ね写真を1セットにして3回繰り返す
6. モデルプラン（具体的な間取りを示す）: 暗い写真の帯に白い英字の大見出しを置き、白いカードのスライダーで間取りを見せる
7. 相談バナー（問い合わせへ誘導する）: 黒と黄緑の斜め構成のバナー画像を置く
8. 特長（5項目）（使い方の幅を伝える）: 中央の英字ラベルと見出しの後に、筆記体番号、見出し、写真、本文を5回繰り返す
9. クロージング（相談を後押しする）: 木目の帯に白い中央見出しと本文を載せ、相談バナーを再掲する
10. 問い合わせ（最終CTA）: 白地にロゴと明朝の一言を置き、電話とメールのボタンを縦に並べる
11. フッター（SNSと信頼情報を示す）: ダークブラウン地の中央にSNSバナーと認証マークを縦に積み、著作権表記を入れる

Imagery

• 白い外壁の箱型住宅と、黒やグレーのガレージの外観を晴天で撮る。
• 高級車やバイクの寄りの写真を高コントラストで撮る。
• 明るい木目のリビングやペットなど、温かみのある室内カットを入れる。
• アウトドアや趣味のライフスタイル写真を自然光で撮る。
• 間取り図はベージュとグレーのフラットなCG図面にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは写真とテキストを左右2カラムで交互に配置する。
• PCのコンセプトは斜めに切った写真コラージュを右に置く。
• PCの間取りは1Fと2Fを横並びにする。
• PCのヘッダーにはグローバルナビと電話番号、赤いメールボタンを置く。
• 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 行書くと起動時に読み込まれる。