--- version: alpha name: Champagne Gold Mature Skincare LP description: 淡いグレーと生成りベージュを地に、シャンパンゴールドを主役にした40代向けスキンケアLP。大きな明朝体の見出しと細線の円バッジで上品さを出し、トライアルセットの購入ブロックだけ朱赤の価格と赤いピル型CTAで目立たせる。 colors: primary: '#BCAA90' secondary: '#C3B58C' background: '#E8E7E5' background-alt: '#F1E4DC' surface: '#FEFEFE' tint-1: '#DFD6AF' text: '#100D09' accent-1: '#7AB3B4' tint-2: '#E9EFF0' accent-2: '#EBB2AB' cta: '#B4241B' on-cta: '#FFFFFF' marker: '#F3EBB5' dark-section: '#524E43' accent-3: '#C8402A' primary-accessible: '#877252' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.06em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Cormorant Garamond fontSize: 13px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 2px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px 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.text}' typography: '{typography.headline-lg}' height: 640px badge-circle: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 120px label-band: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 32px ingredient-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 72px safety-box: backgroundColor: '{colors.accent-2}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 90px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 190px reason-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 520px free-from-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 60px --- # DESIGN.md — シャンパンゴールド×明朝の年齢肌スキンケアLP（Champagne Gold Mature Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、ナチュラル、情報量多め・訴求型 - **キーワード**: シャンパンゴールド・明朝の大見出し・細線の円バッジ・逆光のポートレート・大理石・ラボの質感・成分訴求 - **地の質感**: 大理石・白タイル・ガラス器具のような、しっとりしたマットな質感。グラデーションと柔らかい光を重ねる - **形**: 細線の正円バッジ、角丸ほぼなしの四角い帯、V字の下向き区切り、ピル型CTA - **温度感**: やや暖かいニュートラル（グレー×ベージュ×ゴールド） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BCAA90` | ブランドのゴールド（見出しの一部・ラベル帯・円バッジ） | 6% | 画素の主要色に補正 | | `secondary` | `#C3B58C` | 成分ラベルのセクション帯（くすんだ金） | 3% | 画素の実測 | | `background` | `#E8E7E5` | ページの基本の地（淡いグレー） | 30% | 画素の実測 | | `background-alt` | `#F1E4DC` | お客様の声・メッセージの生成りベージュ地 | 12% | 画素の実測 | | `surface` | `#FEFEFE` | カード・購入ブロックの白 | 19% | 画素の実測 | | `tint-1` | `#DFD6AF` | 理由セクションのカーキベージュ地 | 10% | 画素の実測 | | `text` | `#100D09` | 見出し・本文の黒 | 3% | 画素の実測 | | `accent-1` | `#7AB3B4` | セラミド訴求の淡いミントブルー | 2% | 画素の実測 | | `tint-2` | `#E9EFF0` | 図解カードの淡いミント地 | 2% | 画素の主要色に補正 | | `accent-2` | `#EBB2AB` | 低刺激処方ボックスのくすみピンク | 2% | 画素の実測 | | `cta` | `#B4241B` | 主CTAボタンの赤 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `marker` | `#F3EBB5` | 本文の黄色マーカー | 0% | 推定 | | `dark-section` | `#524E43` | フッターの濃いグレーブラウン | 0% | 画素の実測 | | `accent-3` | `#C8402A` | 価格・割引の朱赤 | 0% | 推定 | | `primary-accessible` | `#877252` | AA を満たす補正値（計算） | | 計算 | - 地は淡いグレーを基本に、声・メッセージは生成りベージュ、理由は濃いめのカーキベージュと章ごとに切り替える - ゴールドは見出しの強調語、円バッジの線、ラベル帯に使い、面で広く塗らない - セラミド系の訴求だけミントブルーで色分けし、ゴールドの成分と対比させる - 赤はCTAボタンと価格・割引だけに限定する - 低刺激の安心訴求はくすみピンクの枠付きボックスで統一する - 本文の強調は淡い黄色マーカーで下半分を塗る - `badge-circle` は文字 `#BCAA90` × 背景 `#FEFEFE` のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#877252`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューや章の大見出し（数字を大きく） | 明朝 | Shippori Mincho | 500 | 40px | 1.3 | 0.04em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 500 | 30px | 1.4 | 0.05em | | `headline-md` | 成分名・カード見出し（ゴールドやミント色） | 明朝 | Noto Serif JP | 400 | 24px | 1.4 | 0.06em | | `headline-sm` | 見出しの前置き・商品名 | ゴシック | Noto Sans JP | 500 | 15px | 1.5 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字ラベル（ingredient・REASON・STEP） | 欧文セリフ | Cormorant Garamond | 400 | 13px | 1.2 | 0.1em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.03em | - 見出しは明朝。キーワードを大きく、助詞を小さくしてジャンプ率をつける - 数字（年齢・個数）は斜体ぎみのセリフで特大にする - 縦書きの明朝コピーを写真の横に置く - 本文・注釈はゴシックで小さめにまとめる - 成分名はゴールドかミントの文字色で区別する - 価格の数字は太いゴシックの朱赤で大きくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。バッジは 2〜3 列、不使用リストは 2〜4 列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は全幅、テキストブロックは左右約 22px の余白を取る - カードは左右 6% の余白を空けて縦に並べ、点線で縦につなぐ - STEP 解説は左端に縦書きラベルの帯を置く - 購入ブロックはゴールドの細枠で囲む - 購入ブロックはページ内で 3 回繰り返す ## Elevation & Depth - カードはごく淡いドロップシャドウ（0 2px 8px rgba(0,0,0,.08)）で浮かせる - 円バッジとキーワードボックスは白地に軽い影をつける - CTA は赤のグラデーションに下方向の影をつける - 水滴・ガラス玉のような半透明の円を装飾に重ねる ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 四角い全幅か、カード幅の矩形。商品は切り抜きで大理石台の上に置く - **セクション境界**: 下向きの V 字（三角の矢羽）でセクションを区切る。ほかは直線の色切り替え - 成分バッジはゴールドの細線の正円で、下半分をゴールドで塗る - キーワードタグは白地に細い枠線の小さな四角 - カードの右上を折り返した紙のような三角で飾る - 番号はゴールドの円の中に斜体の数字を置く ## Components - **主CTAボタン**（`button-primary`）: 赤いピル型で、左に»を付ける。右に商品の切り抜きと円形の訴求バッジを重ねる - **お試しセット購入ブロック**（`offer-box`）: ゴールドの細枠の白いボックス。4 品のステップ表、割引バッジ、大きな価格、2 つの特典枠、CTA の順に並べる - **成分円バッジ**（`badge-circle`）: 細いゴールド線の正円に明朝の成分名を入れ、下に※を添える。2 つの円を×でつなぐこともある - **セクションラベル帯**（`label-band`）: 全幅の帯に白文字で章名を書き、下を三角にとがらせる - **番号付き成分見出し**（`ingredient-heading`）: 英字ラベルと 2 桁の数字を入れた円の横に、大きな明朝の成分名を置く - **低刺激処方ボックス**（`safety-box`）: くすみピンクの枠の中に、白地の帯 2 本でテスト済み項目を並べる - **お客様の声カード**（`voice-card`）: 白カードの右上を折り返す。ゴールドのシルエットと明朝の見出しの下に本文を書き、黄色マーカーで強調する - **理由カード**（`reason-card`）: カーキ地のカード。上に REASON の番号円、明朝見出し、写真、本文の順。カード同士を点線でつなぐ - **不使用リスト**（`free-from-grid`）: 白い小さな四角に成分名を入れたグリッド。左に見出しパネルを置く ## Do's and Don'ts **Do** - 見出しは明朝で大小のジャンプ率をつけ、余白を広くとる - ゴールドは細線と文字を中心に使い、品よく抑える - 購入ブロックは同じデザインで複数回繰り返す - 成分の主張には必ず※注釈を小さく添える - 写真は柔らかい逆光と白っぽい光で統一する **Don't** - CTA以外に鮮やかな赤を使わない - 太いゴシックの見出しを多用しない - 黒やビビッドな色の面を広く敷かない - 角丸の大きいポップなカードにしない - 彩度の高いイラストを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（年齢の悩みと主要成分を一目で伝える）: 大理石風の淡いグレー地。部位タグ、特大の年齢数字と明朝のコピー、商品の切り抜き、成分円バッジ 2 つ、不使用グリッドを置く 2. **オファー**（お試しセットの価格を見せて即申込を促す）: ゴールドの枠付き白ボックスに、ステップ表、朱赤の価格、赤いCTAを入れる 3. **メディア掲載**（人気と信頼を示す）: 明朝見出しの下に雑誌の表紙を斜めに重ねて並べる 4. **ブランドの共感**（理想の肌像を描く）: ベージュのグラデーションに逆光ポートレートと縦書きコピー。成分円を×でつなぐ 5. **ブランドの考え方**（科学的なアプローチを説明する）: ラベル帯の下に、ラボのガラス器具の写真と縦書きの大見出しを置く 6. **2つの成分**（主要成分の必要性を伝える）: 商品を中央に置き、両脇に縦書きコピー。成分名ボックスを×で並べ、V字で区切る 7. **成分詳細**（それぞれの成分の効果を説明する）: 番号付き見出し、マクロ写真、マーカー付き本文、ミントの図解カード 8. **使い方ステップ**（4 品の使い方と配合成分を見せる）: 左に縦書き STEP 帯を置いた白カード。円バッジ 3 つと低刺激ボックスを並べる 9. **お客様の声**（使用感で共感させる）: ベージュ地に右上を折り返した白カードを縦に並べ、ゴールドのシルエットを添える 10. **選ばれる理由**（5 つの理由で納得させる）: ゴールドの円の目次の後、カーキのカードを点線でつないで縦に並べる 11. **ブランドメッセージ**（想いを伝えてブランドを好きになってもらう）: 生成り地に中央揃えの本文。ゴールドの明朝見出しと短い区切り線 12. **まとめ**（ポイントを振り返る）: 逆光の横顔写真の下に、POINT 番号付きの帯 5 本を線でつなぐ 13. **クロージングCTA**（最後に申込を後押しする）: ファーストビューのコピーと商品を再び見せ、オファーブロックを繰り返す。最後に濃色のフッター ## Imagery - 白っぽい逆光の中で微笑む 40 代女性のポートレート。肌に手を添える - 白ボトルとゴールドの帯の商品を、大理石や白木の台、白タイルの前に置く - ビーカーや乳鉢などのラボのガラス器具で、科学的な印象を出す - 成分のマクロ写真（スポイトの液滴、ジェルのテクスチャ）や、果実のなる木 - 肌の断面図は淡いミントとベージュのフラットなイラストで描く - 半透明の水滴やシャボン玉を装飾として散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はない。PC では中央 750px 幅の 1 カラムを保ち、左右に淡いグレーの地を敷くことを推奨 - ファーストビューは PC でコピーを左、商品を右の 2 分割にしてもよい - 声カードと理由カードは PC で 2 列のグリッドにできる - CTA は最大幅 480px で中央に置く ## 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-35c03364`（元 LP の URL から採番） - **元 LP**: https://etvos.com/smart/lp/s-116/af.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。