DESIGN.md — 赤×金×黒の炎系訴求型サプリLP（Bold Red Gold Black Infomercial Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、ラグジュアリー・ダーク
• キーワード: 炎エフェクト・金色立体文字・赤×黒・権威・受賞・価格訴求・極太見出し
• 地の質感: 炎・光粒子・グラデーションの写真合成。金属調の金文字とドロップシャドウで光沢感を強く出す。
• 形: 角張った帯・斜めカットの見出し帯・円形メダル・月桂樹エンブレム。角丸はCTAのみ大きい。
• 温度感: 高温。赤と金が支配し、黒地で熱量を締める。

Colors

• 地色は赤・黒・濃紺を交互に使い、間に白ブロックを挟んで情報を読ませる。
• 大見出しは金グラデーション文字か白抜き＋黒縁取りにする。
• 価格・割引率は赤地に白か黄、または赤い大数字で示す。
• 黄色帯は区切り見出しやメディア掲載帯に限定する。
• 研究・医師セクションだけ青系で冷静さを出す。
• CTAは緑のみで、他の要素に緑を使わない。
• button-primary は文字 #FFFFFF × 背景 #2E9B2E のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#288728、4.58:1）を使う。

Typography

• 大見出しは画面幅いっぱいに置き、キーワードだけ一段大きくする。
• 助詞や補足語は小さくして強調語との差を出す。
• 金文字には太い黒縁とドロップシャドウを付ける。
• 縦書きの見出しを人物写真の横に添える。
• 注釈は※付きで見出し直下に小さく必ず入れる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較やバッジは 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の画像バナーとして積み重ねる。
• 価格ブロックは赤枠付き白カードで囲む。
• 悩みは縦書きのチェック付きリストで並べる。
• 理由は番号メダル＋大見出し＋写真の繰り返し。
• 人物の声は写真に黒帯白文字の吹き出しを重ねる。

Elevation & Depth

• 金文字・見出しに強いドロップシャドウ
• 価格カードやメダルに外側の光彩
• 写真は影なしで全幅配置
• 白カードは影なしで枠線で区切る

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 全幅の矩形。人物は切り抜きで背景に合成
• セクション境界: 直線区切り中心。一部V字・斜めカットの帯
• 帯見出しは斜め端や台形の金帯にする。
• 実績はメダル・月桂樹の円形エンブレムで示す。
• 割引率は赤い円形バッジにする。
• CTAは立体感のあるピル型。

Components

• 申込CTA（button-primary）: 緑グラデのピル型、左に商品画像、右に矢印円アイコン
• 価格カード（price-card）: 黒地に金帯ラベル、通常価格→特別価格の大数字
• 割引率バッジ（discount-badge）: 赤い円形に黄色の%OFF大文字
• 実績メダル（award-medal）: 月桂樹付き金メダルに年数やNo.1表記
• 金帯見出し（gold-band-heading）: 金グラデの横帯に黒の太字見出し
• 理由番号メダル（reason-number）: 黒丸に金縁と星、番号を明朝で
• 声の吹き出し（voice-caption）: 写真上に黒帯白文字の短文、年齢を明朝で添える
• 悩みチェック（worry-check）: 濃紺地にチェック付き縦書き悩み文、強調語は黄色
• 注釈（note-text）: ※付きの小さな出典・注意書き

Do's and Don'ts

Do - 炎・光粒子の背景に金色の立体文字を重ねる。 - 実績・受賞・メディアを連続で見せる。 - 価格は通常→特別→クーポン後の段階で下げて見せる。 - 数字は特大にし単位は小さくする。 - 全ての訴求見出しに注釈を添える。

Don't - 淡色・余白多めの上品な構成にしない。 - 細い書体を見出しに使わない。 - CTA以外に緑を使わない。 - 角丸カードを多用して柔らかくしない。 - 注釈を省かない。

Page Structure

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

1. ファーストビュー（効果と新しさを一撃で伝える）: 炎背景に人物、極太の金文字と実績メダル、利用者3名の写真
2. 販売実績（人気を数字で示す）: 赤金背景に商品を並べ、完売・累計数を金文字で
3. 成分と効果（2成分の働きを示す）: 対象者3つの円形タグ、×で結ぶ2枠、金文字の効果見出し
4. 価格オファー（初回価格とクーポンで申込を促す）: 赤枠白カード内に黒地価格・割引バッジ・受賞・クーポン・CTA
5. 安心訴求（定期の不安を解消）: オペレーター写真と赤見出しの白カード
6. 受賞・メディア・医師（権威付け）: 金メダル、黄帯メディア見出し、青地の医師プロフィール
7. お客様の声（共感と実感）: 写真に黒帯白文字吹き出し、名前と年齢
8. メカニズム（作用を説明）: 黒地に白カードを縦に並べ、赤金の縦書き見出し
9. 悩みの提起（自分ごと化）: 濃紺地の縦書きチェックリスト、黄色帯で原因転換
10. 原因データ（根拠提示）: グラフと黄色強調の大見出し、丸ラベルでつなぐ
11. 開発者・研究（信頼性）: 社長写真プロフィール、論文画像、研究所写真コラージュ
12. 選ばれる理由（要点のまとめ）: 赤金背景に番号メダルと大見出し・写真を4回繰り返す

Imagery

• 炎・火花・光粒子の合成背景を多用する。
• 健康的な女性のウエスト・腹部写真、笑顔のポートレート。
• 腸のCGを青く光るX線風で描く。
• 白衣の医師・研究者・顕微鏡など研究風景。
• 商品パッケージを斜めや複数並べて配置。
• 金メダル・月桂樹・トロフィーの装飾素材。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央にSP幅（約750px）のカラムを置き左右は単色背景。
• 画像バナーは比率を保って拡大しない。
• CTAは画面下部に追従固定を推奨。
• 文字サイズはSPの1.2倍程度まで。

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