DESIGN.md — 緑×金の機能性サプリシリーズ訴求LP（Green Gold Functional Supplement Series LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、力強い・インパクト、清潔・爽やか
• キーワード: 深緑×金・メダル風バッジ・立体CTAボタン・商品別テーマ色・水滴・泡のテクスチャ・価格訴求
• 地の質感: 水滴や光の玉が浮かぶグラデーション背景と、金属光沢のある金のエンブレム。白地は薄いグレーのグラデーションで清潔感を出す
• 形: 角丸の立体ボタン、円形の金メダル、円形の特長バブル、楕円の吹き出し、波形のセクション境界
• 温度感: 健康的で明るく、やや温かみ。緑の爽やかさと金の高級感の両立

Colors

• 基調は深緑×金。緑は帯見出し・CTA、金はバッジ・メダル・ピル型ラベルに使う
• 商品が変わるごとにテーマ色を緑→マゼンタ→水色へ切り替え、帯見出しとCTAも同色に揃える
• 白〜薄グレーのグラデーション地で説明パートを区切り、写真や商品を浮かせる
• 価格・数量限定など最重要の数字は赤、補助強調は黄色マーカー下線
• 法定表示は黒帯または白地の小さな枠で目立たせすぎない
• 金はグラデーションと光沢で金属感を出し、平坦な黄土色にしない
• button-primary は文字 #FFFFFF × 背景 #02931C のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#02891A、4.57:1）を使う。
• series-band は文字 #FFFFFF × 背景 #098953 のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#098752、4.57:1）を使う。
• feature-bubble は文字 #FFFFFF × 背景 #E0B06A のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9F6C21、4.52:1）を使う。
• speech-bubble は文字 #15AC89 × 背景 #FFFFFF のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#10856A、4.58:1）を使う。

Typography

• 大見出しは太字を斜体寄りにして勢いを出す
• 見出し内で強調語だけ色を変える（赤・緑・黄色グラデ）
• 緑地の上の見出しは白か黄色グラデ文字に影を付ける
• 数字は明朝の極太で大きく、単位は小さく添える
• 本文はキーワードを青や緑の太字にし、黄色マーカーを引く
• 注釈は9px前後で必ず記載する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は円形バブルを散らした自由配置
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 帯見出しは画面幅いっぱい、上にシリーズ名の金ピルを重ねる
• 商品パッケージ画像は中央に大きく配置
• 成分＋成分の掛け算図を金メダルと白カードで横並び
• チェックリストの左にぼかした円のラベルを置く
• CTAは各商品ブロックの末尾に必ず置く

Elevation & Depth

• CTAボタンは上部ハイライトと下部の濃い影で立体的に
• 白カードは柔らかいドロップシャドウ
• 写真はわずかに傾け白フチ＋影で貼り付けたように
• 金メダルは光沢グラデーションと影

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は白フチ付きの傾いた長方形、特長は円形、商品は切り抜き
• セクション境界: 緑帯の下を波形や曲線で切り替え、一部は逆三角形の矢印形
• シリーズ名ラベルは金のピル型
• 特長は円形バブルを3つずらして配置
• 吹き出しは白い楕円に小さなしっぽ
• 価格カードは白地に赤の細枠
• 限定バッジは赤の長方形やギザギザ星形

Components

• 立体グリーンCTA（button-primary）: 緑グラデの角丸ボタン。2行の斜体白文字、右に黄色丸の再生矢印
• シリーズ帯見出し（series-band）: 金ピルのシリーズ名＋テーマ色の全幅帯に白い大見出し2行
• 金メダルバッジ（gold-medal）: 金の円に成分名、下に金枠の説明プレート
• 特長バブル（feature-bubble）: ぼかした金やオレンジの円に白文字と強調色文字で効果を記載
• おすすめチェックリスト（check-list）: 赤いチェックボックス付きの太字リスト、左にぼかし円のラベル
• セット価格カード（price-card）: 白カード上に深緑タイトル帯、赤枠の中に限定ラベル・商品・数量×3
• 願望の吹き出し（speech-bubble）: 写真と交互に白い楕円吹き出しで願望を並べる
• 法定表示ボックス（legal-box）: 枠付きの小ラベルと箇条書きの注釈

Do's and Don'ts

Do - 商品ごとにテーマ色を変え、帯・CTA・背景のトーンを揃える - 価格・数量・日数は大きな明朝数字で見せる - 金はグラデーションで光沢を出す - 各ブロックの末尾にCTAを置く - 必要な注釈を小さく必ず添える

Don't - フラットで細いボタンにしない - 金を平坦な黄土色にしない - テーマ色を混在させて1ブロックに複数使わない - 注釈・法定表示を省かない - 余白を広く取りすぎて訴求密度を下げない

Page Structure

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

1. ファーストビュー（シリーズと主成分・初の実績を提示）: 金グラデ背景に大見出し、金メダルと実績バッジ
2. セット価格訴求（まとめ買いの割安感を伝える）: 水滴付きの緑背景、金の六角形に大きな割引額、商品3袋、限定・売切バッジ
3. 法定表示＋CTA（表示義務と最初の行動喚起）: 黒帯に注釈、下に立体グリーンCTA
4. 悩み・願望の提起（ターゲットの願いに共感）: 傾いた写真と白い吹き出しを交互に4つ並べる
5. 成分の仕組み（主成分の働きを説明）: 銀の盾エンブレム、緑の波形帯、金の円を中心に細胞名の円を配置
6. 商品紹介1（第1商品の組み合わせと対象者）: 緑の帯見出し、成分＋成分の図、チェックリスト、商品画像
7. 特長（副成分の効果を3つ示す）: 素材写真と金の円形バブル3つ、マーカー付き説明
8. 利用シーン＋CTA（手軽さを伝えて行動喚起）: 人物写真に商品を重ね、CTAボタン
9. 価格カード（セット・容量別の購入導線）: 白カードに赤枠、限定ラベル、付属品帯、容量別の小CTA2つ
10. 商品紹介2（第2商品を訴求）: マゼンタ帯に切替、オレンジの特長バブル、使い方の吹き出し、ピンクCTA
11. 商品紹介3（第3商品を訴求）: 水色帯に切替、成分図とチェックリスト、商品画像、水色CTA

Imagery

• 明るい屋外で笑顔のシニア・ミドル世代の写真
• 商品パッケージは影付きの切り抜きで大きく
• 素材（粉末・ミルクなど）を木のスプーンやグラスで白背景に撮影
• 背景に水滴・光の玉・ボケを散らす
• 金属光沢の盾・メダル・リボンの装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 750px）のカラムを置き、左右は背景色で埋める
• 帯見出しやグラデ背景は全幅に広げる
• 特長バブルや成分図は配置を保ったまま拡大する
• CTAは最大幅 600px 程度に制限する

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