DESIGN.md — ミルクベージュと焙煎ブラウンのコーヒー飲料 LP（Warm Cafe Latte Beverage Lineup LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル、情報量多め・訴求型
• キーワード: カフェ・ミルクベージュ・焙煎ブラウン・コーヒー豆モチーフ・味わいチャート・手描きイラスト
• 地の質感: ほぼフラットな塗り。詳細セクションのみ古紙風のざらついたクラフト紙テクスチャ。
• 形: 四角い白カードと横帯見出し、丸アイコン、ピル型ボタン。
• 温度感: 暖色寄り。ミルクと焙煎豆の温かさ。

Colors

• 地は全面ミルクベージュ、情報ブロックは白カードで載せる。
• セクション見出し帯は焙煎ブラウン一色に白い手書き風英字。
• 見出し・商品名は濃茶、本文はグレーで階層を分ける。
• オレンジと深緑は FV の左右二分割と丸アイコンだけに使う 2 色の対比。
• 黄緑は購入 CTA だけに使い、他で使わない。
• 味わいチャートは塗りをブラウン、未評価を淡いベージュにする。紅茶系だけ若葉の緑にしてよい。
• button-primary は文字 #F0FD20 × 背景 #5DAE2D のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#427B20、4.6:1）を使う。
• band-heading は文字 #FEFEFE × 背景 #CC8046 のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A9632F、4.61:1）を使う。
• feature-circle は文字 #FEFEFE × 背景 #0CA23E のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0A8834、4.54:1）を使う。

Typography

• 英字見出しは左右に放射線状の手描きアクセントを付けて中央揃え。
• リード文は濃茶の太ゴシックに点線下線を引く。
• 本文は小さめ・行間広めで軽く見せる。
• 商品名は 3〜4 行の左揃えで大きく。
• 強調注記は茶色の太字で※から始める。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介のみ画像左・テキスト右の 2 カラム。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出し帯は画面幅いっぱいか、カード幅に合わせた横帯。
• 白カードは左右 5% 余白で中央配置。
• 商品ブロックは細い横線で区切り、下に味わいチャートの白箱を置く。
• 詳細セクションは 2×3 のグリッドを点線で区切る。
• CTA はページ上部と最下部に同じものを置く。

Elevation & Depth

• 影はほぼ使わずフラット。
• クラフト紙パネルだけごく薄い影で紙らしさを出す。
• 商品写真は切り抜きで自然な影のみ。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品ボトルは背景なしの切り抜き。アイコンは正円。
• セクション境界: 直線。見出し帯と細い横線で区切る。
• カード・帯は角丸なしの四角。
• CTA は完全なピル型。
• 特長アイコンは正円の色面に白文字。
• 見出し帯の左上にコーヒー豆のシルエットを重ねる。

Components

• 購入 CTA（button-primary）: 黄緑のピル型。上段は小さめ、下段は大きめの 2 段の淡黄文字。
• 英字セクション見出し（section-title-en）: グレーの英大文字。左右に放射線状の手描き線が付く。
• ブラウン見出し帯（band-heading）: 焙煎ブラウンの横帯に白の手書き英字を置き、豆アイコンを重ねる。
• 丸アイコン（feature-circle）: 深緑・オレンジの正円に白い太字の 2〜4 文字と、透かしの豆の柄。
• 味わいチャート（taste-chart）: 白箱に 6 項目を 2 列×3 行で並べ、豆アイコン 5 段階で評価。下に条件の注記。
• 商品紹介ブロック（product-row）: 左にボトルの切り抜き、右に商品名・説明・茶色の太字注記。
• 点線下線リード（lead-dotted）: 濃茶の太字の各行の下にブラウンの点線。
• イラスト特長グリッド（illust-grid）: クラフト紙の地に、点線で区切った 2 列の手描きイラストと短い見出し。

Do's and Don'ts

Do - 地はミルクベージュ、情報は白カードに載せる。 - セクションは英字見出し＋ブラウン帯の 2 段で始める。 - 商品の比較は同じ型の豆アイコンのチャートで統一する。 - 使い方は単純な図解のフラットイラストで見せる。 - CTA は黄緑ピルを上下で同じデザインにする。

Don't - 黄緑を CTA 以外に使わない。 - 黒や純黒の文字を使わず濃茶にする。 - カードに大きな角丸や強い影を付けない。 - 写真に四角い背景を残さない。 - 寒色を基調色にしない。

Page Structure

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

1. ファーストビュー（ブランドと代表 2 商品を印象づける）: 背景をオレンジと緑で左右二分割し、中央にロゴ、両側に商品ボトル、ミルクのしぶきとコーヒー豆を散らす。
2. CTA（すぐ購入したい人を誘導する）: ベージュ地に黄緑のピル型ボタンを中央に置く。
3. 商品紹介（商品の概要と価値を伝える）: 白カードに商品とグラスの写真、点線下線のリード、丸アイコン 2 つと短い説明を置く。
4. 飲み方（使い方の手軽さを見せる）: 白カードに大きな濃茶見出しと、ボトルを注ぐフラット図解、推奨比率を大きな数字で示す。
5. ラインナップ（全商品を比較させる）: 画像左・テキスト右の商品行に味わいチャートを付け、横線で区切って縦に並べる。
6. 特長詳細（生活シーンでの便利さを伝える）: クラフト紙パネルに手描きイラストの 2 列グリッド。キーワードを茶色で強調する。
7. クロージング CTA（最後に購入へ誘導する）: 注記の下に上部と同じ黄緑ピルのボタンを置く。

Imagery

• 商品ボトルは正面から撮った白抜きの切り抜き写真。
• 氷入りのアイスラテとブラックのグラスを並べ、白背景で清潔に。
• FV はミルクのしぶきと浮かぶコーヒー豆で動きを出す。
• 使い方の図はアウトラインのないフラットイラストで、点線で目盛りを表す。
• 特長は黒い線画に淡い水彩風の色を差した手描きイラスト。
• 装飾はコーヒー豆のシルエットと手描きの放射線。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 80% 幅の固定コンテナで、ベージュ地を左右に広げる。
• PC の FV は横長で、二分割の背景を維持する。
• PC のラインナップは 2 列グリッドにし、縦線と横線で区切る。
• PC の商品紹介は丸アイコンと説明を横並びにする。
• PC の特長グリッドは 4 列×2 行。
• 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 行書くと起動時に読み込まれる。