DESIGN.md — 淡ピンク×ローズ水彩の女性向けサプリ LP（Soft Pink Watercolor Women's Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、上品・高級、信頼・誠実
• キーワード: 淡ピンク・ローズ明朝・水彩テクスチャ・大人の女性・図解で説明・白カード
• 地の質感: ピンクの水彩・和紙のようなにじみを背景に敷き、白カードを上に重ねる
• 形: 角が直角の白カード、真円のバブル、下向き三角の矢印、角丸の小さなボタン
• 温度感: 暖色寄りのやわらかいピンク。上品で穏やか

Colors

• 地は淡ピンク #FEF5F8 と白を交互に使い、悩みや知識のセクションには水彩テクスチャを敷く
• 見出しのキーワードだけをローズ色にして、それ以外は濃いグレーにする
• 数値やキーフレーズはローズ色の太字か、黄色のマーカーで強調する
• 比較はピンクとラベンダーの 2 色で対比させる
• CTA は彩度を抑えたローズの単色面に白文字。赤やオレンジは使わない
• benefit-orb は文字 #FFFFFF × 背景 #EBB9BE のコントラスト比が 1.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#CB4A57、4.51:1）を使う。
• ingredient-tag は文字 #FFFFFF × 背景 #C48498 のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B15C77、4.5:1）を使う。

Typography

• 見出しは太い明朝で 2 行に分け、2 行目のほうを大きくする
• 見出しの中のキーワードだけをローズ色にし、文字も一回り大きくする
• 本文は中央揃えにして、文節ごとに改行する
• 価格の数字は太い欧文サンセリフで大きくし、単位の「円」は小さくする
• 手書き書体は吹き出しと縦書きのコピーだけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。図解やバブルは 3 つ横並び
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの間を下向きの三角矢印でつなぎ、ストーリーとして読ませる
• 説明は白カードにまとめ、カードの周りに地の余白を残す
• 商品写真と価格は左右を入れ替えながら交互に並べる
• テキストはすべて中央揃え

Elevation & Depth

• 白カードにはごく薄い影（0 2px 8px rgba(0,0,0,.06)）をつける
• バブルは光沢のある立体的なグラデーションにする
• ボタンには影をつけず、フラットにする

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は背景に溶け込ませる切り抜き。商品は斜めに置いた切り抜き。成分説明は円形の拡大図
• セクション境界: 中央に下向きの三角矢印。背景色をフラットに切り替える
• カードは角丸にしない
• 効果を示すバブルや日数バッジは真円にする
• 成分タグは角丸 4px の小さな帯にする

Components

• 詳細ボタン（button-primary）: ローズの単色面に白文字を置き、右端に「>」をつける。幅は約 60%
• 悩みの吹き出し（worry-bubble）: 中央の人物イラストを囲むように手書き文字の白い吹き出しを 4 つ置く
• 効果のバブル（benefit-orb）: ピンクの光沢がある真円を 3 つ横に並べ、中に白文字の短いラベルを入れる
• 説明カード（info-card）: テクスチャの地の上に置く白カード。中に強調文とグラフを入れる
• 下向き三角（arrow-divider）: セクションやカード内の段落をつなぐ淡いピンクの三角
• 日数バッジ（day-badge）: 白い円に細いローズの枠をつけ、目安の日数を大きな明朝で入れる。金縁グラデーション版もある
• 配合成分タグ（ingredient-tag）: モーブの帯に白い明朝で成分名を入れ、縦に 3 つ並べる。左側には主成分のボックスを置く
• 線つき小見出し（line-heading）: 左右に細いピンクの線を引き、中央に字間を広くとった短い語を置く
• マーカー強調（marker-text）: ローズ色の太字の下に黄色のマーカーを敷く

Do's and Don'ts

Do - 淡ピンクの地と白カードを重ねて、やわらかい奥行きを出す - 見出しは明朝体にし、キーワードだけをローズ色にする - ストーリーの流れは下向きの三角でつなぐ - 根拠となる数値や参考文献は小さな注記で添える - イラストは細い線と淡い彩色で描いた大人の女性にする

Don't - 原色の赤や黄色の派手な CTA にしない - 太いゴシックで煽るような見出しにしない - 黒や濃い色の背景セクションを入れない - カードに大きな角丸や強い影をつけない - 本文を左揃えの長文にしない

Page Structure

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

1. ファーストビュー（対象と商品を印象づける）: 明るい窓辺の人物写真、商品パッケージ 2 種、縦書きの手書きコピー、明朝の大きな商品名を配置する
2. 導入・呼びかけ（体の変化を共感させ、行動を促す）: 淡ピンクのグラデーションの上に中央揃えの明朝文を置き、最後にローズ色の大きな問いかけを入れる
3. 悩みの提起（自分ごと化させる）: 水彩テクスチャの地に、人物イラストと手書きの吹き出し 4 つを並べる
4. 成分の説明（成分の仕組みを理解させる）: 横顔の写真と見出しを置き、食材 → 矢印 → 円で変換の過程を見せる図解にする
5. 期待できる働き（効果をイメージさせる）: 白カードの中に三角で段落をつなぎ、バブル 3 つとマーカー強調の結論を置く
6. 根拠データ（必要性を示す）: テクスチャの地に白カードを置き、2 色の円グラフと 2 人のイラスト、参考文献を入れる
7. 解決提案（商品へ橋渡しする）: ローズ色の明朝 3 行で提案し、大きな商品ロゴを置く
8. 配合成分（中身を示す）: 線つき小見出しの下に、主成分ボックスと成分タグ 3 つを置く
9. 商品・価格（購入へ誘導する）: 内容量の違う 2 種類を左右交互に並べ、日数バッジ・価格・詳細ボタンを添える
10. 表示の案内（注意事項を確認させる）: パッケージの裏面を円で拡大し、矢印と短い注記を添える

Imagery

• 人物写真は 40〜50 代の女性。白い窓辺の明るい自然光で撮り、背景は白く飛ばしてにじませる
• イラストは細い主線に淡いピンク・ラベンダーで彩色したボブヘアの女性
• 背景はピンクの水彩・和紙のようなにじみのテクスチャ
• 商品は白とピンクのパウチを斜めに重ね、錠剤を手前に添える
• 効果のバブルは光沢のあるピンクの球体で表現する。小さなキラキラ装飾を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でもコンテンツ幅は約 600px の 1 カラムで中央に置き、両脇まで背景のテクスチャを広げる
• PC では本文の改行が減り、1 行が長くなる
• 価格ブロックは PC でも商品写真と情報を左右交互に並べ、ボタンは小さくする
• 見出しの文字サイズは PC でも SP と同程度にとどめる

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