--- version: alpha name: Muted Greige Sensory Skincare LP description: くすんだモーヴグレージュの帯見出しと白いカードを軸にした、静かで上品なエイジングケア化粧品の体験キット LP。番号付きステップ、自然風景の写真カード、データ図表、ダーク帯の悩みリストで、感性と根拠を両立させる。 colors: primary: '#AB9B9B' on-primary: '#F6F0ED' background: '#FFFFFF' surface: '#FDFDFD' background-alt: '#E3D7D7' tint-1: '#F7E6D2' dark-section: '#333333' on-dark: '#FFFFFF' text: '#4B4B49' text-muted: '#938B8A' accent-1: '#B07A7A' accent-2: '#B23A3A' line: '#C7C7C6' accent-3: '#F4D6D9' primary-accessible: '#7D6969' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.12em headline-sm: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 600 lineHeight: 1.7 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 20px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 60px step-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 45px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 400px voice-bubble: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 50px variant-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' height: 200px worry-list: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 40px price-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 95px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 36px label-pill: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 20px --- # DESIGN.md — グレージュ×モーヴの感性派スキンケア LP（Muted Greige Sensory Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、ナチュラル - **キーワード**: くすみモーヴ・グレージュ・静けさ・余白・自然風景・感性 - **地の質感**: グレーのグラデーション、水面や光のボケ写真、半透明の白パネルでやわらかい空気感を出す - **形**: 角丸のない四角いカードと帯、円形の番号バッジ、細い下向きシェブロン - **温度感**: やや低めの中間色。モーヴとベージュで冷たくなりすぎない ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AB9B9B` | セクション帯見出し・番号バッジのモーヴグレージュ | 6% | 画素の実測 | | `on-primary` | `#F6F0ED` | 帯見出し上の白文字 | 1% | 画素の実測 | | `background` | `#FFFFFF` | ページの地色（明るいグレー） | 30% | 画素の実測 | | `surface` | `#FDFDFD` | ステップカード・価格ボックスの白 | 18% | 画素の実測 | | `background-alt` | `#E3D7D7` | お客様の声ブロックのピンクグレージュ | 4% | 画素の実測 | | `tint-1` | `#F7E6D2` | メッセージセクションのベージュ地 | 4% | 画素の実測 | | `dark-section` | `#333333` | 悩みリストの濃いチャコール帯 | 2% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃色帯上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#4B4B49` | 見出し・本文の濃いグレー | 3% | 画素の主要色に補正 | | `text-muted` | `#938B8A` | 注釈・小文字のグレー | 0% | 画素の主要色に補正 | | `accent-1` | `#B07A7A` | キーワード強調のダスティローズ | 0% | 推定 | | `accent-2` | `#B23A3A` | 提案文・数値強調の深紅 | 0% | 推定 | | `line` | `#C7C7C6` | カード内の区切り線・下線 | 0% | 画素の主要色に補正 | | `accent-3` | `#F4D6D9` | マーカー強調のピンク | 0% | 推定 | | `primary-accessible` | `#7D6969` | AA を満たす補正値（計算） | | 計算 | - 地は明るいグレー、カードは白にして、トーン差だけで面を分ける - 大セクション見出しはモーヴグレージュのグラデーション帯に白文字で入れる - 強調色はダスティローズと深紅に絞る。使うのは数語程度にする - 悩みリストだけはチャコールの帯にして、ページ全体の流れに緊張感をつける - 人物の言葉やメッセージはベージュ地にして温かさを出す - 原色や彩度の高い色は商品バリエーション写真の中だけで使う - `section-band` は文字 `#F6F0ED` × 背景 `#AB9B9B` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#7D6969`、4.54:1）を使う。 - `step-badge` は文字 `#F6F0ED` × 背景 `#AB9B9B` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#7D6969`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 26px | 1.6 | 0.15em | | `headline-lg` | 帯見出し（番号＋見出し） | ゴシック | Zen Kaku Gothic New | 500 | 19px | 1.5 | 0.15em | | `headline-md` | ステップカードの主見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.5 | 0.12em | | `headline-sm` | 提案文・引用見出し | 明朝 | Shippori Mincho | 600 | 20px | 1.7 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.05em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 商品名の欧文ラベル・番号 | 欧文サンセリフ | Montserrat | 500 | 20px | 1.2 | 0.05em | | `label-button` | ボタン・小バッジ | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em | - 字間を広め（0.1〜0.15em）にとって、静かな印象をつくる - 見出しは小さいリード行と大きい主見出しの 2 段にする - 本文の強調は太字に細い下線を組み合わせる - 提案文や物語的な一文は明朝体にする - 商品名は欧文の大文字にし、和名を縦書きで添える - 注釈は※付きの小さいグレー文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算） - ステップカードは画面幅の約 86% で中央に置き、背景写真をカード右下に溶け込ませる - カードの間は下向きシェブロンでつなぐ - 番号バッジはカードの上端にまたがるように配置する - バリエーションカードは全幅近い写真に、半透明の白パネルを重ねる - パネルと商品写真を左右交互に配置する - 帯見出しは端から端まで全幅にする ## Elevation & Depth - カードにはごく薄いドロップシャドウ（0 2px 8px rgba(0,0,0,.08)）をつける - 写真の上のパネルは白 80% 程度の半透明にする - 声の吹き出しは白地に細い枠を引き、影はつけない ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物と商品は四角く切り抜き、背景グラデーションになじませる。風景は横長の矩形にする - **セクション境界**: 直線で区切る。悩み見出しの下だけ下向き三角の切り込みを入れる - カードと帯は角丸なしの四角にする - 番号は円形バッジにする - CHECK などの小ラベルはピル型にする - 吹き出しは小さな角丸にし、大きな引用符を添える ## Components - **番号付き帯見出し**（`section-band`）: モーヴグレージュのグラデーション全幅帯。左に 2 桁番号と見出しを白文字で置く - **円形ステップ番号**（`step-badge`）: 直径約 45px のモーヴの円に白の 2 桁数字を入れ、カード上端にまたがらせる - **ステップカード**（`step-card`）: 白いカード。2 段見出しと区切り線の下に本文を置き、右下に商品写真を溶け込ませる - **お客様の声吹き出し**（`voice-bubble`）: ピンクグレージュ地の上に、白い吹き出しを左右にずらして 3 つ並べる - **風景バリエーションカード**（`variant-card`）: 風景写真の上に半透明の白パネルを重ね、欧文名・縦書き和名・説明を載せる - **チェック付き悩み帯**（`worry-list`）: チャコールの帯にチェックアイコンと白文字の悩みを入れ、4 本並べる - **価格ボックス**（`price-box`）: 白い箱に内容を■で箇条書きし、送料無料バッジと大きな価格を置く - **サブ購入ボタン**（`button-secondary`）: 白地に細枠。左にサムネイル、右に矢印を置いたリンクボタン - **小ラベル**（`label-pill`）: ダークのピル型ラベル。CHECK・おすすめなどの導入に使う ## Do's and Don'ts **Do** - 地色・カード・帯をグレー系の階調でまとめる - 見出しは字間を広くとり、2 段構成にする - バリエーションは自然風景の写真と組み合わせ、感覚的に伝える - 感性の訴求のあとに専門家コメントとグラフを置き、根拠を示す - 注釈を必ず添え、誠実さを保つ **Don't** - 鮮やかな原色のボタンや大きな赤い煽り表現を使わない - 角丸の大きいポップなカードにしない - 強調色を多用しない - 文字を詰めた窮屈な組版にしない - 影を濃くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と体験キットを提示する）: グレーのグラデーション背景に人物と商品を置き、鏡面の映り込みを入れる。左上にキャッチ、下に短い説明とキット写真を並べる 2. **4 ステップの流れ**（体験から継続までの流れを説明する）: 帯見出しの下に、番号バッジ付きの白カードを 4 枚、シェブロンでつなげて並べる 3. **お客様の声**（実感を伝える）: ステップ 3 のカード内に、ピンクグレージュ地と吹き出しを 3 つ入れる 4. **専門家の解説**（科学的な根拠を示す）: 明朝体の引用見出しを置き、本文と専門家の写真を並べる。下に 2 つのグラフを吹き出し見出し付きで配置する 5. **人物ビジュアル＋オファー**（キットの内容と価格を提示する）: 人物写真を挟み、光のボケ背景の上に半透明パネル、キット写真、価格ボックスを置く 6. **バリエーション紹介**（5 種類の違いを伝える）: 帯見出しの下に、風景カードを 5 枚、左右交互の配置で並べる 7. **香りの紹介**（付属品の魅力を伝える）: 帯見出しと導入文の下に、風景写真と番号名のカードを 4 枚並べる 8. **悩みの提起**（共感を得る）: CHECK ラベルと手書き風の見出しの下に、チャコール帯を 4 本並べる。続けて横顔イラストで肌の変化を示す 9. **解決提案**（ブランドの提案を示す）: 下向き三角の下に白パネルを置き、深紅の明朝体と下線で提案文を入れる 10. **再オファー・関連商品**（購入を後押しし、関連商品へ送客する）: 価格ボックスを再掲し、おすすめラベルとマーカー見出し、サブボタンを置く 11. **メッセージ**（人物の言葉で余韻を残す）: 帯見出しの下にベージュ地の引用文を置き、続けて人物写真を入れる 12. **フッター**（規約などへの導線）: 雪の光のボケ写真の上に、小さなリンク一覧とコピーライトを置く ## Imagery - 人物は白い服で、グレーの無地背景でやわらかく微笑む。光は柔らかく、彩度は低めにする - 商品はすりガラス調の白いボトル。とろみのあるテクスチャーの雫やスプーンを添える - バリエーションは空・雲・雪・浜・雨粒などの自然風景で、名前を連想させる - 背景には水面や光のボケ写真を使い、白い半透明パネルを重ねる - 悩みの説明は線画調の横顔イラストにし、肌悩みの位置を点線の円で示す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、SP を基準にした推奨とする - PC では本文の幅を最大 960px 程度で中央寄せにし、帯見出しは全幅のままにする - ステップカードは横 2 分割にし、テキストと写真を並べる - バリエーションカードは横長比率を保ったまま、最大幅 900px に収める - グラフ 2 点と悩み帯は PC で横並びや 2 列にしてよい ## 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-4437f2b1`（元 LP の URL から採番） - **元 LP**: https://chef-de-beaute.com/pages/lp-trylotion2604 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。