--- version: alpha name: Vitamin Green Gold Serum Sales LP description: 深い緑と金の高級感に、レモン黄の明るいビタミン感を合わせた通販型スキンケアLP。明朝の大見出しと写真の合成で訴求を重ねる、情報量の多い縦長の構成。 colors: primary: '#1F5E3F' dark-section: '#1A3C3D' secondary: '#BE8C66' accent-1: '#FBD334' cta: '#3E9A2C' on-cta: '#FFFFFE' accent-2: '#D0202E' accent-3: '#D67052' background: '#EDF0F0' surface: '#FEFEFE' background-alt: '#FEFEF3' text: '#202826' tint-1: '#2F7FA8' on-dark: '#FFFFFE' cta-accessible: '#368626' secondary-accessible: '#9E6B43' accent-3-accessible: '#C6512F' typography: display: fontFamily: Shippori Mincho fontSize: 64px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 34px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Klee One fontSize: 22px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.2 rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 64px badge-award: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 90px heading-ribbon: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 56px price-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.display}' rounded: '{rounded.sm}' height: 420px benefit-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px ingredient-bubble: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 100px ranking-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 130px point-label: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 50px before-after: backgroundColor: '{colors.surface}' textColor: '{colors.accent-3}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 130px --- # DESIGN.md — 深緑×金×レモン黄の高濃度美容液LP（Vitamin Green Gold Serum Sales LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 情報量多め・訴求型、上品・高級、清潔・爽やか、力強い・インパクト - **キーワード**: ビタミン・透明感・金箔・明朝の大見出し・実績訴求・定期コース - **地の質感**: 水滴・しずく・波紋・レモンの断面・金の粒子を重ねた、光沢のある写真合成 - **形**: 四角い帯見出しと角の小さいカード。丸く切り抜いた肌のアップ。斜めカットの境界 - **温度感**: 明るい黄緑と白が基調で、悩みのパートだけ暗いグレーに沈む寒暖の切り替え ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1F5E3F` | ブランドの深緑（見出し文字・帯） | 6% | 推定 | | `dark-section` | `#1A3C3D` | 最上部と区切り帯の濃い緑黒 | 6% | 画素の実測 | | `secondary` | `#BE8C66` | 金のバッジ・リボン | 8% | 画素の主要色に補正 | | `accent-1` | `#FBD334` | ビタミンを表すレモン黄 | 7% | 画素の実測 | | `cta` | `#3E9A2C` | CTAボタンの緑グラデ | 2% | 推定 | | `on-cta` | `#FFFFFE` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#D0202E` | 価格・強調の赤 | 2% | 推定 | | `accent-3` | `#D67052` | 強調語のコーラルオレンジ | 1% | 画素の実測 | | `background` | `#EDF0F0` | 基本の明るいグレー白地 | 30% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | カードの白地 | 11% | 画素の実測 | | `background-alt` | `#FEFEF3` | 薄い黄緑のグラデ地 | 9% | 画素の実測 | | `text` | `#202826` | 本文の濃い墨色 | 4% | 画素の主要色に補正 | | `tint-1` | `#2F7FA8` | 誘導体説明の青緑帯 | 2% | 推定 | | `on-dark` | `#FFFFFE` | 暗い地の上の白文字 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#368626` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#9E6B43` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#C6512F` | AA を満たす補正値（計算） | | 計算 | - 基本は明るいグレー白地。製品の効果パートは黄緑またはレモン黄のグラデーションにする - 悩み・ダメージのパートだけ、暗いグレーや茶系の写真地に切り替えて緊張感を出す - 金色は受賞バッジ・リボン見出し・実績の数字だけに使う - 価格・クーポン・特典番号は赤で強調する - 見出しの強調語は深緑か、コーラルオレンジで色分けする - 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVや章の特大見出し | 明朝 | Shippori Mincho | 700 | 64px | 1.15 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 600 | 34px | 1.3 | 0.03em | | `headline-md` | 帯見出し・サブ見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.03em | | `headline-sm` | カード見出し・ラベル | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 手書きの添え文字・欧文のロゴ風文字 | 手書き・筆 | Klee One | 600 | 22px | 1.3 | 0.05em | | `label-button` | CTAの文言 | ゴシック | Noto Sans JP | 900 | 20px | 1.2 | 0.0em | - 大見出しは明朝で、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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-f63e5bfd`（元 LP の URL から採番） - **元 LP**: https://vioteras.jp/smp/shopping/lp.php?p=vccs1_cpfnd_g2 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（5/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。