DESIGN.md — 黄金色×白の高吸収サプリ LP（Vivid Citrus Yellow Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、情報量多め・訴求型、ポップ・元気、上品・高級
• キーワード: 黄金色の雫・レモンイエロー・赤ピンクの数値・ポイント番号・比較グラフ・六角形の白背景
• 地の質感: 艶のある液体やカプセルの光沢写真と、白い六角形パターンの3D背景。黄色の面には三角形モザイクを敷く
• 形: 円形バッジ、ピル型ラベル、角丸カード、雫形のビジュアル
• 温度感: 暖色寄りで明るい。グレーの悩みパートだけ寒色に落とす

Colors

• 地は白とライトグレーを交互に使う。ポイント2だけ黄色の三角形モザイク地にする
• 数値・成分名・大見出しの強調は赤ピンク一色にし、下線を添える
• 黄色はポイント番号のピル型ラベル、マーカー、円形バッジに使う
• 悩みパートは青灰色の地とダークグレーの吹き出しで、画面全体のトーンを一段落とす
• ビタミンDのように別成分を扱うときはライムグリーンで色分けする
• 価格のお得額は赤の面に白文字で入れる

Typography

• 大見出しは明朝、説明と数値はゴシックと欧文太字で分ける
• 数値は前後の文字の 2〜3 倍の大きさにし、赤ピンクで入れる
• 強調する語には赤ピンクの細い下線を引く
• 見出しの上に、斜線で挟んだ小さな前置きを置く
• 本文は中央揃えにし、行間は広めの 2.0 にする
• 字間は 0.05〜0.1em と広めにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、中央揃え
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの順は、ポイント番号ラベル→赤い見出し語→黒い成分名→ビジュアル→説明文で統一する
• グラフは横幅いっぱいに置き、吹き出しラベルを重ねる
• 円形バッジは 2〜3 列のグリッドに並べる
• 悩みの吹き出しは左右交互に並べ、人物写真の丸窓と組み合わせる
• 価格比較は表組みにし、お得額を赤い面で下に置く

Elevation & Depth

• カードには影の薄い白い面を使い、角丸で浮かせる
• 雫・カプセル写真の光沢と反射で立体感を出す
• 円形バッジには黄色のグラデーションと内側の光沢を入れる
• フラットな面とリアルな写真を組み合わせ、強いドロップシャドウは使わない

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 人物は円形トリミングか角丸の大きなカード。成分写真は切り抜きで配置する
• セクション境界: 直線で背景色を切り替える。FV の下だけ下向きの三角ノッチを入れる
• ポイント番号は黄色のピル型、または白地に黒線の吹き出し型
• 成分の特長は黄色の円形バッジで示す
• 円グラフ風のリング図で成分同士の相互作用を示す

Components

• ポイント番号ラベル（point-label）: 黄色のピル型に「ポイントN」を黒字で入れ、下に小さな三角を付ける
• 赤い下線付き見出し語（headline-underline）: 明朝の赤ピンク大見出しの下に細い赤い線を引く
• 特長の円形バッジ（circle-badge）: 黄色グラデーションの円に、小さな前置き・成分名・種類を 3 段で入れる
• 悩み吹き出し（worry-bubble）: ダークグレーの角丸吹き出しに白文字を入れ、丸い人物写真と左右交互に並べる
• 比較グラフと吹き出し（graph-callout）: 折れ線グラフの線に、赤ピンクとグレーの四角い吹き出しラベルを付け、黄色の矢印で差を示す
• まとめ買い価格表（price-table）: 黒い見出し行の表に赤の割引率を入れ、下に赤い面でお得額を示す
• 黒帯タイトルのカード（info-card）: 黒い帯に白字のタイトルを置き、下の白い枠に注釈を入れる
• 赤いピル型ボタン（button-primary）: 赤ピンクのピル型ボタンに白文字を入れる。誘導や締めの CTA に使う

Do's and Don'ts

Do - ポイント単位で同じ見出し構成を繰り返す - 数値は大きな欧文太字に赤ピンクと黄色マーカーを添えて強調する - 光沢のある液体やカプセルのビジュアルを各ポイントに入れる - 白とグレーの地を交互に使い、黄色の面はアクセントとして使う - 成分ごとに色を分ける（C は黄、D はライム）

Don't - 赤ピンクを本文や広い面に使わない - 暗い背景を多用しない（受賞パートだけに限る） - 装飾の少ない、平坦な文字だけのセクションを続けない - 見出しを左揃えにしない - 黄色の上に白文字を置かない

Page Structure

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

1. ファーストビュー（商品カテゴリと共同開発の権威を示す）: 黄金色の光と液体の写真の上に、明朝の大見出しとパッケージを配置する。下に特長の円形バッジを 2 つ並べる
2. コンセプト帯（商品の価値を一言で伝える）: 黄金色のグラデーション帯に黒の太字 2 行を入れ、下に三角ノッチを付ける
3. 成分紹介ビジュアル（2 つの主成分を提示する）: 女性のポートレートに縦書きの明朝と、含有量入りの円形バッジを重ねる
4. 受賞実績（人気の証明）: 金色ボケの暗い背景に、白い明朝の感謝メッセージとランキングメダルを置く
5. まとめ買い価格（セット購入を促す）: パッケージ写真と割引バッジの下に価格表を置き、赤い面でお得額を示す
6. 悩みの提起（共感を得る）: 青灰色の地に、ダークグレーの吹き出しと丸い人物写真を左右交互に 4 つ並べる
7. 解決の提示（成分の組み合わせを示す）: 黄と緑の球体を＋でつなぎ、商品パッケージを大きく配置する。下にグラデーション帯で特長 3 つを並べる
8. ポイント1〜2（機能）（吸収性・持続性を根拠とともに示す）: ラベル→赤い見出し語→雫ビジュアル→説明→比較グラフ→大きな倍率数値の順に並べる。ポイント2は黄色のモザイク地にする
9. ポイント3（種類）（配合の幅広さを示す）: 円形バッジを 3×2 で並べる。レモンの写真と数値の見出しに、レモンのアイコンを並べた換算図を添える
10. ポイント4〜5（相乗効果）（副成分と処方の価値を示す）: 緑の雫、人物の角丸カード、食材写真を組み合わせたリング図で示す
11. 飲みやすさ（カプセルの小ささを比較する）: カプセルを実寸で並べて比較し、黄色とグレーのラベルを付ける。最後に赤いピル型ボタンを置く

Imagery

• 黄金色の液体の雫や飛沫を、光沢と反射を強調した 3D 風に描く
• レモン・ナッツ・ブロッコリーなどの食材を白背景の切り抜き写真で使う
• 明るい自然光の下、肌を触って微笑む女性のポートレートを使う
• 白い六角形を立体的に並べた背景で、清潔感と科学的な印象を出す
• 金色のボケ光で、祝祭感のある暗いパートを作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元 LP は 720px 幅の縦長画像を中央に置く構成。SP では横幅いっぱいに表示する
• PC では左右に余白を取り、コンテンツ幅を 720px 程度に固定する
• SP では円形バッジを 2 列に減らしてもよい
• グラフと価格表は SP でも横幅いっぱいを保ち、文字は 12px 以上にする
• 見出しの文字サイズは SP で約 0.8 倍に縮める

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