DESIGN.md — 淡グレー地×オレンジの賃貸住宅 LP（Clean Orange Accent Rental Housing LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル
• キーワード: 淡グレー地・白カード・オレンジ強調・丸番号バッジ・建築写真・縦書き英字
• 地の質感: フラットで質感なし。写真の上に白の半透明グラデをかけて文字をのせる
• 形: 角丸の大きい白カード、正円の番号バッジ、角のある四角い CTA
• 温度感: やや涼しげな地色に、暖色オレンジを差し色で使う

Colors

• 地は淡い青みグレーにし、内容は白カードにのせる
• 強調はオレンジ 1 色にまとめ、キーワードの文字・番号・アイコンに使う
• 主 CTA は必ずオレンジの面に白文字
• 赤は企業ナビと関連サービスへのボタンだけに使う
• グレー帯は別ブランドを紹介する区画だけに使う
• 本文は黒ではなく濃いグレーにする
• button-primary は文字 #FFFFFF × 背景 #EE7820 のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BD590E、4.57:1）を使う。
• number-badge は文字 #FFFFFF × 背景 #EE7820 のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BD590E、4.57:1）を使う。
• tag-outline は文字 #EE7820 × 背景 #FFFFFF のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BD590E、4.57:1）を使う。

Typography

• 見出しの一部の語句だけをオレンジにし、淡いオレンジの下線を引く
• 字間はやや広め（0.05〜0.1em）にする
• 数字は正円のオレンジバッジに白抜きで入れる
• 英字ラベルは白で大きく縦書きにし、地に溶け込ませる
• 明朝は関連サービス紹介帯だけで使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。性能の概要だけ写真と文字を左右に重ねる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• CTA 帯は白地で、上に「＼ 〜 ／」型の小さなコピーを置く
• CTA 帯はセクションごとに繰り返し挟む
• 番号付きカードは縦に並べ、カード下に小さな下向き矢印を付ける
• 写真は片側を画面端まで寄せ、反対側に余白を残す
• 口コミはスライダーにし、写真・タグ・本文の順に並べる

Elevation & Depth

• カードはごく淡い影か影なし。地色との差で浮かせる
• FV の CTA 帯は写真の上に重ねた白い箱にする
• 番号バッジはカードの上辺にまたがるように置く

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角か大きな角丸。写真の背後にオレンジの L 字枠をずらして置く
• セクション境界: 直線で地色を切り替える。境界に小さな下向き矢印タブを付ける
• CTA ボタンは角丸なしの長方形で、右端に細い矢印線を入れる
• カードは角丸 28px 前後の白
• 番号は正円で、白地にオレンジの線と文字
• 吹き出しは角丸なしの白い四角に、小さな三角のしっぽを付ける
• タグはオレンジの細枠で囲った角丸なしの四角

Components

• 主CTAボタン（button-primary）: 幅いっぱいのオレンジの長方形。中央に白太字、右に細い矢印線
• CTA上の補足コピー（cta-lead）: 斜線ではさむ「＼ 〜 ／」型の小さな太字1行
• 丸番号バッジ（number-badge）: オレンジの正円に白数字。見出しの頭に置く
• 番号付き特長カード（feature-card）: 白い角丸カード。上に白丸の番号ラベル、左にオレンジの線画アイコン、下に矢印タブを付ける
• 悩みの吹き出し（worry-bubble）: 白い四角を左右交互にずらして並べる。2行目の語句をオレンジにする
• 関連サービスボタン（button-secondary）: 赤い長方形に白い明朝体の文字
• 属性タグ（tag-outline）: オレンジの細枠にオレンジ文字。地域・年代・間取りなどを並べる
• 縦書き英字ラベル（vertical-en-label）: 写真の脇に白抜きの大きな英字を縦に置く

Do's and Don'ts

Do - 強調語だけをオレンジにし、それ以外は濃いグレーで落ち着かせる - 特長は番号＋アイコン＋短い 2 行の型でそろえる - CTA 帯をセクションの区切りごとに挟む - 写真は明るく自然光の室内・外観を使う - 白カードと淡グレー地の明度差でまとまりを作る

Don't - オレンジ以外の強調色を増やさない - CTA を丸いピル型にしない - 地を真っ白だけにしない（淡グレーとの切り替えをなくさない） - 濃い影や立体的な装飾を付けない - 本文を純黒で詰めて組まない

Page Structure

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

1. ヘッダー（ナビゲーション）: 白地にロゴとアイコンボタン 3 つ。右端に赤いメニューボタン
2. ファーストビュー（ブランドと強みを伝える）: 暗めの外観写真に白ロゴ。右上に白帯のオレンジ文字ラベルを 3 段重ね、丸く切り抜いた設備写真を添える
3. CTA（物件検索への誘導）: 写真に重ねた白い箱に、補足コピーとオレンジボタン
4. 悩みの提起（引っ越し検討者の要望に共感する）: 見出しの下に吹き出し 3 つを左右交互に配置し、下に悩む人物写真
5. 解決提示（ブランドを解決策として示す）: 中央見出しとロゴ、空に溶け込む外観写真
6. 概要（サービスと性能の 3 つずつを一覧にする）: 丸番号入りの見出しの下に、写真カード 2 枚を中央の円形ロゴでつなぐ
7. サービス詳細（3つのサービスを説明）: 写真＋縦書き英字の後に番号付き白カードを縦に 3 枚
8. 性能詳細（建物性能を説明）: サービス詳細と同じ型。番号ラベルの横にオレンジの性能名
9. 関連サービス紹介（別シリーズへの誘導）: グレー帯に赤い英字ラベルと明朝の見出し、写真、赤いボタン
10. お客様の声（実際の居住者の声で信頼を得る）: 縦書き見出しの両脇に、オレンジ枠を付けた写真。下に写真・タグ・本文のスライダー
11. 締めのメッセージ（行動を後押しする）: 室内写真の上に白帯の文字を 4 段重ね、一部をオレンジにする
12. フッター（企業情報）: 白地に企業ロゴと 2 列のリンク、コピーライト

Imagery

• 自然光の明るい室内写真。白・木目・グレーの家具でまとめる
• 外観は植栽のある低層の集合住宅を、曇り空〜青空で撮る
• 人物はカジュアルな服の 20〜40 代。ノート PC やスマホを操作する自然な場面
• アイコンはオレンジの細い線画（Wi-Fi・鍵・家など）
• 写真の端を白のグラデーションで地に溶かし、上に文字をのせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を左に文字・右に写真の 2 分割にする
• PC の概要カード 2 枚は横に並べ、間に円形ロゴを置く
• PC のサービス・性能詳細は、写真と文章を左右交互に並べ、大きな薄い番号を背景に置く
• PC の CTA ボタンは幅 50% 程度で中央に置き、虫眼鏡アイコンを付ける
• PC の口コミは写真を左・本文を右にした横並びのカード
• PC のフッターはロゴとリンクを横 1 行に並べる

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