--- version: alpha name: Golden Serum Luxury Beauty LP description: 金色の液体・しずくの写真と明朝体の大きな見出しで高級感を出し、ボルドー地のオファー枠と緑のピル型CTAで購入へ導く、情報量の多い単品通販型の美容液LP。 colors: primary: '#9D6D4F' background: '#F6F4F2' surface: '#FEFEFE' dark-section: '#490003' cta: '#2CC24D' on-cta: '#FFFFFF' accent-1: '#C01B21' marker: '#F5E33A' accent-2: '#E0A270' accent-3: '#8B4FC8' secondary: '#45465E' text: '#3E2925' background-alt: '#4E473D' tint-1: '#FEF6DE' line: '#C9A86A' cta-accessible: '#1F8836' typography: display: fontFamily: Shippori Mincho fontSize: 64px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 34px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.4 accent: fontFamily: Cormorant Garamond fontSize: 40px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.2em label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 10px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 0px 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.full}' height: 56px offer-box: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 520px benefit-list: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 900px ingredient-badge: textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 76px band-label: backgroundColor: '{colors.surface}' textColor: '{colors.accent-3}' typography: '{typography.headline-sm}' height: 32px worry-bubble: backgroundColor: '{colors.secondary}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 70px check-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 160px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 160px sns-review: backgroundColor: '{colors.surface}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' height: 200px --- # DESIGN.md — 金×ボルドーの高濃度美容液LP（Golden Serum Luxury Beauty LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、情報量多め・訴求型、力強い・インパクト - **キーワード**: 金色のしずく・明朝の大見出し・ボルドーのオファー枠・成分の球体ビジュアル・注釈多め - **地の質感**: 艶のある液体・泡・光沢のCG質感に、グレーの石目や白タイルの背景を組み合わせる - **形**: 円形の成分バッジ、角丸の白カード、直角の帯ラベル、ピル型CTA - **温度感**: 金とオレンジ中心の暖色。悩みパートだけ灰色と濃紺で冷たくする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#9D6D4F` | ブランドの金茶色。見出しやバッジに使う | 5% | 画素の主要色に補正 | | `background` | `#F6F4F2` | 基本の明るいグレー地 | 13% | 画素の実測 | | `surface` | `#FEFEFE` | カードやオファー枠の白 | 12% | 画素の実測 | | `dark-section` | `#490003` | オファー全体を囲むボルドー地 | 9% | 画素の実測 | | `cta` | `#2CC24D` | 申込ボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#C01B21` | 価格・割引の赤 | 1% | 画素の実測 | | `marker` | `#F5E33A` | CTA上の黄色い小ラベル | 0% | 推定 | | `accent-2` | `#E0A270` | 成分を表すオレンジ金 | 6% | 画素の主要色に補正 | | `accent-3` | `#8B4FC8` | 第二成分を表す紫 | 2% | 推定 | | `secondary` | `#45465E` | 悩みパートの濃紺グレー帯 | 4% | 推定 | | `text` | `#3E2925` | 見出し・本文の濃茶黒 | 3% | 画素の主要色に補正 | | `background-alt` | `#4E473D` | Q&Aの濃茶グレー地 | 4% | 画素の実測 | | `tint-1` | `#FEF6DE` | 使い方の円形イラスト背景の淡クリーム | 2% | 画素の実測 | | `line` | `#C9A86A` | 特典枠の金色の罫線 | 0% | 推定 | | `cta-accessible` | `#1F8836` | AA を満たす補正値（計算） | | 計算 | - 地はグレー・白・写真背景で回し、オファーだけボルドーの濃い地で囲む - 価格と割引率は赤だけで強く見せる - 主CTAは緑1色に固定し、上に黄色の小ラベルを重ねる - 成分は金オレンジと紫の2色で色分けし、全編で同じ色を使う - 悩みパートだけ灰色と濃紺に落とし、解決パートとの明暗差をつける - 見出しの一部に金のグラデーションや虹色の文字を使う - `button-primary` は文字 `#FFFFFF` × 背景 `#2CC24D` のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1F8836`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVや各章の巨大なキャッチ。縦書きもある | 明朝 | Shippori Mincho | 800 | 64px | 1.1 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 600 | 34px | 1.3 | 0.04em | | `headline-md` | サブ見出し・特典名 | 明朝 | Noto Serif JP | 600 | 22px | 1.4 | 0.03em | | `headline-sm` | 帯ラベル・吹き出し内の短文 | ゴシック | Noto Sans JP | 500 | 15px | 1.5 | 0.02em | | `body-md` | 本文・Q&A回答 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.02em | | `note` | 成分や価格の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.4 | 0.0em | | `accent` | 背景の英字透かし・手書き風のStep表記 | 欧文セリフ | Cormorant Garamond | 400 | 40px | 1.0 | 0.2em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 20px | 1.2 | 0.02em | - 見出しは明朝を基本にして、本文はゴシックにする - キーワードだけ文字を大きくし、助詞は小さくする - 縦書きの明朝見出しを写真の余白に置く - ※の注釈番号は見出しの右上に小さく付ける - 価格の数字は明朝の赤で特大にする - 背景には薄い英字の透かしを大きく敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。円形バッジは 3 列で並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 0px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは隙間を空けずに写真の背景どうしを直接つなぐ - カードは左右に約5%の余白を取って中央に置く - オファーブロックは同じものを2〜3回くり返す - 特典は番号ラベル＋テキストの横並びを罫線で区切る - 注釈は各ブロックの末尾にまとめる ## Elevation & Depth - 白カードには淡いドロップシャドウを付ける - SNS風の口コミカードは白枠で、少し影を付ける - 成分の球体は光沢と反射を入れて立体的に見せる - CTAボタンは下側に薄い影を付ける ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 人物と商品は角版で切り抜いて合成する。使い方は円形トリミング - **セクション境界**: 直線で切り替える。一部は下向きの三角や斜めの境界 - 成分の効果は細線の円形バッジで示す - 帯ラベルは角丸にせず直角にする - 成分の紹介は大きな角丸の縦長パネルに収める - 吹き出しは角丸の四角に小さな丸を付けた思考型にする ## Components - **緑の申込ボタン**（`button-primary`）: ピル型の緑ボタン。右端に再生アイコンを置き、左上に黄色の小ラベルを重ねる - **価格オファー枠**（`offer-box`）: ボルドー地の上に白カードを置き、商品写真、取り消し線の通常価格、赤丸の割引率、特大の赤い価格を並べる - **特典リスト**（`benefit-list`）: 金罫線で囲んだクリーム地の枠に、ボルドーの番号ラベルと赤い特典名を縦に並べる - **円形の効果バッジ**（`ingredient-badge`）: 細い金茶の線の円に、効果を2行の短い言葉で入れる - **成分の帯ラベル**（`band-label`）: 白地に色文字、またはオレンジ地に白文字の直角の帯で成分名を示す - **悩みの吹き出し**（`worry-bubble`）: 濃紺グレーの角丸吹き出しに白文字の独白を入れ、肌のアップ写真の上に置く - **チェックリストカード**（`check-card`）: 白カードにオレンジのチェック付きで悩みや利点を4行並べる - **Q&Aカード**（`faq-item`）: 濃茶の地の上の白カード。金色のQと黒のAを罫線で区切る - **SNS風口コミ**（`sns-review`）: 白枠の写真にハートと吹き出しのアイコンを付け、上にグラデーションの帯で感想を置く ## Do's and Don'ts **Do** - 金の液体・しずく・泡のビジュアルをどの章にも入れる - 見出しは明朝体で大きく、キーワードを強調する - オファー枠は同じデザインのままページ内で複数回出す - 成分ごとの色（金オレンジと紫）を最後まで統一する - 悩み→原因→解決の順に、背景の明暗を変えて流れを作る **Don't** - CTAを緑以外の色にしない - 価格の赤を装飾に流用しない - フラットな単色イラストだけで構成しない - 見出しを細いゴシックだけにしない - オファー枠の濃い地を他のセクションで使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（権威付けと主成分を一目で伝える）: 上部に監修者の帯、主成分の帯ラベル2つ、縦書きの巨大明朝コピー、女性モデル、商品、成分のピラミッドを重ねる 2. **監修者紹介**（信頼性を高める）: 白衣の人物写真、ロゴ、金茶の肩書き帯、白カードの紹介文、動画のサムネイル 3. **オファー・CTA**（早い段階で購入へ誘導する）: ボルドー地の白カードに価格と割引、緑のピルボタン、注釈 4. **独自技術**（製法の優位性を示す）: 金色の液体背景に白い明朝の大見出し、縦書きの濃紺ラベル、商品のアップ 5. **お客様の声**（実感を伝える）: 濃茶の地にSNS風の写真カードを2列と1列で並べる 6. **悩みの提起**（共感を得る）: グレー地に悩みワードの円を浮かべ、チェックリストカード、濃紺の見出し帯を置く 7. **悩みのストーリー**（危機感を高める）: 肌のアップ写真の上に吹き出しを並べ、縦書きの独白を入れる 8. **解決・独自製法**（商品を解決策として示す）: 白地に英字の透かしと黒い明朝の大見出し、金の液体と商品写真 9. **成分の詳細**（成分ごとの効果を説明する）: 大きな角丸パネルに番号の透かし、成分の写真、円形の効果バッジを置く 10. **安心・処方**（安全性と使い心地を示す）: フリー表記の円バッジ、ポイントのチェックカード、香りの写真 11. **使い方**（使用手順を示す）: 白タイルの背景に円形の線画イラストと手書き風のStep番号を千鳥配置する 12. **よくある質問**（不安を解消する）: 濃茶の地に白いQ&Aカードを縦に積む 13. **定期の流れ・特典**（購入条件を明確にする）: 回数ごとのカードとトラックのアイコン、ボルドー地の特典リスト 14. **最終CTA**（申込を締めくくる）: 上部と同じオファー枠と緑ボタンを置く ## Imagery - 金色の美容液のしずく・泡・液体のうねりを強い光沢で写す - 成分は光る球体（金オレンジと紫）のCGで表す - モデルは素肌感のある女性の横顔やバストアップで、背景をぼかす - 悩みパートは毛穴やくすみの肌アップと生活シーンを、彩度を落として見せる - 使い方は細い線画の女性イラストを淡クリームの円に入れる - 香りは柑橘とバラの実写で爽やかに見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP の縦長デザインを中央の幅450〜750px程度に収め、左右は背景色で埋める - セクションごとの全幅背景はPCでも画面端まで伸ばす - 円形バッジはPCで4〜5列に広げてもよい - 見出しの文字サイズはSPの約1.3倍を上限にする ## 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-a332029c`（元 LP の URL から採番） - **元 LP**: https://www.kameyamado.com/campaign/truem/adr1/?utm_source=ig&utm_medium=cpm&utm_campaign=%E3%80%90%E6%96%B0%E8%A6%8F%E3%80%91TRUEM_%E8%B3%BC%E5%85%A5%E4%BF%83%E9%80%B2%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%9A%E3%83%BC%E3%83%B3&utm_id=120243605362300371&utm_con - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（7/15 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。