DESIGN.md — 淡色グラデ×コーラルピンクのサプリ LP（Soft Pastel Gradient Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 淡いグラデーション・コーラルピンク帯・スレートグレー面・細字の大見出し・六角形バッジ・光の粒
• 地の質感: ソフトフォーカスの光、DNA や光の粒が透ける淡いグラデーション地
• 形: 角丸小さめのカード、斜めカットの帯、六角形と円形バッジ
• 温度感: 白とブルーグレーの涼しさに、ピンクとオレンジで温かみを足す

Colors

• 地は白と淡いブルーグレーのグラデーションを基本にする
• 悩み・減少データ・分析結果の章はスレートグレー面に白文字
• ピンクは数値・キーワードの強調と、価格訴求の横帯だけに使う
• 暗い面の大見出しは淡いゴールドで目立たせる
• 成分紹介は成分ごとに黄・橙・緑・ピンクの淡い色で分ける
• band-price は文字 #FFFFFF × 背景 #FD4D74 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EC0336、4.53:1）を使う。
• spec-badge は文字 #FD4D74 × 背景 #FEFEFE のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EC0336、4.6:1）を使う。
• label-tab は文字 #FFFFFF × 背景 #B6BDCD のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#677697、4.55:1）を使う。

Typography

• 大見出しは細めの字で大きく組み、数字だけ 1.3 倍にする
• 強調語はピンクの太字にして、文中に 1〜2 か所だけ置く
• Point 番号は大きな細い欧文セリフにして、斜体の小さな英字を重ねる
• 注釈は見出しの右肩に小さな※印で付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分表は 2 列、比較カードは 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の背景に切り替え、中身は中央揃えにする
• 人物写真は片側に裁ち落とし、反対側に文字を置く
• 理由リストは左に番号、右に本文の横長カードで縦に並べる
• 各章の終わりにピンクの全幅帯で価格・習慣化を訴える

Elevation & Depth

• カードには淡い影（0 2px 8px rgba(0,0,0,.08)）を付ける
• 吹き出しはフラットな濃いグレーで影なし
• 商品パッケージ写真には接地影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は裁ち落とし、成分は円形、食材は角丸の矩形で切り抜く
• セクション境界: 直線で背景色を切り替える。帯の下に三角の矢印を付ける場合あり
• 数値バッジは六角形または角丸の矩形にする
• 帯は左右を斜めにカットする
• カードは角丸を小さめにして端正に見せる

Components

• 価格訴求帯（band-price）: 全幅のピンク帯に白い太字を置き、数字は白地にピンクで強調する
• 数値バッジ（spec-badge）: 白い角丸ボックスを 3 つ並べ、ラベルの下に大きな数字を置く
• 悩み吹き出し（worry-bubble）: 濃いグレーの角丸吹き出しに白文字。左右に互い違いで 5 つ置く
• 理由カード（reason-card）: 左にブルーグレーの Point 番号ブロック、右に白地の本文を置く横長カード
• ポイント見出し（point-heading）: 大きな細い数字に Point の斜体英字を重ね、横に明朝の見出しを置く
• 六角形バッジ（hex-badge）: ゴールドの縁取りがある白い六角形に、品質の数値を明朝で入れる
• 成分表の行（ingredient-row）: 左に成分色の写真ラベル、右に白地の説明を置く 2 列の行
• 見出しタブ（label-tab）: ブルーグレーのグラデ台形に白い明朝文字。囲み枠の上辺に重ねる
• 表示義務ボックス（notice-box）: 上部に濃色と白のタブ 2 つ、本文は白地に細枠で注意事項を並べる

Do's and Don'ts

Do - 淡いグラデーション地と光のボケで清潔感を保つ - 数値は大きく、単位は小さく組む - 暗い面は悩み・データ・分析の章に限って使う - 各ポイントの章は番号見出しから始める - 注釈と出典を小さく必ず添える

Don't - 原色の赤や黒ベタの面を多用しない - ピンクを本文に広く使わない - 太すぎるポップ書体を使わない - 角丸の大きいピル型ボタンを使わない - 背景を彩度の高い単色で塗らない

Page Structure

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

1. ファーストビュー（信頼性と商品の印象を伝える）: 明るいグレー地に商品箱と光の粒を置き、下に数値バッジを 3 つ並べる
2. 悩みの提起（ターゲットの共感を得る）: 片側に人物写真を置き、悩みの吹き出しを 5 つ重ねる
3. ブリッジ（商品の登場を告げる）: 人物写真のコラージュの下に、ピンクの帯を置く
4. 成分の解説（主成分の価値を教える）: DNA が透ける淡い地に、グラデ文字の大見出しと説明カードを置く
5. 減少データ（摂取の必要性を示す）: スレートグレーの面に棒グラフとシルエットを置き、ゴールドの見出しを付ける
6. 食事との比較（サプリの手軽さを示す）: 食材写真 3 列に必要量の数字を重ね、最後にピンクの価格帯
7. 選ばれる理由（4 つの強みを一覧で見せる）: 番号付きの横長カードを 4 段並べ、横にスティック包装を添える
8. 配合成分（成分の内訳を見せる）: 円形の成分写真を放射状に並べ、下に 2 列の成分表を置く
9. 無添加（安心感を伝える）: 白い六角形を 6 つ並べ、人物写真を添える
10. 製造の信頼性（企業と工場の安全性を示す）: ビル写真と、タブ見出しの付いた囲みカードを 2 つ置く
11. 第三者分析（客観的な根拠を示す）: スレートグレー地に六角形のゴールドバッジ 3 つと試験書の画像を置く
12. 専門家の推薦（権威付けをする）: 白衣の人物写真、肩書き、暗いカードの推薦コメント
13. 使いやすさ・味（続けやすさを訴える）: 円形の吹き出しで利点を示し、レモンの写真で爽やかさを出す
14. まとめ・表示事項（最後の一押しと法定表示）: 2 つの価値をピンクの箱で掛け合わせ、価格帯の下に注意事項ボックスを置く

Imagery

• 30〜40 代女性の自然な笑顔を、白い服と明るい逆光で撮る
• 商品は斜め俯瞰で、光の粒や柔らかな影を添える
• 成分は黄・橙・緑のボケ写真を円形に切り抜く
• 科学的なモチーフ（DNA・白衣・試験管）を淡く透かす
• レモンや葉で爽やかさを足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は SP 幅の縦長デザイン。PC では中央に 750px 前後の幅で置く想定
• PC の左右余白は淡いグレーで埋める
• SP では成分表を 2 列のまま保ち、比較カードは 3 列を縮めて使う
• 帯と背景は全幅、文字ブロックは 90% 幅にする

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