DESIGN.md — 青緑×グレー石目の機能性サプリ LP（Clinical Teal Gray Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 医師推薦・エビデンスグラフ・明朝の大見出し・石目テクスチャ・定期初回割引
• 地の質感: 薄いグレーのコンクリート・石目テクスチャを地に敷き、白カードを浮かせる。暗いグレーの章は重めの石目を使う
• 形: 角丸はごく小さい長方形カードが基本。成分は丸いバブルで並べ、悩みは吹き出しにする
• 温度感: やや寒色寄りで清潔な印象。ピンクと黄色を差し色に使って温度を足す

Colors

• 地は白と薄グレーの石目を交互に使う。オファー章だけ水色の全面地にする
• ブランドの青緑は明朝の大見出しと見出し帯に使う
• 効果や価格の数字はピンクで大きく強調する
• 申込ボタンは緑のグラデだけにして、他の要素には緑を使わない
• 返金保証は金茶のグラデ帯にして、オファーのすぐ下に置く
• 悩みとリスクの章は暗いグレー地に白文字を置き、空気を変える
• button-primary は文字 #FFFFFF × 背景 #02AC03 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#028902、4.58:1）を使う。
• effect-bubble は文字 #E2516E × 背景 #FFFFFF のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DD3254、4.51:1）を使う。
• benefit-card は文字 #E2516E × 背景 #FFFFFF のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DD3254、4.51:1）を使う。

Typography

• 大見出しは明朝にして、キーワードだけ青緑で大きくする
• 見出しの助詞は小さくし、名詞を大きく見せる
• 数字は見出しの 1.5〜2 倍の大きさにする
• 見出しの末尾は感嘆符を斜体ぎみに添える
• 吹き出しの文言は手書き風の書体にする
• 注釈は 10px の灰色で、各ブロックの直下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分バブルは 2〜3 列、手順アイコンは 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右 5% の余白をとり、石目の地の上に置く
• グラフは必ず白い枠内に入れ、出典を下に添える
• オファー枠は商品画像、価格、月ごとの流れ、注意事項、CTA の順に並べる
• POINT 番号は左端に縦書きの欧文で置く
• 申込 CTA と返金保証帯は 2 回繰り返す

Elevation & Depth

• 白カードには弱いドロップシャドウを付ける
• CTA ボタンは立体的なグラデにし、下に影を付ける
• 地のテクスチャで奥行きを出し、濃い影は使わない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物と商品は角切りまたは切り抜き。食材と食品は円形に切り抜く
• セクション境界: 基本は直線で切り替える。一部の章は下向きの V 字で次へつなぐ
• 成分の効果は白い円バブルに入れ、番号を水色の小丸で添える
• サブボタンは角丸のピル型にする
• バッジは黄色の円形にする
• ラベル帯は青緑で角の小さい長方形にする

Components

• 申込 CTA（button-primary）: 緑グラデの大型ボタン。上段に小さな特典文、下段に太字の申込文、右端に三角
• 返金保証帯（guarantee-band）: 金茶のグラデ帯に明朝の保証見出しを置き、白いピル型の詳細ボタンを添える
• 見出しラベル帯（label-band）: 青緑の長方形に白文字で小見出しを入れる
• 効果バブル（effect-bubble）: 白い円の中に、効果を明朝とピンクの強調で書く。上に番号の小丸を付ける
• 黄色丸バッジ（badge-yellow）: 監修や無料を伝える円形バッジ。黒の太字を入れる
• 特典カード（benefit-card）: 白カードの左に大きな斜体の数字、右にピンク太字の特典名を置く
• 悩み吹き出し（worry-bubble）: くすんだ青緑の吹き出しに、手書き風の白文字を入れる
• お客様の声（voice-card）: 写真の左下に青緑の円形バッジで番号と年齢を重ね、明朝の見出しと本文を続ける
• エビデンスグラフ枠（chart-card）: 白枠に棒グラフや折れ線グラフを入れ、差分は吹き出しで強調する

Do's and Don'ts

Do - 明朝の大見出しを青緑と墨色の 2 色で組む - 効果の主張の近くには必ずグラフと出典を置く - 石目の地と白カードの組み合わせを全体で統一する - 価格は打ち消し線の旧価格とピンクの大きな初回価格を並べる - 暗いグレー章で悩みを見せ、そのあと明るい章で解決へ切り替える

Don't - ポップな丸ゴシックを見出しに使わない - 緑を CTA 以外に使わない - 大きく角を丸めたカードにしない - 出典のない数字を強調しない - 原色の多いイラストで医療らしい信頼感を崩さない

Page Structure

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

1. ファーストビュー（機能と権威を一目で伝える）: 食事中の人物写真の上に、明朝の大見出しを青緑で重ねる。商品と黄色の監修バッジを添える
2. 医師推薦・メディア実績（権威付け）: 青緑のラベル見出しの下に、医師の切り抜き写真とメディア実績の一覧を並べる
3. 取扱実績・初回特典（安心感と特典を予告する）: クリニック写真を並べ、丸バブル 3 つで特長を示す
4. 成分の効果（効果を網羅して見せる）: 大きな数字の見出しの下に、番号付きの白い円バブルを格子状に並べる
5. 試験結果（エビデンスを示す）: 白カードにグラフを入れ、カルーセルで切り替える
6. オファー（初回価格と申込）: 水色の地に白枠を置き、価格、月ごとの流れ、CTA、金の保証帯の順に並べる
7. 注意喚起（問題を意識させる）: 暗いグレーの石目地に白カードの図解を 2 つ置く
8. 悩みの提起（共感を得る）: モノクロ寄りの人物写真に、悩みを吹き出しで 3 つ重ねる
9. 年齢リスクの事実（危機感を高める）: 黄色の番号ラベルと黄色の見出しの下に、グラデの棒グラフを置く
10. 解決提案・成分（商品を救世主として提示する）: 楽しみの写真を縦書きの見出しと交互に並べ、そのあと商品と成分カードを見せる
11. 特典一覧（定期購入の後押し）: 水色グラデの地に、番号付きの白カードを 5 枚縦に並べる
12. 付帯サービスの特長（独自性を示す）: 縦書きの POINT 番号と明朝の見出しを置き、アイコン手順、スマホ画面、比較表で説明する
13. お客様の声（実感を伝える）: 写真に円形の年齢バッジを重ね、明朝の見出しと本文を続ける
14. 食事の糖質（日常のリスクを示す）: 円形の料理写真と青緑の数値カードを左右交互に置く

Imagery

• 人物写真は自然光で、清潔な白やグレーの服を着たものを使う
• 悩みの写真は彩度を落とし、暗めのトーンにする
• 料理は真上か斜め上から撮り、円形に切り抜く
• 地にはグレーの石目テクスチャを敷き、ユーカリ系の葉影を添える
• 図解はフラットな青緑とオレンジの簡単な図形で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP と同じデザインを中央の 750px 幅で表示し、左右には地のテクスチャを敷く
• PC でもグラフと表は 1 カラムのままにする
• 成分バブルは PC では 4〜5 列に広げてもよい

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