DESIGN.md — 金グラデ×黒の高性能住宅訴求LP（Gold Gradient and Black Premium Housing Performance LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、信頼・誠実、情報量多め・訴求型、ラグジュアリー・ダーク
• キーワード: 金箔グラデーション・黒地・図解と数値・帯見出し・赤銅色CTA・性能訴求
• 地の質感: 金属的な金のグラデーション面と、マットな黒・濃茶の面を組み合わせる。白カードと灰色グラデーション地で読みやすくする
• 形: 角丸の小さい四角カードと、全幅の帯見出しが中心。CTAだけピル型にする
• 温度感: 暖色寄り。金・茶・赤銅の温かみに、性能別の寒色帯（青灰・緑・紫）を差し込む

Colors

• ファーストビュー・解説ボックス・まとめCTAの地は、金のグラデーション（明るい金から暗いオリーブへ）にする
• メリットとコラムは黒地にする。テクノロジー部は濃茶地に紺灰カードを並べ、地の色を変えて段落ごとのリズムを作る
• 性能テーマ別の帯見出しは、青灰・深緑・紫・山吹など性能ごとに色を変える
• 暗い地の上で強調したい語は黄色、明るい地の上で強調したい語は太字の黒にする
• CTAは赤銅色から赤茶へのグラデーションを付けたピル型だけにし、他の要素には赤系を使わない
• 白・灰色地に置く小見出しは金茶の文字にする

Typography

• 本文は字間を0.1em前後と広めにし、行間は1.8〜2.0にする
• SPでは本文の大半を中央揃えにする。長文の解説ボックス内だけ左揃えにする
• 強調は太字に限り、太字部分を文中に散らして拾い読みできるようにする
• 英字の大見出しは縦長のサンセリフにし、地の色に近い低コントラストで敷く
• 白地セクションの背景には、テーマの漢字を淡い透かし明朝で大きく置く
• 数値（等級・倍率・金額）は本文より大きく太くする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。カード内は文章と写真の2列を許容する
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に約5%の余白を取り、地の色の上に浮かせる
• セクションの冒頭には全幅の色帯見出しを置く
• 図解・グラフはほぼ全幅で大きく見せる
• CTAはテクノロジー部の後と最後の2か所に、問いかけ文の下に置く
• 番号付きカードは縦に並べ、カード同士の間を24px前後空ける

Elevation & Depth

• 影はほぼ使わず、地の色の差で面を分ける
• 黒地に置く白カードはフラットで、角丸を小さくする
• CTAには内側のグラデーションで立体感を出す

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形にする。建物は切り抜きで地の色に馴染ませる
• セクション境界: 直線で切り替える。色帯見出しで区切る
• カードは角丸6px程度にする
• ラベルの帯は小さな赤い台形やリボン型にする
• 数値は円形メダルのバッジに入れる
• ボタンだけを完全なピル型にする

Components

• 店舗検索CTA（button-primary）: 赤銅グラデーションのピル型ボタン。右端に＞矢印を付ける
• 色帯見出し（band-heading）: 全幅の帯に白抜きの見出しを置く。性能テーマごとに帯の色を変える
• メリットカード（merit-card）: 黒地に置く白カード。上辺に赤いリボン型ラベルを掛ける
• 番号付き理由カード（numbered-card）: オリーブ金の見出し帯に大きな番号を入れる。本文はベージュ地にし、写真を添える
• 技術紹介カード（tech-card）: 紺灰地に金茶の小見出しを置き、「」付きで部材名を見せる。写真は右寄せにする
• 数値メダル（medal-badge）: 金縁の円の中に倍率や数値を大きく入れる
• 解説ボックス（explain-box）: 金地の中央に白い大きなボックスを置き、上部に赤茶のタイトル帯を重ねる
• 透かし漢字（watermark-kanji）: 白地セクションの背景に、テーマの漢字を淡色の明朝で大きく置く
• 追従縦型CTA（floating-cta）: 画面右端に固定する赤茶の縦書きボタン

Do's and Don'ts

Do - 金グラデ・黒・濃茶・白灰の地を交互に切り替え、セクションの区切りを地の色で示す - 性能は数値・グラフ・図解で示す - 暗い地の上の強調語は黄色にする - テーマ別の帯見出しは色を変えて区別する - 注釈は小さく添え、誠実さを保つ

Don't - CTA以外に赤系の大きな面を使わない - パステル調やポップな丸いイラストを入れない - 大きな角丸や強いドロップシャドウを付けない - 金の面を単色ベタにしない（必ずグラデーションで金属感を出す） - 本文を詰めた字間にしない

Page Structure

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

1. ファーストビュー（最高性能が標準になったことを宣言する）: 金グラデ地に白の巨大な見出しを置き、その下に住宅外観の切り抜き写真を置く。右上に円形メダルを添える
2. リード（全国で標準仕様であることを伝える）: 白地に下線付きの見出しを置く。強調語は赤茶の箱で囲み、注釈を添える
3. メリット（健康・省エネ・コストの3つの利点を示す）: 金帯の見出しの下、黒地に白カードを3枚縦に並べる。各カードに赤いリボン型ラベルを付ける
4. コンセプト解説（等級の意味と位置づけを説明する）: 金地に白い大きなボックスを置き、長文とピラミッド図を収める
5. 実現できる理由（高性能と手頃な価格を両立できる根拠を示す）: 黒地にベージュの番号付きカードを3枚並べ、写真を添える
6. テクノロジー（部材ごとの技術を紹介する）: 濃茶地に英字の大見出しと分解図を置く。赤茶の帯の下に紺灰の技術カードを並べる
7. CTA（中間）（店舗への来場を促す）: 濃茶地に白い問いかけ文を置き、その下に赤銅のピル型ボタンを置く
8. 総合性能の導入（その他の性能との組み合わせを提示する）: 金グラデ地に4色のタイルと下向き矢印を置き、明朝の大見出しで受ける
9. 性能別解説（気密・換気・暖房・創エネを順に説明する）: 性能ごとに色を変えた帯見出しを置く。灰白地に透かし漢字・金茶の小見出し・写真・グラフを並べる
10. コラム（専門家の視点で信頼性を高める）: 黒地に解説文を置き、紫グラデのピル型の動画ボタンと人物写真を添える
11. CTA（最終）（来場を促す）: 金グラデ地に問いかけ文とCTAを置き、下部に外観写真を配置する
12. フッター（サイト内のナビゲーション）: 灰色地に白線で区切ったアコーディオンリストを並べ、SNSアイコンとコピーライト帯を置く

Imagery

• 住宅外観は晴天のもとで植栽と一緒に撮り、切り抜きで地の色に馴染ませる
• 工場・施工の写真は作業者を入れた実録調にする
• 部材は分解図や断面図の3D・CGイラストで見せる
• グラフは灰色の棒の中で自社の値だけを色で強調する
• 換気・温度の図解は、寒色と暖色の矢印で空気の流れを示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の約1000px幅にコンテンツを収め、地の色は全幅に敷く
• メリットカードと番号付きカードは、PCでは3列の横並びにする
• 技術カードは、PCで写真と文章を左右交互に配置する
• PCではCTAの問いかけ文を1行にまとめる
• フッターは、PCでは多段のリンク一覧にする
• 追従の縦型CTAは、PCでも右端に固定する

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