DESIGN.md — 果実オレンジ×金帯の健康飲料訴求 LP（Warm Orange Organic Juice Infomercial LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、ナチュラル、上品・高級、信頼・誠実
• キーワード: 果実オレンジ・金の帯見出し・大きな数字・権威訴求・緑の立体CTA・繰り返す価格ブロック
• 地の質感: 和紙や大理石風の淡いテクスチャ地に果実・しぶきの切り抜き写真を重ねる
• 形: 円形の栄養素バッジ、金のリボン帯、角丸の小カード、ピル型の立体ボタン
• 温度感: 暖色寄り。オレンジと金で温かく、白と生成りで清潔感を保つ

Colors

• 地は白・生成り・淡グレーのテクスチャを交互に使い、セクションの切れ目を作る
• オレンジは果実写真と帯・タブに使い、ブランドの顔にする
• 主CTAは必ず緑の立体ボタンにし、他の要素に緑の面は使わない
• 価格の数字と限定帯は赤系、特典ラベルは水色で並べる
• 見出しの権威・品質の帯は金〜茶のグラデーションでまとめる
• 悩み提起だけ紺グレーの暗い帯にし、気分を切り替える
• 本文の強調は赤文字か黄色マーカー
• button-primary は文字 #FFFFFF × 背景 #4E9A2A のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#438424、4.6:1）を使う。
• limited-band は文字 #FFFFFF × 背景 #E06A62 のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D73E33、4.54:1）を使う。
• benefit-labels は文字 #FFFFFF × 背景 #76A6DA のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#3479C2、4.51:1）を使う。
• gold-ribbon は文字 #FFFFFF × 背景 #9A7434 のコントラスト比が 4.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#947032、4.54:1）を使う。
• number-box は文字 #FFFFFF × 背景 #9A7434 のコントラスト比が 4.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#947032、4.54:1）を使う。

Typography

• 大見出しは明朝で、キーワードだけ 1.5〜2 倍に拡大する
• 数字はイタリック気味の太い明朝で、グラデや縁取りをつける
• 本文はゴシックで行間広め
• 注釈は小さく、セクション末にまとめる
• 英字の筆記体は飾りとして見出しの背後に薄く置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カードは 2 列まで
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは画面幅いっぱいの背景で区切る
• 価格ブロックとCTAを 3〜4 セクションごとに繰り返す
• 栄養素は円形バッジを放射状・六角形に配置
• 比較は 2 列カードで左右対比
• 品質訴求は 01/02/03 の番号ボックスで章立て

Elevation & Depth

• CTAボタンは上ハイライトと下影のある立体表現
• 悩みリスト・カードは薄い影で浮かせる
• 円形バッジは光沢グラデーションで球体風に
• 金の帯にはリボン端と光沢を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品と果実は切り抜き、人物・風景は角丸の矩形や円
• セクション境界: 直線の切り替えを主にし、一部は波形や下向き三角の矢印
• 栄養素・成分は円形バッジ
• 見出しは金のリボン帯か角括弧で囲む
• 特典ラベルは角の小さい矩形を 3 つ横並び

Components

• 緑の立体申込ボタン（button-primary）: 再生アイコン付きピル型。送料無料と価格のバッジ、商品写真を重ねる版もある
• 価格ブロック（price-block）: 生成り地に商品名、丸い特別価格バッジ、赤の大きな数字、通常価格を並べる
• 限定告知帯（limited-band）: 赤地に白抜きで数量限定を伝える。小さな枠ラベルを上に添える
• 特典ラベル 3 連（benefit-labels）: 水色の小さな矩形で特典を 3 つ横並び
• 金のリボン見出し（gold-ribbon）: 金〜茶のグラデーション帯に白文字。品質や受賞の見出しに使う
• 円形の栄養素バッジ（nutrient-badge）: 白やオレンジ光沢の円に成分名を明朝で。複数を放射状に並べる
• 悩みチェックカード（worry-card）: 白カードにチェックマークと下線付きの悩み文を縦に 4 つ並べる
• 体験談カード（review-card）: 写真の上に白カードを重ね、太い見出し、名前帯、本文と黄色マーカーを入れる
• 番号ボックス（number-box）: 金の正方形に 01 と章名を白で入れ、品質訴求の章を区切る
• 2 列比較カード（compare-card）: 見出しタブはオレンジとグレー。果実写真と短い説明を並べる

Do's and Don'ts

Do - 権威（受賞・医師・メディア・ランキング）を前半にまとめて出す - 数字は特大で見せ、※注釈を必ず添える - 価格ブロックとCTAを繰り返して離脱を防ぐ - 果実の切り抜き写真を余白に散らして世界観をそろえる - 強調は赤文字と黄色マーカーの 2 種類に限る

Don't - CTAを緑以外の色にしない - 地を濃い色で塗りつぶし続けない（暗い帯は悩み提起だけ） - ポップな丸ゴシックで見出しを作らない - 注釈を省いて数字だけ見せない - 寒色を主役にしない（青は安全訴求の一部だけ）

Page Structure

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

1. ファーストビュー（お試し価格と商品の世界観を一目で伝える）: 上部にオレンジ価格帯と黒の商品帯、下に果実と器の俯瞰写真に縦書きの明朝コピー
2. ナビゲーションカード（特長・推奨・掲載へ誘導）: 写真付きカードの横スライダーとドットのページ送り
3. タイプ別の声（悩み別にSNSの投稿を見せる）: オレンジ枠のタブ 4 つ、SNS投稿風カード 2 列
4. 栄養成分（栄養の豊富さを数字で示す）: 六角形の食材コラージュに円バッジ、赤いNo.1ラベル
5. 権威・受賞・メディア（信頼を積み上げる）: 医師の推奨率を金の月桂冠で、受賞はロゼット2つ、雑誌表紙のコラージュ
6. お客様の声（共感を得る）: 手書き風付箋の短い声と、人物写真の丸いコラージュ
7. 価格・CTA（申込を促す）: 赤の限定帯、生成りの価格ブロック、緑の立体ボタン
8. ランキング（人気を示す）: 白い布の背景に金の巨大なNo.1と商品の切り抜き
9. 悩みの提起（自分ごと化させる）: 紺グレーの帯見出し、モノクロ人物、チェックカード 4 つ、下向き三角
10. 解決策の提示（商品で解決できると示す）: 黄色のリボン見出し、ロゴ、円バッジを 2 つ左右に
11. 体験談（実感を伝える）: 赤と白の四角に1文字ずつの見出し、写真の上に重なるレビューカード
12. 専門家コメント（専門性で後押し）: 白衣の人物写真とプロフィール、半透明カードにマーカー付きコメント
13. 選ばれる理由（品種・品質・製法を説明）: 金の番号ボックス 01〜03 で章立て、比較カード、青い安全パネルと証明書
14. 飲み方・アレンジ（続けやすさを示す）: オレンジ地に比率の大きな数字とグラス、アレンジ写真を手書きラベル付きで散らす

Imagery

• 鮮やかなオレンジの果実を枝ごと切り抜き、余白に散らす
• ジュースのしぶきや液だれを曲線の飾りに使う
• 器やグラスは真上か斜め上から、明るい自然光で
• 人物は笑顔の女性や親子を明るい室内で撮る
• 金の月桂冠・王冠・リボンで権威を飾る
• 背景は大理石や和紙のような淡いテクスチャ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約 750px の SP レイアウトを置き、左右を淡い色で埋める
• セクション背景は全幅に広げ、内容は中央寄せのまま
• 比較カードやアレンジ写真はPCで 3〜4 列まで広げてよい
• 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 行書くと起動時に読み込まれる。