---
version: alpha
name: Organic Green Herbal Tea LP
description: 鮮やかな若草緑と生成りの和紙調の地を交互に重ね、明朝の大見出しと黄色マーカーで産地と品質へのこだわりを順に伝える健康茶の LP。後半は茶系の帯と黒い木目の地で落ち着きを出し、クラフト袋の商品写真で締める。
colors:
  primary: '#629C05'
  background: '#F4F5EE'
  surface: '#FEFEFD'
  background-alt: '#E9E4D0'
  text: '#222C1B'
  text-body: '#3A3A3A'
  accent-1: '#619A02'
  marker: '#FDFD8C'
  secondary: '#865849'
  accent-2: '#C0601A'
  accent-3: '#3F5B2A'
  dark-section: '#141413'
  tint-1: '#4C7504'
  line: '#E9E4D0'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.06em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.06em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.4
  accent:
    fontFamily: Montserrat
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.0
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.04em
rounded:
  sm: 2px
  md: 6px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  badge-circle:
    backgroundColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 70px
  tag-nutrient:
    backgroundColor: '{colors.tint-1}'
    typography: '{typography.label-button}'
    height: 24px
  text-band:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 36px
  marker-highlight:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 22px
  number-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 100px
  brown-callout:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.headline-md}'
    height: 80px
  step-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 180px
  overlay-box:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 330px
  check-list:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    height: 36px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#629C05` | ブランドの若草緑・セクション地 |  | 画素の実測 |
| `background` | `#F4F5EE` | 生成りの和紙調の地 |  | 画素の実測 |
| `surface` | `#FEFEFD` | 白いカード・テキスト帯 |  | 画素の実測 |
| `background-alt` | `#E9E4D0` | ベージュの織り目地 |  | 画素の主要色に補正 |
| `text` | `#222C1B` | 見出しの濃い墨緑 |  | 画素の主要色に補正 |
| `text-body` | `#3A3A3A` | 本文グレー |  | 推定 |
| `accent-1` | `#619A02` | 見出しの強調語の緑文字 |  | 画素の主要色に補正 |
| `marker` | `#FDFD8C` | 本文強調の黄色マーカー |  | 画素の実測 |
| `secondary` | `#865849` | 茶色の帯・注意喚起ボックス |  | 画素の実測 |
| `accent-2` | `#C0601A` | オレンジの手順ラベル |  | 推定 |
| `accent-3` | `#3F5B2A` | 深緑の円形バッジ |  | 推定 |
| `dark-section` | `#141413` | 黒い木目の手順セクション地 |  | 画素の実測 |
| `tint-1` | `#4C7504` | 成分タグの濃緑 |  | 画素の実測 |
| `line` | `#E9E4D0` | 点線の区切り |  | 画素の主要色に補正 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの大コピー | 明朝 | Shippori Mincho | 700 | 36px | 1.3 | 0.06em |
| `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 700 | 28px | 1.35 | 0.05em |
| `headline-md` | 中見出し・リード | 明朝 | Noto Serif JP | 600 | 20px | 1.5 | 0.05em |
| `headline-sm` | カード見出し・ラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.04em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.06em |
| `note` | 写真はイメージ等の縦書き注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.0em |
| `accent` | 大きな番号数字 | 欧文サンセリフ | Montserrat | 500 | 48px | 1.0 | 0.0em |
| `label-button` | タグ・バッジ文字 | ゴシック | Noto Sans JP | 500 | 13px | 1.3 | 0.04em |

- 見出しは明朝。中央揃えで 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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-8c4c7b15`（元 LP の URL から採番）
- **元 LP**: https://item.rakuten.co.jp/clover-market/h00135801/?l-id=shoptop_widget_item_list/sp=1
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。