DESIGN.md — 抹茶緑×朱赤×金茶の機能性青汁 LP（Green Juice Functional Health Food LP with Red Banners and Gold Accents）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ナチュラル、信頼・誠実、情報量多め・訴求型、和風
• キーワード: 抹茶グリーン・朱赤ラベル・金茶リボン・明朝見出し・グラフ根拠・シニア向け
• 地の質感: 生成り・和紙風の淡いテクスチャ地に、ぼかした緑の背景写真と葉っぱの装飾を散らす
• 形: 角ばった赤ラベルと金茶の帯、白カードは小さめの角丸、成分は円形バブル
• 温度感: 温かみのあるナチュラル寄り。赤と金で訴求の熱を足す

Colors

• 地は白・生成り・淡緑を交互に使い、セクションを切り替える
• 症状名や効能名など、一番伝えたい言葉だけ朱赤のラベルにする
• 商品名の帯や区切り見出しは深緑のベタ塗りにする
• 番号・素材数・小見出しは金茶のグラデ帯で高級感を出す
• 暗いこげ茶の帯は共感を受け止めるつなぎだけに使う
• 価格の数字は朱赤の太字で大きく見せる

Typography

• 大見出しは明朝の太字にし、数字だけをひと回り大きくする
• 強調語はひと回り大きくするか、赤色・マーカーにする
• 前置きの小見出しは「＼ ／」のスラッシュで挟む
• 最後の締めコピーは明朝の縦組みにする
• 本文は行間を広めの 1.8 にして、シニアにも読みやすくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材一覧は左ラベル＋右カードの 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃え、本文ブロックは左揃え
• 成分ごとに白カードでまとめ、上端に番号の帯を付ける
• グラフはカード内で全幅に置き、下に出典を添える
• 悩みのセクションは写真を全幅で重ね、吹き出しコピーを乗せる
• 手順は STEP 番号の縦線＋白カードを 3 段並べる

Elevation & Depth

• 白カードには淡くぼかした影（0 4px 16px rgba(0,0,0,0.08)）
• 赤ラベルには軽い下影をつけて浮かせる
• 成分バブルは光沢のある球体風のグラデにする
• 影は控えめにし、強い立体表現は避ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 素材写真は角丸の四角や円形に切り抜く。商品パッケージは切り抜いて影を付ける
• セクション境界: 直線で切り替え、グラデや写真のフェードでつなぐ。斜めの帯をときどき使う
• 赤ラベルは角を立て、角丸にしない
• 栄養素タグと入数ラベルはピル型
• お客様の声は白い円形の吹き出しにする
• 番号の帯は台形・リボン形にする

Components

• 朱赤の訴求ラベル（label-red-claim）: 効能や症状名を白の太字で入れた赤の四角ラベル。改行して段違いに積む
• 深緑の商品名帯（band-green-title）: 全幅の深緑ベタに白の明朝で商品名を入れる区切り帯
• 金茶リボン見出し（ribbon-gold）: 金茶のグラデ帯に白文字を入れ、下に白い数値ボックスを付ける
• 成分解説カード（card-ingredient）: 上端に番号タブ、明朝の成分名、赤ラベル、グラフ、本文を縦に並べた白カード
• 価格行（price-row）: 左に商品画像、右に緑のピル型入数ラベルと赤い大きな価格、右端に矢印
• 栄養素タグ（tag-nutrient）: 黄緑のピル型に栄養素名を入れ、横に並べる
• お客様の声の吹き出し（voice-bubble）: 白い円に金の細枠を付けて写真の上に散らし、葉っぱを添える
• STEP カード（step-card）: 左に緑の STEP 番号と縦線、右にイラスト付きの白カード
• 素材カテゴリの丸バッジ（badge-circle-category）: 深緑の円に小さな分類名と大きなひらがなを白で入れる

Do's and Don'ts

Do - 効能の言葉は赤ラベルで目立たせ、その根拠はグラフと出典で示す - 見出しは明朝で落ち着かせ、ラベルは太いゴシックで強くする - 葉っぱやしずく、光の玉を余白に散らして自然な印象を出す - 注釈は小さく、必ずグラフや主張のすぐ下に置く - セクションの地色は白・生成り・淡緑を交互に変えて区切る

Don't - 赤を背景の広い面に使わない - ネオン色や寒色の青をメインカラーにしない - 見出しを細いゴシックだけで組まない - グラフや数値を出すときに出典を省かない - 白カードに強い影や太い枠線を付けない

Page Structure

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

1. ファーストビュー（悩みの数値と商品の価値を一目で伝える）: 上部に赤背景＋チェック付きの白ボックスで悩みを 3 つ並べる。下はグラスの写真に明朝の大コピーを重ね、商品画像と金リボンの数値を置く
2. 表示区分の説明（機能性の根拠を示し、信頼を得る）: こげ茶の見出し帯が付いた枠ボックスに、小さめの本文を入れる
3. 価格（入数ごとの価格を提示する）: 深緑の帯見出しの下に、商品画像＋赤い大きな価格の行を点線で区切って 2 段並べる
4. 悩みの提起（ターゲットに自分ごと化させる）: 暗めの写真を全幅で 3 段重ね、手書き風の白コピーで、悩み語だけを大きくする
5. リスクの説明（放置するリスクを図で示す）: こげ茶ラベルで強調語を囲み、丸いイラストと説明文を白カードに並べる
6. 共感（我慢したくない本音を受け止める）: 食べ物の丸写真と頭を抱える人のイラスト。最後にこげ茶の帯で共感の一言を入れる
7. 解決策の提示（成分で複数の悩みを同時にケアできると示す）: 淡緑のグラデ地に赤ラベルを 3 つ並べ、商品画像と成分の光沢バブルを 2 つ置く
8. 成分の根拠（成分ごとのエビデンスを示す）: 番号タブ付きの白カードに、明朝の成分名・赤ラベル・グラフ 2 点・解説を入れる
9. 配合素材（素材数の豊富さを伝える）: 金リボン見出しの下、野菜写真の上に素材の丸バッジを円形に配置する。続けて分類ごとのタグ付きカードを並べる
10. サポート成分（付加価値を加える）: グラスの写真を中心に素材の丸写真を置き、乳酸菌の説明図とメッセージ枠を添える
11. 味へのこだわり（味の不安を解消する）: 疑問のコピーを写真に重ねる。生成り地の金枠カードに、和素材の角丸写真 4 つと本文を入れる
12. 飲み方（手軽さを示す）: 黄マーカーの見出しの後に STEP 3 段のカードを並べ、オレンジのチェック付き補足を付ける
13. お客様の声（実感を共有して後押しする）: 人物と青汁の写真の上に、白い円形の吹き出しを 7 つほど散らし、注釈を添える
14. クロージング（始める気持ちを後押しする）: グラスで乾杯する写真と商品スティックを置き、明朝の縦組みコピーで締める

Imagery

• 鮮やかな緑の青汁が入ったグラスを、明るく自然光で撮る
• シニア男女のポートレート。悩みは暗めのトーン、声は明るい笑顔で撮る
• 野菜や和素材は俯瞰の物撮りにし、円形や角丸で切り抜く
• 茶葉・葉っぱのイラストやしずく、光の玉を装飾として散らす
• グラフは青・ピンクの見出し帯を付けた、シンプルな折れ線にする
• 背景は緑をぼかした写真や、和紙のテクスチャにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は 900px 幅の 1 カラム LP を中央寄せにした構成。SP でもそのまま縦に積む
• SP では赤ラベルを 1 行 1 つにし、22px 前後で段違いに積む
• 価格行は SP でも商品画像と価格を横並びのまま保つ
• PC では本文を最大 700px 幅で中央寄せにし、左右に背景のテクスチャを見せる
• お客様の声の吹き出しは、SP では 2 列のジグザグ配置に整理する

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