DESIGN.md — 深緑×金×レモン黄の高濃度美容液LP（Vitamin Green Gold Serum Sales LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 情報量多め・訴求型、上品・高級、清潔・爽やか、力強い・インパクト
• キーワード: ビタミン・透明感・金箔・明朝の大見出し・実績訴求・定期コース
• 地の質感: 水滴・しずく・波紋・レモンの断面・金の粒子を重ねた、光沢のある写真合成
• 形: 四角い帯見出しと角の小さいカード。丸く切り抜いた肌のアップ。斜めカットの境界
• 温度感: 明るい黄緑と白が基調で、悩みのパートだけ暗いグレーに沈む寒暖の切り替え

Colors

• 基本は明るいグレー白地。製品の効果パートは黄緑またはレモン黄のグラデーションにする
• 悩み・ダメージのパートだけ、暗いグレーや茶系の写真地に切り替えて緊張感を出す
• 金色は受賞バッジ・リボン見出し・実績の数字だけに使う
• 価格・クーポン・特典番号は赤で強調する
• 見出しの強調語は深緑か、コーラルオレンジで色分けする
• CTAは光沢のある緑グラデーションに黄色のタブを重ねる
• button-primary は文字 #FFFFFE × 背景 #3E9A2C のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#368626、4.57:1）を使う。
• badge-award は文字 #FFFFFE × 背景 #BE8C66 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9E6B43、4.53:1）を使う。
• heading-ribbon は文字 #FFFFFE × 背景 #BE8C66 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9E6B43、4.53:1）を使う。
• before-after は文字 #D67052 × 背景 #FEFEFE のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#C6512F、4.51:1）を使う。

Typography

• 大見出しは明朝で、1行の中でも文字サイズを大きく変えて強弱をつける
• 数字（順位・個数・%・価格）は他の文字の2〜3倍の大きさにし、金か赤で塗る
• 見出しの前には「＼ ／」で囲んだ短いリード文を置く
• 本文はゴシックで小さめにし、注釈は※付きで最小サイズにする
• 縦書きの明朝見出しを写真の横に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較カードや画像の並びは 2〜3 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは画像と文字を合成した、幅いっぱいのバナーとして作る
• カードは左右に約5%の余白を取り、中央に置く
• 肌の比較は丸い写真を3〜4個横に並べる
• CTAは価格カードの直下と、ページ中盤にくり返し置く
• 注釈はブロックの右下に小さく添える

Elevation & Depth

• 白カードには薄いドロップシャドウ（0 2px 8px rgba(0,0,0,.12)）をつける
• CTAには立体的なハイライトと下側の影をつける
• 製品の写真にはガラスの映り込みと接地影を入れる
• SNS投稿風のカードは少し傾けて重ね、影をつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 肌のアップは正円。人物は四角か切り抜き。製品は背景を消して合成する
• セクション境界: 斜めカットとグラデーションの溶け込みを併用し、暗いパートは破れ紙風の境界にする
• 帯見出しは角の小さい四角にする
• 特典番号は赤い丸か、ロゼット形にする
• 受賞バッジは月桂樹と金のリボンで作る
• CTAは角丸8px程度の横長ボタンにし、右端に丸い矢印をつける

Components

• クーポンCTA（button-primary）: 緑の光沢ボタン。左に製品の画像、上に黄色の小タブ、右に丸い矢印
• 受賞バッジ（badge-award）: 月桂樹と金のリボンに、赤い「第1位」を入れて3つ横に並べる
• 金のリボン見出し（heading-ribbon）: 金のグラデーション帯に白の明朝を載せる
• 価格カード（price-card）: 白カードに旧価格の打ち消し線と、赤の大きな価格。赤丸の割引率バッジとクーポンコードの帯
• 特典リスト（benefit-list）: 赤い番号のロゼットに、強調語を赤くした白い行を6段並べる
• 成分の泡（ingredient-bubble）: 金や水色の半透明の球の中に、成分名を明朝で入れる
• 年代別の悩みランキング（ranking-card）: グレー地のカードに番号の丸と悩みの語。1位だけ赤で大きくする
• ポイント番号（point-label）: 小さな英字ラベルと2桁の数字。下に色帯の見出しを置く
• 年齢比較カード（before-after）: 人物の写真に、見た目年齢の見出しと実年齢の数字タグを重ねる

Do's and Don'ts

Do - 緑・金・黄の3色で製品らしさを統一する - 数字の実績は大きく、金や赤で目立たせる - 悩みのパートは暗い地にし、解決のパートは明るい地にして対比をつける - 水滴・レモン・泡などの素材で透明感を出す - 注釈は必ず小さく添える

Don't - 黒地を全体に使わない（暗い地は悩みのパートだけ） - 丸ゴシックやポップな書体を見出しに使わない - 金色を本文に使わない - 余白を広く取りすぎて、情報の密度を下げない - CTAを1か所だけにしない

Page Structure

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

1. ファーストビュー（製品と処方の新しさを一目で伝える）: 特大の明朝見出しに製品を合成し、権威と実績のバッジを散らす。下に成分の泡を3つ
2. プレゼント告知（期間・数量限定の特典で興味を引く）: ベージュ地に赤い帯と、赤紫の明朝
3. 悩みの提起（年齢による肌の悩みに共感させる）: モノクロ写真に丸い肌アップを4つ並べる
4. 権威・専門家（クリニックの採用と医師のコメントで信頼を得る）: 施設の写真グリッドと、医師の切り抜き写真に青い肩書きカード
5. 成分・動画（ビタミンの力を見せる）: レモン黄の地に動画枠と比較の丸写真
6. 実績（ランキング・累計個数・CM・SNSで人気を示す）: 暗い地に金のバッジ。並べた製品、投稿カードのグリッド
7. 品薄告知（緊急性を出す）: 赤枠カードに、完売と即出荷の対比の帯
8. オファー（定期コースの価格とクーポンを提示する）: 金のリボン見出し、価格カード、緑のCTA
9. 特典一覧（申込の障壁を下げる）: 金の紙吹雪の地に、6段の番号リスト
10. お客様の声（若見えの実例を見せる）: 大きな1枚と、2×2の年齢比較カード
11. メディア掲載（雑誌の掲載で裏付ける）: 黄緑の地の白カードに、表紙を重ねて並べる
12. 原因の解説（悩みの原因とダメージを説明する）: 暗いグレーの地に、写真とスライダーの図解
13. 解決とポイント（成分の仕組みと試験結果、要点を示す）: 黄・緑・水色のグラデーション地に番号付きのポイントと、棒グラフ

Imagery

• 製品は緑から黄へのグラデーションのガラス瓶。金のキャップと、光る反射
• 水滴・しずく・波紋・金の泡を前景と背景に散らす
• レモンの断面を黄色の地に大きく配置する
• 女性モデルは白背景で目を閉じ、頬に手を当てる柔らかいポーズ
• 悩みのパートは肌の極端なアップを丸く切り抜き、写真をモノクロ寄りにする
• 図解は肌の断面の層を、パステル調のフラットなイラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅約750pxのカラムを置き、SPの画像をそのまま拡大して見せる
• 左右の余白は、セクションの地色かぼかし背景で埋める
• 画像グリッドはPCでも列数を変えない
• CTAはPCでも幅最大600px程度に収める

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