DESIGN.md — 白地×緑グラデの健康茶ブランド LP（Fresh Green Health Tea Brand LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 白地・緑の大見出し・緑グラデ帯・赤の差し色・データグラフ・細枠カード
• 地の質感: フラットな単色面と、緑から黄緑・青緑へ縦に変わるなめらかなグラデーション。影はほぼ使わない
• 形: ピル型の枠付き見出し、点線の円、角丸の細枠カード、赤い円バッジ
• 温度感: 爽やかで少し涼しい。健康的で明るい

Colors

• 地は白が基本。機能・メカニズム・データの章だけ全幅の緑グラデ帯にする
• グラデは上から青緑→緑→黄緑→青緑へ縦にゆっくり変える
• 白地では見出しも本文も緑の文字にし、黒文字は使わない
• 緑地の上の文字・枠線・点線は白で統一する
• 赤はFVの円バッジとカードの見出し帯だけ。面積は少なく保つ
• グラフで強調する数値だけ黄色にする
• data-chart は文字 #FEFEFE × 背景 #59B44D のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#418438、4.54:1）を使う。

Typography

• 見出しはすべて左寄せの太ゴシック。サイズ差を大きくつける
• コンセプト文は太字の短い文を2行ずつ、段落の間を広く空けて並べる
• グラフの強調数値は数字だけ特大にし、単位は小さくする
• 注釈は＊印で始め、本文のすぐ下に小さく入れる
• 字間はやや広め（0.05em）にして、すっきり見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧だけテキスト左・商品画像右の2分割
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約20pxで統一する
• 画像・動画は本文の幅いっぱいに置き、角丸はつけない
• セクション見出しの下に約24pxあけてから中身を置く
• 緑帯の中も同じ本文幅にそろえる
• 注釈ブロックは小さい文字で、要素の直下にまとめる

Elevation & Depth

• 影はほぼ使わずフラットに作る
• 商品ボトルの切り抜きだけに薄い落ち影をつける
• 立体感は枠線と面の色の差で出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 長方形で角丸なし。商品は背景を抜いたボトル画像
• セクション境界: 直線で全幅を切り替える（白→緑グラデ帯→白）
• STEPやグラフ見出しは白い細枠のピル型にする
• カードは角丸12px＋緑の細枠。上部に赤い見出し帯をつける
• 強調コピーは点線の円で囲む
• FVの誘導は赤い円バッジに下向きの矢印

Components

• 赤い円の誘導バッジ（hero-circle-badge）: FVの右側に置く赤い円。白い2行の文字と下向きのシェブロンで、機能説明の章へ誘導する
• 点線の円コピー（dotted-circle-copy）: 細い点線の円の中に短いコピーを置く。白地では緑、緑地では白の点線にする
• ピル型STEP見出し（pill-step-heading）: 緑地に白い細枠のピルを置き、縦線で区切って左にSTEP番号、右に項目名を書く
• データグラフ（data-chart）: 白い線で描いた折れ線や棒グラフ。比較対象は白枠、自社側は青緑で塗り、黄色の特大数値と注釈を添える
• 赤ヘッダーの特長カード（red-header-card）: 上に赤い帯（白の太字見出し）、下は白地に緑の本文と下線リンクを置く。緑の細枠で角丸にする
• 商品紹介行（product-row）: 左に商品名・容量・キャッチ・説明・下線リンク、右に切り抜きボトルを置く
• 購入先ボタン（button-store）: 白地に緑の細枠をつけた全幅の角丸ボタン。中央に購入先のロゴを置き、縦に並べる
• 許可マーク＋表示文（license-mark-note）: FVの直下に置く。丸い認証マークの横に小さい緑の文字で表示文を書き、ラベル部分は細枠で囲む

Do's and Don'ts

Do - 白地では文字を緑で統一し、清潔な印象を保つ - 機能説明は全幅の緑グラデ帯の中にまとめ、白文字で書く - 数値の訴求はグラフと黄色の特大数字で見せる - 赤は誘導バッジとカード見出しだけに使う - 注釈と出典は必ず小さい文字で添える - 見出しは左寄せにして、大きなジャンプ率をつける

Don't - 黒い本文を白地のメイン部分に使わない - 赤を大きな面や背景に広げない - カードやボタンに濃い影をつけない - 画像に装飾的な角丸や斜めの切り抜きを入れない - 緑以外のビビッドな色を増やさない - 派手なグラデのボタンを作らない

Page Structure

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

1. ファーストビュー（ブランド名と飲用シーンを一目で伝える）: 淡いグレー地に筆風の極太緑ロゴを大きく置く。机で作業する人物の写真、点線の円コピー、赤い円バッジを重ねる
2. 許可表示（認証と飲用の目安を示す）: 認証マークと小さい緑の文字の表示文を横に並べる
3. コンセプト（新しい習慣を宣言する）: コンデンス体の英字を特大で中央に置き、その下に太字の短い文を段落ごとに並べる
4. 出演者紹介（広告キャラクターを紹介する）: 緑の大見出し、白背景の人物写真、緑の経歴文の順に並べる
5. CM動画（広告動画を見せる）: 英字の見出しの下に、再生アイコン付きの16:9サムネイルを並べる
6. グラフィック（広告の掲出例を見せる）: ポスターや車内広告の写真を縦に並べ、右下に掲出時期を小さく入れる
7. 機能の要約（機能を一言で伝える）: 緑帯の始まり。白い大見出しの下で、商品ボトルの左右に点線の円で2つのキーワードを置く
8. メカニズム（働く仕組みを段階的に説明する）: 動画の下に、ピル型のSTEP見出し、3DCGキャラの画像、白い本文の順でくり返す
9. 成分の説明（有効成分と配合量を示す）: 白い大見出しの下に画像を置き、本文と枠で囲んだ許可表示ラベルを続ける
10. エビデンスデータ（試験の結果を数値で示す）: ピル見出し、白線のグラフ、黄色の特大数値、小さい試験条件の注釈を3つ続ける
11. 特長カード（ブランドの強みを4つ示す）: 白地に戻る。赤ヘッダーの角丸カードを縦に並べ、それぞれに下線リンクを置く
12. 商品一覧（ラインナップを紹介する）: 左にテキスト、右に切り抜きボトルの行を2つ並べる
13. 購入先（通販サイトへ送る）: 緑枠・白地の購入先ロゴボタンを縦に3つ並べる

Imagery

• 人物は白〜淡いグレーの背景で、日常の作業シーンを引きで撮る
• 動画のサムネイルは暗めの書斎などのシーンに、緑の筆文字ロゴを大きく重ねる
• 仕組みの説明は、丸っこい3DCGキャラを単色背景（黄・ピンク・緑）に置いて表現する
• 商品は背景を抜いたボトルを正面から見せ、薄い影をつける
• グラフは白い線と黄色の点で、シンプルなフラット図にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約60%に絞って中央に置き、左右を白く広く空ける
• PCのコンセプトは、左に英字コピー、右に本文の2カラム
• PCの出演者紹介は、左にテキスト、右に写真
• PCのSTEP・グラフ・特長カードは2列に並べる
• PCの購入先ボタンは小さくして横に3つ並べる
• グラデ帯は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 行書くと起動時に読み込まれる。