DESIGN.md — 紺×橙×黄の信頼系不動産買取LP（Navy Orange Trust Real Estate Buyout LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、親しみ・手作り感
• キーワード: 濃紺の信頼感・オレンジの行動喚起・黄色マーカー・線画イラスト・白カード・査定フォーム反復
• 地の質感: フラットな単色面。ドロップシャドウは薄くつけ、グラデーションはファーストビューの写真だけに使う
• 形: 角丸8px前後の白カード、ピル型のオレンジボタン、角丸の吹き出し
• 温度感: 生成りベージュで温かくしつつ、紺で引き締めたやや暖色寄りの中間

Colors

• 地の色は白と生成りベージュを交互に切り替え、査定フォームの帯だけ濃紺のベタ塗りにする
• オレンジはCTAボタン・解決側の吹き出し・特長カードの見出し・大きな数字に限って使う
• 黄色はマーカー線・キャッチの帯・事例セクションの地・バッジに使う
• 紺はブランドロゴ、番号数字、図解の矢印、フォーム帯に使う
• ベージュ地には必ず白カードを重ね、浅い影で浮かせる
• FAQは淡青と白のカードを交互に並べて縞にする
• button-primary は文字 #FFFFFF × 背景 #FE5211 のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D93C01、4.57:1）を使う。
• speech-pair は文字 #FFFFFF × 背景 #FE5211 のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D93C01、4.57:1）を使う。

Typography

• 見出しは中央揃えの太字ゴシックにし、要所の語句をオレンジにするか黄色マーカーを引く
• 数字は大きく太く、単位は小さく添える
• 番号は紺の極太コンデンス欧文にする
• 本文はゆったりした行間で短く改行する
• 背景に巨大な英字の透かしを薄く敷いてもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは中央に固定幅760px程度のコンテナを置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地の色を切り替えて区切る
• 特長は白カードを縦に積み、左に文字・右に線画イラストを置く
• 悩みは人物イラストと吹き出しを左右交互に置く
• フロー手順は大番号をカードの左上にはみ出させる
• 査定フォームはページ内で3回以上繰り返す

Elevation & Depth

• 白カードには 0 2px 8px rgba(0,0,0,0.06) 程度の浅い影をつける
• CTAボタンは影をつけないフラットにするか、ごく弱い影にとどめる
• フォーム帯やFAQのカードは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 事例写真は角丸カードの上部を矩形に切る。人物は線画イラストを切り抜きで使う
• セクション境界: 直線で切り替える。黄色の強調ボックスは下辺を三角に尖らせた吹き出し型にする
• 吹き出しは角丸8pxにして小さな三角のしっぽをつける
• 黄色のバッジは吹き出し型のピルにする
• 円形の図解でサイクルを示す
• ステップ番号の下にCTAを置く

Components

• 査定CTAボタン（button-primary）: オレンジのピル型ボタン。白い太字を中央に置き、幅いっぱいに広げる
• 2ステップ査定フォーム帯（assessment-form-band）: 紺の帯の中に、物件種別・都道府県・市区町村の白いセレクト、下向き三角、CTA、電話番号を縦に並べる
• 黄色の吹き出しバッジ（badge-bubble）: 手軽さを示す短い文言を入れる黄色のピル吹き出し
• 悩みと解決の吹き出し（speech-pair）: 悩み側は灰色の吹き出しに黒文字、解決側はオレンジの吹き出しに白文字。それぞれ人物イラストを添える
• 特長カード（feature-card）: 白カードの左にオレンジ見出しと紺の本文、右に線画イラストか大きな数字を置く
• フロー手順カード（step-card）: 紺の巨大番号をカードの左上に重ね、手順名・説明・アイコンを並べる
• FAQ行（faq-item）: Q番号・質問・大きめの短い回答・補足を入れる。淡青と白の行を交互に並べる
• 事例カルーセルカード（case-card）: 黄色地の上に白カード。写真・ケース番号・悩み・オレンジの解決ラベル・解決内容を入れ、黒い丸の矢印で送る
• 理由ラベル（label-reason）: 青い矩形ラベルに白文字の理由番号を入れ、右に太字の見出しを続ける

Do's and Don'ts

Do - CTAとフォームは紺帯にまとめ、繰り返し配置する - 実績や日数の数字はオレンジの大きな太字で目立たせる - 人物とモチーフは線画にフラット彩色したイラストで統一する - キーワードには黄色のマーカーを引く - ベージュ地の上に白カードを置いて情報を区切る

Don't - オレンジをCTAと強調以外の広い面に使わない - 写真を多用しない。写真は事例と店舗だけに使う - 細い明朝体やエレガントな装飾を混ぜない - 濃い影や立体的なボタンにしない - 紺帯を連続させない

Page Structure

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

1. ヘッダー（ロゴと問い合わせ・査定への導線を示す）: 白地にロゴを置き、右に紺とオレンジのボタン、その下に黄と紺の切替タブを並べる
2. ファーストビュー（実績数字で信頼を訴え、査定フォームへ誘導する）: 青い都市写真の上に人物写真とオレンジの巨大数字を置き、右に白いフォームカードを重ねる
3. キャンペーン告知（期間限定の特典で申込を後押しする）: 白い枠付きボックスに期限バッジと特典を入れ、注釈を小さく添える
4. 悩みの提起と解決（読み手の悩みに共感し、即答する）: 3組の人物イラストと、灰色・オレンジの吹き出しを左右交互に並べる
5. 仕組みの説明（売却前と売却後の関係を図で伝える）: ベージュ地に白カード2枚を置き、イラストと矢印で関係図を描く
6. 選ばれる理由（高く買い取れる根拠を示す）: 円形のサイクル図を置き、黄色の吹き出しボックスで結論を強調する
7. 課題と専門性（売りづらい理由と自社の強みを説明する）: 理由ラベル付きの解説に円グラフと吹き出しを添える
8. 査定フォーム（コンバージョンを獲得する）: 紺帯に3つのセレクト、CTA、電話番号を並べる
9. メリット（売却するメリットを列挙する）: 白い特長カードを縦に並べ、受賞・上場の実績カードを先頭に置く
10. 事例紹介（具体的な解決例を見せる）: 黄色地に横スクロールの白いケースカードを並べる
11. 売却までの流れ（手順を4段階で示す）: 大番号付きの白カードを縦に積み、最初のカードにCTAを入れる
12. よくある質問（不安を解消する）: 淡青と白の縞にしたQ&Aリストにする
13. 対象物件・エリア（買取の条件を明示する）: テキストの一覧と簡易エリア地図を載せる
14. 店舗情報・フッター（所在と連絡先を示す）: 店舗写真と地図を2列に並べ、電話番号の枠、特徴タグ、濃灰のコピーライト帯を置く

Imagery

• 人物は黒の線画にベタ塗りしたフラットイラストにする。スーツの担当者と悩む一般人を描き分ける
• モチーフは工具・鍵・お札・PCなどを線画アイコン風に描く
• 建物写真は青空のマンション外観を使う
• ファーストビューは青く色調補正した都市写真にスーツ人物を合成する
• 図解は紺とオレンジの矢印で関係を示す
• 円グラフはオレンジ・青・黄の3色で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央760px幅の1カラムで、SPでも構成をそのまま縦に積む
• ファーストビューのフォームカードは、SPではビジュアルの下に回す
• 紺帯のセレクト3つは、PCでは横並び、SPでは縦積みにする
• 特長カードのイラストは、SPでは文字の下か小さく右に置く
• 事例カルーセルは、SPでは1枚ずつ見せて左右にスワイプさせる
• 店舗の写真と地図は、SPでは縦に積む

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