--- version: alpha name: Silver Mist Professional Skincare BtoB LP description: エステサロン経営者に向けて、業務用スキンケアの導入を勧めるBtoB LP。青みがかった銀灰色のグラデーションと白い霧のような背景に、明朝体の見出しと丸い数値バッジを組み合わせ、上品さと信頼感を出している。資料請求CTAブロックは同じ形で何度も繰り返し、LINE登録の緑ボタンとWeb問い合わせの黒ボタンを横に並べる。 colors: primary: '#9BB1C5' background: '#F6F6F6' surface: '#FEFFFF' background-alt: '#F5FBFF' secondary: '#7B848D' cta: '#12B83A' on-cta: '#FFFFFF' dark-section: '#333436' text: '#4D4D4D' text-muted: '#8E9093' accent-1: '#8DB1AD' accent-2: '#66658C' accent-3: '#8A5856' line: '#C0C9C9' cta-accessible: '#0D872B' typography: display: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.06em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.04em accent: fontFamily: Cormorant Garamond fontSize: 14px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.12em 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.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 600 lineHeight: 1.3 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}' 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 button-secondary: backgroundColor: '{colors.dark-section}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px badge-circle: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px label-band: backgroundColor: '{colors.secondary}' typography: '{typography.note}' height: 24px cta-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 420px series-accordion: backgroundColor: '{colors.accent-1}' typography: '{typography.accent}' height: 120px point-card: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 160px flow-step: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' height: 64px faq-item: textColor: '{colors.text}' typography: '{typography.body-md}' height: 48px --- # DESIGN.md — 銀灰ブルーの霧感サロン向け化粧品導入LP（Silver Mist Professional Skincare BtoB LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 銀灰グラデーション・霧・光沢・明朝見出し・丸い数値バッジ・BtoB導入訴求・繰り返しCTA - **地の質感**: 白から青灰への柔らかいグラデーション。ぼかした霧や光沢、薄い分子構造の線画を重ねて、すりガラスのような質感を出す。 - **形**: 四角いパネルに、白縁付きの半透明の円バッジを組み合わせる。角丸は小さめ。 - **温度感**: やや寒色寄りでクール。肌写真の暖かみで少し和らげる。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#9BB1C5` | ブランドの青灰。帯や円バッジに使う | 10% | 画素の実測 | | `background` | `#F6F6F6` | ページの基本の地色 | 30% | 画素の実測 | | `surface` | `#FEFFFF` | カードと白パネル | 20% | 画素の実測 | | `background-alt` | `#F5FBFF` | 青みのある淡い地色 | 13% | 画素の実測 | | `secondary` | `#7B848D` | 濃い灰色のラベル帯と見出し帯 | 4% | 画素の実測 | | `cta` | `#12B83A` | LINE資料請求の主ボタン | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#333436` | Web問い合わせのサブボタン | 0% | 推定 | | `text` | `#4D4D4D` | 見出しの濃いグレー文字 | 2% | 画素の実測 | | `text-muted` | `#8E9093` | 英字サブ見出しと注釈 | 0% | 画素の実測 | | `accent-1` | `#8DB1AD` | シリーズ帯のセージグリーン | 2% | 画素の実測 | | `accent-2` | `#66658C` | シリーズ帯の紫紺 | 2% | 画素の実測 | | `accent-3` | `#8A5856` | シリーズ帯のくすみ赤 | 2% | 画素の実測 | | `line` | `#C0C9C9` | 見出し横の細線とFAQの区切り線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#0D872B` | AA を満たす補正値（計算） | | 計算 | - 地は白・#F6F6F6・淡い青灰の3色を交互に使い、霧のようなグラデーションでつなぐ - ブランド色は彩度を落とした青灰に統一する。円バッジと帯は半透明にする - 鮮やかな色はCTAの緑ボタンだけに使う - 商品シリーズごとの色はくすんだ中間色の帯にとどめる - 黒はサブボタンとラベル帯の濃灰だけに使う - 数値の強調は色を変えず、大きな明朝体で表現する - `button-primary` は文字 `#FFFFFF` × 背景 `#12B83A` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#0D872B`、4.65:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ見出し | 明朝 | Noto Serif JP | 700 | 28px | 1.4 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 600 | 24px | 1.4 | 0.06em | | `headline-md` | カード見出しとPOINT見出し | 明朝 | Noto Serif JP | 600 | 18px | 1.5 | 0.04em | | `accent` | 英字サブ見出し、番号01〜03、シリーズ名 | 欧文セリフ | Cormorant Garamond | 500 | 14px | 1.3 | 0.12em | | `body-md` | 本文と説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | ※注釈と調査出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.02em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.04em | | `headline-sm` | 円バッジ内の数値と短い語 | 明朝 | Noto Serif JP | 600 | 16px | 1.3 | 0.02em | - 見出しと数値は明朝体、本文と注釈はゴシック体に分ける - 見出しの下に英字セリフのサブ見出しと細い横線を添える - 数値（%や金額）だけを大きくして、単位は小さくする - 強調する語は太字にし、色は変えない - 見出し文字は濃灰にし、純黒は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。円バッジは 2〜4 個を横に並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクション見出しは左揃えにし、英字と線を付ける - 強み・特長は写真の上に白いキャプションパネルを重ねる - POINTは写真と灰色グラデーションのパネルを左右に並べ、段違いに配置する - 資料請求CTAブロックはセクション3〜4個ごとに同じ形で繰り返す - FLOWは縦線上に番号付きの丸を置き、右に白いカードを並べる ## Elevation & Depth - 白いカードにはごく淡い影（0 2px 10px rgba(0,0,0,.06)）を付ける - 円バッジは白い縁取りと内側の光沢で、ガラス玉のように見せる - CTAボタンには軽い影を付ける - 写真の上の白パネルは少し浮いて見えるようにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 四角形か、角を小さく丸めた矩形。人物写真は横長に切り抜く - **セクション境界**: 直線の境界。ただしグラデーションと霧でにじませてつなぐ。V字に切った帯を一部に使う - 数値や悩みは正円のバッジに入れる - CTAボタンはピル型にし、右端に矢印を付ける - ラベルは角のない灰色の帯にする - Step番号は円形にし、縦線でつなぐ ## Components - **LINE資料請求ボタン**（`button-primary`）: 緑のピル型ボタン。右端に矢印を付ける。サブボタンと横に並べる - **Web問い合わせボタン**（`button-secondary`）: 黒のピル型ボタン。文字は2行で入れる - **円形の数値バッジ**（`badge-circle`）: 半透明の青灰の円に白い縁を付け、中に数値か短い語を白文字で入れる - **灰色のラベル帯**（`label-band`）: CTAや声の上に置く小さな濃灰の帯。白文字で入れる - **資料請求CTAブロック**（`cta-block`）: 無料体験の訴求と白パネルを並べる。パネルには円バッジ3つと導入費用を入れ、最後にボタンと電話番号を置く - **商品シリーズのアコーディオン**（`series-accordion`）: 銀色の見出し帯、くすみ色の帯に商品写真、灰色地のOPENボタンを縦に積む - **POINTカード**（`point-card`）: 写真の横に青灰グラデーションのパネルを置き、POINT番号を大きな明朝体で入れる - **導入ステップ**（`flow-step`）: 円形のStep番号を縦線でつなぎ、右に白いカードで説明を入れる。番号の円は段階ごとに色を濃くする - **FAQ行**（`faq-item`）: 上下を細線で区切り、右端に丸い開閉アイコンを置く ## Do's and Don'ts **Do** - 地は白と淡い青灰のグラデーションで、霧のように柔らかく見せる - 数値の実績は円バッジに入れて並べる - 見出しは明朝体にし、英字サブと細線を添える - CTAブロックは毎回同じ形で繰り返し、迷わせない - 注釈は※を付けて小さな灰色文字で入れる **Don't** - CTA以外にビビッドな色を使わない - 角丸の大きいポップなカードにしない - 黒地の大きなセクションを作らない - 太いゴシック体の見出しで押し出さない - 写真を彩度の高いまま使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象の経営者に呼びかけ、実績を示す）: 明朝体の見出しと英字サブを置き、商品ボトルを並べる。青灰の帯の上に円バッジで実績を並べる 2. **CTA**（無料体験と資料請求に誘導する）: 枠付きの白パネルに金額を訴求し、その下に緑と黒のボタンを並べ、電話番号を添える 3. **悩みの提起**（経営の悩みに共感する）: 人物写真の横に、悩みを入れた円バッジを4つ並べる 4. **原因の提示**（顧客の肌悩みに対応しきれていないことを原因として示す）: 灰色のパネルに肌悩みのタグをピル型で並べ、写真カードを添える 5. **解決策と3つの強み**（ブランドの強みを伝える）: 丸い見出しで導入し、大きな番号を付けた写真に白いキャプションパネルを重ねて3つ縦に並べる 6. **実績**（満足度などの数値で証明する）: 分子構造の線画を敷いた水色の地に、数値の円バッジを4つ並べる 7. **商品シリーズ**（商品ラインを紹介する）: シリーズごとに色を変えた帯のアコーディオンを縦に5つ並べる 8. **導入メリット**（サポート体制を伝える）: 写真とグラデーションのPOINTパネルを3つ並べ、勉強会の説明は白いカードに入れる 9. **お客様の声**（導入サロンの実例を示す）: スライダー形式のカードに、写真・Q&A形式の見出し帯・本文を入れる 10. **表彰・動画**（ブランドの権威を示す）: 灰色の帯見出しの下に動画を埋め込む 11. **導入の流れ**（導入までの手順を示す）: 縦線でつないだStep円と白いカードを5段並べる 12. **よくある質問**（不安を解消する）: 細線で区切ったアコーディオンにする 13. **締めのメッセージ**（導入後の成果を印象づける）: 施術写真と灰色のパネルを重ね、商品写真を添えて、大きな明朝体の一文で締める 14. **ブランド紹介とフッター**（歴史と信頼を伝える）: 白く霧がかった写真を背景に本文を置き、フッターに小さなリンクを並べる ## Imagery - 白衣かユニフォーム姿の女性施術者と、肌のきれいなモデルを、明るい白背景で撮る - 白いボトルが並ぶ商品写真は、白か淡いグレーの背景で、影を柔らかくする - 写真全体の色をやや寒色寄りにし、彩度を下げて露出を高めにする - 背景には霧・光の筋・シルクのような曲線をぼかして重ねる - 装飾に分子構造の細い線画を薄く敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に幅約800pxの列を置き、左右は霧のグラデーションの地にする - SPでは写真とPOINTパネルを縦に積み、パネルを写真の下に重ねる - 円バッジはSPで2×2の並びにしてもよい - CTAの2ボタンは、SPでは主ボタンを全幅、サブボタンをその下に置く - 声のスライダーはSPで1枚ずつ表示する ## 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-da41b0f4`（元 LP の URL から採番） - **元 LP**: https://christina-japan.com/lp040/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。