DESIGN.md — オレンジ×生成りの自然派健康ドリンク LP（Warm Orange Organic Supplement Drink LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、ナチュラル、やさしい・柔らかい、信頼・誠実
• キーワード: 果実オレンジ・生成り・明朝見出し・金のバッジ・繰り返し CTA・女性の笑顔
• 地の質感: 木目やリネン風の淡い地、果実と葉の写真、金の箔風バッジや帯
• 形: 角丸は小さめ。丸いバッジや円形の成分アイコン、帯リボン、下向き三角でセクションをつなぐ
• 温度感: 暖かい（オレンジ・ベージュ寄り）。悩みパートだけ寒色グレーで切り替える

Colors

• 地は白と生成りを交互にし、セクションの切り替わりを色でわかるようにする
• オレンジは果実の写真・帯・飲み方パートの地に使う。文字色には使わない
• 主 CTA はすべて同じ緑のグラデーションボタンにそろえる
• 赤ピンクは限定帯・数字の強調・本文の重要文だけに使う
• 金茶は番号ラベル、受賞・推奨バッジに使って権威感を出す
• 悩み提起のパートだけ寒色グレーと白黒写真にし、解決パートで暖色に戻す
• button-primary は文字 #FFFFFF × 背景 #5A9C2B のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#4C8424、4.53:1）を使う。
• cta-banner は文字 #FFFFFF × 背景 #5A9C2B のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#4C8424、4.53:1）を使う。
• price-block は文字 #E2625C × 背景 #FEFBEC のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D9322A、4.55:1）を使う。
• authority-badge は文字 #FFFFFF × 背景 #9B7130 のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#976E2F、4.58:1）を使う。
• number-label は文字 #FFFFFF × 背景 #9B7130 のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#976E2F、4.58:1）を使う。

Typography

• 大見出しは明朝で、強調したい語だけを 1.4 倍に大きくする
• 価格の数字は極太ゴシックで本文の 4〜5 倍にする
• 注釈には ※ を付け、10px 前後で各ブロックの直下に置く
• 体験談の本文は手書き風フォント（Klee One など）で親しみを出す
• 英字のスクリプト体は背景の飾りとして薄く重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較や成分は 2〜3 列の小さなグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 画像中心のセクションは全幅で見せ、本文ブロックは左右 5% 余白
• 価格ブロックと CTA を 3〜4 セクションごとに挟む
• セクション間は下向き三角や帯でつなぐ
• 体験談は写真と文章を左右交互に並べる

Elevation & Depth

• CTA ボタンには下方向に濃い影を付けて立体的にする
• 体験談カードや悩みリストには薄い影を付ける
• 金のバッジにはグラデーションと光沢を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの矩形が基本。成分や受賞は円形バッジにする
• セクション境界: 下向き三角、斜めの帯、全幅の色帯で区切る
• 主 CTA は角丸の大きいピル型にする
• 特典タグは角丸小の矩形を横に 3 つ並べる
• 番号ラベルは金茶の四角に細い枠線を付ける

Components

• 緑のグラデーション CTA（button-primary）: 左に再生アイコン、白い太字。下に影
• 価格入り CTA バナー（cta-banner）: 緑の枠の中に送料無料ラベル、大きな価格、商品画像、赤い丸バッジを入れる
• 価格ブロック（price-block）: 赤ピンクの限定帯、商品名、丸い特別価格バッジ、赤い大きな価格、水色のタグ 3 つ
• 金の権威バッジ（authority-badge）: 月桂樹付きの円形メダル。順位や推奨率を入れる
• こだわり番号ラベル（number-label）: 金茶の正方形に 01 と短い語を入れ、下に三角を付ける
• 悩みチェックリスト（worry-list）: 白いカードの左に青のチェック、明朝の短文を 4 行
• 体験談カード（testimonial-card）: 写真と縦書き見出し、本文の重要文は赤字に黄色マーカー
• FAQ アコーディオン（faq-item）: 細い枠の行の右端に＋を置く
• 成分の円（ingredient-circle）: グラデーションの円の中に成分名と No.1 表示

Do's and Don'ts

Do - 権威の根拠となる数字にはすべて注釈番号と出典を付ける - CTA は同じデザインで何度も繰り返す - 女性の明るい笑顔の写真で生活のイメージを見せる - 強調する文は赤字＋黄色マーカーに限る - 明朝の見出しとゴシックの本文を組み合わせる

Don't - CTA の色を緑以外に変えない - 暖色の地にビビッドな青や紫を使わない - 見出しを全部ゴシックにして高級感をなくさない - 注釈なしで No.1 などの表示をしない - 余白を詰めすぎて写真と文字を重ねすぎない

Page Structure

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

1. ファーストビュー（商品と主な訴求を一目で伝える）: 女性写真に縦書きの明朝コピー、商品写真、金のバッジを 3〜4 個
2. CTA（最初の申込導線）: 価格入りの緑バナー
3. SNS 投稿（口コミで共感を得る）: タブで切り替える 2 列の投稿カード
4. 無添加・アレンジ（安心感と飲みやすさを伝える）: 果汁写真の上に明朝見出し、2 列のレシピカード
5. 権威・受賞・メディア（信頼性を出す）: 推奨率メダル、受賞ロゴ、雑誌の表紙を重ねたコラージュ
6. お客様の声（効果の実感を伝える）: 漢字 1 字ずつの枠見出し、写真と縦書き見出しを左右交互に並べる
7. 価格オファー（申込を促す）: 限定帯、大きな価格、タグ 3 つ、緑ボタン
8. 悩みの提起（自分ごと化させる）: スレート帯の見出し、白黒写真、チェックリスト
9. 原因と解決（商品を解決策として示す）: 食材写真 3 枚、黄色リボン、成分の丸バッジ
10. 専門家コメント（専門家の裏付け）: 白衣の人物写真と枠付きのコメント
11. 成分の特長（含まれる栄養を伝える）: オレンジの帯見出し、矢印でつながる円、グラデーションの円
12. こだわり 3 点（品質の差を示す）: 金の番号ラベル、写真、比較カード、青の安全パネル
13. 飲み方・FAQ（不安を解消する）: オレンジ地に比率図、アレンジ写真のグリッド、アコーディオン
14. 定期の説明（解約の不安をなくす）: 赤枠の注意ボックス、月ごとの矢印図、丸バッジ、アイコン 3 つ

Imagery

• 自然光で撮った 20〜40 代女性の明るい笑顔
• オレンジの小さな果実と葉をたっぷり写した寄りの写真
• グラスに注いだ果汁を逆光で見せる写真
• 白い背景や木目の上に置いた商品ボトル
• 悩みパートだけ彩度を落としたモノクロ写真
• 金のメダル、リボン、月桂樹の装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の 1 カラムを幅 750px 程度の中央寄せで見せることを推奨する
• 背景の色帯は全幅に広げ、内容は中央の列に収める
• 体験談や比較は PC では横 2〜3 列に広げてよい
• CTA の幅は最大 480px 程度にする

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