DESIGN.md — 生成り×茶×桃色の女性向けプロテイン LP（Warm Pastel Wellness Protein LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、ナチュラル、上品・高級、情報量多め・訴求型
• キーワード: 生成り・クリームイエロー・こげ茶・桃色グラデ・ふんわりぼかし・明朝
• 地の質感: 和紙のような細かい粒子感と、写真の縁を白や黄に溶かすソフトフォーカス
• 形: 楕円・雲形のぼかし切り抜き、V 字の下向き境界、角丸カード
• 温度感: 暖色寄りで日差しのある朝のような温かさ

Colors

• 地は生成り→クリームイエロー→白を交互に使い、暖色系で統一する
• 悩み提起とフッターだけこげ茶の面にして白文字で沈める
• 価格・オファーは桃色〜マゼンタの大きなグラデ背景に白カードを浮かべる
• 割引率や数値はサーモン、ラベルはマスタードで少量だけ強調
• 購入ボタンは必ずこげ茶の塗りに白文字
• 純黒は使わず、文字も茶系にする
• badge-discount は文字 #FFFFFF × 背景 #FC5443 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EA1904、4.53:1）を使う。
• benefit-grid は文字 #FC5443 × 背景 #FEFEFD のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EA1904、4.58:1）を使う。

Typography

• 見出しと価格は明朝で上品にする
• 英字の筆記体や大きな英単語を見出しの背後に薄く敷く
• 悩みは手書き風書体で語りかける
• 本文は字間を広く、行間 2 倍前後でゆったり
• 成分の細かい説明だけゴシックの小さめ文字
• 価格の数字は明朝で大きく、税込表記は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典や丸バッジは 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は全幅で、テキストを重ねる
• 本文は左寄せと右寄せを交互にしてリズムを作る
• 価格カードは幅 55% 程度で中央に置く
• Point 01〜03 は同じ型（筆記体番号→見出し→写真→説明）を繰り返す
• 価格ブロックはページ内で 3 回繰り返す

Elevation & Depth

• 価格カード・FAQ カードは薄い影で浮かせる
• 写真は影なしで縁をぼかして地になじませる
• 見出しラベルは白地帯を文字の後ろに敷く

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 楕円や雲形のソフトフォーカス切り抜き、縦長アーチ型
• セクション境界: 下向き V 字の三角形と、白へ溶けるグラデ
• ボタンはピル型
• 特徴は大きな茶色の正円で 3 つ並べる
• 期間バッジは雲形・花形
• FAQ は角丸 8px の白カード

Components

• 購入ボタン（button-primary）: こげ茶のピル型で白い明朝文字
• プラン価格カード（price-card）: 白カードの中に淡黄の定期枠、割引丸バッジ、大きな価格
• 割引丸バッジ（badge-discount）: サーモンの正円に白で割引率
• 特典 6 マス（benefit-grid）: 上端こげ茶ラインの白マス 3×2、月桂冠風装飾
• 特長丸バッジ（feature-circle）: こげ茶の大きな円 3 つに白文字、×線で不使用表現にも
• Point 見出し（point-heading）: 薄い筆記体の番号＋下線＋明朝見出し
• 茶色帯見出し（label-band）: 文字の後ろにこげ茶や白の帯を一行ずつ敷く
• FAQ アコーディオン（faq-item）: 白角丸カード、左に Q、右に開閉矢印

Do's and Don'ts

Do - 写真の縁は白や黄色にぼかして地に溶かす - 暖色の淡い地を使い、セクションごとに切り替える - 見出しは明朝＋筆記体英字の組み合わせにする - 価格ブロックは繰り返し配置する - 数値は大きく、単位は小さく

Don't - 青や寒色系を入れない - 角張ったはっきりした写真枠を使わない - 太いゴシックの派手な見出しにしない - 純黒の文字や背景を使わない - 桃色グラデを価格以外の場所で多用しない

Page Structure

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

1. ファーストビュー（商品と使用シーンを一目で伝える）: 明るいキッチンの全幅写真に白い明朝コピーと商品 2 つ
2. 商品紹介（フレーバーと成分を示す）: 白地にロゴ、角丸写真カード、オレンジグラデの成分パネル
3. オファー（期間限定価格で購入を促す）: 桃色グラデ背景、雲形期限バッジ、白い価格カードと特典 6 マス
4. 悩みの提起（共感を得る）: こげ茶地に大きな英字の透かし、手書き風コピーとぼかし写真を左右交互、V 字で次へ
5. ブランドストーリー（開発の想いを伝える）: 生成り地に白帯見出し、人物写真、左右寄せの明朝本文
6. 3 つのこだわり（特長を説明する）: Point 01〜03 の筆記体番号、写真、黄色地の説明と茶色丸バッジ
7. 購入特典（おまけで背中を押す）: オレンジグラデの見出しラベルと黄枠の写真
8. 栄養の重要性（誤解を解き必要性を伝える）: 問いかけ写真→下線付き否定→ぼかし写真、赤茶帯で締める
9. 飲み方ガイド（手軽さを示す）: アーチ型写真、水彩 4 ステップ、黄色カードでアレンジ 3 例
10. 飲むタイミング（習慣化をイメージさせる）: 写真上に箇条書きと茶色の雲形吹き出し
11. 監修者プロフィール（信頼を得る）: 黄色地に楕円ぼかし人物写真、筆記体の名前と中央寄せ紹介文
12. よくある質問（不安を解消）: 生成り地に白角丸アコーディオン
13. クロージング CTA（最終購入）: オファーブロックを再掲
14. フッター（リンク案内）: こげ茶地に白文字のリンクとロゴ

Imagery

• 30 代女性が自然光の室内で淡い黄色の飲み物を持つ笑顔の写真
• 服はクリーム・ベージュなど淡い色
• 悩み写真は暗め・セピア寄りでぼかし縁取り
• 果物や野菜、粉末の物撮りは暖色で寄り
• 手順は水彩タッチのイラスト
• 白い泡や光のボケを装飾として重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP レイアウトを中央 400〜480px 幅で置き、左右に背景色を広げる
• 全幅写真は PC では中央カラム内に収める
• 価格カードは PC でも縦 1 列のまま
• 文字サイズは SP の 1.1 倍程度まで

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