--- version: alpha name: Sage Gray Monochrome Clinical Skincare LP description: 淡いグレーとセージグリーンの地に、黒の帯と深緑のラベルを合わせたモノトーン寄りのスキンケア LP。白い泡や植物の写真、肌断面の図解、番号付きの特長ブロックで、成分の効き目を落ち着いたトーンで伝える。 colors: primary: '#021A11' dark-section: '#000001' background: '#E4E6E5' background-alt: '#FFFFFF' secondary: '#B3C6C0' accent-1: '#C3CDC9' accent-2: '#EDC68D' marker: '#FEFCB4' text: '#000000' text-muted: '#697672' on-dark: '#FFFFFF' surface: '#F9FAFA' line: '#1C1C0A' accent-1-accessible: '#667A72' typography: display: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 56px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Montserrat fontSize: 13px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.15em rounded: sm: 4px md: 10px 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}' label-dark: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px speech-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px heading-boxed: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 56px circle-badge: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px check-list-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px number-heading: textColor: '{colors.text}' typography: '{typography.accent}' height: 80px ingredient-circle: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px step-chevron: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 56px step-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px --- # DESIGN.md — セージグレー×黒の泡コスメ LP（Sage Gray Monochrome Clinical Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: シンプル・ミニマル、清潔・爽やか、上品・高級、信頼・誠実 - **キーワード**: セージグレー・黒帯・白い泡・図解・番号見出し・余白多め - **地の質感**: マットで平坦な面。写真は柔らかな自然光と白い泡の質感 - **形**: 角丸小さめのカード、正円バッジ、矢印付き吹き出しラベル - **温度感**: やや寒色寄りのニュートラル。香りの紹介だけ暖色ベージュ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#021A11` | 深緑黒のラベル・見出し帯 | 6% | 画素の実測 | | `dark-section` | `#000001` | 黒の帯セクション | 5% | 画素の実測 | | `background` | `#E4E6E5` | 基本のライトグレー地 | 30% | 画素の実測 | | `background-alt` | `#FFFFFF` | 白地の特長セクション | 20% | 画素の実測 | | `secondary` | `#B3C6C0` | セージグリーンの面・FV地 | 6% | 画素の実測 | | `accent-1` | `#C3CDC9` | グレーグリーンのステップバー | 2% | 画素の実測 | | `accent-2` | `#EDC68D` | 香り紹介の暖色ベージュ | 6% | 画素の実測 | | `marker` | `#FEFCB4` | 黒帯上の強調文字（淡黄） | 0% | 画素の実測 | | `text` | `#000000` | 見出しの黒文字 | 3% | 画素の実測 | | `text-muted` | `#697672` | グレーグリーンの補足見出し | 1% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の白文字 | 1% | 画素の実測 | | `surface` | `#F9FAFA` | 悩みリストのカード | 3% | 画素の実測 | | `line` | `#1C1C0A` | 区切り線・枠線 | 0% | 画素の実測 | | `accent-1-accessible` | `#667A72` | AA を満たす補正値（計算） | | 計算 | - 地はライトグレーと白を交互に使い、セクションを切り替える - 黒・深緑黒の帯は章の区切りと強調ラベルにだけ使う - 黒帯の上の大見出しは淡黄で一点だけ強調する - セージグリーンは FV や無添加パネルなど面で使い、彩度を上げない - 暖色ベージュは香りの章だけに使う差し色にする - 成分の円バッジは素材写真の色（紫・黄・緑）をくすませて使う - `step-chevron` は文字 `#FFFFFF` × 背景 `#C3CDC9` のコントラスト比が 1.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#667A72`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きコピー・黒帯の大見出し | ゴシック | Noto Sans JP | 900 | 40px | 1.3 | 0.05em | | `headline-lg` | 特長の章見出し | ゴシック | Zen Kaku Gothic New | 700 | 32px | 1.4 | 0.08em | | `headline-md` | 枠付き見出し・中見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.08em | | `headline-sm` | ラベル内見出し・吹き出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.1em | | `note` | 注釈（※） | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.02em | | `accent` | 番号・英字サブ見出し・英字ロゴ帯 | 欧文サンセリフ | Montserrat | 600 | 56px | 1.0 | 0.02em | | `label-button` | POINT ラベル・STEP 表記 | 欧文サンセリフ | Montserrat | 600 | 13px | 1.2 | 0.15em | - 見出しは太いゴシックで字間を広めにとる - 和文見出しの下に小さな英字サブ見出しを字間広めで添える - 特長番号は大きな欧文数字にして、下に短い下線を引く - 本文は行間 2.0 前後でゆったり組む - 注釈は ※ 番号付きの小さい文字で見出しの直下に置く - 助詞だけ小さくして、キーワードを大きく見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。図解は 2 列、バッジは 3〜4 列 - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約 30px - 番号セクションは全幅写真→白地の見出し・本文の順に並べる - 本文と図解は左右に並べ、図解は右に寄せる - 黒帯セクションは上下に約 40px の余白をとる - 区切りは細い横線か V 字の形を使う ## Elevation & Depth - 影はほぼ使わない平面の構成 - 悩みカードと無添加パネルには、ずらした細い枠線で奥行きを出す - HOW TO 見出しの黒ボックスにはオフセットの枠線を付ける ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の矩形写真、または角丸 10px の矩形。成分は正円で切り抜く - **セクション境界**: 直線と、下向き V 字の切り替え - バッジは正円で、白地または線のみにする - ラベルは角丸 4px 程度の矩形に、下向きの三角の吹き出しを付ける - 見出しの枠は 1px の黒い四角い線にする - ステップバーは右向き矢印形のシェブロンでつなぐ ## Components - **深緑黒ラベル**（`label-dark`）: 見出しの上に置く小さな帯ラベル。POINT 番号や導入文に使う - **吹き出しラベル**（`speech-label`）: 下向きの三角が付いた黒い矩形。図解や写真の上に要点を載せる - **枠線見出し**（`heading-boxed`）: 1px の黒い線で囲んだ四角の中に中見出しを置く - **円形バッジ**（`circle-badge`）: 白い正円の中に訴求の言葉を太字で入れ、横に 3 つ並べる - **悩みチェックカード**（`check-list-card`）: 薄い面のカードに、チェックアイコン付きの悩みを罫線で区切って並べる - **番号見出し**（`number-heading`）: 写真の左下に大きな欧文数字を置き、短い下線を添える - **成分円**（`ingredient-circle`）: 素材写真を正円で切り抜き、白い太字の成分名を重ねる - **変化ステップバー**（`step-chevron`）: グレーグリーンの 2 段の矢印バーで、状態の変化を示す - **使い方ステップ**（`step-item`）: STEP と大きな数字の下に線を引き、説明文と線画イラストを左右交互に置く ## Do's and Don'ts **Do** - グレー・白・黒の 3 色を中心に、静かなトーンを保つ - 効き目は肌断面のような簡単な図解で見せる - 和文見出しには英字サブ見出しを必ず添える - 特長は大きな番号付きで順番に見せる - 注釈は ※ 番号で丁寧に入れる **Don't** - 鮮やかな赤やオレンジのボタンを多用しない - グラデーションや強い影を使わない - 丸ゴシックや手書きの書体で甘くしない - 1 画面に色数を増やしすぎない - 本文の行間を詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と主な効能を一目で伝える）: セージ地に商品のボトルと泡の写真。右に黒白の縦書きコピー、左に円形の認証バッジを置き、下に黒帯の英字名を入れる 2. **悩みの提起**（読み手の肌悩みに共感する）: 斜めに配した人物写真と深緑のラベル見出し。その下にチェックリストのカードを置き、V 字で次へつなぐ 3. **使い方の提案**（手軽なケアであることを示す）: 枠線見出しと、吹き出しラベルを重ねた角丸の人物写真 4. **特長の要約**（3 つの強みをまとめて見せる）: 線で挟んだ小見出しと、白い円バッジを 3 つ並べる 5. **効能のアプローチ**（対応できる悩みを示す）: 植物の影が入った背景の中央に商品を置き、周囲に 4 つの円を配置。下に下線付きの大見出し 6. **有効成分の解説**（効き目の仕組みを説明する）: 深緑黒の見出し帯の後に POINT ラベル、吹き出しラベル、肌断面の図解、本文の順に並べる 7. **こだわり（番号付き特長）**（5 つのこだわりを順に訴求する）: 黒帯に淡黄の大見出しを置く。各特長は全幅写真と番号、白地の見出し・英字・本文で組む 8. **成分・無添加**（配合成分と安心感を示す）: 枠で囲んだ中に成分円を並べ、無添加はセージのパネルに白線の円で示す 9. **安全性**（肌への優しさを裏付ける）: 実験器具の写真を背景に、枠線見出しと本文を置く 10. **香りの紹介**（使う時間の心地よさを伝える）: 暖色ベージュの地に、字間の広い欧文の見出しと素材の静物写真 11. **使い方**（手順を明確にする）: オフセット枠付きの黒ボックス見出しと、STEP ごとの線画イラストを左右交互に並べる ## Imagery - 白く濃密な泡のクローズアップを、柔らかな自然光で撮る - 商品は白背景か植物の葉影の中に置き、静物として撮る - 人物は顔の一部か手元をトリミングし、ナチュラルメイクで見せる - 効き目の図解は、ベージュのレンガ状の肌層と矢印のフラットなイラストにする - 実験器具やガラス皿と葉を組み合わせ、清潔な成分のイメージを出す - 使い方はグレーの単色線画イラストで描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 750px 前後の 1 カラムに収め、左右はライトグレーで埋める - 番号セクションの写真は PC では横長に切り抜き、本文と 2 カラムにする - 円バッジや成分円は PC で 1 行に並べる - 黒帯は全幅のまま残し、見出しサイズを 1.3 倍程度にする ## 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-7706365c`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/bambi-water/bmousse/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（13/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。