DESIGN.md — 黒×金×赤の男性活力サプリ訴求型LP（Black Gold Red Men's Energy Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 黒地・金グラデーション・赤帯・極太見出し・権威づけ・価格訴求
• 地の質感: ひび割れた石・荒れた岩肌・炎・光の筋などの写真テクスチャ。金文字はメタリックなグラデーション。
• 形: 四角い帯と角張ったカードが主体。V字の下向き区切りや斜めカットも使う。丸はバッジと価格ラベルに限る。
• 温度感: 暖色寄りで熱量が高い。黒の重さと赤・金の熱さの対比で迫力を出す。

Colors

• 基本の地は黒。白・グレーの地は価格カードや本文を読ませるパートだけに使う。
• 大見出しは金グラデーションか白で書く。黒地では赤い帯の上に白文字を乗せる。
• 赤は帯・価格・強調語に使う。面で使うのは区切り帯だけにする。
• CTA は緑のバナーに統一する。他の要素には緑を使わない。
• 白地の本文では、重要な語句に黄色マーカーか赤字を当てる。
• 医師・研究者など権威のパートは青地、女性の声のパートは淡ピンク地にして気分を切り替える。
• cta-banner は文字 #FEFEFF × 背景 #2E9A2C のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#288626、4.6:1）を使う。

Typography

• 大見出しは 2〜3 行に分け、一番大事な語を 1.5 倍の大きさにする。
• 黒地の金文字にはメタリックなグラデーションと黒いドロップシャドウを付ける。
• 数字（価格・数量・%）は斜体の明朝で特大にし、単位は小さく添える。
• 本文は 14px 前後にする。強調は太字で、赤字か黄色マーカーを付ける。
• 注釈は 10px のグレーで、該当箇所のすぐ下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みや声のカードは 2 列グリッド。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの間に余白は空けず、背景の切り替えと帯でつなぐ。
• 見出しは中央揃え、本文は左揃えにする。
• 価格カードは白地に影を付けて黒地から浮かせる。
• CTA バナーは価格カードの直後と、成分パートの最後に繰り返し置く。
• 比較図・ピラミッド図などのインフォグラフィックを全幅で入れる。

Elevation & Depth

• 価格カード・声のカードには、黒地上でも見える濃い影を付ける。
• 金文字には外側に黒い影を付けて立体感を出す。
• CTA バナーは立体的なボタン風にし、下に暗い影を付ける。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角いまま全幅で使う。悩みは円形、成分は円形か六角形に切り抜く。
• セクション境界: 直線の切り替えに加え、下向きの V 字・斜めカット・赤い横帯で区切る。
• 角丸は小さめにして、角張った力強さを保つ。
• 特典の番号は黒い盾形のラベルにする。
• 割引率・送料無料は赤い円形バッジにする。

Components

• 緑の CTA バナー（cta-banner）: 左に再生アイコンと初回価格、右に商品画像を置いた横長バナー。上に条件を示す小さな帯を付ける。
• 価格カード（price-card）: 白地のカード。打ち消し線付きの通常価格、赤の特大価格、割引率の円形バッジ、注釈を入れる。
• 赤い見出し帯（red-band）: 全幅の深紅の帯に白い太字の見出しを置き、セクションの区切りにする。
• 特典リスト行（benefit-row）: 黒い盾形の番号ラベルと、赤の大きな特典名を組み合わせた白い行。
• 黄色の告知ボックス（notice-box）: 黄色地に黒の太字の説明文と写真を入れ、赤字で補足する。
• 権威者パネル（authority-panel）: 青地か黒地に人物写真を切り抜いて置く。明朝の名前と肩書きのラベル群を並べる。
• お客様の声カード（voice-card）: 金の細い枠の白いカード。上に写真とキャッチ、下に赤字の強調を混ぜた本文を置く。
• 円形バッジ（badge-circle）: 赤地に白文字で割引率・送料無料を示す。

Do's and Don'ts

Do - 黒地・金文字・赤帯を基本にして、高級感と熱量を両立させる。 - 数字は特大の斜体にして、一目で伝わるようにする。 - 権威・実績・ランキングを示す要素を中盤に重ねて置き、信頼を補う。 - CTA バナーは同じデザインで 3 回以上繰り返す。 - 本文の重要語には黄色マーカーか赤字を付ける。

Don't - パステル調の淡い配色を全体に使わない。 - 細い書体や小さな見出しで迫力を落とさない。 - CTA の色を緑以外に変えない。 - セクション間に大きな白い余白を空けて、流れを切らない。 - 注釈を省いて誇張表現だけを残さない。

Page Structure

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

1. ファーストビュー（実績と商品を一瞬で示す。）: 鍛えた男性の写真を背景に、白の極太コピー・受賞メダル・成分バッジ 3 つ・商品画像を重ねる。
2. 販売実績・在庫告知（人気の高さと緊急性を伝える。）: 赤地に金のコピー、白い枠に黄色マーカー、金地に特大の黒文字を組み合わせる。
3. 価格オファー（初回価格を提示して申込に誘導する。）: 白い価格カード、緑の CTA バナー、黄色の梱包告知ボックスの順に並べる。
4. 定期コースの特典（定期購入への不安を取り除く。）: 黒地に金の明朝見出しを置き、盾形の番号付きで特典を 6 行並べる。
5. 利用者の評判・メディア掲載（話題性を示す。）: SNS 風の写真、書籍の表紙を並べた画像、赤い明朝の見出しで構成する。
6. ランキング実績・医師の推薦（権威づけ。）: グレー地に金の数字と赤いメダルを 10 個並べる。続けて青地に医師の写真と、黄色マーカー付きの本文を置く。
7. リニューアル・成分紹介（新しく配合した成分の価値を伝える。）: 黒地に金の明朝見出し、成分の図解、研究者パネル、ピラミッド図を並べる。
8. 悩みの提起（共感を呼んで危機感を高める。）: モノクロのひび割れテクスチャを背景に、円形写真と赤ラベルの悩みを 4 つ並べ、統計の数字を金で大きく出す。
9. メカニズム・比較（効果の仕組みを説明する。）: 人体シルエットのグラフを白いボックスに入れ、青から金への変化で見せる。
10. 女性目線の声（魅力の向上を訴求する。）: 淡ピンク地に円グラフの 80% を置き、チェックリストと 2 列の写真カードを並べる。
11. 価格オファー（再掲）（もう一度申込に誘導する。）: 前半と同じ価格カードと CTA を繰り返す。
12. 主要成分の詳細（配合量と原料のこだわりを示す。）: 炎や岩の写真を背景に、金の特大数字・教授パネル・棒グラフ・円形の素材写真を並べる。
13. お客様の声（実感の声で背中を押す。）: 黒地に金枠の白いカードを縦に並べる。写真に明朝のキャッチを重ね、本文は赤字で強調する。

Imagery

• 筋肉質の男性や、悩む中年男性を暗いトーンで撮った写真。
• 原料は黒い木目や岩の上に置き、強いスポットライトを当てる。
• 炎・稲妻・光の筋・宇宙などのエフェクト背景で熱量を出す。
• 白衣の医師やスーツの研究者を切り抜き、肩書きのラベルを添える。
• 人体シルエットや棒グラフを、金・赤・青のグラデーションで描いたインフォグラフィック。
• 黒いパウチの商品画像を、斜めの光とともに繰り返し見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の 1 カラムを中央に最大 750px 幅で置き、左右は黒地で埋めることを推奨する。
• 背景のテクスチャ写真は全幅に広げ、文字ブロックは中央の幅に収める。
• 悩みや声のカードは、PC では 3〜4 列に広げてもよい。
• CTA バナーは最大 640px 幅にして中央に置く。

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