DESIGN.md — 抹茶オリーブと生成りの和漢野草茶 LP（Olive Herbal Tea Japanese Natural LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 和風、ナチュラル、上品・高級、信頼・誠実
• キーワード: オリーブ金・生成り和紙・明朝見出し・茶器写真・植物線画・成分カード
• 地の質感: 生成りの紙のような淡い地。ところどころに薄い植物の線画を透かして入れる。
• 形: 基本は角を落とさない四角い帯。ラベルとカードだけ小さな角丸にする。
• 温度感: 温かみのある中間〜やや暖色。オリーブと茶色で落ち着かせる。

Colors

• 地は生成りとベージュを交互に使う。純白は広い面に使わない。
• セクションの導入見出しはオリーブ金の全幅帯に白い明朝文字で置く。
• 読み物の大見出しは生成り地にオリーブ茶の明朝で置く。
• 強調は黄色マーカーと太字だけにする。赤は使わない。
• ストーリー部は抹茶の深緑で外枠を作り、中に罫線入りの紙を置く。
• 販促要素だけは深い青緑と LINE 緑で、本編と色を分ける。
• header-band は文字 #FBFBF7 × 背景 #A69515 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#827410、4.54:1）を使う。
• feature-tag は文字 #FBFBF7 × 背景 #A69515 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#827410、4.54:1）を使う。
• story-frame は文字 #383028 × 背景 #536B1D のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#80A52D、4.53:1）を使う。
• ingredient-callout は文字 #FBFBF7 × 背景 #A69515 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#827410、4.54:1）を使う。
• line-banner は文字 #FBFBF7 × 背景 #1EB95E のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#158443、4.59:1）を使う。

Typography

• 見出しはすべて明朝か筆系の書体にし、字間を広めに取る。
• 本文は中央揃えのゴシックで、1 行を短めに改行する。
• 見出しは助詞だけ小さくして、強弱をつける。
• 縦書きの明朝見出しを 1 か所入れて、和の雰囲気を出す。
• 数字や価格の強調だけ太いゴシックにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分の吹き出し部分のみ左右 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左右に約 5% の余白を残して置くか、全幅で置く。
• オリーブの見出し帯は全幅で、高さは 80〜100px。
• 成分カードは見出しバーと本文を縦に重ね、カード同士の間隔は 10px。
• 本文ブロックの上下に 40px 前後の余白を取る。
• ストーリー枠は外側の緑枠から内側を 12px 程度控える。

Elevation & Depth

• 影はほぼ使わない。紙や布の上に平らに置いたような質感にする。
• ラベルとカードは塗りだけで区別する。
• クーポンチケットのみ、細い線と切り込みで立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形で切る。器の写真は真上や斜め上から撮り、画面の端で切り落とす。
• セクション境界: 直線で区切る。オリーブ帯や緑枠で色を切り替える。
• 特徴ラベルは角丸 6px 前後の横長ボックスにする。
• 成分カードは上を濃いオリーブのバーにし、角丸 8px にする。
• クーポンは上部を半円にしたアーチ形の枠にする。
• ストーリーは二重線の枠で囲む。

Components

• オリーブ見出し帯（header-band）: 全幅のオリーブ金の帯に、白い明朝で見出しを置く。両脇に植物の線画を薄く重ねる。
• 特徴ラベル（feature-tag）: FV の下に、オリーブ地に白文字の短い特徴を 3 つ横に並べる。
• ストーリー枠（story-frame）: 深緑の地に、罫線入りの生成りの紙と二重線を重ねる。上部中央に英字のタブを置き、人物の線画を添える。
• 成分吹き出しラベル（ingredient-callout）: 中央の素材写真から細い線を引き、左右にオリーブ地のラベルを 4 つずつ並べる。
• 成分カード（ingredient-card）: 濃いオリーブの見出しバーに明朝の成分名を置き、下の白地に 2 行の説明を入れる。説明にはマーカーを引く。
• 作り方ラベル（step-label）: 左寄せのオリーブ地ボックスに淹れ方の種類を書き、下に本文を続ける。
• 黄色マーカー（text-marker）: 大事な文の下半分に黄色の帯を敷く。
• クーポンアーチ（coupon-card）: 深い青緑の地に、金線のアーチ形チケットを 3 つ並べる。金額を大きく入れ、下に金色の帯を付ける。
• LINE 登録バナー（line-banner）: 緑の全幅バナー。左にスマホのアイコン、右に白抜きの 2 行のコピーを置く。

Do's and Don'ts

Do - 見出しは明朝や筆系の書体を使い、色はオリーブ茶か白にする。 - 茶の水色・木の器・布地の写真で、温かい自然光の雰囲気を統一する。 - 見出しの背景に薄い植物の線画を置く。 - 成分や特徴はラベルやカードに分けて短く書く。 - FV と同じ商品ブロックを終盤にもう一度置く。

Don't - 鮮やかな赤や青の強い色を本編に使わない。 - 丸ゴシックやポップな書体で見出しを書かない。 - ドロップシャドウや光沢のあるボタンを使わない。 - 純白の広い面を続けて置かない。 - 本文を長く左揃えで詰め込みすぎない。

Page Structure

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

1. ファーストビュー（話題性と商品を一目で伝える）: オリーブ帯の上にキャッチを白い明朝で置き、下に商品パッケージと茶器の写真を配置する。最下部に特徴ラベルを 3 つ並べる。
2. コンセプト提起（美容と健康の価値を打ち出す）: 生成り地に大きな明朝の 2 行見出しとオリーブ色のリードを置き、素材と茶の切り抜き写真、中央揃えの本文を続ける。
3. 味わいの紹介（飲みやすさを伝える）: オリーブの上帯の下に茶器の写真を置き、植物線画を添えた明朝見出しと本文を続ける。
4. ストーリー（由来と権威づけ）: 深緑の枠に罫線紙を重ね、人物の線画と見出しを置く。本文にマーカーを引く。
5. ブランドの想い（情緒的な共感）: 茶を注ぐ写真の下に、縦書き明朝の見出しと縦書きの本文、落款風のロゴを置く。
6. 素材の解説（素材の歴史と信頼）: オリーブ帯に白い見出しを置き、続けて生成り地に本文の段落を入れる。
7. 成分の魅力（含有成分を見える化する）: 大きな明朝で素材名を見せ、写真の周りに吹き出しラベルを 8 個置く。その下に、オリーブ地の上に成分カードを 4 枚縦に並べる。
8. 安心ポイント（不安を取り除く）: ベージュ地に明朝見出しと中央揃えの短い本文を置く。
9. ティーパックの特長（仕様の利点を伝える）: 布地の写真に白い明朝見出しを重ね、下のオリーブ帯に本文と白い容量ボックスを置く。
10. 淹れ方（使い方を案内する）: 手書き調の見出しの横に器の写真を置き、ラベルと本文の組を 2 つ並べて最後に注釈を入れる。
11. 商品の再提示（購入の後押し）: FV と同じ帯・商品写真・特徴ラベルを繰り返す。
12. レビュー特典（購入とレビューを促す）: 深い青緑の地に白い太字コピーを置き、金のアーチ形クーポンを 3 つ並べ、下に下線付きの詳細リンクを入れる。
13. LINE 誘導（継続接点を作る）: 緑の全幅バナーに、アイコンと白文字の 2 行を置く。

Imagery

• 琥珀色の茶を入れた白い陶器や木の茶托を、ややローキーの自然光で撮る。
• 背景には灰色のヘリンボーン布、木の板、石を使う。
• 素材の実や茶葉を、影を付けた切り抜き写真にする。
• 植物の葉を細いペン画風に描き、見出しの端に薄く透かす。
• 人物はモノクロの線画イラストで描く。
• 落款風の四角いロゴ印を、和のアクセントに使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はない。PC ではコンテンツ幅を 750px 前後で中央に固定し、左右を生成り地で埋めることを推奨する。
• オリーブ帯や深緑の枠は全幅に広げ、中の文字はコンテンツ幅に収める。
• 成分カードは PC で 2 列にしてもよい。
• クーポン 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 行書くと起動時に読み込まれる。