DESIGN.md — 紺鼠×マスタード黄の3階建て住宅LP（Slate Navy and Mustard Housing Package LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、親しみ・手作り感、情報量多め・訴求型
• キーワード: 生成り地・紺鼠の帯・マスタード黄マーカー・白カード・太ゴシック見出し・欧文小見出し
• 地の質感: フラットな単色面。カードにはごく薄い影をつける。写真は自然光の実写。
• 形: 角丸12〜16pxのカードとピル型ボタン。円形の背景を敷いた人物イラストを置く。
• 温度感: 生成りが温かく、紺鼠が落ち着きを与える中間の温度感

Colors

• 白と生成りをセクションごとに交互に敷き、リズムをつける。
• 紺鼠は強調帯・まとめCTA帯・お問い合わせ帯にだけ使う。
• マスタード黄は主CTAボタン、見出しのマーカー、紺地上の数字強調に限って使う。
• 生成り地の上の情報は白カードに載せる。
• 注釈は灰色の小さな文字で、本文と区別する。
• 鮮やかな赤や青は使わない。

Typography

• 見出しの上に、字間を広げた大文字の英語ラベルを小さく置く。
• 見出しの重要語の下半分に黄色マーカーを引く。
• 価格や電話番号は欧文の極太数字で大きく見せ、単位は小さく添える。
• 見出しは中央揃えで2行に組む。
• 注釈には※を付け、灰色の10px前後にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。仕様カードと間取りカードは縦に積む。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション内は見出し→リード→カード群の順に組む。
• プラン紹介は写真の下に価格カードと4項目の仕様グリッドを続ける。
• 間取り図は階ごとに番号バッジ付きの白カードにする。
• 訴求の結論は紺鼠の角丸帯で中央揃えにまとめる。
• 最後に紺鼠地のお問い合わせと3択ボタンを置く。

Elevation & Depth

• 白カードには0 4px 16px rgba(0,0,0,0.06)程度の薄い影をつける。
• 紺鼠の強調帯にはやや強めの影をつけ、浮かせる。
• ボタンには影をつけずフラットにする。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸8〜12pxの長方形。施工写真には左下に英字の部屋名ラベルを重ねる。
• セクション境界: 基本は直線で切り替える。カタログ訴求の下端だけ黄色の斜めの帯をあしらう。
• ボタンはすべてピル型にする。
• 番号や階数は小さな紺の円・ピルのバッジにする。
• 人物イラストは淡い紺の円の上に置く。

Components

• 黄色ピルCTA（button-primary）: 黄色地に濃紺文字と右矢印のピル型ボタン。予約・資料請求に使う。
• 濃紺ピルボタン（button-dark）: 濃紺地に白文字のボタン。黄色の丸アイコン付きで、カタログ請求に使う。
• マーカー見出し（heading-marker）: 欧文小ラベルの下に太ゴシック見出しを置き、重要語に黄色の下線マーカーを引く。
• 悩みカード（concern-card）: 白い角丸カードに短い悩みを書き、その下に円背景の人物線画を4つ並べる。
• 紺鼠の訴求帯（highlight-band）: 紺鼠の角丸帯の中で、白と黄の文字で結論や実績の数字を中央に見せる。
• プラン価格カード（price-card）: 左に黄色の縦線を付けた白カード。極太の価格数字、月々の支払額、注釈を載せ、下に仕様の小カードを2×2で並べる。
• 仕様リストカード（spec-list-card）: 番号バッジとカテゴリ名の下に、チェック付きの箇条書きを並べた白カード。
• 階数バッジ（floor-badge）: 間取りカードの上辺中央に重ねる、濃紺の小さなピル型バッジ。
• 問い合わせ3択タイル（contact-tile）: 紺地の上に置く半透明の角丸タイル。アイコンと短いラベルを入れる。

Do's and Don'ts

Do - 見出しは必ず欧文小ラベル＋太ゴシック＋黄色マーカーのセットで組む。 - 生成り地の上の情報は白カードにまとめる。 - 数値（価格・坪数・電話番号）は大きな欧文数字で見せる。 - CTAは黄色ピルに統一し、矢印を添える。 - 施工写真は実写にし、部屋名ラベルを付ける。

Don't - 黄色を広い面の背景に使わない。 - 明朝体や手書き体を混ぜない。 - 影を強くしすぎない。 - 原色の赤や青を入れない。 - 角が尖った四角いボタンを使わない。

Page Structure

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

1. ファーストビュー（商品の価値を一言で伝え、予約・資料請求に誘導する）: 外観写真を全面に敷き、左に白の太字コピーと小さなピルラベルを置く。黄色と半透明のピルCTAを並べる。
2. 悩みの提起（土地・費用などの悩みに共感する）: 生成り地。短い悩みを書いた白カードと人物線画を4つ並べ、下向きの三角で次へつなぐ。
3. 解決提示・実績（解決策と実績を示す）: 紺鼠の角丸帯を2つ重ね、白と黄の文字で解決策と実績の数字を大きく見せる。
4. 参考プラン（具体的な価格と間取りを見せる）: マーカー見出しの下に、写真と価格カードを並べた生成りの大カードを置く。その下に階別の間取りカードを3つ並べる。
5. 標準装備（追加費用の不安を消す）: 番号付きの仕様リストカードを2×2で並べ、黄色帯で水回りの選択肢を示す。下に注釈を置く。
6. 中間CTA（カタログで詳細を確認させる）: 紺鼠の角丸帯の中央に白見出しと黄色ピルボタンを置く。
7. 資料プレゼント（カタログ請求を促す）: 左にカタログ表紙、右に「無料」の円バッジ・見出し・中身のサムネイル4枚を置き、濃紺ボタンを添える。
8. 施工イメージギャラリー（暮らしの姿を想像させる）: 大小の角丸写真を組み合わせたグリッドにし、各写真に英字の部屋名ラベルを付ける。
9. お問い合わせ（電話・来場・相談へ誘導する）: 紺鼠地に白の見出しを置き、黄色の大きな電話番号を見せる。下に半透明のタイルを3つ並べる。
10. フッター（著作権の表記）: 濃紺地の中央に白の小さな文字を置く。

Imagery

• 外観写真は青空と緑の植栽を背景に、木目アクセントのある外観を正面から自然光で撮る。
• 内観写真は暖色の照明が入った木床の部屋を広角で撮り、部屋ごとに揃える。
• 人物は黒の線画に単色の塗りを入れたシンプルなイラストにし、淡い紺の円の上に置く。
• 間取り図はモノクロの図面を白カードに収める。
• 資料サムネイルにはマンガ風の紙面を見せ、親しみを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはコンテンツ幅を約900pxに収めて中央寄せ。SPは左右16pxの余白で1カラムにする。
• PCで写真と価格カードを左右に並べる部分は、SPでは写真を上に置いて縦に積む。
• PCの悩みカード4列は、SPでは2×2にする。
• PCの間取り3列・仕様2列は、SPでは1列（間取りは横スクロールでも可）にする。
• ギャラリーはSPで2列にする。
• FVのコピーはSPで写真の下部に重ね、CTAを縦に並べる。

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