DESIGN.md — 黒×金の男性向け育毛サプリ LP（Black and Gold Men's Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型
• キーワード: 漆黒・シャンパンゴールド・極太ゴシック・巨大数字・丸抜き素材写真・光の粒子
• 地の質感: 黒地に金の粉塵・光の粒・スポットライトの発光。金はメタリックなグラデーション
• 形: 円形の素材写真、雫形の金ループ、横長の金帯、下向き三角の区切り
• 温度感: 暗く重厚で熱量が高い。男性的で強気

Colors

• 地は黒を基本とし、悩み・比較表は濃いグレー、品質訴求は淡い寒色グレーに切り替える
• 金は常にグラデーション（明るいベージュ→ブロンズ）で使い、ベタの黄色にしない
• 見出しは白と金を一行内で混ぜ、強調語を金にする
• 金の横帯の上の文字は黒で太く置く
• 比較表は白面で自社列だけを金枠で囲む
• 赤や青などの有彩色の強調色は使わない

Typography

• 数字は特大の圧縮サンセリフ、単位 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。