DESIGN.md — 黒×金×赤の臨床訴求型サプリ LP（Black Gold Clinical Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、力強い・インパクト、ラグジュアリー・ダーク、信頼・誠実
• キーワード: 黒×金の光沢・赤の極太数値見出し・臨床グラフ・月桂樹バッジ・権威・実績訴求・クーポン CTA
• 地の質感: 黒い石目・金の粒子とボケ光・金属的グラデーション文字。明るいセクションは白〜薄グレーに木目や大理石風のうっすらした質感
• 形: 金縁の円形メダル、斜めにカットした黒帯、白い角丸カード、円形切り抜きの人物写真
• 温度感: 暖色寄り。金・オレンジ・赤の熱量を黒で締める

Colors

• 黒地と明るいグレー地を交互に配置し、セクションの切り替えをはっきりさせる
• 効果・数値を表す最重要語だけを赤の極太文字にする
• 金は月桂樹・メダル・数字のグラデーション文字に限り、高級感の演出に使う
• グラフは非摂取群をグレー青、摂取群を赤にして比較を固定する
• 本文中の要点は黄色マーカーか赤文字で強調する
• 価格セクション以降は深い赤地に切り替え、緑の CTA を目立たせる
• button-primary は文字 #FFFFFF × 背景 #2F9A3A のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#298633、4.61:1）を使う。

Typography

• 見出しは 1 行ずつサイズを変え、キーワードを 2 倍程度に大きくする
• 成分名・権威系は明朝、効果訴求は極太ゴシックと使い分ける
• 縦書きの極太見出しを写真の横に置く構図を何度か使う
• 数字は金グラデーションか赤で大きく、単位は小さくする
• 注釈は 10px 前後でグラフや主張の直下に必ず置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分アイコンは 3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 画像主体のセクションは全幅、本文は左右 16〜20px の余白
• グラフは白カードに収め、直下に注釈を置く
• お客様の声は円形写真→VOICE 番号→本文→注釈の順
• 下向き三角の連続矢印でセクション間をつなぐ

Elevation & Depth

• 白カードには薄い影（0 4px 12px rgba(0,0,0,.12)）
• CTA ボタンは下側に濃い影で立体感を出す
• 金メダル・商品画像は光彩とボケ光で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物・素材は円形切り抜き、成分写真は円、工場写真は角丸の矩形
• セクション境界: 直線の切り替えが基本。黒帯は斜めにカットした形を使う
• バッジは金縁の円形メダルか月桂樹で囲む
• 見出し帯は黒地に白文字の斜め帯
• 価格カードは金の細い装飾枠で囲む

Components

• クーポン申込ボタン（button-primary）: 緑のグラデーションに白の極太文字。左上に赤い円形の限定バッジ、右に丸矢印
• 金メダルバッジ（badge-gold-medal）: 黒地の円に金縁と星。中に白文字で認証や機能性を 2 行で表示
• 月桂樹付き実績数字（laurel-number）: 金の月桂樹で左右を囲み、金グラデーションの巨大数字を置く
• 黒の斜め見出し帯（heading-band-black）: 成分名や導入語を黒の斜めカット帯に白の明朝で載せる
• 臨床グラフカード（chart-card）: 白カードに折れ線グラフ。赤の円形吹き出しで改善を示し、黄色い期間ハイライトを置く
• お客様の声（voice-card）: オレンジ縁の円形人物写真、黒四角の名前・年齢ラベル、セリフ体の番号、マーカー強調の本文
• 悩みチェックリスト（check-list）: 赤チェックと太字のキーワードを 3 項目並べ、人物写真を右に添える
• 価格カード（price-card）: 白地に商品画像と大きな赤の価格、割引率の赤い円、返金保証などの赤ラベル
• 質問カード（faq-card）: 黒ヘッダーに Q 番号と質問、白本文にイラスト。横スクロールで並べる

Do's and Don'ts

Do - 効果の数値とキーワードは赤の極太で大きくする - 主張の直後に必ず小さな注釈を入れる - 黒×金のセクションと明るいセクションを交互に置く - 商品パッケージを各セクションに繰り返し登場させる - 実績の数字は月桂樹と金グラデーションで飾る

Don't - 淡いパステルや細い文字だけで見出しを作らない - 金を本文や広い面に使いすぎない - グラフの摂取群と非摂取群の色を入れ替えない - 注釈を省いて効果を断定しない - CTA に赤以外の主張色を増やしすぎない

Page Structure

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

1. ファーストビュー（2 つの効果を一目で伝える）: 黒地に金の臓器イラストと粒子。上に金の円 2 つで効果名、白の極太で動詞、下に月桂樹メダル 3 つ
2. 効果の詳細ビジュアル（効果ごとの印象付け）: 写真の横に赤・黒の縦書き極太見出しを置く 2 ブロック
3. 臨床試験結果（根拠を示す）: 茶色帯の見出しとグラフのスライダー、注釈
4. 実績（人気を示す）: 黒の告知帯の後、月桂樹付きの累計数字と赤い大文字、商品の並び
5. 成分紹介（機能性成分を説明）: 黒帯の成分名、全幅の素材写真、金メダル、グラフカード
6. 開発元の信頼（権威付け）: 黒の石目地に縦書き看板、建物・研究写真、金の実績数字
7. メディア掲載（第三者の評価）: 誌面写真に赤の手描き丸と矢印、ティールの説明帯
8. お客様の声（共感と安心）: 円形写真と VOICE 番号のカードを交互に左右配置
9. 悩みの提起（自分ごと化）: 黒地に白いチェックリストカード
10. 解決提案（商品の提示）: 黒金背景に効果名の枠囲みと大きな商品画像
11. サポート成分（配合の豊富さ）: 黒い皿の上の商品、円形素材写真を 3 列で 6 つ
12. 品質管理（安全性）: 白い大理石風の地に明朝見出し、工場写真 3 列、ティールの解説ボックス
13. 価格・CTA（購入）: 赤地に価格カード、黄色のクーポン面、緑のボタン、金枠の返金保証
14. よくある質問（不安の解消）: 横スクロールの Q カードと縦の Q&A リスト

Imagery

• 黒背景に金の粒子やボケ光、光沢のある金の臓器 CG
• 素材は自然光のクローズアップ（新芽、黄色い花など）で緑と黄色を出す
• 中高年男性の笑顔ポートレートを円形に切り抜く
• 白衣の手や医師のサムズアップで医療感を出す
• 研究室・工場の写真は青白いトーンで清潔に
• 紙吹雪や金のきらめきで実績を祝う演出
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後の 1 カラムに SP の画像をそのまま置き、左右は黒か薄グレーで埋める
• 成分アイコンやメダルは PC では 1 列に並べてもよい
• スライダーの左右矢印は黒の円形ボタンで画面端に出す
• 注釈の文字は PC でも 12px 以上を保つ

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