--- version: alpha name: Gold Gradient and Black Premium Housing Performance LP description: 金色グラデーションと黒・濃茶の地を交互に重ねた、重厚な高性能住宅のLPです。図解と数値で性能を説明し、セクションごとに色を変えた帯見出しで性能テーマを分けています。CTAには赤銅色のピル型ボタンを使います。 colors: primary: '#AC9B49' background: '#FEFEFE' dark-section: '#000000' secondary: '#342704' surface: '#2E3942' background-alt: '#E3E9E9' tint-1: '#DAD3B5' accent-1: '#897D41' cta: '#A8402E' on-cta: '#FEFEFE' text: '#2F383F' accent-2: '#4B7183' marker: '#F2E15A' text-muted: '#8D8D8D' accent-3: '#554A6C' tint-2: '#93754E' typography: display: fontFamily: Noto Sans JP fontSize: 68px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Oswald fontSize: 44px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 2px md: 6px lg: 10px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px band-heading: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-md}' height: 72px merit-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 100px numbered-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 420px tech-card: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' height: 320px medal-badge: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px explain-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 1200px watermark-kanji: textColor: '{colors.background-alt}' typography: '{typography.display}' height: 120px floating-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 300px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AC9B49` | 金グラデーション地の基調色 | 14% | 画素の実測 | | `background` | `#FEFEFE` | 白の本文地 | 11% | 画素の実測 | | `dark-section` | `#000000` | 黒のメリット・コラム地 | 11% | 画素の実測 | | `secondary` | `#342704` | テクノロジー部の濃茶地 | 8% | 画素の実測 | | `surface` | `#2E3942` | 濃茶地に置く紺灰カード | 8% | 画素の実測 | | `background-alt` | `#E3E9E9` | 灰色グラデーション地 | 10% | 画素の実測 | | `tint-1` | `#DAD3B5` | 理由カードのベージュ地 | 6% | 画素の実測 | | `accent-1` | `#897D41` | 番号カードのオリーブ金見出し帯 | 2% | 画素の実測 | | `cta` | `#A8402E` | 赤銅色のCTAボタン | 1% | 推定 | | `on-cta` | `#FEFEFE` | CTAボタンの文字 | 0% | 画素の主要色に補正 | | `text` | `#2F383F` | 見出し・本文の濃い文字 | 3% | 画素の主要色に補正 | | `accent-2` | `#4B7183` | 気密セクションの青灰帯 | 2% | 画素の実測 | | `marker` | `#F2E15A` | 暗地で強調する黄色文字 | 0% | 推定 | | `text-muted` | `#8D8D8D` | フッター地の灰色 | 10% | 画素の実測 | | `accent-3` | `#554A6C` | 暖房セクションの紫帯 | 1% | 画素の実測 | | `tint-2` | `#93754E` | 金系の小見出し文字 | 0% | 画素の主要色に補正 | - ファーストビュー・解説ボックス・まとめCTAの地は、金のグラデーション（明るい金から暗いオリーブへ）にする - メリットとコラムは黒地にする。テクノロジー部は濃茶地に紺灰カードを並べ、地の色を変えて段落ごとのリズムを作る - 性能テーマ別の帯見出しは、青灰・深緑・紫・山吹など性能ごとに色を変える - 暗い地の上で強調したい語は黄色、明るい地の上で強調したい語は太字の黒にする - CTAは赤銅色から赤茶へのグラデーションを付けたピル型だけにし、他の要素には赤系を使わない - 白・灰色地に置く小見出しは金茶の文字にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きな商品コンセプト名 | ゴシック | Noto Sans JP | 500 | 68px | 1.1 | 0.02em | | `headline-lg` | 金地に置く大見出し | 明朝 | Shippori Mincho | 600 | 34px | 1.4 | 0.05em | | `headline-md` | 帯見出し・セクションタイトル | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `headline-sm` | 金茶の小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.05em | | `body-md` | 本文（広めの字間） | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.1em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 英字の大見出し・番号 | 欧文サンセリフ | Oswald | 500 | 44px | 1.0 | 0.02em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.05em | - 本文は字間を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 ```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-12d8b307`（元 LP の URL から採番） - **元 LP**: https://www.ichijo.co.jp/lp/dannetsuou/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。