DESIGN.md — 深緑×金の授賞式風 住宅ランキング LP（Emerald Velvet Gold Ranking Housing LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、ナチュラル、力強い・インパクト
• キーワード: 授賞式・深緑ベルベット・金の額縁・月桂冠・紙吹雪・木の床
• 地の質感: 暗い緑のダマスク柄の地紋とベルベットのカーテン。金箔のグラデーションと光の粒を重ねる
• 形: 四角い金の額縁、丸い写真、リボン帯、ピル型ボタン、細い縦線の区切り
• 温度感: 暗い緑の地に、金と木の暖かい色を合わせる

Colors

• 地はすべて深緑系にする。ブロックごとに明るい緑と暗い緑を交互に置いてリズムを作る
• 金は額縁・王冠・リボン・大見出しのグラデーションだけに使う
• CTA だけは光沢のある黄緑のグラデーションにし、金と区別する
• 文字は生成りの白か淡いグレーにする。純黒は使わない
• 最後の CTA セクションは一段明るい緑にして、締めの盛り上がりを出す
• 写真は木の暖かい色を主役にし、地の緑と補色の関係にする
• button-primary は文字 #FFFFFF × 背景 #63BB33 のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#468524、4.52:1）を使う。
• ribbon-title は文字 #F4FCF6 × 背景 #CCAA6B のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8E6E31、4.54:1）を使う。

Typography

• 見出しは明朝体にして、格調を出す
• 「第」「位」は小さく、数字と名称は大きくして、大きさに強弱をつける
• 大見出しは金のグラデーションにし、ドロップシャドウで浮かせる
• 本文はゴシック体で小さめ、行間は広めにとる
• CTA の上の補足文は「＼ ／」で挟み、中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。順位の見出しとバッジは横 2 分割から縦積みにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 1 順位 = 見出しブロック → 額縁の写真 → 下向き矢印 → 補足文 → CTA、の順で 1 つのセクションにする
• 見出しブロックは左右の端を細い縦線で囲む
• 順位セクションの境界では、地の明るさを切り替える
• CTA は毎回中央に置き、横幅は 80% 前後にする
• 紙吹雪は左右の余白側に散らし、本文には重ねない

Elevation & Depth

• CTA ボタンは上が明るく下が暗いグラデーションにし、下に影を落とす
• 金の額縁は立体的なモールディング風にし、内側に影を入れる
• 丸い写真に金の縁と外側の光をつける
• 大見出しには金の文字と暗い影を重ねる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 主な写真は金の額縁の中に四角で入れる。ファーストビューの補助写真は金の縁の円形にする
• セクション境界: 直線で切り替え、地の色の明暗で区切る。下向きの細い V 字の矢印を添える
• CTA は完全なピル型にし、左に「FREE!」の白い小札、右に丸い矢印アイコンを置く
• ポイントの帯は左端が丸い白い小札と、右に向かって消えるグラデーションの帯を組み合わせる
• 順位バッジは月桂冠＋王冠＋筆記体風の「No.」と数字で作る
• 締めの CTA の囲みは細い白線の枠で、一部を開けて見出しを重ねる

Components

• 資料請求ピル CTA（button-primary）: 光沢のある黄緑のピル型ボタン。左に「FREE!」の小札、右に丸い矢印
• 順位見出しブロック（rank-heading）: 明朝で「第N位＋名称」、下にポイントの帯と説明文。左右を細い縦線で囲む
• 月桂冠の順位バッジ（laurel-badge）: 王冠付きの月桂冠に No.と数字。1〜3 位は金・銀・銅、4 位以下は緑。下にいいね数・日付・展示場名
• ポイントの帯（point-ribbon）: 白い丸い小札「ココがポイント」と、右に消えるグラデーション帯の上に短い見出し
• 金の額縁の写真（gold-frame-photo）: 室内写真を太い金の額縁に入れ、美術館の展示のように見せる
• 金のリボン見出し（ribbon-title）: 金のリボン帯の上に、白い明朝の短い見出しを載せる
• スラッシュ補足文（slash-lead）: 下向きの細い矢印と「さらに」の後、「＼ ／」で挟んだ補足文を CTA の直前に置く
• 冊子プレビューのパネル（photobook-panel）: 冊子のページ画像を 3 枚並べ、下に淡い緑の角丸パネルで説明を置く

Do's and Don'ts

Do - 順位セクションは同じ型で繰り返し、バッジの色だけ変える - 金は額縁・王冠・見出しに絞り、高級感を保つ - 紙吹雪と光の粒を余白に散らして、発表会の雰囲気を出す - 各セクションの最後に必ず同じ CTA を置く - 写真は明るい木の室内にして、暗い地との明暗差を出す

Don't - 白や明るいグレーの地を大きく使わない - CTA を金色にしない（装飾に埋もれる） - 丸ゴシックや手書き風の書体を使わない - 写真を額縁なしの裁ち落としで並べない - 紙吹雪を本文や数字の上に重ねない

Page Structure

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

1. ファーストビュー（ランキングの発表という舞台を示し、資料請求へ誘う）: 緑のベルベットのカーテンと王冠を背景に、金の大見出しと丸い写真 4 枚を配置。下に生成りの冊子カードと CTA を置く
2. 発表の導入（ランキングの出典と趣旨を伝える）: 金のリボン見出しと、中央揃えの 2 行のリード文
3. 第1位（最上位の素材を印象づける）: 順位見出しブロック＋金の月桂冠バッジ＋金の額縁の写真＋矢印＋CTA
4. 第2位（2 位の紹介）: 同じ型で、バッジを銀にする。地は暗い緑
5. 第3位（3 位の紹介）: 同じ型で、バッジを銅にする
6. 第4〜6位（残りの順位の紹介）: 同じ型で、バッジを緑にする。地の明暗を交互に切り替える
7. 締めの CTA（無料の資料を最後に押す）: 明るい緑の地に金の大見出し。白線の枠の中に冊子 3 枚、淡い緑のパネルの説明、CTA を置く
8. フッター（注釈・ページトップ・著作権表示）: 小さな注釈と、V 字の「PAGE TOP」、極小のコピーライト

Imagery

• 写真は無垢の床が主役の、明るいモダンな LDK や玄関の広角写真
• 暖色の間接照明と大きな窓の自然光を合わせ、木目をはっきり見せる
• 装飾は金の紙吹雪・光の粒・王冠・月桂冠・リボンで授賞式を演出する
• 背景は暗い緑のダマスク柄の地紋と、ベルベットのカーテン
• 冊子のモックアップは白い誌面に写真をレイアウトした平置きにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版を基準とした推奨。SP では本文の幅を 88% にする
• 順位見出しとバッジは、SP では縦積みにするか、バッジを右上に小さく置く
• 額縁の写真は SP では幅いっぱいに近づけ、額縁の太さを 6px 程度に細くする
• ファーストビューの丸い写真は SP では 2〜3 枚に減らし、見出しの周りに置く
• 冊子プレビューの 3 枚は、SP では横スクロールか 2 列にする
• CTA の高さは SP で 52px 程度、幅は 85% を確保する

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