DESIGN.md — 赤×金×黒の煽り型サプリ通販 LP（Bold Red Gold Direct Response Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、ラグジュアリー・ダーク
• キーワード: 赤×金・黒地・極太立体文字・放射光・権威訴求・価格オファー
• 地の質感: 放射状の光線、紙吹雪、ハニカム、稲妻、赤いカーテンなどの派手な合成背景。文字には金のグラデーション・縁取り・ドロップシャドウを付ける
• 形: 斜めの帯、下向き矢印の吹き出し、六角形バッジ、メダル、クーポン券型の枠。角はほぼ四角
• 温度感: 高温。赤・金・橙で熱量を上げ、紺と黒で引き締める

Colors

• 赤・黒・紺の暗い地を交互に置き、価格や保証だけ白とクリームの面で読ませる
• 見出しの主役は金のグラデーション文字か、白文字に赤の縁取り
• 重要語は黄色や赤で一部だけ色を変える
• 割引率・送料無料などの数字は赤の帯や赤い円バッジに乗せる
• 申込ボタンだけ緑にして、赤の多い画面から浮かせる
• 医療・権威の訴求には紺〜青の地を使う
• button-primary は文字 #FEFEFE × 背景 #52A416 のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#428512、4.53:1）を使う。

Typography

• 大見出しは縁取りとドロップシャドウ、金グラデーションで立体的に見せる
• 1 行の中で重要語だけ 1.5〜2 倍に大きくする
• 価格の数字は最大級の明朝で赤グラデーションにし、円・税込は小さく添える
• 縦書きの見出しも混ぜてリズムを付ける
• 斜体や傾きを付けた文字で勢いを出す
• 注釈は小さいグレー文字で各ブロックの下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。画像中心の全幅ブロックを縦に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは隙間なく全幅で連結する
• 価格カードは赤地の上に白いカードを左右 4% の余白で置く
• 写真と見出しを重ね、人物の上に煽り文字を載せる
• 下向き三角や矢印で次のセクションへつなげる
• オファーブロックはページ中盤と終盤に 2 回繰り返す

Elevation & Depth

• 見出し文字に濃い影と太い縁取りを付ける
• 白い価格カードに弱い影を付ける
• 申込ボタンは立体ボタン（下に濃い影とハイライト）
• メダルやバッジは金属的なグラデーションで光沢を出す

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は切り抜いて背景と合成する。誌面や TV 画面は四角のまま斜めに重ねる
• セクション境界: 斜めの帯、下向きの三角、矢印型の切り欠き
• バッジは六角形・円・メダル型
• クーポンは金の縁取りの券型
• 吹き出しは下向きの三角が付いた帯
• ボタンは角丸 8px 程度の横長で、右に丸い矢印アイコン

Components

• 緑の申込ボタン（button-primary）: 光沢のある緑グラデーションに白い太字、右に丸い再生矢印を置く
• 価格オファーカード（price-card）: 白いカードに商品写真と、取り消し線付きの通常価格、赤い巨大価格を並べる
• 割引率の円バッジ（discount-badge）: 赤〜橙の円に白文字で割引率を入れ、価格の右上に重ねる
• クーポン券（coupon）: 白地に金の縁取り、赤の明朝で割引額、右に筆記体の英字、下に黒帯ラベル
• 下向き吹き出し帯（heading-ribbon）: 金または赤の帯に短い前置き文を入れ、下に三角を付ける
• 赤ラベル（tag-label）: 送料無料・解約自由などの条件を赤帯または赤枠で横に並べる
• 保証ボックス（guarantee-box）: クリーム地に金の二重枠、明朝見出しと小さめの本文
• 特典番号バッジ（number-badge）: 金の六角形に小さなラベルと大きな番号を縦に入れる
• 体験談の名札（testimonial-tag）: 赤い縦帯に名前と年齢を縦書きで入れ、人物写真の横に置く

Do's and Don'ts

Do - 見出しは常に縁取り・影・グラデーションで立体的にする - 権威→体験→ランキング→価格の順で根拠を積み上げる - オファーには割引率・送料無料・保証を必ずセットで出す - 暗い地と赤の地を交互に置き、白は価格と説明だけに使う - 放射光や紙吹雪などの背景で熱量を保つ

Don't - 淡いパステルや余白の多いミニマルな構成にしない - 見出しを細字や影なしのフラットな文字にしない - 申込ボタンを赤にして背景に埋もれさせない - 注釈を省いて価格条件をあいまいにしない - 角丸の大きいカードを多用して柔らかくしない

Page Structure

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

1. ファーストビュー（効能の訴求と商品の格付けを一目で伝える）: 暗い地に人体の透視イラストと光、赤金の極太見出し、商品パッケージを扇状に並べる
2. 初回価格の予告（すぐ申込める安さを提示する）: クリームの注意書きボックスと、緑の枠の価格カード
3. メディア掲載（専門誌・TV で権威付けする）: 紺〜黒の地に誌面と TV 画面を斜めに重ね、金の帯で掲載数を示す
4. 専門家の推薦（専門家の顔で信頼を補強する）: 白衣の人物の切り抜きに斜めの金文字の肩書きと、プロフィールを白文字で添える
5. お客様の声（利用者の実感を伝える）: 笑顔のシニア写真に赤い縦帯の名札と、太い白縁取りの吹き出し文字
6. ランキング実績（人気の証明）: 赤いカーテンと紙吹雪の背景に金の月桂冠と白いメダル
7. 新習慣の提案（従来の方法との差を示す）: 禁止マーク付きの写真と、赤枠の大きな造語見出し
8. 価格オファー（申込へ誘導する）: 放射光の上に商品、赤地に白カードで価格、クーポン、保証、緑のボタンを並べる
9. 悩みの原因解説（不調の原因を不安とともに伝える）: 黒紫の地に血管・ウイルスの CG、黄色の強調語、稲妻と部位の丸バッジ
10. 解決策と成分（商品と成分の根拠を示す）: ハニカムと光線の背景に商品と蜂の写真。説明は金枠の解説ボックスに入れる
11. メーカーの信頼性（企業の歴史と実績を伝える）: 木目や古紙風の暗い地に古い新聞・社屋・社員の写真、縦書きの金明朝
12. 購入特典（申込の後押し）: 赤の放射地に紙吹雪、六角形の番号バッジ、特典の画像と白文字の説明
13. 国内製造・品質（安心感で締める）: 青のグラデーション地に工場写真と縦書きの見出し

Imagery

• シニアの笑顔のポートレートは明るく、逆光気味に撮る
• 人体の透視 CG で痛む部位をオレンジに発光させる
• 商品パッケージは光の放射や金の粒子と合成し、ヒーロー的に見せる
• 白衣の専門家は切り抜いて背景と合成する
• ハニカム、蜂、とろける液体などの素材感をクローズアップで見せる
• 紙吹雪・稲妻・カーテンなどの演出素材を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480〜640px 幅の SP レイアウトを置き、左右は暗い単色かぼかし背景で埋める
• 画像中心の構成なので、PC でも 1 カラムを保つ
• 価格カードとボタンは PC でも中央の幅に合わせる
• 固定の申込ボタンを画面下に追加してもよい

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