--- version: alpha name: Silver Gray Clinical Luxury Skincare LP description: シルバーグレーを基調にした、研究由来スキンケアのトライアル申込 LP。明朝の縦書き見出しと細い欧文で静かな高級感を出している。白いオファーカードとサーモンオレンジの CTA だけで行動を促す。工程ごとに背景を水色・藤色・グレージュのくすみ色に切り替える構成。 colors: primary: '#D1D0D5' background: '#FFFFFF' cta: '#F4B27D' on-cta: '#FEFDFA' secondary: '#7E95A6' background-alt: '#E3E3E3' tint-1: '#D4DFE3' tint-2: '#CAC2CF' surface: '#D8D9D1' dark-section: '#A9AEB1' text: '#090909' accent-1: '#BAB1A7' accent-2: '#F3E29A' marker: '#D3CCCB' text-muted: '#545D6C' cta-accessible: '#B95B10' secondary-accessible: '#5F788A' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.12em headline-lg: fontFamily: Josefin Sans fontSize: 44px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 60px fontWeight: 600 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.08em rounded: sm: 0px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 70px 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: 48px offer-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 900px badge-lottery: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 115px condition-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 450px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 360px ingredient-circle: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 75px heading-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px number-list: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' height: 62px free-circle: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 125px --- # DESIGN.md — 銀灰とくすみ色の再生美容スキンケア LP（Silver Gray Clinical Luxury Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、クール・先進的、シンプル・ミニマル、信頼・誠実 - **キーワード**: シルバーグレー・縦書き明朝・くすみパステル・研究・透明感・余白・白カード - **地の質感**: メタリックなボトル、ガラスのスポイトや水滴、虹色の光の反射。面はマットな単色グレー。 - **形**: 直線的な四角が基本。成分画像やバッジは正円、白カードは大きめの角丸。 - **温度感**: クールで無機質寄り。CTA の暖色だけがアクセント。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D1D0D5` | ブランドのシルバーグレー地 | 22% | 画素の実測 | | `background` | `#FFFFFF` | 白の基本地・オファーカード | 25% | 画素の実測 | | `cta` | `#F4B27D` | 申込ボタン | 1% | 画素の実測 | | `on-cta` | `#FEFDFA` | ボタン文字 | 0% | 画素の実測 | | `secondary` | `#7E95A6` | 抽選バッジのブルーグレー | 0% | 画素の実測 | | `background-alt` | `#E3E3E3` | 応募条件ボックスの薄灰 | 6% | 画素の実測 | | `tint-1` | `#D4DFE3` | STEP1 の淡い水色地 | 6% | 画素の実測 | | `tint-2` | `#CAC2CF` | STEP2 の藤色地 | 6% | 画素の実測 | | `surface` | `#D8D9D1` | STEP3 のグレージュ地 | 5% | 画素の実測 | | `dark-section` | `#A9AEB1` | 安全性セクションの中灰 | 9% | 画素の実測 | | `text` | `#090909` | 見出し・本文の墨色 | 3% | 画素の実測 | | `accent-1` | `#BAB1A7` | POINT 見出しのベージュゴールド | 0% | 画素の実測 | | `accent-2` | `#F3E29A` | 安全性小見出しの淡黄 | 0% | 推定 | | `marker` | `#D3CCCB` | 本文強調のベージュ下線 | 0% | 画素の主要色に補正 | | `text-muted` | `#545D6C` | 番号丸・補足の灰色 | 0% | 画素の実測 | | `cta-accessible` | `#B95B10` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#5F788A` | AA を満たす補正値（計算） | | 計算 | - 地はシルバーグレーと白を交互に置き、全体を無彩色寄りにまとめる - 暖色は CTA のサーモンオレンジだけに使う - 商品工程ごとに水色・藤色・グレージュのくすみ色で背景を切り替える - POINT 見出しと強調下線はベージュゴールドで上品にする - 価格は黒の極太数字、取り消し線は赤で通常価格を示す - 濃いグレー地の小見出しは淡い黄色で目立たせる - `button-primary` は文字 `#FEFDFA` × 背景 `#F4B27D` のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B95B10`、4.52:1）を使う。 - `badge-lottery` は文字 `#FEFDFA` × 背景 `#7E95A6` のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#5F788A`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きキャッチ・オファーの大見出し | 明朝 | Shippori Mincho | 500 | 34px | 1.6 | 0.12em | | `headline-lg` | セクション英字見出し・STEP 番号 | 欧文サンセリフ | Josefin Sans | 300 | 44px | 1.1 | 0.02em | | `headline-md` | 工程名や説明見出し | ゴシック | Zen Kaku Gothic New | 400 | 30px | 1.3 | 0.05em | | `headline-sm` | 小見出し・カード見出し | ゴシック | Noto Sans JP | 500 | 17px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.04em | | `note` | 注釈・成分名 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em | | `accent` | 価格の大数字・POINT 番号 | 欧文サンセリフ | Montserrat | 600 | 60px | 1.0 | 0.0em | | `label-button` | CTA ボタン | ゴシック | Noto Sans JP | 700 | 20px | 1.0 | 0.08em | - 感情に訴えるキャッチは明朝の縦書きにし、字間を広く取る - 英字見出しは細いジオメトリック書体を大きく使う - 白い帯に明朝をのせた見出しを写真の上に重ねる - 本文は小さめのゴシックで行間を広く取る - 価格だけは極太の数字にして他との差を最大にする - 強調はベージュの下線マーカーと太字で控えめに - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分は 4 列、成分名ボックスは 2 列、Reason は写真とテキストの左右 2 分割 - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算） - オファーは灰色地の上に白カードを浮かせ、左右 14px 程度の余白を残す - 縦書き見出しを左右どちらかに寄せ、残りに商品写真を置く - Reason は写真の左右配置を交互に入れ替える - オファーブロックはページ内で 3 回繰り返す - セクション間は広めの余白で区切る ## Elevation & Depth - 影はほぼ使わず、色面の差で階層を作る - 白カードは影なしで、グレー地とのコントラストで浮かせる - 金色の成分球体だけに柔らかい光彩を付ける ## Shapes - **角丸**: 小 0px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品と人物写真は全幅の四角。成分写真やバッジは正円で切り抜く - **セクション境界**: 直線の色切り替え。区切り線や装飾波は使わない - CTA は完全なピル型 - POINT カードと見出し囲みは大きめの角丸 - 成分名ボックスは角丸なしの細い枠線 - 悩みキーワードは白い正円に入れて散らす ## Components - **申込 CTA**（`button-primary`）: サーモンオレンジのピル型ボタン。白い太字と右向き矢印。下に規約同意のチェックを置く - **オファーカード**（`offer-card`）: 灰色地に浮く白カード。明朝の大見出し、取り消し線付きの通常価格、極太の価格、チェックリストを入れる - **抽選人数バッジ**（`badge-lottery`）: カード右上に置くブルーグレーの正円。人数を白文字で入れる - **応募条件ボックス**（`condition-box`）: 薄灰の箱。左右に線を引いた中央見出し、吹き出し型の白ラベル、黒丸数字のリストで構成 - **POINT カード**（`point-card`）: 白い角丸カード。ベージュの POINT 番号、短い区切り線、下線で強調した本文を並べる - **成分円形写真**（`ingredient-circle`）: 成分写真を正円で 4 つ並べ、下に成分名を小さく添える - **白帯見出し**（`heading-band`）: 写真や灰色地に重ねる白い帯。中に明朝の見出しを入れる - **番号付き試験リスト**（`number-list`）: 濃灰の丸数字、白の見出し、細い区切り線を組み合わせた縦リスト - **不使用マーク**（`free-circle`）: 斜線入りの細い線の円。中央に不使用成分名を入れて 2×2 で並べる ## Do's and Don'ts **Do** - 無彩色のグレー階調を主役にし、色は控えめに使う - 感情に訴える見出しは明朝の縦書きにして余白を広く取る - オファーブロックはファーストビュー直後・中盤・末尾に繰り返す - 商品工程ごとにくすみ色の背景で区別する - 研究感はガラス・水滴・細胞のビジュアルで表現する **Don't** - CTA 以外で鮮やかな暖色や原色を使わない - 太いゴシックの大見出しを多用しない（価格の数字だけは例外） - 濃い影やグラデーションのボタンを使わない - 装飾的なイラストやポップなアイコンを入れない - セクション境界に波や斜めの形を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（悩み訴求とブランドの印象づけ）: グレー地に人物と虹色の光。左に明朝の大見出し、下に商品ボトルと受賞バッジを並べる 2. **セット内容**（トライアル内容を見せる）: 縦書き見出しとパウチ入りの箱の写真。内容を右寄せの小さい文字で記載 3. **オファー・CTA**（低価格トライアルへの申込）: 白カードに価格、抽選バッジ、ピル型 CTA、チェックリスト、応募条件ボックス 4. **ブランドストーリー**（研究背景の共感づくり）: 白い光の背景に縦書きの明朝と、短い段落の本文 5. **効果イメージ**（肌悩みへの効果を連想させる）: 肌の写真の上に、金色の球体に入れた効果キーワードを散らす 6. **成分紹介**（独自成分を説明する）: 白帯の見出し、細胞の写真、白い円 2 つの掛け合わせ図、枠線付きの成分リスト 7. **理由（Reason）**（成分の根拠を伝える）: 細い英字の Reason 番号と、写真＋本文の左右交互配置 8. **イメージビジュアル**（浸透感を世界観で伝える）: スポイトの水滴が落ちる全幅写真に白い縦書きの明朝を重ねる 9. **アイテム紹介（STEP）**（3 工程の商品を解説する）: STEP ごとに背景のくすみ色を変える。大きな番号、商品写真、円形の成分写真、POINT カード 10. **アプローチ**（対応する悩みを網羅して見せる）: 大きな英字見出しとボトルの写真の上に、悩みキーワード入りの白い円を散らす 11. **安全性**（信頼性の担保）: 中灰の地に白いピル型の見出し、淡黄の小見出し、不使用マーク、番号付き試験リスト 12. **クロージング・CTA**（最終的な申込を促す）: 白帯の見出しと商品写真、セット内容とオファーカードを再掲 13. **電話問い合わせ**（電話での申込先を案内する）: グレー地に白枠の電話番号ボックスと受付時間 ## Imagery - マットなシルバーのボトルを明るいグレー背景で撮り、影を柔らかく落とす - 人物は透明感のある肌の女性。プリズムの虹色光を差し込ませる - ガラスのスポイト、水滴、ビーカーをクールなグレートーンで接写する - 細胞や泡を思わせる透明な球体の CG を使う - 成分は植物の実物写真を明るく撮り、円形に切り抜く - 効果キーワードは金色の液体が入った球体に入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像がないため以下は推奨。中央 480〜600px 幅の 1 カラムにし、両脇をグレーで埋める - PC では Reason や STEP を写真とテキストの左右 2 分割に広げてよい - オファーカードは最大 560px 幅で中央に置く - 縦書きの見出しは PC でも縦書きのまま残す - 成分の円形写真は PC では 4〜6 列で並べる ## 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-17fe5ac5`（元 LP の URL から採番） - **元 LP**: https://ec.eternam.co.jp/shop/pages/fs-monitor-cp - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。