DESIGN.md — 赤茶×生成りの町中華風お茶飲料 LP（Retro Diner Brown Tea Beverage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: レトロ、親しみ・手作り感、信頼・誠実、和風
• キーワード: 町中華・フィルム写真・筆文字・赤茶の格子・額縁カード・明朝
• 地の質感: ほぼ白の地に赤茶の格子パターン。写真はやや退色したフィルム調で、昭和の食堂の温度感がある
• 形: 角を内側に丸く切った額縁型のカード、大きな角丸の枠、ピル型ボタン、円形を連ねた見出しバッジ
• 温度感: 温かい。赤茶・生成り・こげ茶でまとめる

Colors

• 地は #F9F9F9 前後のほぼ白。真っ白の面はカードと商品写真だけに使う
• 格子柄の赤茶面は特長セクションの 1 か所だけにする
• セクション見出しは朱赤の明朝。本文は濃い茶か黒にする
• データ説明は生成りの地に赤茶の細い枠線で囲む
• CTA はこげ茶のピルにする。白文字に白の内側線を添える
• グラフの強調値は赤茶の円バッジに白文字で置く

Typography

• キャッチコピーは筆文字だけで書き、大きく崩して置く
• 見出しと本文は明朝で統一する。注記だけゴシックにする
• 導入文は中央揃えにし、行ごとに少し右へずらして手書きのリズムを出す
• 本文は字間 0.1em 以上、行間 2 以上でゆったり組む
• 数値・単位は欧文ゴシックで小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。導入の写真は横に流れるグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃えにし、上下に十分な余白を取る
• 特長カードは格子柄の面に縦に 4 枚積む
• 研究説明は大きな角丸の枠 1 つに本文とグラフをまとめる
• 商品写真は白い四角に置き、中央に配置する
• 最後は法定表示を左揃えの小さな文字でまとめ、その後に関連商品と CTA を置く

Elevation & Depth

• 影はほぼ使わない。平面と線で構成する
• カードは額縁型の二重線で浮かせる
• 商品写真だけ床に落ちる柔らかい影を付ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: FV は縦長の長方形。導入は大小の長方形をモザイク状に並べ、商品は切り抜きにする
• セクション境界: 直線で区切る。格子柄の帯でセクションの切り替わりを示す
• 特長カードは四隅を内側に丸くえぐった額縁形にする
• 研究ボックスは大きな角丸の細い枠線で囲む
• 見出しバッジは白い円を横に連結する
• グラフのラベルはピル型の枠にする

Components

• FV 写真スライダー（hero-photo-slider）: 食事中の人物写真を中央に置き、左に縦書きの筆文字コピーと商品、右上にロゴを配置する。下に四角と丸のドットを置く
• 円連結見出し（circle-title-badge）: 白い円を 4 つ連ね、1 文字ずつ明朝で入れる見出し。格子柄の面の上端にかかるように置く
• 額縁型特長カード（frame-card）: 白地に四隅をえぐった二重線の枠。線画アイコン、赤茶の明朝見出し、短い説明を中央揃えで縦に並べる
• 研究データボックス（evidence-box）: 生成り地を大きな角丸の赤茶の細い枠で囲み、見出し・試験条件・グラフ・脚注を収める
• 数値強調バッジ（graph-badge）: グラフ上の赤茶の円に、白文字で減少量を入れる
• 商品詳細ボタン（button-primary）: こげ茶のピルに白い内側線を入れ、右端に細い矢印を置く
• 朱赤明朝見出し（section-heading）: 中央揃えの朱赤の明朝見出し。下に括弧書きの補足を小さく添える
• 法定表示ブロック（legal-note）: 見出し付きの左揃え注記。黒ゴシックで中黒の箇条書きにする

Do's and Don'ts

Do - 食事と飲料を一緒に写した生活感のある写真を使う - コピーは筆文字にし、少し崩して余白の中に置く - 赤茶・生成り・こげ茶の 3 系統で配色をまとめる - 機能の根拠はグラフと脚注を添えて誠実に見せる - 線画アイコンは赤茶の単色にそろえる

Don't - 鮮やかな青や蛍光色をアクセントに使わない - ドロップシャドウの強いカードにしない - 見出しを太いゴシックにしない - 格子柄を複数のセクションで多用しない - 誇大な強調バッジや斜めの帯を入れない

Page Structure

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

1. ファーストビュー（食べる喜びと商品を同時に印象づける）: 大きな食事写真のスライダーに、縦書きの筆文字コピー、商品、ロゴ、注意書きを重ねる
2. ブランドメッセージ（商品の姿勢を伝える）: 筆文字の見出しと、中央揃えの明朝文を 6 行ほど置く
3. 写真ギャラリー（多様な食卓シーンで共感を得る）: 大小の写真を 2 段の横長モザイクに並べ、自動で横に流す
4. 商品特性（4 つの特長を一覧で示す）: 赤茶の格子柄の上に円連結見出しと商品ボトルを置き、額縁カードを 4 枚積む
5. 成分のはたらき（機能性の根拠を示す）: 生成りの角丸ボックスに、試験条件の見出し付き段落と折れ線グラフを入れる
6. 成分の説明（成分の由来をわかりやすく説明する）: 朱赤の見出し、白地のシズル写真、字間の広い明朝本文を順に置く
7. 商品ラインナップ（容量違いを提示する）: 切り抜きボトルを大きさ順に横並びにし、下に容量ラベルを付ける
8. 法定表示（届出情報と注意事項を明示する）: 左揃えの小見出しとゴシックの箇条書きにする
9. 関連商品 CTA（他商品へ送客する）: 明朝の商品名、切り抜きボトル、こげ茶ピルボタンの順で縦に繰り返す

Imagery

• 昭和の町中華の店内で、赤いテーブルと中華料理を前に若者が自然に食べる姿を撮る
• フィルム風に色温度を高めにし、少し退色させる
• 商品ボトルは白背景の切り抜きにし、柔らかい接地影を付ける
• 飲料のシズルは、氷入りのガラス器を白背景で上斜めから撮る
• アイコンは茶葉・ハート・分子・人型を、赤茶の細い線画で描く
• 格子柄は細い線の正方形グリッドに、角丸の線を組み合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV 写真を横長にし、筆文字コピーを左に縦書きで置く
• PC の導入はメッセージを左、写真モザイクを右の 2 カラムにする
• PC の特長は大きな額縁 1 枚の中央に商品を置き、左右に 2 項目ずつ配置する
• PC の研究ボックスは本文を左、グラフを右の 2 カラムにする
• PC の成分説明は写真を左、本文を右に並べる
• CTA ボタンは 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 行書くと起動時に読み込まれる。