DESIGN.md — 深緑×金×えんじの健康青汁通販 LP（Deep Green and Gold Health Drink Sales LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、上品・高級、ナチュラル、力強い・インパクト
• キーワード: 深緑・金グラデーション・えんじ CTA・明朝の大見出し・メダルバッジ・権威訴求
• 地の質感: 深緑の布目や葉のボケ、金色の紙吹雪、野菜写真の合成。グレーのセクションにはひび割れたコンクリート調の質感を使う
• 形: 円形メダル、角丸の大きくない帯、斜めに切ったリボン帯、黒い角丸の吹き出し
• 温度感: 深緑と金で落ち着いた暖かみ。えんじで熱量を足す

Colors

• 権威・ブランド訴求の区間は深緑の地に金グラデーション文字を置く
• 悩み・問題提起の区間はグレーやダークの地に切り替え、明暗で物語を切る
• 価格・OFF 率・CTA はえんじ一色に統一し、他の用途で多用しない
• 特典リストは淡い金地に金紙吹雪、番号はえんじの丸で示す
• 強調語は緑またはえんじの文字色、補助として黄緑マーカーを敷く
• 注釈は小さいグレー文字で各ブロック下に置く
• nutrient-medal は文字 #8E342D × 背景 #C1967B のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DAC1B1、4.57:1）を使う。
• label-ribbon は文字 #FFF0EE × 背景 #549053 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#487B47、4.51:1）を使う。

Typography

• 商品名・数字・価格は明朝の極太、説明見出しはゴシックの極太と使い分ける
• 暗い地の大見出しは金グラデーションか白で書く
• 数字は単位より 1.5〜2 倍大きくし、単位や「食」「個」は小さく添える
• 前置きの短い語は「＼ ／」で挟むか手書き体で斜めに置く
• 縦書きの大見出しを 1 か所に使ってリズムを変える
• 注釈の※番号は見出しの右上に小さく付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メダルは 2〜4 列、画像は 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは画像と文字を一体にした全幅ブロックで作る
• 見出しは中央揃え、本文は左揃え
• 価格カードは焦げ茶の地の上に白カードで浮かせる
• 比較グラフは全幅に近いサイズで見せる
• CTA は価格ブロック内と要所に繰り返して置く

Elevation & Depth

• CTA ボタンは下側にやや濃い影と上部ハイライトを付け、立体的に見せる
• 白い価格カードには薄いドロップシャドウ
• メダルバッジは金の縁取りと内側のグラデーションで浮き出し感を出す
• 写真は白枠を付けて少し傾け、ポラロイド風に重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は白枠付きで傾けて重ね、食材は切り抜いて合成する。メダルは正円
• セクション境界: 基本は直線で区切る。斜めのリボン帯や、上下を山型・波型に切った区切りも混ぜる
• CTA は角丸 8px 程度の横長ボタンにし、右端に丸い矢印アイコンを付ける
• 栄養や特典の数値は正円メダルに収める
• 悩みは黒の角丸吹き出しに入れ、人物の横に縦に並べる
• ラベル帯は角丸小さめの緑またはえんじの帯にする

Components

• 購入 CTA ボタン（button-primary）: えんじのグラデーションに白い明朝文字。左に小さな特典メダル、右に丸い矢印
• 栄養メダル（nutrient-medal）: ベージュの正円に金の縁。成分名、えんじの大きな数値、緑の小ラベルを入れる
• 価格カード（price-card）: 白カードに通常価格、えんじの初回価格ラベル、特大の価格数字、右上のえんじ円 OFF バッジ
• 特典リスト行（benefit-row）: 淡い金地。左にえんじの丸番号、上に小さな前置き、右にえんじ明朝の特典名
• 悩み吹き出し（worry-bubble）: 黒の半透明角丸ボックスに白文字。要点は太字にする
• 緑ラベル帯（label-ribbon）: 緑の角丸帯に白ゴシック。見出し前の前置きに使う
• 理由番号バッジ（reason-badge）: えんじの円に金縁。小さく「理由」、大きく 2 桁の番号
• 限定タグ帯（limited-tag）: 左に焦げ茶の旗型タグ、右に深緑の帯と白い大見出し

Do's and Don'ts

Do - 実績数字や No.1 表記は深緑の地に金の明朝で特大にする - 悩み→事実データ→解決→理由→価格の流れを守る - 数値の主張には必ず※注釈を添える - 食材写真を商品の周りに配置し、自然さと栄養感を出す - 価格と CTA のセットはページ内で 2 回以上繰り返す

Don't - えんじを装飾に広く使わない。価格・CTA・OFF に限定する - パステル調や丸ゴシックの可愛い表現にしない - 金文字を明るい地に細く置いて読みにくくしない - 余白を広く取りすぎたミニマル構成にしない - グラフや数値を根拠の注釈なしで出さない

Page Structure

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

1. ファーストビュー（割引率と商品の価値を一目で伝える）: 上部にえんじの割引帯。明るい地に緑の前置き帯、金明朝の商品名、商品と野菜の合成写真
2. 成分メダルと CTA（主要な栄養値を示して購入へ誘導する）: 深緑の地に栄養メダルを 4 つと横長ラベルを 2 つ並べ、下に購入ボタン
3. 権威・実績（No.1 実績と累計販売数で信頼を作る）: 深緑に金の紙吹雪、関連商品の並び、特大の金数字
4. 共感・利用者の声（よくある生活の悩みに共感する）: 傾けた人物写真と、半透明の帯に入れた短い一言を交互に並べる
5. 価格オファー（限定価格と定期コースの条件を示す）: 限定タグ帯、商品写真、焦げ茶の地に白い価格カードと CTA
6. 特典一覧（特典を 5 つ並べてお得感を出す）: 金地に月桂樹の大見出し、番号付きの特典行
7. 継続率訴求（多くの人が定期購入を選んでいることを示す）: 淡い緑の枠の中に人型アイコンを 5 つ並べ、比率で見せる
8. 悩みの提起（栄養不足への不安を呼び起こす）: グレーの地に筆文字の大見出し、考え込む人物と黒い吹き出し
9. 事実データ（公的データで問題を裏付ける）: 棒グラフ・折れ線グラフ、えんじの強調帯、縦書きの大見出し
10. 解決策の提示（商品を解決策として登場させる）: 斜めのえんじ帯で切り替え、深緑の地に商品とメダルを並べる
11. 選ばれる理由（4 つの理由で商品の価値を深掘りする）: 理由番号バッジ、栄養充足率の横棒グラフ、食材写真、素材写真に 100% 使用の円バッジ
12. 栄養の換算比較（身近な食品に置き換えて栄養量を実感させる）: 食材の切り抜き写真と金縁メダルを左右交互に置き、緑ラベルを添える

Imagery

• 野菜・鶏むね肉・大豆を白木や明るい卓上に並べ、高い彩度で撮る
• グラスに入った緑の飲料を主役にし、粉末とスプーンを添える
• 人物は中高年から若い女性まで幅広く。飲んで笑顔になる瞬間を撮る
• 悩みの場面はくすんだトーンで、手を顎に当てるなど考え込む姿
• 金の紙吹雪・月桂樹・リボンで受賞や実績の演出をする
• 食材は切り抜いて白背景の上に影付きで置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の画像ブロックを中央 480〜750px 幅で並べ、左右は深緑か薄グレーの地で埋める
• メダルは PC では 6 個を横 1 列に並べてもよい
• 価格カードと CTA は PC でも最大幅 600px 程度に収める
• グラフは 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 行書くと起動時に読み込まれる。