DESIGN.md — 桃色グラデと艶玉のフェムケアサプリ LP（Soft Pink Glossy Femcare Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、情報量多め・訴求型
• キーワード: ピーチピンク・グラデーション・艶のある球体・吹き出し・円形カード・フェムケア
• 地の質感: パールのような光沢のある球体と、ぼかした光のにじみ。地はなめらかなグラデーション
• 形: 円・楕円の吹き出し、六角形のバッジ、斜めに切った帯見出し
• 温度感: 暖色寄りでやわらかく甘い

Colors

• 地は淡いピーチピンクのグラデーションで統一し、純白の面は使わない
• セクションの区切りは濃いローズピンクの帯で行い、文字は白
• 強調語だけ濃いピンクにして大きくする
• 本文は黒ではなく濃いブラウングレーでやわらかく
• 成分カードは半透明の淡いピンク円＋細いピンク線
• band-heading は文字 #FFFFFF × 背景 #C05C7B のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BC5374、4.54:1）を使う。
• pearl-badge は文字 #C05C7B × 背景 #FCD4D2 のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#A33F5E、4.52:1）を使う。
• hex-badge は文字 #C05C7B × 背景 #F9E1E4 のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#A33F5E、4.56:1）を使う。
• sub-ribbon は文字 #FFFFFF × 背景 #DB7D91 のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CC4763、4.52:1）を使う。

Typography

• 見出しの中で強調語だけ1.3倍に大きくし、助詞は小さくする
• 白抜き見出しには薄いピンクの影をつける
• 商品名は細い欧文で大きく、和名は太字で小さく添える
• 注釈番号は上付きで細かく入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩み・成分は2列の円配置
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション冒頭に全幅の帯見出しを置く
• 吹き出しは大小を散らして浮遊感を出す
• 商品画像は右寄せ、テキストは左寄せで組む
• 成分は円カードを2×2で並べる

Elevation & Depth

• 球体バッジにハイライトと柔らかい影で立体感
• 商品パッケージに淡いドロップシャドウ
• 白文字見出しにピンクのテキストシャドウ

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 素材は切り抜きで背景になじませる。成分写真は円内に配置
• セクション境界: 濃いピンクの帯、緩やかな斜め・カーブで切り替え
• 四角い枠は避け、円・楕円・六角形を使う
• 吹き出しは手描き風の細線で囲む
• 帯の上辺を斜めにして動きを出す

Components

• 帯見出し（band-heading）: 全幅の濃ピンク帯に白い大きな見出し
• 艶玉バッジ（pearl-badge）: 光沢のある球体に短い訴求を3行で
• 悩み吹き出し（worry-bubble）: 細線の楕円吹き出しに悩みを2行で
• 六角バッジ（hex-badge）: 白い六角形に食感や粒数などの特長
• 成分円カード（ingredient-circle）: 円内に素材写真・成分名・区切り線・説明
• 商品情報ブロック（product-block）: 欧文商品名・和名・内容量と価格・商品写真
• サブ帯（sub-ribbon）: 細いピンク帯に白文字の一言
• 注釈（footnote）: 番号付きの小さな注釈をブロック下に

Do's and Don'ts

Do - ピンクの濃淡だけで配色をまとめる - 円や吹き出しを大小に散らして柔らかく見せる - 強調語は濃ピンクで大きくする - 光のぼかしや艶玉で上品な質感を出す

Don't - 寒色や純黒を使わない - 角ばった四角いカードを並べない - 白一色の平坦な背景にしない - 原色の赤など強すぎる色を使わない

Page Structure

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

1. ファーストビュー（新習慣としての価値と商品を提示）: 白抜き大見出し、艶玉バッジ3つ、商品パッケージ、価格情報
2. 悩みの提起（女性特有の悩みに共感）: 帯見出し下に悩み吹き出し5つを中央の大きな吹き出しの周りに配置
3. 商品紹介（解決策として商品を提示）: 斜め帯のリード、欧文商品名と箱・袋の写真
4. 主成分（主成分の価値を伝える）: 大見出しで成分名をかぎ括弧付きで強調、注釈付き
5. 続けやすさ（味・食感・手軽さを訴求）: サブ帯＋六角バッジ3つ、素材写真と商品写真、吹き出し
6. 配合成分（補助成分4種を紹介）: 小さな枠付き前置き語＋大見出し、2×2の円カード

Imagery

• 背景にぼかしたパール調の球体と光のにじみを置く
• 商品はピンクの幾何学柄パッケージを斜めに置き影をつける
• 素材写真は白背景で切り抜き、色鮮やかに
• 粒状の商品を数個ころがしてリアリティを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では帯見出しを2行にし文字を24px程度に
• 悩み吹き出しは2列に並べ、中央の大吹き出しを上に
• 成分円カードは2列を維持するか1列にする
• PC は中央寄せ480〜750px幅の固定カラムで背景を左右に延長

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