DESIGN.md — 紺×金の高級タワマン売却 LP（Navy and Gold Luxury Tower Real Estate LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、信頼・誠実、情報量多め・訴求型、ラグジュアリー・ダーク
• キーワード: 紺と金・夜景の高層ビル・実績No.1・大きな数字・明朝の見出し・白カード
• 地の質感: 夜景写真を暗く敷いた紺の地。斜めに切った薄い面を重ねて奥行きを出す。広告セクションは青のグラデーション。
• 形: 四角を基本にする。カードは小さめの角丸。ランキング帯は平行四辺形。
• 温度感: クールな紺が基調。金茶でほどよく温かみを足す。

Colors

• 後半の信頼訴求は紺の地に白文字を使う。強調したい語だけを金で示す。
• キャンペーンは鮮やかな青のグラデーションにし、金額は黄色の極太文字で大きく見せる。
• 実績の数字は赤の太字斜体にして、上昇矢印を添える。
• お客様の声は金茶の地に白カードを置き、強調は金茶の文字＋下線マーカーにする。
• FAQ・流れなどの説明セクションは白・淡い青灰の地で落ち着かせる。
• セクションごとに地の色をはっきり切り替え、リズムを作る。

Typography

• 見出しは字間を広め（0.08〜0.12em）に取り、上品に見せる。
• 前置きコピーは「＼ ／」形の斜線で左右を挟む。
• 特長の見出しの左に、半透明グレーの巨大な番号を重ねる。
• 本文中の強調は太字＋色（紺地では金、白地では金茶）にする。
• 数字は単位より 2〜3 倍大きくする。
• 注釈は 9〜10px で該当ブロックの直下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は写真と本文を左右 2 分割で交互に置く。サービス一覧は 3 列または 2 列のグリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の色面で区切る。
• 白カードは左右に約 6% の余白を取って浮かせる。
• 特長は番号→見出し→写真と本文の 2 カラムの順で積む。
• 声カードは写真をカードからはみ出させ、左右交互に配置する。
• 流れの STEP は紺のラベルタブと下向きの山形矢印でつなぐ。
• FAQ は紺の質問帯と淡い回答面を縦に重ねる。

Elevation & Depth

• 影はほとんど使わない。色面の切り替えで階層を出す。
• CTAボタンには濃い右下の影（オフセット）を付けて立体感を出す。
• ランキングセクションの白カードは大きな角丸で地から浮かせる。

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形で切り抜く。人物写真は腰上で切り、カードの角に重ねる。
• セクション境界: 基本は水平の直線。背景の中に斜めの面の切り替えを入れる。
• ボタンは四角形にし、枠線と影を付ける。
• ランキングの行は右端を斜めに切った帯にする。
• 番号バッジは黒の小さな正方形にする。
• キャンペーンの見出し上には金のリボンを飾る。

Components

• 査定申込ボタン（button-primary）: 白地に濃い枠線を付けた四角いボタン。黒い影をずらして付ける。2 行の文字で、所要時間を大きな数字で強調する。
• FVの開始ボタン（button-hero）: 銀色のグラデーションで角を少し丸めたボタン。左に短いラベル、右に赤い矢印を置く。
• サブ導線ボタン（button-sub）: サーモンピンクの細長いボタン。右に山形の矢印を付ける。
• キャンペーン金額ブロック（campaign-price）: 白いラベル帯→白の大見出し→アイコン＋黄色の極太数字＋小さな単位、の順に積む。
• 赤い円形の吹き出しバッジ（badge-circle）: 見出しの右上に重ねる赤い円。中に特典の数量を白と黄色の文字で入れる。
• ランキング行（ranking-row）: 左は紺の順位、右は水色グラデーションの斜め帯。金額を太字で入れ、赤い上矢印を添える。
• 特長の巨大番号見出し（feature-number）: 半透明グレーの巨大な数字の上に、白と金の見出しを重ねる。
• お客様の声カード（voice-card）: 金茶の地に置く白カード。上に属性ラベル、写真をはみ出させて配置し、リードには淡い下線マーカーを引く。
• STEPカード（step-card）: 紺のSTEPタブを付けた白カード。写真と説明を左右に置き、カードの間は山形の矢印でつなぐ。
• FAQ（faq-item）: Q アイコン付きの紺の質問帯の下に、淡い青灰の回答面を置く。

Do's and Don'ts

Do - 紺と金を軸にし、鮮やかな青と黄色はキャンペーン部分だけに使う。 - 数字は大きく太くして、出典の注釈を必ず添える。 - 紺地セクションの見出しには明朝を使い、高級感を出す。 - 特長は番号付きで 6 つ程度並べ、写真と本文を交互に置く。 - CTAセクションは同じ構成で複数回くり返す。 - 人物写真はスーツ姿の笑顔で、信頼感を出す。

Don't - パステル色やポップな手書き書体を使わない。 - 紺地の強調を黄色にしない（金を使う）。 - ボタンをピル型にしない。 - 影やグラデーションを全体に乱用しない。 - カードを大きく丸めない（例外はランキングのカードのみ）。

Page Structure

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

1. ファーストビュー（実績No.1の権威と専門性を伝える）: 成約済みの帯を付けた高層ビル写真をタイル状に敷く。白の極太見出しに金の月桂樹エンブレムを添え、ロゴと銀色の開始ボタンを置く。
2. キャンペーン訴求（査定特典で申込を後押しする）: 青のグラデーション地に金のリボンと黄色の見出しを置き、2 種類の金額ブロックを OR でつなぐ。
3. 特典サービス一覧（選べる無料サービスを見せる）: 白い角丸パネルに 3 列×3 段の番号付き写真カードを並べ、赤い円バッジを重ねる。
4. CTA（査定申込へ誘導する）: 白地に影付きの四角いボタン、条件確認の小さなボタン、サーモンピンクのサブ導線を置く。
5. 市況ランキング（今が売り時であることを数字で示す）: ベージュ地に大きな角丸の白カードを置く。人物イラスト、ランキング表、赤い大きな数字の平均と自社実績を比べる。
6. 会社紹介（企業の信頼感を伝える）: 夜景写真の上に半透明の白パネルを重ね、明朝の見出し、中央揃えの本文、店舗写真を入れる。
7. 6つのこだわり（強みを詳しく説明する）: 紺地に巨大番号の見出しを置き、写真と本文を交互の 2 カラムにする。強調は金文字。
8. 顧客満足度（満足度の高さを示す）: 金茶の枠の中に淡い地と斜めの白面を置き、紺の棒グラフと大きな%表示を並べる。
9. お客様の声（具体的な成功事例で共感を得る）: 金茶地に、写真をはみ出させた白カードを左右交互に配置する。
10. 売却の流れ（手順を示して不安をなくす）: 青灰地に紺タブ付きのSTEPカード 4 つを、山形の矢印でつなぐ。
11. よくある質問（疑問を解消する）: 白地に欧文と和文の見出しを置き、紺の質問帯と淡い回答面を並べる。

Imagery

• 高層マンションを見上げた写真・夜景写真を、暗く寒色に寄せて背景に使う。
• 内装は明るい高級インテリアを広角で撮った写真にする。
• 人物はスーツ姿の営業担当の笑顔で、室内の柔らかい光で撮る。
• 抽象的なテクノロジーの図（ネットワーク線・地球）を青系で使う。
• 金の月桂樹・リボン・矢印の装飾で権威と上昇感を出す。
• 書類や戦略書を斜めに重ねた写真で、提案の厚みを見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC はコンテンツ幅を 960px 程度の中央寄せにすることを推奨する。
• PC ではサービス一覧を 3 列のまま広げ、特長の 2 カラムは比率 1:1 にする。
• 背景の色面は全幅のままにし、白カードだけ最大幅を設ける。
• PC では大きな数字を 1.3 倍程度に抑え、行長を 40 字以内に保つ。

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