--- version: alpha name: Emerald Velvet Gold Ranking Housing LP description: 深い緑のダマスク柄の地に金の額縁・月桂冠・紙吹雪を重ねた、授賞式のような高級感のある住宅展示場ランキング LP。順位ブロックを繰り返し、各ブロックの最後に黄緑のピル型 CTA で資料請求へつなぐ。 colors: primary: '#034811' background: '#0E1E11' background-alt: '#16331D' secondary: '#28723F' accent-1: '#CCAA6B' cta: '#63BB33' on-cta: '#FFFFFF' on-dark: '#F4FCF6' text-muted: '#C8C8BE' surface: '#FEFDFB' tint-1: '#B4DDBA' accent-2: '#9E8467' line: '#5E6F5E' cta-accessible: '#468524' accent-1-accessible: '#8E6E31' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 800 lineHeight: 1.25 letterSpacing: 0.04em headline-lg: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em accent: fontFamily: Playfair Display fontSize: 26px fontWeight: 500 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.03em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px rank-heading: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 160px laurel-badge: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 140px point-ribbon: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px gold-frame-photo: backgroundColor: '{colors.accent-1}' height: 230px ribbon-title: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 56px slash-lead: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 60px photobook-panel: backgroundColor: '{colors.tint-1}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 200px --- # DESIGN.md — 深緑×金の授賞式風 住宅ランキング LP（Emerald Velvet Gold Ranking Housing LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、ナチュラル、力強い・インパクト - **キーワード**: 授賞式・深緑ベルベット・金の額縁・月桂冠・紙吹雪・木の床 - **地の質感**: 暗い緑のダマスク柄の地紋とベルベットのカーテン。金箔のグラデーションと光の粒を重ねる - **形**: 四角い金の額縁、丸い写真、リボン帯、ピル型ボタン、細い縦線の区切り - **温度感**: 暗い緑の地に、金と木の暖かい色を合わせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#034811` | ブランドの深緑・セクションの地 | 25% | 画素の実測 | | `background` | `#0E1E11` | ランキングブロックの暗い緑の地 | 30% | 画素の実測 | | `background-alt` | `#16331D` | CTA帯の緑 | 15% | 画素の実測 | | `secondary` | `#28723F` | 締めの CTA セクションの明るい緑 | 9% | 画素の実測 | | `accent-1` | `#CCAA6B` | 金の額縁・見出しの金 | 4% | 画素の実測 | | `cta` | `#63BB33` | 資料請求ボタンの黄緑 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 推定 | | `on-dark` | `#F4FCF6` | 暗い地の上の見出し・本文 | 2% | 画素の実測 | | `text-muted` | `#C8C8BE` | 説明文の淡いグレー | 1% | 推定 | | `surface` | `#FEFDFB` | 生成りのフォトブックカード | 1% | 画素の実測 | | `tint-1` | `#B4DDBA` | 締めのセクションの淡い緑のパネル | 2% | 画素の実測 | | `accent-2` | `#9E8467` | 木の床の茶色（写真の主な色） | 8% | 画素の主要色に補正 | | `line` | `#5E6F5E` | 細い区切り線・枠線 | 0% | 推定 | | `cta-accessible` | `#468524` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#8E6E31` | AA を満たす補正値（計算） | | 計算 | - 地はすべて深緑系にする。ブロックごとに明るい緑と暗い緑を交互に置いてリズムを作る - 金は額縁・王冠・リボン・大見出しのグラデーションだけに使う - 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し（金のグラデーション） | 明朝 | Shippori Mincho | 800 | 36px | 1.25 | 0.04em | | `headline-lg` | 順位と名称（第N位＋名称） | 明朝 | Noto Serif JP | 500 | 28px | 1.3 | 0.05em | | `headline-md` | 締めの CTA 見出し・リボンの見出し | 明朝 | Shippori Mincho | 700 | 26px | 1.35 | 0.05em | | `headline-sm` | ポイントの帯の見出し | 明朝 | Noto Serif JP | 500 | 15px | 1.4 | 0.03em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.04em | | `accent` | いいね数・「No.」の数字 | 欧文セリフ | Playfair Display | 500 | 26px | 1.1 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | | `note` | 日付・展示場名・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.03em | - 見出しは明朝体にして、格調を出す - 「第」「位」は小さく、数字と名称は大きくして、大きさに強弱をつける - 大見出しは金のグラデーションにし、ドロップシャドウで浮かせる - 本文はゴシック体で小さめ、行間は広めにとる - 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 ```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-717da688`（元 LP の URL から採番） - **元 LP**: https://sfc.jp/ie/lp/instaphotobook/ad3/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。