--- version: alpha name: Silver Lab Minimal Skincare LP description: 銀灰色とくすみパステルの地に細身の明朝・ゴシックを置き、研究由来の上品さを出すスキンケア LP。価格と CTA だけをくすみピンクで目立たせ、トライアル購入へ何度も導く。 colors: primary: '#535D6C' background: '#FEFEFE' background-alt: '#FCFCFC' tint-1: '#D4DFE3' tint-2: '#C9C3CF' secondary: '#CBCCD4' dark-section: '#A9AEB1' cta: '#DA8394' on-cta: '#FEFBFC' text: '#595E67' text-body: '#333333' accent-1: '#BAB2A7' accent-2: '#EBE8C2' surface: '#F4F3E5' line: '#7B7F8B' cta-accessible: '#C8465F' typography: display: fontFamily: Shippori Mincho fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Josefin Sans fontSize: 36px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 headline-sm: fontFamily: Montserrat fontSize: 60px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.02em label-button: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 0px md: 12px lg: 28px full: 999px spacing: unit: 8px card: 28px 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: 72px price-block: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.headline-sm}' height: 140px benefit-tag: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 56px gift-band: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 48px vertical-label: textColor: '{colors.text}' typography: '{typography.accent}' height: 180px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 360px ingredient-circle: textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.full}' height: 120px number-list: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 80px free-circle: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 160px --- # DESIGN.md — 銀灰×くすみピンクの先端研究系スキンケア LP（Silver Lab Minimal Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、クール・先進的、清潔・爽やか、シンプル・ミニマル - **キーワード**: 銀灰・透明な水滴・縦書き・細字・研究室・くすみピンク - **地の質感**: メタリックな容器と水滴・細胞球の透明感。光が差すマットな面 - **形**: 正円の成分バッジ、大きめ角丸の白カード、ピル型 CTA - **温度感**: やや寒色寄りのニュートラル。CTA のピンクだけが温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#535D6C` | ブランドの銀灰（濃） | 5% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 30% | 画素の実測 | | `background-alt` | `#FCFCFC` | 淡グレー地 | 8% | 画素の実測 | | `tint-1` | `#D4DFE3` | STEP1 の淡ブルーグレー地 | 6% | 画素の実測 | | `tint-2` | `#C9C3CF` | STEP2 の淡ラベンダー地 | 6% | 画素の実測 | | `secondary` | `#CBCCD4` | 成分・Approach の藤グレー地 | 8% | 画素の主要色に補正 | | `dark-section` | `#A9AEB1` | 安全性セクションのグレー地 | 9% | 画素の実測 | | `cta` | `#DA8394` | CTA ボタン・価格 | 2% | 画素の実測 | | `on-cta` | `#FEFBFC` | CTA 上の文字 | 0% | 画素の実測 | | `text` | `#595E67` | 見出しの濃グレー文字 | 2% | 画素の実測 | | `text-body` | `#333333` | 本文 | 3% | 推定 | | `accent-1` | `#BAB2A7` | POINT 見出しのベージュ・マーカー | 0% | 画素の実測 | | `accent-2` | `#EBE8C2` | グレー地の小見出しの淡黄 | 0% | 画素の実測 | | `surface` | `#F4F3E5` | 特典帯のアイボリー | 1% | 画素の実測 | | `line` | `#7B7F8B` | 枠線・区切り線 | 0% | 画素の実測 | | `cta-accessible` | `#C8465F` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡グレー・寒色パステルを交互に置き、セクションを分ける - 製品 STEP ごとに淡ブルーグレー→ラベンダー→グレージュと地色を変える - くすみピンクは価格・送料無料バッジ・CTA だけに使う - グレー地の上の小見出しは淡黄で目立たせる - 強調文はベージュの下線マーカーで示す - 原色や彩度の高い色は使わない - `button-primary` は文字 `#FEFBFC` × 背景 `#DA8394` のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C8465F`、4.54:1）を使う。 - `price-block` は文字 `#DA8394` × 背景 `#FEFEFE` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C8465F`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きキャッチ | 明朝 | Shippori Mincho | 400 | 48px | 1.1 | 0.02em | | `headline-lg` | 縦書き・白帯付きのセクション見出し | ゴシック | Zen Kaku Gothic New | 300 | 30px | 1.4 | 0.1em | | `accent` | ITEM・Reason・TRIAL SET などの欧文ラベル | 欧文サンセリフ | Josefin Sans | 300 | 36px | 1.2 | 0.05em | | `headline-md` | 理由・製品の小見出し | ゴシック | Noto Sans JP | 400 | 19px | 1.4 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈・※ | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `headline-sm` | 価格数字 | 欧文サンセリフ | Montserrat | 400 | 60px | 1.0 | -0.02em | | `label-button` | CTA ボタン | ゴシック | Noto Sans JP | 700 | 19px | 1.2 | 0.03em | - 見出しは細字（300〜400）で字間を広くとり、上品に見せる - 感情に訴えるコピーは縦書きにする - 欧文ラベルは細い幾何学サンセリフで大きく置く - 太字は CTA・価格まわり・下線つきの強調だけに使う - 写真の上の見出しは白帯で抜いて読ませる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。理由ブロックは写真と文章の 2 分割 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 28px（375px 幅換算） - 写真は端まで広げる全幅と、左右に寄せる非対称を交互に置く - TRIAL SET のブロックを 4 回くり返す - 成分は 4 つの円を横に並べる - 白カードは色地の上に左右 16px の余白をとって置く ## Elevation & Depth - 影はほぼ使わない - 特典帯にだけ薄いドロップシャドウ - 白カードはフラットにし、地色との差で浮かせる ## Shapes - **角丸**: 小 0px ／ 中 12px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 成分写真は正円。製品写真は角なしの長方形。悩みのワードは白い正円バッジ - **セクション境界**: 直線で地色を切り替える - 成分名の枠は角丸なしの細い線囲み - 特徴ラベルの枠には左上に三角の切り欠き装飾を付ける - 白カードの角丸は 24〜28px ## Components - **トライアル CTA**（`button-primary`）: 全幅のピル型。くすみピンクに白い太字、右端に細い山括弧 - **初回価格ブロック**（`price-block`）: 上下をピンクの細線ではさんだ見出し、ピンクの大きな価格、円形の送料無料バッジ - **条件ラベル枠**（`benefit-tag`）: グレーの線枠を 2 つ並べ、左上に三角の切り欠きを付ける - **特典帯**（`gift-band`）: アイボリーの角丸帯。左に特典ラベル、右に円形の数量限定バッジ - **縦書き欧文ラベル**（`vertical-label`）: TRIAL SET などを右端に縦に置き、左に細い縦線を添える - **POINT カード**（`point-card`）: 白の大きな角丸カード。ベージュの POINT 番号、短い線、下線で強調した本文 - **成分円写真**（`ingredient-circle`）: 正円の写真を 4 つ並べ、下に成分名を中央揃えで置く - **番号付き試験リスト**（`number-list`）: グレー地の上に濃グレーの丸数字、白い見出しと説明、細い区切り線 - **フリー表示**（`free-circle`）: 白カードの中に、斜線入りの円を 2×2 で並べる ## Do's and Don'ts **Do** - 余白を広くとり、細字で静かに見せる - 購入ブロック（価格と CTA）は同じ形のまま数セクションおきに置く - 水滴・スポイト・ガラス器具など研究室らしい静物写真を使う - セクションの地色は寒色パステルの範囲で変える **Don't** - CTA 以外にピンクを広く使わない - 太いゴシックの見出しを多用しない - 派手なグラデーションやドロップシャドウを付けない - 暖色の鮮やかな写真を主役にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（先進的で上質な世界観を伝える）: 濃灰の地に製品ボトルと透明な球体。左右に明朝の縦書きコピー、下にロゴ 2. **受賞実績**（第三者の評価で信頼を得る）: 淡グレーの地に月桂樹の装飾とピンクの受賞エンブレム 3. **トライアル CTA**（初回購入へ導く）: セット写真、特典帯、ピンクの価格、条件ラベル 2 つ、ピル型ボタン 4. **ブランドの考え方**（肌の悩みと解決の考え方を物語として語る）: 光の差す白い背景に縦書きの見出しと中央揃えの短い段落。肌写真に円形の効果バッジを重ねる 5. **成分の説明**（独自成分の価値を伝える）: 藤グレーの地。白帯で抜いた見出し、細胞の写真、白い円 2 つを×でつなぐ図、成分名の線枠グリッド 6. **選ばれる理由**（効果の根拠を示す）: 縦書きの導入、Reason 番号付きで写真と文章を左右交互に置く 7. **イメージビジュアル**（研究と技術の印象を強める）: スポイトとビーカーの写真に明朝の縦書きコピー 8. **製品ラインナップ**（使う手順ごとに 3 品を紹介する）: ITEM ラベルと STEP 番号を大きく。STEP ごとに地色を変え、成分の円写真と POINT カードを置く 9. **悩みへのアプローチ**（対応できる肌悩みを並べる）: 製品写真の上に悩みワードの白い円を散らし、縦書き見出しを添える 10. **ベネフィット**（使った後の気持ちを想像させる）: 笑顔の肌写真の下端に、白帯付きの大きな明朝コピーを重ねる 11. **安全性**（不安を取り除く）: グレーの地。ピル型の白見出し、淡黄の小見出し、4 つのフリー表示、番号付きの試験リスト 12. **製造へのこだわり**（品質の根拠を示す）: 白地に文章、小さな写真 2 枚を左右に寄せて非対称に置く 13. **クロージング CTA**（最後のひと押しで購入へ導く）: 3 品の集合写真と明朝コピーの後に、トライアル CTA をもう一度置く ## Imagery - マットな銀色のボトルを、グレーの背景に柔らかい光で撮る - 透明な水滴・気泡・細胞のような球体を CG で浮かべる - スポイト・ビーカー・シャーレなど研究室の静物を寒色の低彩度で - 肌のアップは白背景で明るく、清潔感を出す - 植物成分は正円の切り抜きで彩度をやや残す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP と同じ 1 カラムを中央に約 30% 幅で置く - PC の左右の余白は、光の筋と細胞球の写真を並べた背景で埋める - PC で広げる場合も本文は最大 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-9a63dbb9`（元 LP の URL から採番） - **元 LP**: https://ec.eternam.co.jp/lp?u=epfs01_rep_meta_01_01&utm_source=meta&utm_medium=cpc&utm_id=120220747627370595&utm_content=120220747806870595&utm_term=120220747627030595&utm_campaign=120220747627370595&fbclid=PAZXh0bgNhZW0BMABhZGlkAascIhiWeYMBpvGx-xUHhlDwfw - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。