--- version: alpha name: Champagne Gold Luxury Serum LP description: 白〜淡いグレーの地にシャンパンゴールドのグラデーションと黒帯を重ね、明朝体と欧文セリフ、筆記体の英字透かしで高級感を出した美容液の単品通販 LP。受賞メダル、定期購入特典の白カード、緑のピル型 CTA で購入へ導く。 colors: primary: '#BDA07F' background: '#FFFFFF' background-alt: '#E4E4E9' tint-1: '#F0EBE2' dark-section: '#000000' secondary: '#252524' text: '#171C18' text-body: '#4A4A4A' text-muted: '#8A8A8A' line: '#C8CAC7' cta: '#01820C' on-cta: '#FFFFFF' accent-1: '#D8262E' marker: '#F3E35A' accent-2: '#1D89E4' typography: display: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.06em headline-sm: fontFamily: Cormorant Garamond fontSize: 22px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.04em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 300 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Pinyon Script fontSize: 48px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 52px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px ribbon-heading: backgroundColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 48px offer-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 900px circle-badge: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 100px award-medal: textColor: '{colors.primary}' typography: '{typography.display}' height: 170px check-list-card: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 260px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 150px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 230px contact-form: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 850px --- # DESIGN.md — シャンパンゴールド×明朝の高級美容液 LP（Champagne Gold Luxury Serum LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型 - **キーワード**: シャンパンゴールド・明朝体・筆記体の英字透かし・受賞メダル・白カード・サロン品質 - **地の質感**: 光沢のあるゴールドのグラデーションとぼかし写真の地に、白い紙のようなカードを重ねる - **形**: 細い線の正円バッジ、角を切った額縁カード、ピル型ボタン、円形に切り抜いた写真 - **温度感**: やや暖かい。ベージュ〜金に、グレーと黒の帯で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BDA07F` | シャンパンゴールド（メダル・額縁線・ブランド色） | 9% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地・カード面 | 32% | 画素の実測 | | `background-alt` | `#E4E4E9` | ファーストビューや成分欄の淡いグレー地 | 8% | 画素の実測 | | `tint-1` | `#F0EBE2` | ベージュ系の暖色グラデーション地 | 6% | 画素の主要色に補正 | | `dark-section` | `#000000` | 商品まとめの黒帯セクション | 5% | 画素の実測 | | `secondary` | `#252524` | 見出し帯（黒いリボン）・サブ見出し帯 | 2% | 画素の実測 | | `text` | `#171C18` | 見出し文字 | 3% | 画素の主要色に補正 | | `text-body` | `#4A4A4A` | 本文 | 4% | 推定 | | `text-muted` | `#8A8A8A` | 注釈・調査元 | 1% | 推定 | | `line` | `#C8CAC7` | 区切り線・カード枠 | 1% | 画素の主要色に補正 | | `cta` | `#01820C` | 主 CTA ボタン（購入） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#D8262E` | 割引価格の赤文字 | 0% | 推定 | | `marker` | `#F3E35A` | 価格下の黄色マーカー・見出し強調文字 | 0% | 推定 | | `accent-2` | `#1D89E4` | フォーム送信ボタン | 0% | 画素の実測 | - 地は白と淡いグレーを基本にし、特長や特典の背景にはベージュ〜ゴールドのグラデーションを敷く - 導入店舗とまとめのセクションだけ黒〜深いグレーの帯にして緩急をつける - ゴールドはメダル、額縁線、欧文ロゴなどの装飾に限って使い、本文には使わない - 購入ボタンは緑一色にし、金系の画面の中で一番目立つ色にする - 価格は赤文字に黄色マーカーで強調し、元値は灰色の取り消し線にする - 見出し帯の中の強調語は黄色の文字にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー | 明朝 | Shippori Mincho | 600 | 32px | 1.4 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 500 | 22px | 1.5 | 0.08em | | `headline-md` | ポイント・特長の小見出し | 明朝 | Noto Serif JP | 500 | 17px | 1.6 | 0.06em | | `headline-sm` | 欧文の商品ロゴ風見出し（スモールキャップス） | 欧文セリフ | Cormorant Garamond | 500 | 22px | 1.1 | 0.04em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 400 | 13px | 1.8 | 0.05em | | `note` | 注釈・調査元 | ゴシック | Noto Sans JP | 300 | 11px | 1.6 | 0.02em | | `accent` | セクション背後の英字透かし・Point 番号 | 欧文スクリプト | Pinyon Script | 400 | 48px | 1.0 | 0.0em | | `label-button` | CTA ボタン | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.02em | - 見出しは明朝で、強調語だけを大きく太くして文字サイズに強弱をつける - セクション見出しの背後には、薄いグレーまたはベージュの筆記体英字を重ねる - 割引率などの大きな数字は欧文セリフのイタリックにし、% と OFF は小さく添える - 本文は細めのゴシックで、行間 1.8 前後とゆったり取る - FV の脇のコピーは縦書きの明朝にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。使用方法だけ 2×2 のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右に約 6% の余白を残して置き、背景のグラデーションを見せる - ポイント紹介は「写真が全幅 → 小見出し → 本文 → 区切り線」の順に縦に並べる - 特長 01・02 は円形写真と本文を左右に互い違いに置く - 購入特典カードの直後に必ず CTA を置く - お客様の声は横にスクロールするカード列にする ## Elevation & Depth - 白カードには大きく淡い影（0 4px 20px rgba(0,0,0,.08)）をつける - CTA ボタンには下方向の影と白い縁取りをつけて立体的にする - 店舗写真のキャプションは白い札に細い影をつけ、写真に重ねる - 写真は基本的に影なしで平面に置く ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 製品は切り抜きで影つき、特長写真は正円、ポイント写真は角丸なしの全幅長方形にする - **セクション境界**: 直線で切り替える。背景のグラデーションや色帯の変化で区切る - 悩みや特長の短い言葉は、細い線の正円バッジに入れる - 特典カードと FAQ カードは四隅を内側に丸くえぐった額縁形にする - 見出しのリボン帯は黒地で、両端を斜めに切る - 効果の言葉は白地に黒枠のピル型タグにし、「＋」でつなぐ ## Components - **緑の購入 CTA**（`button-primary`）: 緑のピル型ボタン。白い縁取りと影をつけ、右端に白丸の矢印アイコンを置く。割引率を太字で先頭に入れる - **枠線のサブボタン**（`button-secondary`）: 白地に細い黒枠の角型ボタン。文字は明朝で、右に「>」を置く - **黒リボン見出し**（`ribbon-heading`）: 特典カードの上辺にかかる黒い帯。白文字の中で強調語だけを黄色にする - **定期購入特典カード**（`offer-card`）: 白い額縁カードに、黒枠の回数ラベル、大きなイタリックの割引率、取り消し線の元値、赤い割引価格を並べる - **正円の特長バッジ**（`circle-badge`）: 細いグレーの線で描いた正円。中に縦書きの明朝で短い特長を入れ、3〜4 個を横に並べる - **受賞メダル**（`award-medal`）: 金の月桂冠と王冠、No.1 の文字、年号のリボンを組み合わせる。注釈番号を添える - **悩みチェックリスト**（`check-list-card`）: 半透明の白いカードに、チェックボックスと下線つきの悩みの文を 3 つ並べる - **FAQ 項目**（`faq-item`）: 灰色の Q 番号と明朝の質問、字下げした回答を並べ、項目の間は細い線で区切る - **使用手順カード**（`step-card`）: 細い枠の白カードに、イタリックの番号、明朝の見出し、線画のイラスト、説明文を入れる - **問い合わせフォーム**（`contact-form`）: 角丸の入力欄に、赤い必須バッジと灰色の任意バッジをつける。選択肢はチェックボックス、送信は青い全幅ボタン ## Do's and Don'ts **Do** - 見出しは明朝、欧文ロゴはセリフ体のスモールキャップスにする - セクションごとに筆記体の英字透かしを薄く重ねる - 金のグラデーションの上には白カードを浮かせて情報を載せる - 数字の実績には必ず注釈番号と調査元の小さい文字を添える - 購入特典の後には必ず緑の CTA を置く **Don't** - ポップな丸ゴシックや原色を多く使わない - ゴールドを本文の文字色にしない - 角丸の大きいカードを多用しない（額縁形や角型を基本にする） - CTA を緑以外の色にしない - 写真に強い彩度の加工をしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（高級感と商品の印象を一目で伝える）: 淡いグレーの地に製品の切り抜き写真、明朝の大きなコピー、縦書きのサブコピーを置き、下に正円の特長バッジを 3 つ並べる 2. **受賞実績**（第三者の評価で信頼を得る）: 金色の大きな冠タイトルと No.1 メダルを 3 つ置き、下に調査元の注釈を入れる 3. **悩みの提起**（読み手の悩みに共感する）: モノトーンの人物写真の上に、悩みの短い言葉を正円で 4 つ並べ、半透明カードのチェックリストを重ねる 4. **商品紹介**（解決策として商品を示す）: ベージュ〜金のグラデーション地に、欧文ロゴ、明朝コピー、効果のピル型タグ、斜めに置いた製品写真を配置する 5. **特長 01・02**（商品の差別化ポイントを伝える）: 円形写真とイタリックの大きな番号を左右に互い違いに置く 6. **定期購入特典と CTA**（購入を後押しする）: 金〜黒のグラデーション地に白い額縁カードを置き、割引の段階、継続特典、緑の CTA を並べる 7. **こだわりポイント**（原料や製法の詳しい説明）: Point 番号の筆記体、全幅写真、明朝の小見出し、本文を、区切り線を挟んで 3 回繰り返す 8. **全成分・保管の注意**（安心感を与える）: 枠線の白カードに全成分を載せ、黒帯の小見出しの下に円形写真と成分の説明を並べる。下に保管の注意カードを置く 9. **導入店舗**（実際に使われている実績を示す）: 暗いグレーのグラデーション地に店舗写真を左右に互い違いに配置し、白い札のキャプションを添える 10. **選ばれている実績・メディア・SNS 掲載**（社会的な証明を積み重ねる）: 金の額縁の中に人物の円形写真とメダルを置く。続けて雑誌の切り抜きと SNS 投稿を重ねてコラージュにする 11. **お客様の声**（利用者の実感を伝える）: グレーのグラデーション地に、アバターと年代・属性を載せた白カードを横スクロールで並べる 12. **使用方法**（使い方を簡単に示す）: 2×2 の手順カードに線画のイラストを入れ、下にグレーの Point 注記を置く 13. **商品まとめ・ラインナップ**（最後のひと押しと関連商品の紹介）: 黒帯に製品写真、縦書きのコピー、価格枠を置き、CTA を挟んで白グレー地で関連商品を紹介する 14. **よくある質問・フォーム**（疑問を解消し、問い合わせを受ける）: 金の液体写真の地に額縁形の白い FAQ カードを置く。下に灰色地のフォームを置く ## Imagery - 製品は白〜淡いグレーの背景で切り抜き、床への映り込みと柔らかい影をつける - 人物写真は彩度を落としたモノトーン寄りにし、横顔や伏し目のカットにする - 金色の液体の波紋、しずく、泡などのマクロ写真を背景や区切りに使う - 金の月桂冠、王冠、きらめき（四芒星）の装飾を添える - 使用手順はグレーの細い線画で、シンプルな人物を描く - 店舗写真は明るい高級感のある内装を、横長に切り抜いて使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 900px のコンテナを置き、背景のグラデーションは全幅に敷く - PC の FV は、左に受賞メダル、中央に製品、右にコピーとバッジを置く 3 列構成 - ポイント紹介は、写真と文章を左右交互の 2 カラムにする - 受賞メダルと使用手順は横一列（3 列・4 列）に並べる - お客様の声は 4 枚以上を横に並べ、画面の端で見切れさせる - フォームの選択肢は PC では 2 列にする ## 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-3360d404`（元 LP の URL から採番） - **元 LP**: https://wmt.co.jp/lp-placenta/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（6/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。