DESIGN.md — 紺×金×ピンク橙グラデのサプリ LP（Navy Gold Gradient Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、上品・高級、清潔・爽やか
• キーワード: 濃紺見出し・金メタリック帯・ピンク橙グラデ円・大きな数値訴求・光沢グレー地・比較表
• 地の質感: 白〜銀の光沢グラデ地に、金の箔風グラデ帯を重ねる。悩みの提起部分だけ暗い写真背景にする。
• 形: 正円バッジ・角丸控えめのカード・角丸の紺帯・下向き三角の区切り
• 温度感: やや寒色寄り（紺・銀）に暖色のグラデを差す

Colors

• 見出しは濃紺、いちばん伝えたい語だけピンク赤にする
• 金メタリックのグラデはカード見出し帯・セクション見出し帯・比較表の自社列だけに使う
• ピンク→オレンジのグラデは正円バッジ・数値帯・POINTラベルに使う
• 赤はお得額と割引バッジだけに使う
• 地は白〜淡グレー〜淡青のグラデを交互にし、悩みの提起だけ暗い写真背景にする
• badge-gradient-circle は文字 #EEEDED × 背景 #B6455D のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B4445C、4.58:1）を使う。
• label-point は文字 #EEEDED × 背景 #EE8E6A のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#BB4315、4.58:1）を使う。

Typography

• 見出しは極太ゴシックで2行に分け、2行目の強調語を大きくする
• 数値は単位より大きくし、単位は小さく添える
• 強調語の下に細い紺の下線を引く
• 本文は中央揃えで行間を広めに取る
• 見出しに明朝は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出し→説明文→図解→補足の順に中央揃えで縦に積む
• 特長カードは2×2のグリッドにする
• 正円バッジは2〜3個を横に並べ、記号（＞・＋）でつなぐ
• 比較表は自社列を太くして上に飛び出させる
• セクションの頭に POINT 番号ラベルを左寄せで置く

Elevation & Depth

• 白カードに淡くぼかした影（0 4px 12px rgba(0,0,0,.12)）
• 正円バッジに柔らかい外影
• 比較表の自社列に強めの影
• 写真に重ねる白い説明ボックスに影

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。食材写真には正円の数値バッジを重ねる
• セクション境界: 直線で区切り、下向き三角で次へ誘導する
• 数値・成分は正円グラデバッジにする
• 紺帯は角丸ピル型にする
• POINTラベルは右端が斜めに抜けるグラデ帯にする
• 吹き出しは金のピル型にしっぽを付ける

Components

• グラデ正円バッジ（badge-gradient-circle）: ピンク→オレンジのグラデ円に白抜きの太字で成分や数値を入れる
• 金帯見出しカード（card-gold-header）: 上部が金メタリック帯で白文字、下部は白地に紺の太字数値
• POINTラベル（label-point）: 橙ピンクのグラデ帯に白で POINT と番号を入れる
• 紺ピル帯見出し（bar-navy-pill）: 小見出しを白文字で入れる横長の紺帯
• まとめ買い価格表（price-table）: 黒い見出し行の価格表。下に赤のお得額パネルと下矢印を付ける
• お得額パネル（panel-savings）: 赤地に白の大きな数値とお得の文字
• 悩みチェックリスト（checklist-dark）: 暗い写真の上に金のチェック丸と白文字で3項目を並べる
• 競合比較表（compare-table）: 紺の項目列と、金枠で上に飛び出した自社列、グレーの他社列で作る
• 金の吹き出し（bubble-gold）: 見出しの前置きを金のピルに入れ、しっぽを付ける

Do's and Don'ts

Do - 大きな数値は単位を小さくして目立たせる - グラデは正円と帯にだけ使う - 金は高級感を出したい見出し帯に絞る - 各特長は POINT ラベル＋2行見出し＋図解でそろえる - 地は白と淡グレーの光沢グラデを交互にする

Don't - ピンクと赤を本文に多く使わない - 細い書体や明朝で見出しを組まない - 原色ベタの背景を広く敷かない - 角丸を大きくしすぎない（カードは4px程度） - 暗い背景のセクションを何度も入れない

Page Structure

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

1. ファーストビュー（悩みへの共感と商品を提示する）: 肌のアップ写真に、グラデ文字の大コピー、正円バッジ、成分タグ、商品パッケージを重ねる
2. まとめ買い価格（セット購入のお得さを見せる）: 金帯の見出しの下にセット写真と割引バッジ、価格表、赤のお得額パネルを置く
3. 悩みの提起（不足に気づかせる）: 暗い人物写真に悩みを3つチェックリストで並べ、紺の地で結論を出す
4. 成分の解説（成分の役割とバランスを教える）: 縦線付きの小見出しと本文の後、白帯の見出しと「＞」でつないだ正円2つを置く
5. 必要量の図解（食事だけでは摂りにくいと示す）: グラデ数値帯の後、食材写真に個数バッジを重ね、最後に下三角で次へ導く
6. 品質の宣言（商品の強みをまとめる）: 商品写真と、金帯見出しカードを2×2で並べる
7. 特長（含有量）（摂取量の目安を示す）: POINTラベルと紺ピル帯の下に、粒の図と紺の下部が付いた2枚の枠カードを置く
8. 特長（成分・制度）（配合成分の種類を見せる）: パール調の正円を5つ並べ、縦線付きの用語解説を添える
9. 特長（配合）（相性の良い成分を見せる）: グラデ正円2つを「＋」でつなぎ、成分一覧はカッコで囲む
10. 特長（安全性）（製造品質への信頼を作る）: 工場写真に白い説明ボックスを重ねる
11. 競合比較（他社との差を見せる）: 金の吹き出しの後、自社列が金枠で上に飛び出した比較表を置く

Imagery

• 商品パッケージは白×金の光沢パウチを正面から撮る
• 人物は肌のアップで、柔らかい自然光の明るいトーンにする
• 悩みの部分は暗めでコントラストの低い人物写真を使う
• 食材は鮮やかな接写で、画面いっぱいに写す
• 背景に分子の玉やボケ・光沢を薄く入れ、科学的な印象を出す
• 工場は青く寒色に補正した写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅の縦長デザインで、PCでも中央の1カラムで表示する
• PCでは幅480〜750pxの中央カラムにし、左右は淡いグレーで埋める
• SPのカード2列と正円3列はそのまま使う
• 比較表は4列のまま、文字を小さくして横スクロールさせない

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