--- version: alpha name: Retro Diner Brown Tea Beverage LP description: 町中華の食卓を写したフィルム調写真と、筆文字のコピーで始まる飲料 LP。赤茶の格子柄を敷いた面に、額縁のように角を切った白カードを重ねて特長を並べる。その後は明朝見出しとグラフで機能性を説明し、こげ茶のピルボタンで商品詳細へ誘導する。 colors: background: '#F9F9F9' primary: '#742D1C' line: '#B9A99C' surface: '#FAFAFA' background-alt: '#FFFAF4' secondary: '#93322B' text: '#613329' text-body: '#222222' accent-1: '#99503C' tint-1: '#ECDAC2' cta: '#2D0904' on-cta: '#FEFEFE' text-muted: '#666666' typography: display: fontFamily: Yuji Syuku fontSize: 40px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.04em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 600 lineHeight: 2.2 letterSpacing: 0.12em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.3em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-photo-slider: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 560px circle-title-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 56px frame-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 170px evidence-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 1100px graph-badge: backgroundColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px section-heading: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 40px legal-note: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 420px --- # DESIGN.md — 赤茶×生成りの町中華風お茶飲料 LP（Retro Diner Brown Tea Beverage LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: レトロ、親しみ・手作り感、信頼・誠実、和風 - **キーワード**: 町中華・フィルム写真・筆文字・赤茶の格子・額縁カード・明朝 - **地の質感**: ほぼ白の地に赤茶の格子パターン。写真はやや退色したフィルム調で、昭和の食堂の温度感がある - **形**: 角を内側に丸く切った額縁型のカード、大きな角丸の枠、ピル型ボタン、円形を連ねた見出しバッジ - **温度感**: 温かい。赤茶・生成り・こげ茶でまとめる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F9F9F9` | ページの地 | 55% | 画素の実測 | | `primary` | `#742D1C` | 格子柄セクションの地（赤茶） | 12% | 画素の実測 | | `line` | `#B9A99C` | 格子柄の線・カードの額縁線 | 3% | 画素の主要色に補正 | | `surface` | `#FAFAFA` | 特長カード・ラインナップの白面 | 8% | 画素の実測 | | `background-alt` | `#FFFAF4` | 研究説明ボックスの生成り地 | 11% | 画素の実測 | | `secondary` | `#93322B` | セクション見出しの朱赤 | 1% | 画素の実測 | | `text` | `#613329` | 見出し・本文の濃い茶 | 3% | 画素の主要色に補正 | | `text-body` | `#222222` | 注記本文の黒 | 3% | 推定 | | `accent-1` | `#99503C` | アイコン・グラフ線・カード見出しの赤茶 | 1% | 画素の主要色に補正 | | `tint-1` | `#ECDAC2` | グラフタイトル帯のベージュ | 1% | 画素の主要色に補正 | | `cta` | `#2D0904` | 商品詳細ボタンのこげ茶 | 1% | 画素の実測 | | `on-cta` | `#FEFEFE` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text-muted` | `#666666` | 写真キャプション・補足の灰色 | 0% | 推定 | - 地は #F9F9F9 前後のほぼ白。真っ白の面はカードと商品写真だけに使う - 格子柄の赤茶面は特長セクションの 1 か所だけにする - セクション見出しは朱赤の明朝。本文は濃い茶か黒にする - データ説明は生成りの地に赤茶の細い枠線で囲む - CTA はこげ茶のピルにする。白文字に白の内側線を添える - グラフの強調値は赤茶の円バッジに白文字で置く ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と導入の筆文字コピー（縦書き・横書き） | 手書き・筆 | Yuji Syuku | 700 | 40px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（朱赤） | 明朝 | Shippori Mincho | 700 | 24px | 1.5 | 0.08em | | `headline-md` | 特長カードの見出し・研究ボックスの見出し | 明朝 | Shippori Mincho | 700 | 20px | 1.5 | 0.06em | | `headline-sm` | 商品名・小見出し | 明朝 | Noto Serif JP | 700 | 16px | 1.7 | 0.04em | | `body-md` | 説明本文（字間を広く取る） | 明朝 | Noto Serif JP | 600 | 12px | 2.2 | 0.12em | | `note` | 表示義務の注記・脚注 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 円を連ねたセクション見出しバッジ | 明朝 | Shippori Mincho | 800 | 26px | 1.0 | 0.3em | | `label-button` | CTA ボタン文字 | ゴシック | Noto Sans JP | 400 | 13px | 1.0 | 0.1em | - キャッチコピーは筆文字だけで書き、大きく崩して置く - 見出しと本文は明朝で統一する。注記だけゴシックにする - 導入文は中央揃えにし、行ごとに少し右へずらして手書きのリズムを出す - 本文は字間 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-d61b326c`（元 LP の URL から採番） - **元 LP**: https://www.suntory.co.jp/softdrink/oolongtea/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。