DESIGN.md — ピンク×桜色グラデの女性向けサプリ LP（Soft Pink Gradient Women's Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、やさしい・柔らかい、信頼・誠実、かわいい
• キーワード: ローズピンク・桜色グラデ・太字の数字訴求・吹き出し・成分図解・専門家推薦
• 地の質感: 淡いグラデ地とぼかし写真の背景に白カードを重ねる。うっすら影とキラキラ装飾あり
• 形: 角丸カード、ピル型 CTA、丸い成分写真、吹き出し型の悩みリスト
• 温度感: 暖色寄りでやわらかい。ピンクと肌色ベージュが中心

Colors

• 地は白とベージュ・桜色グラデを交互に使い、セクションの区切りを色で出す
• 強調はローズピンクの文字かピンク帯に白文字で行う
• 主 CTA はピンクのグラデのピル型。詳細の開閉ボタンはオレンジで分ける
• 悩みは薄黄の吹き出しにローズ系の文字で並べる
• 比較で弱い方はグレーや淡いブルーにして、自社側をピンクで目立たせる
• 数字の強調はピンクの太字で一番大きくする
• button-primary は文字 #FFFFFF × 背景 #E8457A のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E31E5E、4.55:1）を使う。
• button-accordion は文字 #FFFFFF × 背景 #F49423 のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B06309、4.53:1）を使う。
• heading-band は文字 #FFFFFF × 背景 #E8546E のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E2294A、4.52:1）を使う。
• point-badge は文字 #FFFFFF × 背景 #EFA98D のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#C94E1C、4.58:1）を使う。
• price-card は文字 #E8546E × 背景 #FFFFFF のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E2294A、4.52:1）を使う。
• reason-list は文字 #E8546E × 背景 #FFFFFF のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E2294A、4.52:1）を使う。

Typography

• 見出しは中央揃え。キーワードだけピンクにして大きくする
• 1 行の見出しの中で文字サイズを 2〜3 段階に変える
• 数字は単位より大きく太くする
• 本文は左揃えにし、要点だけピンクの太字にする
• 注釈は※付きの小さいグレー文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分の図解だけ 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の地色で区切り、中に白カードを置く
• 専門家カードは写真と肩書きラベルを上に、本文を下に置く
• 悩みリストは吹き出しを左右交互にずらして縦に並べる
• 購入ブロックはプレゼント告知、タブ、価格カード、CTA、注釈、開閉ボタンの順でまとめ、ページ内で 3 回くり返す
• 比較表は自社側の列をピンク枠で囲んで目立たせる

Elevation & Depth

• 白カードにはぼかしの弱い影（0 4px 12px rgba(0,0,0,.08)）を付ける
• CTA には下側に濃い影を付けて立体感を出す
• 写真の上に置くカードは白の不透明にして読みやすくする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 成分写真は円形、人物は背景を切り抜くか角丸の四角
• セクション境界: 基本は直線。下向き三角の矢印で次へつなぐ
• 悩みは尾付きの吹き出しで見せる
• 見出し帯は角丸なしの横長帯
• Point バッジは丸みのある台形タブにする
• 比較カードは枠線付きの角丸にする

Components

• 主 CTA ボタン（button-primary）: ピンクのグラデのピル型。上に小さな補足文、右端に丸い矢印アイコン
• 詳細の開閉ボタン（button-accordion）: オレンジの角丸ボタン。中央に白文字、右に▼
• ピンク帯の見出し（heading-band）: 濃いピンクの帯に白の太字。2 段に重ねて使う
• Point 番号バッジ（point-badge）: ピーチ色のタブに Point と大きな数字
• 悩みの吹き出し（worry-bubble）: 薄黄の吹き出しに悩みを 1 行ずつ書き、左右交互にずらす
• 専門家の推薦カード（expert-card）: 白カードの左上にオレンジの肩書きラベルと名前、右に人物写真、下に本文
• 価格カード（price-card）: ピンク枠のタブ付きカード。商品画像、通常価格、大きなピンクの価格、割引バッジを並べる
• 比較表（compare-table）: 自社列はピンクの見出しと枠、他社列はグレー
• 理由リスト（reason-list）: ピンクの丸い番号と見出しを点線で区切って並べる

Do's and Don'ts

Do - 強調語はピンクで大きくし、ほかは濃いグレーで抑える - 購入ブロックはページ内で何度か同じ形でくり返す - 信頼の根拠（専門家・数値・比較）を図や表で見せる - 成分は円形写真とラベルで直感的に見せる - セクション間は下向き矢印や接続の言葉でつなぐ

Don't - 寒色を主役にしない（ブルーは比較の弱い側だけに使う） - 黒や原色の赤で強く塗りつぶさない - CTA の形や色をセクションごとに変えない - 本文を中央揃えで長く続けない - 写真の上に地を敷かずに細い文字を置かない

Page Structure

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

1. ファーストビュー（企業の信頼性と対象を伝える）: 空と畑の写真を地に、ピンク帯の見出しと大きな商品パッケージを置く
2. 独自性 Point1（配合の独自性を示す）: ピンクのカード見出しと Point バッジ、人物写真、成分を円で掛け合わせる図
3. 実績（販売実績で安心させる）: 桜色グラデの地に月桂冠と大きな数字、利用シーンの写真
4. 購入ブロック（特典と価格を見せて申込を促す）: プレゼント告知、タブ付き価格カード、ピンクの CTA、注釈、オレンジの開閉ボタン
5. 専門家の推薦（第三者の評価で信頼を高める）: 白カードに肩書きラベル、人物写真、要点をピンクにした本文
6. 購入者レビュー（実際の声を見せる）: 英字ラベルとピンクの見出し、横にスクロールする吹き出しカード
7. 悩みの提起（対象者に自分ごとと感じさせる）: 薄黄の吹き出しを左右交互に 8 つ並べ、矢印で原因の解説とグラフへつなぐ
8. 解決・成分の解説（成分の優位性を説明する）: 成分の系統図、他成分と VS で比べる比較、番号付きのパワーカード
9. 独自性 Point2・3（製法と含有量の優位性を示す）: 比較表、消化器のイラスト、手に錠剤をのせた写真、栄養成分表
10. 第2成分・配合成分（ほかの成分の価値を伝える）: 果物の写真、悩みワードの多角形バッジ、キャラクター、4 成分の円形グリッド
11. 選ばれる理由のまとめ（要点をおさらいする）: ピンクの地に番号付きの理由リストと写真 3 枚
12. 開発者メッセージ（作り手の想いで共感を得る）: ピンク枠の白カードに本文、商品と人物の写真
13. 企業の信頼性（運営体制と品質管理を示す）: 施設の写真に大きな見出しと白カードの本文を重ねる

Imagery

• 大豆・ぶどうなどの素材を明るい自然光でシズル感のあるアップで撮る
• 40〜50 代の女性モデルが白い服で穏やかに笑う写真
• 白衣やスーツの専門家の写真は背景を切り抜く
• 背景の写真は白っぽくぼかして文字を載せやすくする
• 成分や仕組みはピンクとピーチのフラットなイラストで図解する
• キラキラや集中線の小さな装飾を見出しに添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 375〜480px 幅の SP レイアウトを置き、左右を淡い地で埋める
• PC で広げる場合は専門家カードや成分グリッドを 2〜4 カラムにする
• 見出しのサイズは PC で 1.3 倍程度にとどめ、帯見出しは最大幅を決める
• 価格カードと CTA は PC でも中央の 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 行書くと起動時に読み込まれる。