--- version: alpha name: Black and Gold Men's Supplement LP description: 漆黒の地にシャンパンゴールドのグラデーションと極太ゴシックを重ねた、男性向けサプリの訴求型 LP。巨大な配合量の数字、丸く切り抜いた素材写真、金の帯見出しで高配合と高級感を押し出す。灰色セクションで悩みと比較表を挟み、明暗のリズムを作る。 colors: background: '#010101' primary: '#DECA88' secondary: '#E1DBC6' on-primary: '#0A0705' on-dark: '#FFFFFF' dark-section: '#727071' accent-1: '#B89A72' surface: '#FEFEFE' background-alt: '#DCDCDC' text: '#0E0E0E' text-muted: '#BDBDBD' line: '#B89A72' tint-1: '#E1E6EA' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.15 accent: fontFamily: Bebas Neue fontSize: 60px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.4 rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' gold-band-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 64px big-number: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 90px ingredient-circle: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 120px worry-balloon: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 110px comparison-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 300px gold-rule-label: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 32px dose-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 44px info-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 160px --- # DESIGN.md — 黒×金の男性向け育毛サプリ LP（Black and Gold Men's Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 漆黒・シャンパンゴールド・極太ゴシック・巨大数字・丸抜き素材写真・光の粒子 - **地の質感**: 黒地に金の粉塵・光の粒・スポットライトの発光。金はメタリックなグラデーション - **形**: 円形の素材写真、雫形の金ループ、横長の金帯、下向き三角の区切り - **温度感**: 暗く重厚で熱量が高い。男性的で強気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#010101` | ページ地の漆黒 | 45% | 画素の実測 | | `primary` | `#DECA88` | ブランドのシャンパンゴールド（見出し文字） | 6% | 画素の実測 | | `secondary` | `#E1DBC6` | 金帯の中間色ベージュゴールド | 5% | 画素の主要色に補正 | | `on-primary` | `#0A0705` | 金帯上の黒文字 | 2% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 黒地上の白い見出し・数字 | 6% | 画素の実測 | | `dark-section` | `#727071` | 悩み・比較表セクションのグレー地 | 10% | 画素の実測 | | `accent-1` | `#B89A72` | 深いブロンズ（金グラデの影側） | 3% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 比較表・カードの白面 | 8% | 画素の実測 | | `background-alt` | `#DCDCDC` | 比較表の淡いグレー列 | 2% | 画素の実測 | | `text` | `#0E0E0E` | 白面上の黒文字 | 2% | 画素の実測 | | `text-muted` | `#BDBDBD` | 黒地の補足本文グレー | 1% | 推定 | | `line` | `#B89A72` | 金の細い罫線 | 0% | 画素の主要色に補正 | | `tint-1` | `#E1E6EA` | 品質セクションの淡い水色グレー地 | 4% | 画素の実測 | - 地は黒を基本とし、悩み・比較表は濃いグレー、品質訴求は淡い寒色グレーに切り替える - 金は常にグラデーション（明るいベージュ→ブロンズ）で使い、ベタの黄色にしない - 見出しは白と金を一行内で混ぜ、強調語を金にする - 金の横帯の上の文字は黒で太く置く - 比較表は白面で自社列だけを金枠で囲む - 赤や青などの有彩色の強調色は使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ・巨大コピー | ゴシック | Dela Gothic One | 900 | 52px | 1.15 | 0.0em | | `accent` | 配合量の巨大数字・英字商品名 | 欧文サンセリフ | Bebas Neue | 700 | 60px | 1.0 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.04em | | `headline-md` | 金帯の見出し・成分名 | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.05em | | `headline-sm` | 明朝の格調見出し・サブコピー | 明朝 | Shippori Mincho | 700 | 20px | 1.5 | 0.1em | | `body-md` | 成分説明の本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.05em | | `note` | 単位注記・小さな補足 | ゴシック | Noto Sans JP | 500 | 10px | 1.4 | 0.0em | - 数字は特大の圧縮サンセリフ、単位 mg は数字の 1/3 の大きさで右下に添える - 見出しは極太ゴシックで、助詞だけ小さくして語の強さを出す - 格調を出したいコピーは金色の明朝を縦書きか細罫と組み合わせる - 本文は短く改行し 3 行程度に収める - 白文字には黒地、黒文字には金帯か白面を必ず敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、素材一覧のみ 2〜3 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは全幅で背景色を切り替え、境界は直線 - 見出しは中央揃え、成分説明は写真と左右交互に配置 - 数字ブロックは写真と重ねて大きく置く - 素材写真グリッドは上段 2 列・以下 3 列で円を整列 - 区切りに金の下向き三角を中央に置く ## Elevation & Depth - 素材の円写真は白い発光のにじみで浮かせる - 商品パッケージは光の粒子・スポットライトを背後に置く - 比較表は影なしで金の枠線で強調 - カードは影なしのフラット白面 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 素材は正円切り抜き、人物は斜めカットの平行四辺形、品質写真は角丸長方形 - **セクション境界**: 直線の背景切替と金帯、中央の金の下向き三角 - 金帯は全幅の横長長方形で角丸なし - 悩みの人物写真は斜め辺で切り、吹き出しは斜線の折れ尻尾 - 雫形の金の太いループ線を装飾に使う - 比較表外枠は角丸 12px ## Components - **金帯見出し**（`gold-band-heading`）: 全幅の金グラデ帯に黒の極太見出し。下中央に小さな三角の吹き出し尻尾 - **配合量の巨大数字**（`big-number`）: 成分名を金の小見出し、その下に白の巨大数字と小さな単位、袋あたり注記の小箱 - **素材の円写真**（`ingredient-circle`）: 白背景の正円写真の下に白文字の素材名。グリッドで並べる - **悩みの吹き出し**（`worry-balloon`）: グレー地にセピア人物写真と金の斜線吹き出しで悩みを短く左右交互に 3 つ - **比較表**（`comparison-table`）: 白とグレーのセル、自社列を金枠と大きな数字で強調、他社は小さく - **金罫ラベル**（`gold-rule-label`）: 左右に金の細罫を伸ばし中央に金文字の小見出し - **用量バッジ**（`dose-badge`）: 金の正円に黒文字で 1 日の粒数を表示し商品画像に重ねる - **品質説明カード**（`info-card`）: 角丸写真の下に白カード、太字リードと金ラベル付き補足文 ## Do's and Don'ts **Do** - 黒地に金グラデと白の極太文字の三色で構成する - 配合量は画面幅いっぱいの巨大数字で見せる - 素材写真は白背景で正円に切り抜き、黒地で発光させる - 暗い黒セクションの間にグレー地セクションを挟んでリズムを作る - 金の粒子・光線で高級感と力強さを足す **Don't** - パステルや鮮やかな有彩色を使わない - 細く軽い書体で見出しを組まない - 金をベタの黄色で塗らない - 白地を長く続けて黒の重厚感を薄めない - 角丸の大きいポップなボタンや丸みのあるイラストを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（強い呼びかけと商品の印象付け）: 男性ポートレート上に黒の極太コピー、下に黒地で金の雫ループと商品パッケージ、金粉の爆発 2. **配合量の提示**（主要成分の量で優位性を示す）: 金の成分名と白の巨大数字を 2 つ並べ、直後に金帯見出し 3. **業界最高峰の配合**（成分ごとの量を視覚化）: 明朝の金見出しと発光する円写真に巨大数字を重ねる 4. **成分の総数**（配合成分の豊富さを訴求）: 商品を中心に素材円写真を円環に配置、光の粒の背景 5. **悩みの提起**（ターゲットの共感を得る）: グレー地に人物写真と斜線の吹き出しを左右交互に 3 つ 6. **ブランドメッセージ**（解決策として商品を提示）: 黒地に大きな金の雫と白の縦積みコピー、用量バッジ付き商品 7. **成分詳細**（各成分の量と効能を説明）: 円写真と巨大数字・短い説明を左右交互に配置 8. **素材一覧**（全配合素材の網羅）: 正円写真のグリッドと素材名、金罫ラベルで栄養素を列挙 9. **飲みやすさ**（継続しやすさを伝える）: カプセル写真の円に金の弧、短い説明文 10. **他社比較**（こだわりを比較で示す）: グレー地に人物写真、白の比較表で自社列を金枠強調 11. **品質管理**（製造の安心感を伝える）: 淡い寒色地に黒見出しと金の下線、工場写真と説明カード ## Imagery - 人物は自然光のポートレートか、彩度を落としたセピア調で悩む表情 - 素材は白背景の物撮りを正円に切り抜く - 背景は黒に金の粉塵・光の粒・放射状の光 - 装飾に金と黒のメタリックな太いループ（雫形）を使う - 品質訴求は青白い工場・研究者写真 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は縦長の画像主体の 1 カラムで、PC でも中央固定幅で表示する - SP では display を 44〜52px にし、巨大数字は画面幅の 6 割程度 - 素材グリッドは SP 3 列、PC でも同じ列数で中央寄せ - PC では左右に黒の余白を延長し背景を途切れさせない - 比較表は SP で文字を縮めて 4 列を維持 ## 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-6e843e90`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/levante/lmbn001/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。