DESIGN.md — 紺×金×桜色の高級美容ドリンク LP（Navy Gold Premium Beauty Drink LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 紺と金・明朝の見出し・淡い桜色・光沢グラデーション・数値訴求・定期コースのオファー
• 地の質感: シルクのような光沢グラデーションと金のきらめき。白い地に柔らかなドロップシャドウのカードを重ねる
• 形: 角が小さいカード、円形の成分バッジ、金の円の数値バッジ、ピル型 CTA
• 温度感: 上品で温かみがある。紺の冷たさを桜色と金で和らげる

Colors

• 地は白、淡いグレー、桜色、生成りを交互に使い、セクションを分ける
• オファーは必ず紺の全幅帯にまとめ、白いパネルで価格を見せる
• 見出しの強調語はローズピンク、数値は金か赤で大きく出す
• CTA は緑のグラデーションのピル型だけにし、ほかの要素で緑を使わない
• 割引率は赤い面に白文字のバッジで目立たせる
• 特長の導入は黒地に金のきらめきを入れ、高級感を出す
• button-primary は文字 #FFFFFF × 背景 #1C944D のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1A8746、4.57:1）を使う。

Typography

• 見出しは明朝、本文と価格表はゴシックにする
• 見出しの中の 1〜2 語だけピンクにし、少し大きくする
• 数値はセリフ体で大きくし、単位は小さく添える
• 引用符を大きく付けて、キーワードを強調する
• 大見出しは 2〜3 行で中央揃えにする
• 注釈は小さいグレー文字で、ブロック下部にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央 600px 前後の固定幅に、背景を全幅で敷く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツは中央の細い固定幅にまとめ、背景だけを全幅にする
• 成分は円を 3 つ、三角形に配置して商品を中央に置く
• オファー帯はページ内で 3 回くり返す
• 特長は大きな 01〜03 の薄い番号と白カードで区切る
• 見出しの上に小さなリード文を置き、下に大見出しを置く
• 飲み方は点線のタイムラインで蛇行させる

Elevation & Depth

• 白カードには、ぼかし 20px 程度の薄いグレーの影を付ける
• CTA ボタンには、下方向に落ちる影と光沢を付ける
• 商品ボトルの写真には、接地する影と反射を付ける
• 金の円バッジは立体感が出るグラデーションにする

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物は四角い写真か背景に溶け込ませる。成分は円形に切り抜き、商品は切り抜きで置く
• セクション境界: 直線で区切り、背景色を切り替える。下向きの三角や縦線で次へつなぐ
• カードの角はほぼ直角
• 成分と数値は円形バッジにする
• CTA はピル型にし、左に白い円で割引率を入れる
• 見出しラベルは紺の長方形の帯にする
• 価格パネルは白い角張った箱にする

Components

• 定期コース CTA（button-primary）: 緑グラデーションのピル型。左端に白い円で割引率、右端に三角の矢印を入れる
• 割引バッジ（badge-discount）: 赤い面に白抜きで、初回限定と大きな割引率を載せる
• 価格パネル（price-panel）: 白い箱に、取り消し線の通常価格、矢印、赤い大きな価格を並べる。下に小さな特典ボックスを 3 つ置く
• 金の数値バッジ（badge-gold-circle）: 金の円の縁取りの中に、実感率などの % を入れる
• 紺の見出しラベル（label-navy）: 紺の長方形に白い明朝文字。小見出しやカードの上部に置く
• 成分の円カード（ingredient-circle）: 淡い色の円に、上の小ラベル、成分名、金の mg 数値を入れる
• 番号付き特長カード（feature-card）: 白いカードの背後に大きな薄い番号を置き、写真と本文を並べる
• CTA 上の吹き出し（pre-cta-ribbon）: 白い角丸の吹き出しに、合計金額のお得感を小さく書く

Do's and Don'ts

Do - 紺・金・ピンクの 3 色で高級感と女性らしさを保つ - 見出しは明朝体で中央に揃える - 数値（%・mg・価格）をセリフ体で大きく見せる - オファー帯を FV 直後、中盤、末尾の 3 回置く - 背景に光沢のあるシルク風グラデーションを使う - 注釈を各ブロックの下に小さく入れる

Don't - CTA 以外の要素に緑を使わない - 原色のビビッドな背景を広く敷かない - 見出しに丸ゴシックやポップな書体を使わない - 角の大きい丸カードを多用しない - 価格表示の取り消し線と税込表記を省かない - 写真を暗く粗い質感にしない

Page Structure

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

1. ファーストビュー（高級ラインであることと実感率を伝える）: 左は桜色の地に商品ボトルと金の数値バッジ。右は女性の写真に、縦書き明朝の大コピーと受賞バッジを重ねる
2. オファー（初回割引の定期コースへ誘導する）: 紺の全幅帯に、赤い割引バッジ、白い価格パネル、緑のピル型 CTA を置く
3. 受賞実績（第三者の評価で信頼を示す）: 白地に月桂樹の金の飾りと明朝の受賞文字。右に雑誌の表紙とボトルを並べる
4. 共感・ベネフィット（外側のケアとの違いを示す）: 生成りから白へのグラデーション。上を向く女性の写真と、うるおい感を表す半透明の球体を置く
5. 事実の提示（美容成分が年齢とともに減ることを説明する）: 紺の小ラベル、図解カード、ピンクのタグ、減少グラフを入れる
6. 悩みの提起（あきらめの気持ちに寄り添う）: グレー写真の上に、半透明の黒い箱でチェックリストを 4 つ並べる
7. 解決策（独自の乳酸菌を答えとして示す）: 金の光沢背景に、大きな引用符付きの見出しと紺の帯の素材名、顕微鏡写真を置く
8. 成分配合（配合量を数値で見せる）: 円形の成分バッジに mg を表示し、× 記号で組み合わせを示す。3 円の三角配置にする
9. 3つの特長（特長を整理して伝える）: 黒と金の導入帯のあと、金の背景に 01〜03 の白カードを並べる
10. 飲み方提案（続け方のアレンジを見せる）: 水面の淡い青い背景に、蛇行する点線のタイムラインとボトルのアイコンを置く
11. まとめ（実感と贅沢感を再確認する）: 桜色の地に明朝の大見出し、女性の写真、紺の帯のコピーを置く
12. 最終オファー（申込を締めくくる）: 紺の帯に、ドリンクとタブレットの 2 つの価格枠と CTA、注釈、フッターのリンクを置く

Imagery

• 30〜40代の女性を白い服で撮る。明るいハイキーで、柔らかな自然光にする
• 紺のボトルに金の放射状の柄。白背景で切り抜き、反射を付ける
• 背景にシルクの布のような光沢の曲線グラデーション（白・金・桜色）を敷く
• うるおいを表す半透明の泡の球体や水面を置く
• 金のきらめきや月桂樹など、高級感のある装飾を添える
• 成分は顕微鏡写真や断面の図解で、科学的な印象を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 600px 前後の固定幅で、背景だけを全幅に広げる
• SP は同じ構成を縦に積み、FV の写真を上、商品とバッジを下に置く
• SP の価格パネルは割引バッジの下で全幅にする
• SP の成分 3 円は 1 個と 2 個の三角配置を保ち、円の直径は 100px 前後にする
• SP の CTA は幅 90%、高さ 60px にする
• 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 行書くと起動時に読み込まれる。