DESIGN.md — 生成り×墨黒の明朝ホテルライク住宅 LP（Hotel-like Greige Mincho Housing LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、シンプル・ミニマル、ナチュラル、信頼・誠実
• キーワード: ホテルライク・生成り・明朝体・縦書き・大きな余白・細い罫線
• 地の質感: マットで平らな色面。影はほとんど使わず、写真の素材感で質感を出す
• 形: 角丸なしの直線的な矩形。写真と白カードを重ねてずらす
• 温度感: 温かみのある中間色。終盤は落ち着いた暗いトーン

Colors

• 白・生成り・ベージュの 3 段階の地を交互に使い、セクションを区切る
• 強調は金ベージュだけにして、番号・数字・英字ラベルに使う
• 主ボタンは墨黒に白文字、暗い地では白ボタンと白枠ボタンを並べる
• 終盤は墨黒とブラウンで締め、文字は生成り寄りの白にする
• 彩度の高い色は使わない

Typography

• 日本語の見出しも本文も明朝で統一する
• 見出しの上に英字のラベルと短い縦線を置く
• コンセプト文は縦書きで複数列に並べる
• 字間は広めに取り、行間は 2.0 前後にする
• 太字は使わず、文字の大きさの差で強弱をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文字の 2 分割を左右交互に並べる
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 96px、基本単位 8px、カード内 28px（375px 幅換算）
• セクションの上下に 80〜120px の大きな余白を取る
• 見出しは中央揃え、仕様説明は左揃え
• 写真は画面端まで広げ、テキスト側に余白を残す
• 性能リストは見出し・説明・写真の 3 列を細い線で区切る（SP では縦に積む）

Elevation & Depth

• 影はほぼ使わない
• 白カードを写真に重ねてずらし、奥行きを出す
• 暗い地はフラットな色面で、浮き上がる効果は付けない

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。画面端まで裁ち落とす横長の写真
• セクション境界: 直線で地の色を切り替える
• ボタン・カード・写真はすべて角を立てる
• 装飾は 1px の細線と短い縦線に限る
• 丸いアイコンや吹き出しは使わない

Components

• 主ボタン（button-primary）: 墨黒の横長の矩形に白文字。右に短い線の矢印を付ける
• 暗い地の枠ボタン（button-outline-dark）: 透明の地に細い白枠と白文字。白い塗りボタンと並べる
• 英字ラベル付き見出し（section-label）: 短い縦線、字間の広い英字ラベル、明朝の 2 行見出しの順に中央で並べる
• 番号付き仕様カード（spec-card）: 金ベージュの大きな番号、線付きの英字小ラベル、見出し、本文の順。写真に重なる白カードにする
• 仕様タグ列（tag-row）: 番号と英字の小さなタグを細い縦線で区切って横に並べる
• 性能リスト行（performance-row）: 見出し・説明文・写真を横に並べ、上下を細線で区切る
• 実績数字（stat-block）: 墨黒の地に金ベージュの大きな数字と小さな単位。下に説明を添え、縦線で 3 つに区切る
• 来場予約バナー（campaign-banner）: 外観写真と白地の告知面を横に並べた画像バナー

Do's and Don'ts

Do - 余白は惜しまずに取る - 見出しの前に英字ラベルと縦線を置き、形を毎回そろえる - 仕様紹介は写真と文字を左右交互にずらして並べる - 数字と番号は細い欧文セリフの金ベージュで見せる - 写真は自然光の入る、明るく落ち着いたインテリアにする

Don't - 角丸やピル型のボタンを使わない - 原色や蛍光色の強調色を入れない - 太いゴシックの大見出しや派手な装飾を使わない - 影の強いカードや立体的なボタンにしない - 文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（商品の世界観を一目で伝える）: 左は生成りの地に欧文セリフのブランド名、イタリックの副題、短い明朝コピー。右は大きな室内写真
2. コンセプト（暮らしの価値を情緒的に語る）: 白地に縦書きの見出しと本文を中央に置き、周りに小さな写真を散らす
3. 標準仕様の導入（仕様の要点を予告する）: ベージュの帯に英字ラベル、明朝の 2 行見出し、仕様タグ列を置く
4. 仕様紹介（5 項目）（設備を一つずつ紹介する）: 大きな写真と番号付きの白カードを左右交互に重ねる
5. 中間 CTA（体感への誘導）: ベージュ地に 2 行のコピー、予約バナー、墨黒ボタンを並べる
6. 性能（見た目以外の確かな品質を伝える）: 生成り地に見出しと、細線で区切った 4 行の性能リストを置く
7. お客様の声（実際の住み心地を見せる）: 白地の中央に縦長の動画を 1 本置く
8. 選ばれる理由（企業の信頼を数字で示す）: 墨黒の地に実績数字を 3 つ並べ、短い説明を添える
9. 最終 CTA（来場予約と資料請求へ誘導する）: ブラウンの地に白い明朝見出し、中央揃えの本文、予約バナー、2 つのボタンを置く

Imagery

• グレージュ系のインテリアを、自然光の中で広角に撮る
• 石目や木目など素材感の伝わる寄りのカットを混ぜる
• 人物はほぼ入れず、空間そのものを主役にする
• 外観は白い外壁を青空の下で撮る
• イラストやアイコンは使わず、写真と細線だけで構成する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では写真を全幅に置き、その下に番号カードを少し重ねて縦に積む
• PC の 2 分割は SP では写真が上、文字が下の順にする
• 縦書きのコンセプトは SP でも縦書きを保ち、列数を減らす
• 性能リストは SP では見出し・写真・説明の順に縦に並べる
• 実績数字は SP でも 3 列のまま小さくするか、縦に積む
• セクションの余白は PC の約 7 割にする

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