DESIGN.md — テラコッタ×木目の発酵茶サプリ LP（Terracotta Fermented Tea Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、ナチュラル、親しみ・手作り感、やさしい・柔らかい
• キーワード: テラコッタ・焦げ茶・金メダル・木目・手書き吹き出し・黄色マーカー
• 地の質感: 木目の板、クリップボード、黒板、葉模様の地紋など、実物の素材感がある背景を多く重ねる
• 形: 円形メダルと円形の番号バッジ、細い二重線の白カード、角丸の白パネル
• 温度感: 暖色寄り。紅茶やはちみつのような温かみのあるオレンジブラウン

Colors

• 地は白と淡いグレー。区切りにテラコッタの全幅帯を入れる
• テラコッタは見出し帯・番号バッジ・強調語の文字色に使う
• 焦げ茶はページ最上部の帯と商品登場前の切り替えに使う
• 成分名は金色の丸メダルで見せ、色数を増やさない
• 本文の強調は黄色マーカーかテラコッタ文字。両方を同時に使わない
• 黒板パネルではテラコッタと黄色を差し色にする
• number-badge は文字 #FEFAF3 × 背景 #D5644A のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C64A2E、4.57:1）を使う。
• heading-band は文字 #FEFAF3 × 背景 #D5644A のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C64A2E、4.57:1）を使う。
• marker-text は文字 #D5644A × 背景 #F6E6A3 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C64A2E、4.53:1）を使う。

Typography

• 見出しは極太ゴシックで、一部の語だけテラコッタにする
• 成分メダルの文字は明朝体（Shippori Mincho など）で上品に見せる
• 悩みや気持ちを表す言葉は手書き体にし、吹き出しの中に置く
• 本文は 14px、行間 1.8 で、1 段落 4〜6 行程度にする
• 数字は大きくし、単位は小さくしてメリハリを付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内は写真と本文の 2 列を交互に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 成分カードは上辺中央に円形の番号バッジをはみ出して重ねる
• カードの写真は左右を交互に入れ替える
• 背景（木目・黒板）の上に白カードを浮かせ、外側に 16px ほど背景を見せる
• メダルは 3〜4 列のグリッドで、下段を中央寄せにする
• 全幅のテラコッタ帯で章を区切る

Elevation & Depth

• 白カードには薄いドロップシャドウ（0 2px 6px rgba(0,0,0,.15)）
• 金メダルはグラデーションと影で立体的にする
• クリップボードや黒板は実物の写真風で、奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分の写真は角丸なしの長方形。人物は背景を切り抜いて重ねる
• セクション境界: 直線で切り替える。章の区切りは全幅の色帯
• 番号バッジと成分メダルは正円
• 成分カードは角丸なしで、内側に細い二重線の枠を付ける
• 品質訴求のパネルは白地に 20px の角丸
• 吹き出しは手描き線の雲形にする

Components

• 金色成分メダル（ingredient-medal）: 金色グラデーションの円の中に成分名を明朝で 2〜3 行入れる
• 番号バッジ（number-badge）: テラコッタの円に白い 2 桁の数字。カードの上辺に重ねる
• 成分説明カード（ingredient-card）: 木目の上に白カード。見出し、写真と本文、マーカー付きのまとめ文の順に並べる
• テラコッタ見出し帯（heading-band）: 白い細枠が内側に入ったテラコッタの長方形に、白い見出しを入れる
• 手書き吹き出し（handwritten-bubble）: 雲形の線画吹き出しに手書き体で悩みを入れ、一部をテラコッタにする
• チェックシート（check-list）: クリップボード上の紙に、チェックボックス付きの悩みを 4 項目並べる
• 黒板 POINT 行（point-row）: 黒板に白い円の POINT 番号を置き、右に白とテラコッタの文字を入れる
• 黄色マーカー強調（marker-text）: 強調語の下半分に黄色の帯を敷く
• 品質訴求パネル（trust-panel）: テラコッタ地に白い角丸パネル。大見出し、写真 3 枚、クリーム色の説明ボックスの順

Do's and Don'ts

Do - 暖色の茶系とテラコッタで全体を統一する - 成分は番号付きカードで 1 つずつ説明する - 強調語には黄色マーカーかテラコッタ文字を使う - 木目や黒板など素材感のある背景を章ごとに変える - 人物は笑顔の女性を切り抜いて大きく配置する

Don't - 寒色をメインに使わない - メダルを平面の単色にしない - カードに大きな角丸を付けない（成分カードは角丸なし） - 1 画面に強調色を 3 色以上混ぜない - 本文を中央揃えで長く組まない

Page Structure

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

1. ファーストビュー（話題性と主な成分を一目で伝える）: 焦げ茶の細い帯、女性の写真、極太コピー、金メダル 3 つ、テラコッタの補足ラベル
2. 悩みの提起（対象者に当てはまると感じてもらう）: クリップボードのチェックシートに悩みを 4 つ。困り顔の女性を添える
3. 素材の説明（素材の概要を伝える）: テラコッタの葉模様の帯に写真、かぎ括弧付きの見出し、円形のスタンプ吹き出し
4. 栄養素の紹介（含まれる栄養素を見せる）: 見出し帯付きの白カードに、銅色の丸メダル 7 個
5. 従来品の不満（従来の形状の不便さを示す）: キャラクター化した瓶の周りに手書き吹き出しを 3 つ
6. 解決提案（サプリ化を提案する）: 焦げ茶のグラデーション帯に白い見出し、女性と商品パッケージ、巨大なコピー
7. 配合成分一覧（独自の配合を示す）: キラキラした背景に金メダルを 3 列×2 段
8. 成分の詳細（成分ごとの根拠を説明する）: 木目の背景に番号付きの白カードを 01〜04。写真は左右交互、顕微鏡写真の比較図も入れる
9. 継続の訴求（毎日続ける大切さを伝える）: テラコッタの全幅帯に、小さな英字筆記体と白い見出し
10. ポイント（サプリのメリットを 3 つ示す）: 木枠の黒板に POINT 01〜03 の円バッジと商品写真
11. 品質と価格（安心感と価格の理由を伝える）: テラコッタ地に白い角丸パネルを 2 枚。国旗アイコン、工場写真、番号付きリスト
12. クロージング（ブランドの印象で締める）: 瓶とグラスの写真の上に、英字の大きなロゴ風文字と吹き出し

Imagery

• 明るい自然光の中で、ナチュラルメイクの女性が笑顔で写った写真
• 紅茶色の液体が入ったガラス瓶とグラスを逆光で撮り、琥珀色を見せる
• 野菜・果物・粉末などの素材を俯瞰で寄って撮る
• 木目の板、クリップボード、黒板など実物の素材を背景にする
• 茶色の線の手描きイラストと吹き出し。瓶に顔を描いたゆるいキャラも使う
• ソフトカプセルを艶のある琥珀色で添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も中央 952px 前後の 1 カラムで、SP と同じ構成
• SP ではメダルを 3 列から 2〜3 列に縮め、径は 100px 前後にする
• カード内の写真と本文の 2 列は、SP では写真を上に置く縦積みにしてもよい
• FV の極太コピーは SP では 34〜38px に抑えて 3 行に収める
• 背景の木目や黒板は SP でも左右に 12〜16px 見せる

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