DESIGN.md — 焙煎ブラウン×朱赤のダイエット飲料 LP（Coffee Brown Diet Drink Offer LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、上品・高級、やさしい・柔らかい
• キーワード: コーヒーブラウン・生成り・朱赤の数字・縦書きコピー・透かし英字・角丸カード
• 地の質感: コーヒー豆・液体の写真を背景に敷き、グラデーションと透かし英字で奥行きを出す
• 形: 大きめ角丸のカード、上辺だけ大きく丸いアーチ枠、ピル型CTA、丸バッジ
• 温度感: 温かい（焙煎色・オレンジ寄りの暖色）

Colors

• 地は白・生成り・くすみ色を交互に置き、価格ブロックだけ濃い赤茶に切り替える
• 価格・kcal・割引率の数字は必ず朱赤で大きく
• 見出しラベルはブラウン帯に白抜き文字
• CTAは緑一色でページ内で唯一の寒色系強調にする
• 実績・受賞は金色グラデと月桂樹で高級感
• 悩みパートはブルーグレーで温度を下げ、解決パートで暖色に戻す
• price-card は文字 #E2502A × 背景 #FFFFFF のコントラスト比が 3.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D5431D、4.52:1）を使う。
• kcal-tag は文字 #FFFFFF × 背景 #E2502A のコントラスト比が 3.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D5431D、4.52:1）を使う。

Typography

• 大見出しは明朝、説明は太ゴシックの二本立て
• 数字は単位より2倍以上大きくする
• セクション背面に英小文字の透かしを大きく敷く
• 強調語は朱赤またはブラウン帯の白抜き
• 縦書きコピーは写真の余白側に配置
• 本文中の重要語は太字＋朱赤
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、成分バッジや実績は 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右5%余白で中央に置く
• 写真は全幅で敷きその上にラベルを重ねる
• 価格ブロックはページ内で3回繰り返す
• 特典は横長カードを縦に4段
• セクション間は点線の縦ドットでつなぐ
• 体験談は写真+名前タグ+本文の縦積み

Elevation & Depth

• カードに薄い影(0 4px 12px rgba(0,0,0,.1))
• CTAは立体的なグラデと下影
• 価格カードは白面で濃色地から浮かせる

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 角丸長方形・上辺アーチ・円形
• セクション境界: 上辺を大きく丸めたアーチ、または直線切替
• 成分カードは上角を大きく丸める
• 人物写真はアーチ型や縦長角丸
• 数字バッジは円形
• 見出しラベルは小角丸の帯

Components

• 申込CTA（button-primary）: 緑グラデのピル型、上に小さな限定ラベル、右に丸矢印
• 価格カード（price-card）: 白カードに商品写真、取消線の通常価格、朱赤の大きな初回価格
• 特典カード（benefit-row）: 左に黒地の番号（明朝数字）、右に特典を朱赤で
• ブラウン帯見出し（label-band）: 濃茶の帯に白抜き文字、成分名や要点に使う
• 成分バッジ（feature-badge）: 茶枠の角丸ボックスに成分名と透かし英字を3列
• カロリー削減タグ（kcal-tag）: 朱赤の面に白抜き数字、上に小さな期間表記
• 体験談カード（voice-card）: 人物写真に茶色の吹き出し見出し、名前タグ、縦書きVOICE番号
• 悩み吹き出し（worry-bubble）: 写真上の半透明グレー枠で悩みを短く3つ
• 実績バッジ（award-badge）: 金色の数字と月桂樹、受賞の円形エンブレム

Do's and Don'ts

Do - 数字訴求は朱赤の大きな欧文数字で - 濃茶・生成り・白をセクションごとに交互に - 写真の上に帯ラベルを重ねて情報を層にする - 価格ブロックを中盤と終盤で繰り返す - 注釈を各訴求の直下に小さく添える

Don't - CTA以外に緑を使わない - 寒色を広く使わない（悩みパート以外） - 見出しを細いゴシックだけで組まない - 角のない硬い四角カードを多用しない - 数字と単位を同サイズにしない

Page Structure

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

1. ファーストビュー（商品と効果の印象付け）: 人物写真に縦書き明朝コピー、商品パッケージ、成分バッジ3つ、右上に割引帯
2. 実績・受賞（信頼獲得）: 赤茶地に金色の大数字と月桂樹、アーチ枠の受賞告知
3. 専門家推薦（権威付け）: 医師写真と肩書き、キャメル帯の要点、本文
4. 商品特長サマリー（手軽さと成分訴求）: 朱赤の縦長帯コピー、成分を漢字1字の丸アイコンで4行
5. 緊急性告知（早期申込を促す）: 朱赤地に白カード、黒帯の強調語
6. 特典と価格・CTA（オファー提示）: 金グラデ地に特典4段、赤茶地に白い価格カードと緑CTA
7. 成功事例（効果の具体化）: ピンクベージュ地に人物写真とkcal削減タグ
8. 成分紹介（配合の豪華さ）: コーヒー豆背景に成分バッジ、以降各成分を角丸カードで詳細
9. 口コミ（共感）: SNS風投稿と写真3×2グリッド
10. 悩みの提起（原因の自覚）: ブルーグレー地に悩み吹き出しとイラスト
11. カロリー比較（置き換え効果の可視化）: 朝昼夜の食事写真→商品、朱赤数字と運動換算
12. お客様の声（体験の共有）: 写真＋吹き出し見出し＋朱赤強調の本文を3件
13. 会社紹介・品質（安心感）: アーチ枠の淡ブルー地文章、工場写真とGMPマーク
14. クロージングCTA（再オファー）: FV再掲、緊急性、特典、価格カード、お届けサイクル

Imagery

• アイスカフェラテやコーヒーの液体を暖色光で撮る
• 30〜40代女性の自然な笑顔、白や淡色の服
• くびれを見せるお腹のアップ
• 成分素材（果物・豆・唐辛子）の接写を暗めに
• 線画の人物イラストと悪玉菌キャラで悩みを表現
• 背景に英小文字の大きな透かし文字
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはSP幅のカラムを中央に置き左右は無地
• PCでも縦長の1カラム構成を維持
• 成分バッジは最大3列まで
• 背景写真は横に広げずカラム内に収める

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