--- version: alpha name: Dusty Rose Glossy Cleansing Balm LP description: 淡いピンクの地にくすんだローズ色の帯や見出しを重ね、明朝の大見出しと透明感のある水滴・泡の写真で上品なツヤ感を出したスキンケア LP。成分は丸い泡バッジやカードで見せ、使い方セクションだけは濃いローズの地に白カードを置いて引き締めている。 colors: primary: '#B5615F' on-primary: '#FFF2ED' background: '#F2D2D5' background-alt: '#FDFCFC' surface: '#FEFEFE' text: '#4A3532' text-body: '#6A4A4D' accent-1: '#B7605E' dark-section: '#754644' tint-1: '#EEC8C6' tint-2: '#FFE3D8' line: '#DAC3C0' text-muted: '#8A7A78' primary-accessible: '#AF5553' accent-1-accessible: '#B15452' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.06em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 32px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 4px md: 10px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ingredient-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px feature-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 24px tab-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 26px ingredient-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 230px process-diagram: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px free-from-tags: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.label-button}' height: 22px worry-checklist: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.lg}' height: 260px solution-pointer: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px howto-step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 100px --- # DESIGN.md — くすみローズ×水玉ツヤ感のスキンケア LP（Dusty Rose Glossy Cleansing Balm LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、かわいい、清潔・爽やか - **キーワード**: くすみローズ・透明感・水滴・泡・明朝の大見出し・成分訴求・やわらかな光 - **地の質感**: ぼかした光とグロスのある水面・泡の写真。グラデーションのピンク地。 - **形**: 円形の成分バッジ、角丸カード、左上から斜めに切れたタブ見出し。 - **温度感**: 暖かめのピンク寄りで、柔らかく上品。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B5615F` | ブランドのくすみローズ（帯・タグ・使い方セクションの地） | 12% | 画素の実測 | | `on-primary` | `#FFF2ED` | ローズ地の上の白文字 | 2% | 画素の実測 | | `background` | `#F2D2D5` | 全体の淡いピンク地 | 25% | 画素の実測 | | `background-alt` | `#FDFCFC` | 明るい生成りピンク地 | 12% | 画素の実測 | | `surface` | `#FEFEFE` | カード・パネルの白 | 10% | 画素の実測 | | `text` | `#4A3532` | 見出しの濃いブラウン | 2% | 推定 | | `text-body` | `#6A4A4D` | 本文のグレーブラウン | 2% | 画素の実測 | | `accent-1` | `#B7605E` | 強調文字・チェック・番号のローズ | 1% | 画素の主要色に補正 | | `dark-section` | `#754644` | タブ見出しの濃いボルドーブラウン | 2% | 画素の主要色に補正 | | `tint-1` | `#EEC8C6` | 成分バッジの泡ピンク | 6% | 画素の主要色に補正 | | `tint-2` | `#FFE3D8` | 図解の肌色ピンク | 5% | 画素の実測 | | `line` | `#DAC3C0` | 無添加タグ・区切りの淡いグレー線 | 1% | 画素の主要色に補正 | | `text-muted` | `#8A7A78` | 注釈の薄いグレー | 1% | 推定 | | `primary-accessible` | `#AF5553` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#B15452` | AA を満たす補正値（計算） | | 計算 | - 地は淡いピンクのグラデーションを基本にし、セクションごとに明度を少し変えて区切る。 - 強調はくすみローズ一色に絞り、帯・タグ・タブ・チェックアイコンに使う。 - 見出しは黒ではなく濃いブラウンにして柔らかさを保つ。 - 使い方セクションのみローズを全面地にし、白カードを載せて変化をつける。 - 本文の一部はローズ色の太字で強調する。 - 鮮やかな原色や寒色は使わない。図解の緑は成分写真の中だけにする。 - `feature-tag` は文字 `#FFF2ED` × 背景 `#B5615F` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#AF5553`、4.52:1）を使う。 - `solution-pointer` は文字 `#FFF2ED` × 背景 `#B7605E` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B15452`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューと解決パートの特大キャッチ | 明朝 | Shippori Mincho | 600 | 56px | 1.2 | 0.05em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 500 | 36px | 1.3 | 0.08em | | `headline-md` | 中見出し・リード | 明朝 | Noto Serif JP | 500 | 22px | 1.5 | 0.06em | | `headline-sm` | 成分名のタブ・帯見出し | 明朝 | Noto Serif JP | 500 | 17px | 1.3 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.02em | | `accent` | 英字のセクションタイトル | 欧文サンセリフ | Montserrat | 300 | 32px | 1.2 | 0.02em | | `label-button` | 成分バッジ・タグの文字 | ゴシック | Noto Sans JP | 500 | 11px | 1.4 | 0.02em | - 見出しはすべて明朝。キーワードだけ 1.5〜2 倍に大きくしてジャンプ率をつける。 - 本文はゴシックの細めで、重要語だけ太字かローズ色にする。 - 英字見出しは細いサンセリフにし、下に罫線付きの小さな和文サブを添える。 - 成分バッジの中は 2〜3 行の中央揃え。効能は山括弧で小さく添える。 - 注釈は※を付けて本文の下に小さく置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分カードは 2 列、図解は 3 列、無添加タグは 4 列。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は端まで広げる。テキストブロックは左右 6% の余白を取る。 - 見出しは中央か左揃えで、写真と重ねて置く。 - 成分カードは写真の上にタブ見出し、下に説明の順に置く。 - 悩みリストは白い大きな角丸パネルにまとめる。 - セクション間はグラデーションで自然につなぐ。 ## Elevation & Depth - 白カードにはごく薄い影（0 2px 8px 程度の淡いローズ影）をつける。 - 成分バッジの泡は内側にハイライトを入れたグロス表現にする。 - それ以外はフラットにし、強い影は使わない。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸の四角か円で切り抜き、成分は円形の泡にする。 - **セクション境界**: ぼかしグラデーションで切り替え、一部はゆるい曲線にする。 - 成分タブは左から右へ薄くなるグラデーションの帯にする。 - 強調タグは小さな角丸（4px）のローズ地に白文字。 - 解決への誘導には下向き三角の吹き出しを使う。 - 円形のイラスト枠に小さな丸バッジを重ねる。 ## Components - **成分の泡バッジ**（`ingredient-bubble`）: ピンクのグロス球体の中に成分名と効能を 2〜3 行で入れる。少しずつずらして並べる。 - **特長タグ**（`feature-tag`）: 小さなアイコン付きの短い特長を、ローズ地に白文字で横に並べる。 - **グラデーションのタブ見出し**（`tab-heading`）: 濃いボルドーから透明へ抜ける帯に明朝の白文字を載せる。成分カードの上部に使う。 - **成分カード**（`ingredient-card`）: 成分の写真の下端に白い小ラベルを重ね、その下に強調入りの説明文と注釈を置く。 - **3 ステップ図解**（`process-diagram`）: 白パネルに番号付きの肌断面イラストを 3 つ並べ、山括弧でつなぐ。下にローズ地の成分タグを置く。 - **無添加タグ群**（`free-from-tags`）: ローズの見出し帯の下に、白地に細枠の四角タグを 4 列 × 2 行で並べる。 - **悩みチェックリスト**（`worry-checklist`）: 白い大きな角丸パネルに、ローズの丸チェックと区切り線で悩みを 4 つ並べる。 - **解決への吹き出し**（`solution-pointer`）: ローズ地の小さな五角形の吹き出しで、次の写真パートへ視線を誘導する。 - **使い方ステップカード**（`howto-step-card`）: ローズ地の上の白カード。左に線画イラストと細い番号、右に手順文を置く。 ## Do's and Don'ts **Do** - 地は淡いピンクのグラデーションにし、ぼかした光の玉を散らす。 - 見出しは明朝で大きく、キーワードを特大にする。 - 成分は泡や雫の写真・球体バッジで透明感を出す。 - 強調色はくすみローズ 1 色に絞る。 - 注釈は※付きの小さな文字で必ず添える。 **Don't** - 純黒の文字や彩度の高い原色を使わない。 - 太いゴシックの見出しにしない。 - 影の強いカードや立体的なボタンにしない。 - 直線的で硬いセクション区切りを多用しない。 - 1 画面に強調色を何色も混ぜない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とベネフィットを一目で伝える）: 目を閉じた女性の写真に、縦書きの小見出しと明朝の特大キャッチを重ねる。成分の泡バッジ 4 つ、特長タグ、ロゴと商品名を置く。 2. **商品コンセプト**（独自の処方バランスを示す）: 水しぶきの球体に包まれた商品写真。2 語を×でつないだ白帯の見出しと大見出しを置き、短い説明を添える。 3. **色・香りの特長**（使い心地の魅力を補足する）: ローズのグラデーション帯見出しの下に、果物やハーブの写真と説明文を左右に並べる。 4. **主要成分**（成分ごとの効果を説明する）: 笑顔の女性の写真に見出しを重ねる。その下に、タブ見出し付きの成分カードを 2 列 × 2 段で並べる。 5. **保湿成分**（配合成分の豊富さを示す）: 左に明朝の見出し（キーワードにマーカー下線）、右に泡バッジを 3 列 × 2 段で置く。 6. **毛穴ケアの仕組み**（汚れが落ちる仕組みを図で見せる）: 白パネルに 3 ステップの肌断面イラストを並べ、その下にローズ地の成分タグを置く。 7. **無添加処方**（敏感肌への安心感を伝える）: ローズの帯見出しの下に白枠のタグを 8 つ並べる。 8. **悩みの提起**（読み手の悩みに共感する）: 白い角丸パネルにチェック付きの悩み 4 つを並べ、下向きの吹き出しで次へつなぐ。 9. **解決**（悩みを一気に解決できると印象づける）: 笑顔の女性と開けた商品の写真に、明朝の特大 2 文字を重ねる。 10. **使い方**（使う手順を示す）: ローズ地に細い英字タイトルを置き、線画付きの白いステップカードを 2 枚並べる。 11. **応用の使い方**（部分ケアや男性にも使えると伝える）: 濃色の帯見出しと説明文の横に、円形のイラスト枠と小さな丸バッジを置く。 12. **締めのメッセージ**（ブランドの余韻を残す）: 淡いピンクの布地の上に商品写真を置き、明朝 3 行のメッセージとロゴを添える。 ## Imagery - 女性モデルは素肌感のある柔らかい光で撮る。目を閉じた表情や頬に手を添えた笑顔にする。 - 商品はピンクの水しぶきや泡、布の上に置き、ハイキーで撮る。 - 成分は雫・スポイト・泡のマクロ写真で、透明感を強調する。 - 背景にはボケた光の玉や半透明の泡を散らす。 - 図解や手順は細い線画のイラストにし、ピンクの差し色だけを使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、PC では中央に幅 750px 前後のカラムを置き、左右は淡いピンクのグラデーションで埋めることを推奨。 - 成分カードは PC で 4 列にしてもよい。 - ファーストビューは写真を横長にし、キャッチは左に寄せる。 - 文字サイズは SP の 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-0da8190b`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/8tail0358/c91b5fea54644b529e51c94251cb49c1/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。