DESIGN.md — 生成り×オレンジの自然派お茶 LP（Warm Cream Organic Tea LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、やさしい・柔らかい、信頼・誠実、親しみ・手作り感
• キーワード: 生成り・オレンジ・焦げ茶・黄色マーカー・有機・自然・不定形切り抜き
• 地の質感: マットな無地クリーム面。写真は自然光の温かい色調で、面はフラット。
• 形: 角丸カード、ブロブ形の写真マスク、両端が切れ込んだリボン帯、波形のセクション境界。
• 温度感: 暖色寄り。紅茶色とベージュで穏やか。

Colors

• 地は生成り〜ベージュを基本にし、白はカードとFAQ回答だけに使う
• オレンジは見出しリボン・CHECK番号・FAQ質問帯などの強調だけに使う
• 見出しと本文は黒でなく焦げ茶にする
• 本文の要点は黄色マーカーで1段落1〜2か所だけ強調する
• ピンク・深紅は実績バッジに限定する
• 写真は紅茶色の暖色トーンにそろえる
• ribbon-heading は文字 #FFFFFF × 背景 #ED8301 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B06101、4.61:1）を使う。
• review-badge は文字 #FFFFFF × 背景 #E46372 のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DC3549、4.52:1）を使う。
• cert-banner は文字 #FFFFFF × 背景 #C9A24E のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#91712C、4.56:1）を使う。
• faq-card は文字 #FFFFFF × 背景 #ED8301 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B06101、4.61:1）を使う。

Typography

• 和文は丸ゴシックで統一し、柔らかい印象にする
• 本文は字間を広めにし、行間1.8以上にする
• CHECK番号はオレンジの太い欧文と数字を縦に積む
• 筆記体の欧文は見出しの添え物として斜めに置く
• 背景に薄い大きな英字を透かしで置いてよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と短文の横並びだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• CHECK項目は番号＋見出し→細線→本文→角丸写真の順にする
• 淹れ方は円形写真と文を左右交互に並べる
• FAQは縦に積み、カード間は16px
• 見出し下に細線を全幅で引く

Elevation & Depth

• 影はほぼ使わず、フラットな面で構成する
• FAQカードはオレンジの枠と面で区切り、影はつけない
• 商品写真だけ自然な接地影を入れる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸長方形・円形・不定形ブロブの3種
• セクション境界: ゆるい波形カーブ、直線の色切り替えも併用
• 特長タグは細枠の角丸ピルにする
• リボン見出しは両端に切れ込み付きの折り返しをつける
• 写真ブロブは2枚をずらして重ねる

Components

• リボン見出し（ribbon-heading）: オレンジの帯に白文字。両端が切れ込んだ折り返し付き
• CHECK番号見出し（check-number）: オレンジの英字と大きな数字を左に置き、右に焦げ茶の2行見出し
• 特長タグ（feature-tag）: 細い枠の角丸ピルで特長語を2列に並べる
• 黄色マーカー強調（marker-text）: 本文の要点に黄色の塗りマーカーを敷く
• 評価バッジ（review-badge）: ピンクの吹き出し型バッジに白文字と星
• 認証帯（cert-banner）: ゴールドの全幅リボンに認証マークと明朝体文字
• FAQカード（faq-card）: オレンジの枠と質問帯、内側に白い回答面。Q/Aは大きな細字
• 淹れ方ラベル（howto-label）: 細線枠の角丸ラベルに焦げ茶の太字。円形写真と組む
• 吹き出し（speech-bubble）: 白い角丸吹き出しに短い一言。追加の特長を導く

Do's and Don'ts

Do - 生成りの地とオレンジ・焦げ茶の3色を軸にする - 写真は不定形や円形で柔らかく切り抜く - CHECK番号で特長を順番に見せる - 本文の要点は黄色マーカーで示す - 余白を広めにとってゆったり読ませる

Don't - 純黒の文字や寒色の大面積を使わない - 鋭い角や強い影を多用しない - マーカーを1段落に3か所以上使わない - オレンジを本文色に使わない - 写真を青白いトーンで加工しない

Page Structure

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

1. ファーストビュー（販売実績と商品を一目で伝える）: 月桂樹で挟んだ大きなオレンジ数字、評価バッジ、ベージュ地に商品とお茶の写真
2. 商品名と特長タグ（商品の特徴を短い言葉で示す）: 筆記体欧文＋大きな英字ロゴ、オレンジの和文サブ、ピルタグを4つ
3. 認証訴求（品質の裏付けを示す）: ゴールドの全幅リボンに認証マーク
4. コンセプト説明（オーガニックの意味を伝える）: ブロブ写真2枚、透かし英字、下線付き見出し、マーカー付き本文
5. 実績写真（継続実績を示す）: 全幅写真に深紅の縦リボンバッジ、下端は波形
6. 特長（4つの特長を順に説明）: CHECK番号見出し、細線、本文、角丸写真またはブロブ写真
7. おすすめの飲み方（淹れ方を3通り案内）: リボン見出し、枠ラベルと短文、円形写真を左右交互に配置
8. よくある質問（不安を解消する）: オレンジ枠のFAQカードを4つ縦に並べる

Imagery

• 紅茶色の液体が映えるガラスの器を自然光で撮る
• 茶葉を手のひらにのせた手元カットを不定形に切り抜く
• 産地の草原や農園を青空とあわせて明るく撮る
• 検査風景や書類で品質の裏付けを見せる
• 差し色に手描き風の短い放射線を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅相当の1カラムで、PCでも中央の狭い幅のまま表示する
• PCでは左右の余白に地色を延長する
• SPでは本文15px・左右余白6%を目安にする
• 淹れ方の横並びはSPでも写真40%と文60%を保つ

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