DESIGN.md — 茶色×コーラルの腸活健康茶 LP（Warm Tea Brown and Coral Health Tea LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、和風、信頼・誠実、やさしい・柔らかい
• キーワード: 老舗のお茶屋・木目と黒板・コーラルの数値強調・明朝の大見出し・機能性エビデンス
• 地の質感: 木目板・黒板・和紙風の白い地・淡い麻布ベージュを敷き、写真を切り抜いて重ねる
• 形: 角丸の小さい白カード、金色の六角形リボン見出し、円形の素材写真、コーラルの吹き出し
• 温度感: 温かい。茶色・金・ベージュが主体で、コーラルが熱を足す

Colors

• 地は白・薄グレー・麻ベージュを交互に敷き、セクションを区切る
• 老舗感・素材訴求は濃茶の木目帯と金のリボン見出しで出す
• 数値・効果・キーワードはコーラル文字かコーラル帯で強調する
• 比較表の『後』の列だけ濃茶の見出しとコーラルの矢印で目立たせる
• 本文内の強調は1文に1か所までコーラル太字にする
• 黒板パネルには白とコーラルの文字だけを使う
• ribbon-heading は文字 #FFFFFF × 背景 #B8975A のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8E713D、4.59:1）を使う。
• highlight-band は文字 #FFFFFF × 背景 #F25962 のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EA121F、4.56:1）を使う。

Typography

• 大見出しは明朝、データ・効果訴求は極太ゴシックに分ける
• 見出し内の助詞は小さく、キーワードを大きくする
• 重要語はコーラル、ほかは濃茶黒
• 難読漢字にはルビを振る
• 英字の筆記体を見出し右上に薄く重ねる
• ※注釈は小さく必ず近くに添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材は 4 列の円形グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは小見出し→大見出し→本文・図の順に中央揃え
• 白カードは左右に 5% ずつ余白を残して置く
• 特長は写真と文章を左右交互に配置
• セクション間は点線の縦線や下向き矢印でつなぐ
• 比較表は 3 列で『後』列を強調

Elevation & Depth

• 白カードはごく薄い影で地から少し浮かせる
• 口コミ吹き出しは濃茶か金の太い枠線で囲む
• 黒板パネルは木枠で額縁風にする
• 切り抜き写真を見出しや枠に重ねて奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 素材は正円、特長写真は大きな円や片側を円弧で切る。商品やグラスは切り抜き
• セクション境界: 直線の切り替えが基本。写真の柔らかいぼかしでつなぐ箇所もある
• 見出しリボンは両端を山形に切った六角形
• 強調帯は角丸の小さい長方形
• 効果を示す吹き出しは大きめの角丸
• 黒い楕円のピルで小見出しを置く

Components

• 金の六角リボン見出し（ribbon-heading）: 両端を山形に切った金色の帯に、白い明朝で見出しを置く
• コーラル強調帯（highlight-band）: 成分名や効果を白抜き文字で横帯に入れる。2 段に重ねることもある
• 前後比較表（data-table）: コーラル見出し付きのカードに 3 列の表。後の列は濃茶ヘッダーでコーラル数字、間に右向き矢印
• 口コミ吹き出し（review-bubble）: 白地に濃茶・金の枠、尻尾付き。左右交互にずらし、一部をコーラルにする
• 悩みチェックリスト（check-list）: 白カードにチェック丸アイコンと紺文字を 7 行。行間に点線
• 黒板パネル（chalkboard-panel）: 木枠付きの黒板に、白とコーラルの文字と手描き線のイラスト
• 黒ピル小見出し（pill-label）: 黒か濃茶のピル型に白文字で、つなぎの一言を入れる
• 素材円形グリッド（ingredient-circle）: 正円に切り抜いた素材写真の下に素材名
• 特長ラベル（feature-label）: 濃茶の長方形ラベルに白文字。背後に筆記体の英字を淡く重ねる

Do's and Don'ts

Do - データには必ず※注釈と出典を小さく添える - 明朝の大見出しとゴシックの強調を使い分ける - 茶葉・湯気・お茶を注ぐ写真で温かさを保つ - コーラルは数値と効果の語だけに絞る - 木目・黒板・ベージュの質感でセクションに変化をつける

Don't - 寒色をメインに使わない（紺はチェックリストだけ） - コーラルを広い地色にしない - 角丸を大きくしすぎてポップにしない - 注釈なしで効果をうたわない - 写真を四角いまま並べるだけにしない

Page Structure

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

1. ファーストビュー（悩みと解決をひと目で伝える）: お腹とお茶を注ぐ写真の上に極太コーラルのキャッチ、黒ピルで締める
2. 商品紹介（機能性表示食品であることと名前の由来）: 黄色の地にパッケージを切り抜き、金ラベルと黒板パネル
3. エビデンス（試験結果で効果を示す）: 明朝の大見出しとコーラルの帯、前後比較表
4. 老舗の信頼（創業年数とロングセラーを伝える）: 茶畑と山の風景写真に茶色ラベル、明朝の大見出し
5. お客様の声（飲みやすさの共感）: 木目調の地に吹き出しを 4 つ左右交互に
6. 悩みの提起（ターゲットに当てはまる悩みを挙げる）: 暗いグレーの写真帯に明朝見出し、白カードのチェックリスト
7. 解決提示（成分が悩みを解決すると示す）: 黒ピルの後にコーラル帯を 2 段、商品とお茶を注ぐ写真
8. 成分の仕組み（作用の流れを図解）: コーラルの吹き出し、腸のイラスト、球体バッジで原因→結果
9. グラフ（数値の増加を見せる）: 薄ピンクの地に横棒グラフ。グレー対コーラル
10. 成分の由来（やさしさと安心感）: 木目の地に白い細枠のテキストボックス
11. 事実・比較（身近な食品と量を比べる）: 瓶を並べた写真と縦書きの明朝コピー、円形バッジ
12. こだわり・特長（素材と続けやすさを伝える）: 金リボン見出し、円形の素材グリッド、写真と文章を左右交互に

Imagery

• 琥珀色のお茶をグラスに注ぐ瞬間を明るく撮る
• 茶葉・穀物・根菜は真上か斜めから撮り、正円に切り抜く
• お腹に手を添える人物は顔を出さずに柔らかな光で
• 腸の図はパステルピンクに笑顔のアイコンで親しみを出す
• 木目板・黒板・茶畑・湯気など温かい背景素材を使う
• 金色の小さな星やきらめきを見出しの周りに添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は PC でも 900px 幅の 1 カラム中央配置で、SP と同じ縦長構成
• PC は中央 900px に固定し、左右はセクションの地色を延ばす
• SP では大見出しを 30〜34px、表を幅いっぱいにする
• 素材グリッドは SP では 4 列のままにし、写真を小さくする
• 左右交互の特長は SP でも互い違いのまま、写真を画面端まで寄せる

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