DESIGN.md — 朱橙×黄色の臨床訴求型サプリLP（Warm Orange Clinical Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、力強い・インパクト、信頼・誠実
• キーワード: 朱赤グラデーション・臨床データ・大きな数字・定期オファー・果実と製品・金の月桂樹
• 地の質感: 白木目調・植物の線画を淡く敷いた地に、光沢のある橙グラデーション帯や金色リボンを重ねる
• 形: 角丸の白カード、角丸ラベル、ピル型CTA、下向き三角でつなぐ帯見出し
• 温度感: 暖色中心で熱量高め。CTAだけ緑で寒色寄りに外す

Colors

• 地は白・クリーム・淡黄を交互にし、オファー部だけ朱赤〜橙の全面グラデにする
• 見出し帯は橙グラデ＋白文字、要所の大見出しは紺で落ち着きを出す
• 価格・割引率・強調語は赤、数字実績は赤〜金のグラデ文字
• CTAだけ緑のグラデで暖色の中から際立たせる
• 特典ラベルは赤地白文字のピル、マーカーは黄
• 注釈はグレーではなく黒の小さい文字で白地に置く
• button-primary は文字 #FFFFFF × 背景 #12996C のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#10875F、4.51:1）を使う。
• benefit-pill は文字 #FFFFFF × 背景 #F6270C のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E82209、4.5:1）を使う。
• section-ribbon は文字 #FFFFFF × 背景 #F46B1F のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C94E0A、4.59:1）を使う。

Typography

• 数字は本文の3〜4倍に大きくし、単位は小さく添える
• 大見出しは極太ゴシックで、助詞だけ小さくする
• 帯見出しとCTAは明朝で上品さを足す
• 強調語は赤文字＋黄マーカーで二重に目立たせる
• 注釈は※付きで11px程度、必ず該当数字の近くに置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、価格カード内のみ商品画像と価格の2列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅背景＋中央寄せの白カード
• オファーブロック（価格カード＋CTA＋注意事項）をページ内で3回繰り返す
• グラフはカルーセルでドット送り
• お客様の声は人物イラストとカードを左右交互に配置
• 注意事項は白地にベタ組みで箇条書き

Elevation & Depth

• 白カードに薄い影（0 4px 12px rgba(0,0,0,.12)）
• CTAボタンは光沢グラデと下影で立体的に
• 見出し帯は影付きで地から浮かせる
• 商品パッケージ画像にドロップシャドウ

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品と果実は切り抜き、人物・研究室は全幅の角版
• セクション境界: 直線区切り＋下向き三角の吹き出し状の帯
• 価格カードは大きめ角丸の白
• 特典ラベルはピル型
• 割引バッジは下向き矢印型の赤
• スタンプ風の円形バッジを斜めに置く

Components

• 緑の申込ボタン（button-primary）: ピル型緑グラデ、左に紺の円で1日あたり価格、右に白丸矢印
• 価格オファーカード（offer-card）: 朱赤地に白カード。通常価格取消線、赤い割引バッジ、巨大な赤い価格
• 特典ラベル（benefit-pill）: 淡黄帯の上に赤地白文字ピルを2つ並べる
• 橙の帯見出し（section-ribbon）: 橙グラデ角丸帯に白文字、金の月桂樹を左右に添える
• 数字実績サークル（stat-circle）: 赤〜橙の円グラフ風に、黒ラベルと金色の大数字
• 臨床グラフカード（graph-card）: 白カードに折れ線グラフ、橙の見出しピル、左右矢印でカルーセル
• お客様の声（voice-card）: 線画の人物と白カード、PR表記、赤字＋黄マーカーで強調
• スタンプバッジ（stamp-badge）: 赤い二重円のかすれスタンプ風で試験実施を示す
• 表示情報ボックス（notice-box）: クリーム地に紺枠、紺ラベルと箇条書き

Do's and Don'ts

Do - 数字実績・割引率は画面幅いっぱいに大きく見せる - オファーブロックを複数回繰り返す - 強調には赤文字と黄マーカーを使う - 根拠データには必ず注釈を添える - CTAは緑にして暖色地と対比させる

Don't - 寒色を地色に広く使わない - CTAを赤や橙にしない - 注釈を省略・極小化しすぎない - 写真を暗くトーンダウンしない - 細い書体だけで見出しを組まない

Page Structure

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

1. ファーストビュー（効果領域と信頼を即伝える）: 木目地に橙枠の大見出し、商品と果実、スタンプバッジ
2. 販売実績帯（社会的証明）: 深紅地に金リボンと月桂樹、大きな金数字
3. 臨床試験（科学的根拠の提示）: 淡黄地に紺の大見出し、グラフカードのカルーセルと試験注釈
4. 表示情報（法定表示）: クリーム地の枠ボックスに箇条書き
5. オファー（購入へ誘導）: 朱赤地に価格カード、特典ピル、リピート率、緑CTA、注意事項
6. 実績お礼（人気の強調）: 金のきらめき背景に赤い大数字、商品を横に並べる
7. 継続率（継続しやすさ）: 橙帯見出しと赤い円グラフ風数字
8. お客様の声（共感）: 線画人物と白カードを交互に
9. 開発背景（メーカーの信頼）: 深紅帯見出し、研究者写真に商品を重ねる
10. 成分訴求（作用と含有量）: 橙ラベル2つ、太字黒コピー、橙地に果実と黄色の数字
11. 飲み方（手軽さ）: 枠付き数字の見出しと黄色カード
12. よくある質問（不安解消）: 黒Q・橙Aの四角アイコン付き白カード
13. 申込フォーム（購入完了）: 橙の矢印帯見出し、青系の表組みフォーム

Imagery

• 商品パッケージは切り抜きで影付き、果実を添える
• 赤い果実は艶のある実物写真を葉付きで
• 人物は白衣の研究者写真、明るい白基調
• お客様は線画＋淡彩のイラスト
• 背景に植物の線画を薄い茶で敷く
• 金のリボン・月桂樹・光の粒で実績を飾る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約640px幅にSPの構成をそのまま置く
• PCでは臨床グラフを2枚横並びにする
• FVは商品を右、見出しを左の横組みにする
• 継続率と声はPCで左右2カラム
• フォームはPCで表組み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 行書くと起動時に読み込まれる。