--- version: alpha name: Navy and Gold Luxury Tower Real Estate LP description: 深い紺の地にくすんだ金を合わせた、高級不動産仲介の売却査定 LP。前半は青グラデーションのキャンペーン訴求と黄色の大きな数字で勢いを出す。後半は紺の夜景調の地に明朝見出しと金の強調文字を置き、権威と実績を見せる。お客様の声は金茶の地に白いカードを重ねる。 colors: primary: '#001942' dark-section: '#011434' secondary: '#014FA2' accent-1: '#AD9967' accent-2: '#FED138' accent-3: '#BA242A' marker: '#E3C27A' background: '#FFFFFF' background-alt: '#EAEDF4' tint-1: '#C2CBDC' tint-2: '#EEE1B9' text: '#222222' on-dark: '#FFFFFF' cta: '#E4A59B' on-cta: '#222222' typography: display: fontFamily: Montserrat fontSize: 64px fontWeight: 800 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.85 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Cormorant Garamond fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.12em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 2px md: 8px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 80px button-hero: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px button-sub: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 34px campaign-price: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-2}' typography: '{typography.display}' height: 260px badge-circle: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 130px ranking-row: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 32px feature-number: textColor: '{colors.marker}' typography: '{typography.headline-md}' height: 80px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 900px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px faq-item: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 180px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#001942` | ブランドの紺（後半セクションの地・FAQの質問帯） | 18% | 画素の実測 | | `dark-section` | `#011434` | やや明るい紺（特長セクションの地） | 9% | 画素の実測 | | `secondary` | `#014FA2` | キャンペーン帯の青（グラデーションの始点） | 8% | 画素の実測 | | `accent-1` | `#AD9967` | 金茶（お客様の声の地・強調文字・下線マーカー） | 9% | 画素の実測 | | `accent-2` | `#FED138` | キャンペーンの黄色の大きな数字・見出し | 1% | 画素の実測 | | `accent-3` | `#BA242A` | 実績を示す赤の大きな数字・上昇矢印 | 1% | 画素の実測 | | `marker` | `#E3C27A` | 紺地の上で使う明るい金の強調文字 | 1% | 推定 | | `background` | `#FFFFFF` | 白の地（CTA・FAQ・カード） | 24% | 画素の実測 | | `background-alt` | `#EAEDF4` | 淡いグレー青（FAQ回答・満足度セクション） | 7% | 画素の実測 | | `tint-1` | `#C2CBDC` | くすんだ青灰（売却の流れの地） | 5% | 画素の実測 | | `tint-2` | `#EEE1B9` | ランキングセクションの淡いベージュ地 | 2% | 画素の実測 | | `text` | `#222222` | 見出し・本文の濃い文字 | 3% | 推定 | | `on-dark` | `#FFFFFF` | 紺地の上の白文字 | 2% | 画素の主要色に補正 | | `cta` | `#E4A59B` | サブ申込ボタンのサーモンピンク | 0% | 画素の実測 | | `on-cta` | `#222222` | ボタン上の濃い文字 | 0% | 推定 | - 後半の信頼訴求は紺の地に白文字を使う。強調したい語だけを金で示す。 - キャンペーンは鮮やかな青のグラデーションにし、金額は黄色の極太文字で大きく見せる。 - 実績の数字は赤の太字斜体にして、上昇矢印を添える。 - お客様の声は金茶の地に白カードを置き、強調は金茶の文字＋下線マーカーにする。 - FAQ・流れなどの説明セクションは白・淡い青灰の地で落ち着かせる。 - セクションごとに地の色をはっきり切り替え、リズムを作る。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーン金額・実績の大きな数字 | 欧文サンセリフ | Montserrat | 800 | 64px | 1.0 | -0.02em | | `headline-lg` | ファーストビュー・キャンペーンの大見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.25 | 0.02em | | `headline-md` | 紺地セクションの見出し（ブランド感を出す明朝） | 明朝 | Shippori Mincho | 700 | 26px | 1.4 | 0.08em | | `headline-sm` | 特長の小見出し・声カードのリード | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.1em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.85 | 0.08em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 斜線で挟んだ小さな前置きコピー・STEP番号 | 欧文セリフ | Cormorant Garamond | 600 | 16px | 1.4 | 0.12em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.3 | 0.08em | - 見出しは字間を広め（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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-4ffd3503`（元 LP の URL から採番） - **元 LP**: https://esandcompanyholdings.com/lp/baikyaku/index.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。