DESIGN.md — 若草緑×生成りの有機ハーブ茶 LP（Organic Green Herbal Tea LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ナチュラル、信頼・誠実、和風、情報量多め・訴求型
• キーワード: 若草緑・生成り和紙・明朝見出し・黄色マーカー・産地ストーリー・有機認証
• 地の質感: 和紙・麻布風の細かい織り目テクスチャを生成り地に敷く。後半に黒い木目と木のテーブル。
• 形: 角丸は小さめのカード。円形バッジ、ポラロイド風に白枠を付けた写真、点線の区切り。
• 温度感: 暖かめの自然光。緑とベージュ・茶でまとめた穏やかなトーン。

Colors

• 地は若草緑と生成りを交互に切り替えてリズムを作る。
• 緑地の上の文字は白。生成り地の見出しは墨緑に緑の強調語を混ぜる。
• 本文の要点は太字に黄色マーカーを引く。
• 認証・規格の話は茶色の帯とベージュの地に切り替え、緑と区別する。
• 使い方は黒い木目の地に白カードを置き、オレンジ系ラベルで時間を示す。
• 彩度の高い赤・青は使わない。

Typography

• 見出しは明朝。中央揃えで 2 行に分ける。
• 見出しのキーワードはひと回り大きくし、緑か鉤括弧で目立たせる。
• 本文はゴシックで行間を広めにとる。
• 太字にする部分には黄色マーカーを付ける。
• 写真の脇に小さな縦書き注釈を置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真 2 枚や本文と写真は 2 カラムで並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 緑地の中に生成りの大きなカードを重ね、その中で話を続ける。
• 見出し→写真→説明文の順で縦に積む。
• 本文と写真を左右に並べ、写真を画面端まで寄せる。
• 番号カードは同じ幅で縦に並べ、間を 16px 前後あける。
• 全幅写真の上に半透明の緑ボックスを重ねてコピーを置く。

Elevation & Depth

• 白カードには薄く広い影（0 2px 8px rgba(0,0,0,.08)）を付ける。
• ポラロイド風の写真は白枠と軽い影で少し浮かせる。
• 上に重ねるテキストボックスは影を付けず、白か緑の不透明な面にする。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角の写真に角丸を小さく付ける。白枠付きの写真と円形の切り抜きも使う。
• セクション境界: 区切りは直線で地の色を切り替える。茶色の帯の下には小さな三角の吹き出しを付ける。
• 特長バッジは緑の正円に白文字を入れ、白い縁を付ける。
• タグは角丸なしの濃緑の長方形にする。
• 区切りは丸い点を並べた点線にする。
• 時間バッジは円形で、カードの左上からはみ出させる。

Components

• 特長の円形バッジ（badge-circle）: ファーストビュー右側に緑の正円を 3 つ縦に並べ、特長を短く書く。
• 成分タグ（tag-nutrient）: 濃緑の長方形のタグに成分名を入れ、3 列で並べる。
• 白帯のコピー（text-band）: 写真の下端に白い帯を 2 段重ね、明朝のコピーを置く。
• 黄色マーカー（marker-highlight）: 本文の要点を太字にし、下半分に黄色の帯を敷く。
• 番号付き条件カード（number-card）: 白カードの左に薄いグレーの大きな数字を置き、右に条件を書く。
• 茶色の吹き出し（brown-callout）: 茶色の箱に白い明朝 2 行を入れ、下に三角を付けて次の話につなぐ。
• 使い方カード（step-card）: 黒い木目の地に白カードを置く。左に写真と円形の時間バッジ、右にオレンジのラベルと説明を入れる。
• 写真上の緑ボックス（overlay-box）: 全幅写真の上に緑のボックスと白のボックスを上下に重ね、見出しと説明を入れる。
• チェックリスト（check-list）: 木のテーブル写真の上に半透明の茶色の帯を重ね、チェックアイコンと特長を 4 行並べる。

Do's and Don'ts

Do - 若草緑と生成りの地を交互に使う。 - 見出しは明朝にし、キーワードを大きく緑で強調する。 - 要点は黄色マーカーで示す。 - 産地の風景を全幅で大きく見せる。 - 認証マークや証書の画像で信頼の根拠を示す。 - 写真の脇に小さな注釈を添える。

Don't - ポップな丸ゴシックやビビッドな色は使わない。 - 角の大きく丸いピル型ボタンを多用しない。 - 緑地に黒い本文を置かない。 - マーカーの色を黄色以外に増やさない。 - 全面を真っ白でフラットな地にしない。

Page Structure

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

1. ファーストビュー（商品の魅力と特長を一目で伝える）: 空と草原の写真に茶の入ったカップを置く。上部に白い明朝の大コピー、右に円形バッジ 3 つ、左下に認証マークを配置する。
2. 導入（商品ジャンルが注目されていることを示す）: 生成り地に明朝の見出しを置き、続けて商品写真と白帯のコピーを見せる。
3. 原料の特長（原料が希少であることを訴える）: 緑地に白い見出しと点線を置き、草の写真とマーカー付きの文を続ける。
4. 栄養・成分（含まれる成分の多さを示す）: 織り目の地に成分タグを並べ、左に本文、右に葉の写真を置く。
5. 産地の自然（産地のブランド力を伝える）: 緑地に生成りの大カードを重ねる。地図のイラスト、写真 2 枚と 2 カラムの説明、朝焼けの写真を順に入れる。
6. 共感の一言（読み手の気持ちを代弁する）: 緑地に括弧型の枠を描き、その中に白い明朝 2 行を置く。
7. 栽培環境（無農薬で育てていることを伝える）: 畑の写真を全幅で敷き、緑と白のボックスを重ねる。
8. 手摘み収穫（手間をかけて作っていることを伝える）: 作業する人の写真の上に、緑の帯と白い見出しを置く。
9. 有機認証（安心・安全の根拠を示す）: 緑のラベルに見出しを入れ、認証マーク・パッケージ・証書の画像とマーカー付きの本文を並べる。
10. 認証の条件（厳しい基準を満たしていることを説明する）: 茶色の帯の見出しの下に、ベージュ地の番号カードを 3 枚並べる。最後に茶色の吹き出しを置く。
11. 仕様の特長（ティーバッグの品質を伝える）: 緑の帯の見出しの下に写真と白いカードを置き、深緑の円形バッジを添える。
12. 飲み方（使い方を示す）: 黒い木目の地に、写真付きの手順カードを 2 枚置く。
13. パッケージ紹介（商品の見た目と使いやすさを伝える）: キッチンに置いたクラフト袋の写真に白帯のコピーを重ね、円形の拡大写真を添える。
14. 商品まとめ（最後に特長を要約する）: 木のテーブルの上に商品写真を置き、白い明朝の見出し、茶色帯のチェックリスト、認証マークを並べる。

Imagery

• 産地の山・草原・滝・田園の風景を、明るい自然光で広く撮る。
• 葉や新芽は浅い被写界深度で寄って撮り、背景をぼかす。
• 茶の入ったガラスや白いカップは、木のテーブルの上で暖色光で撮る。
• 人物は生産者の作業姿や、穏やかに飲むシーンにする。
• よもぎの葉のイラストを、画面の端からはみ出させて装飾に使う。
• クラフト紙の袋と認証マークで、オーガニックらしさを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文の幅を 960px 前後の中央寄せにし、左右に地の色を広げる。
• 2 カラムで並べている部分は PC で余白を広げ、横に 3 列まで並べてよい。
• 全幅の風景写真は PC でも全幅のまま、高さを抑える。
• 見出しのサイズは PC で約 1.4 倍にする。

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