DESIGN.md — コーラルピンク×ココアの菌活サプリ LP（Soft Coral Pink Wellness Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、情報量多め・訴求型、上品・高級、清潔・爽やか
• キーワード: くすみピンク・ココアブラウン・丸いバッジ・角丸カード・ふんわりボケ背景・ティールCTA
• 地の質感: 淡いグラデーションと、ぼかしたカプセル・菌モチーフを背景に散らしたソフトな質感
• 形: 大きな角丸カード、正円バッジ、吹き出し、斜めカットの帯
• 温度感: 暖色寄り。ピンクベージュの温かみに、ブラウンで引き締めを加える

Colors

• 地はグレーとベージュを交互に使い、セクションを区切る
• 強調語はコーラルピンク、他の見出し語はブラウンで書き分ける
• 主CTAだけをティールにして、ページ内で唯一の寒色にする
• 価格セクションはピンクのグラデーション地に白カードを載せる
• 悩みと結論の帯はココアブラウン地に白文字
• FAQの質問帯はピンク地に白文字。回答の要点はピンク文字にする
• button-primary は文字 #FFFFFF × 背景 #3E9C98 のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#34827F、4.52:1）を使う。
• badge-circle は文字 #DB837D × 背景 #FCEEEB のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C43F36、4.52:1）を使う。
• price-card は文字 #DB837D × 背景 #FFFEFE のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C43F36、4.57:1）を使う。
• faq-item は文字 #FFFFFF × 背景 #DB837D のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C43F36、4.51:1）を使う。

Typography

• 見出しは字間を広めにとった太い丸ゴシック
• 強調語だけ文字を一回り大きくし、ピンクにする
• キーワードは大きな二重引用符で挟む
• 数字は欧文書体で特大にし、単位は小さく添える
• 「※」の注釈は小さなグレー文字で右寄せにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジやSNS投稿は 2〜4 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション内は中央揃えの見出しから本文へ流す
• 白カードは左右6%の余白をとって浮かせる
• 成分は正円バッジを3つ横並び、または5つを散らして配置
• 口コミは写真とカードを左右交互に配置
• 各訴求の区切りごとにCTAを再掲する

Elevation & Depth

• 白カードはごく淡い影（0 4px 16px rgba(0,0,0,.06)）
• CTAボタンは下に濃いティールの立体影
• 正円バッジは白からピンクへのグラデーションと柔らかな影
• フラットな面が基本で、強い影は使わない

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 人物は正円か大きな角丸、食材は縦長のカプセル型で切り抜く
• セクション境界: 基本は直線。悩みセクションの下端だけV字カット、ほかに緩い波線
• カードは大きな角丸
• ラベルはピル型か角丸の帯
• 悩みは不定形の吹き出し
• 見出しを角括弧型の罫線で囲むこともある

Components

• ティールのピル型CTA（button-primary）: グラデーションとボタン下の影で立体的にしたピル型ボタン。右端に白い丸の矢印を置き、左上に割引ラベルを重ねる
• ブラウンのサブボタン（button-secondary）: 単品購入用。ブラウンのグラデーションのピル型
• 正円の成分バッジ（badge-circle）: 白からピンクのグラデーションの円に、太字で数字や特長を書く
• ブラウンの帯ラベル（label-band）: 見出しの上に置くピル型の導入ラベル
• 価格カード（price-card）: ピンク地の上に白い角丸カードを載せる。定価は打ち消し線、割引率はピンクの矢羽型ラベル、価格は特大の数字
• 悩みの吹き出し（bubble-worry）: モノクロ写真の上に重ねるブラウンの吹き出し。悩みの要点を白地にして反転させる
• 口コミカード（voice-card）: 白い角丸カード。背景に薄い大きな英字の番号、正円の人物写真、ブラウンのピル型属性ラベル
• FAQ項目（faq-item）: ピンクの質問帯の左に白丸のQアイコンを置き、下に白地の回答を続ける

Do's and Don'ts

Do - ピンク・ブラウン・ティールの3色に絞る - 数字の訴求は特大の欧文書体で見せる - 背景にぼかしたカプセルや菌の形をうっすら散らす - 効果をうたう表現には必ず小さな注釈を添える - CTAは価格カードの直後と各セクションの区切りに置く

Don't - 原色の赤や青は使わない - 真っ黒な文字は使わず、ブラウン系にする - 角の尖ったカードは使わない - CTA以外にティールを使わない - 写真を強いコントラストに加工しない

Page Structure

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

1. ファーストビュー（共感と商品の印象づけ）: 明るい笑顔の女性写真に大きなピンクのキャッチを重ね、商品パッケージと特長バッジ3つを置く
2. 導入・権威づけ（本格感を伝える）: ぼかした背景に商品を置き、素材2種を×でつなぐ写真パネル
3. 価格オファー（早い段階で購入へ誘導）: ピンクのグラデーション地に白い価格カードとティールのCTA
4. 実績・専門家（信頼性を補強）: 継続率の円グラフと医師のプロフィールカード
5. SNSの口コミ（話題性を示す）: ハッシュタグのピルと、SNS投稿風の写真を2×2で並べる
6. 悩みの提起（自分ごと化）: モノクロの人物写真に吹き出しを4つ。下端をV字にカット
7. 原因の解説（教育）: パステルのイラストと円の図解、カプセル型に切り抜いた写真3枚
8. 解決策の提示（商品の登場）: 芝生の上に商品を置いたシーンに縦書きのコピー、続けてCTA
9. お客様の声（共感と安心）: VOICE番号付きの白カードを左右交互に並べる
10. 成分・製法（根拠を示す）: 菌群4つのグリッド、菌名のピルタグ、正円バッジ群、原材料表
11. 開発者の思い（ストーリーで信頼を得る）: アーチ型の枠のカードに、人物写真と長文
12. 最終オファー（購入）: 複数コースの価格カードを並べ、単品購入枠を添える
13. よくある質問（不安の解消）: 白カード内に、ピンクのQ帯と回答を交互に並べる
14. フッター（法的リンク）: 中央揃えのテキストリンクと、ピンク地のコピーライト

Imagery

• 30〜50代女性の自然光の笑顔写真。白い服で明るく柔らかい階調
• 悩みの場面はモノクロ写真にする
• 商品は芝生や木の台に置き、背景を浅くぼかす
• 菌はパステルの不定形でダンベル型のフラットなイラスト
• 背景に半透明のカプセルや棒状モチーフを散らす
• 人物の線画イラストに淡いピンクの差し色を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため以下は推奨。PC は最大幅 750px 前後の中央カラムに SP デザインを置き、左右は淡いグレー地にする
• 正円バッジや菌群のグリッドは、PC で横一列に広げてよい
• 大見出しは PC で 1.3 倍程度まで拡大する
• CTAは最大幅 480px で中央に置く

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