--- version: alpha name: Pearl Gray Rose Mincho Anti-Aging Skincare LP description: 淡いパールグレーと白大理石の地に、くすみローズと砂金色を差し色として使う薬用エイジングケア美容液の LP。縦書きの大きな明朝コピー、丸いメダリオン型の効能バッジ、黒ボトルの物撮り、女性モデルの写真を交互に並べ、上品な訴求を長く続ける構成。 colors: primary: '#C4505A' cta: '#D32323' on-cta: '#FEFEFE' secondary: '#BC9D73' background: '#FEFFFF' background-alt: '#DCDFE4' tint-1: '#FFEFF0' dark-section: '#0D0D0D' on-dark: '#D9B98E' text: '#131417' text-body: '#6E6A6B' line: '#AB9F9F' accent-1: '#F0E5DF' surface: '#FEFEFE' primary-accessible: '#C34E58' secondary-accessible: '#8F6F44' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.06em headline-md: fontFamily: Noto Serif JP fontSize: 26px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 14px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.12em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 2px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 24px 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.sm}' height: 64px badge-medallion: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px label-band-rose: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 32px label-band-gold: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 30px laurel-stat: textColor: '{colors.secondary}' typography: '{typography.display}' height: 140px ingredient-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 600px bracket-profile: textColor: '{colors.text-body}' typography: '{typography.note}' height: 180px price-box: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.display}' height: 200px --- # DESIGN.md — パールグレー×くすみローズの明朝エイジングケア LP（Pearl Gray Rose Mincho Anti-Aging Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: パールグレー・くすみローズ・縦書き明朝・白大理石・黒ボトル・メダリオン - **地の質感**: ボケ光や水滴がにじむ淡いグレーの写真背景と白大理石の紙面。ところどころに漆黒の帯を入れて引き締める - **形**: 円形の効能バッジ、細い線のリング、角の小さい矩形ラベル、角丸カードは右上だけ大きく丸める - **温度感**: ややクールなグレーの地に、ローズとゴールドで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C4505A` | くすみローズ。強調文字・ラベル帯に使う | 4% | 推定 | | `cta` | `#D32323` | 購入ボタン用の赤 | 1% | 画素の実測 | | `on-cta` | `#FEFEFE` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#BC9D73` | 砂金色。ラベル帯・月桂樹の装飾・枠に使う | 4% | 画素の実測 | | `background` | `#FEFFFF` | 白大理石／白の地 | 30% | 画素の実測 | | `background-alt` | `#DCDFE4` | パールグレーのセクション地 | 18% | 画素の実測 | | `tint-1` | `#FFEFF0` | 淡いピンクのセクション地 | 6% | 画素の実測 | | `dark-section` | `#0D0D0D` | 漆黒の悩みを深掘りするセクション | 6% | 画素の実測 | | `on-dark` | `#D9B98E` | 黒地の上に置くシャンパンゴールドの文字 | 0% | 推定 | | `text` | `#131417` | 見出しの墨色 | 2% | 画素の主要色に補正 | | `text-body` | `#6E6A6B` | 本文のグレー | 2% | 推定 | | `line` | `#AB9F9F` | 細い罫線と括弧枠 | 0% | 画素の実測 | | `accent-1` | `#F0E5DF` | ピンクベージュの効能リング・イラスト面 | 3% | 画素の実測 | | `surface` | `#FEFEFE` | 影付きの白カード | 10% | 画素の実測 | | `primary-accessible` | `#C34E58` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#8F6F44` | AA を満たす補正値（計算） | | 計算 | - 地はパールグレーと白大理石を交互に使う。悩みの深掘り 1 か所だけを漆黒にする - 強調語はくすみローズの文字か、ローズの帯に白抜き文字で示す - 砂金色はラベル帯・月桂樹・権威表示に限って使う - 鮮やかな赤は購入ボタンにだけ使う - 黒地では見出しをシャンパンゴールドにし、ゴールドの下線を添える - 本文はグレーにし、強調部分だけローズにする - `badge-medallion` は文字 `#C4505A` × 背景 `#FEFEFE` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C34E58`、4.58:1）を使う。 - `label-band-rose` は文字 `#FEFEFE` × 背景 `#C4505A` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C34E58`、4.58:1）を使う。 - `label-band-gold` は文字 `#FEFEFE` × 背景 `#BC9D73` のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#8F6F44`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と写真上に置く縦書きの大コピー | 明朝 | Shippori Mincho | 600 | 56px | 1.1 | 0.02em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 600 | 30px | 1.4 | 0.06em | | `headline-md` | 成分名・カード見出し | 明朝 | Noto Serif JP | 500 | 26px | 1.4 | 0.08em | | `headline-sm` | 帯ラベル・リード文 | ゴシック | Zen Kaku Gothic New | 500 | 16px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 400 | 15px | 1.9 | 0.1em | | `note` | ※印の注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `accent` | 欧文の小見出し（Makeup Advisor、Comment など） | 欧文サンセリフ | Montserrat | 400 | 14px | 1.3 | 0.12em | | `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.2 | 0.08em | - キャッチは明朝の縦書きにし、写真の左右に寄せる - 見出しは明朝、本文はゴシックで分ける - 見出しの中で強調語だけを 1.3 倍に大きくし、ローズにする - 字間を広めに取り、静かで上品な印象を保つ - ※注釈は 8px 前後の小さな字でブロック下にまとめる - 数字の実績は明朝の特大サイズを砂金色のグラデーションにし、月桂樹で挟む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分アイコンだけ 3〜4 列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は全幅で大きく見せ、文字を重ねる - 成分の解説は左に縦の罫線を引き、右寄せのインデントで本文を置く - 白カードは左に寄せ、右側に少し余白を残す - 人物紹介は四隅の括弧枠で囲む - 効能バッジは 4 つの円を横一列に並べる ## Elevation & Depth - 白カードはぼかしの大きい薄い灰色の影（0 8px 24px rgba(0,0,0,.08)） - 商品ボトルは床に柔らかい落ち影を落とす - 円形バッジは影なしにし、細いリングで縁取る ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は全幅の矩形。成分素材は正円、季節写真は角丸 4px - **セクション境界**: 主に直線。黒セクションの前に斜めカットや V 字の切り込みを入れる - ラベル帯は角丸なしか 2px の矩形 - 大きいカードは右上の角だけ大きく丸める - 効能は白い円に細いローズのリング - 購入ボタンは角丸 4px 程度の矩形 ## Components - **購入 CTA ボタン**（`button-primary`）: 幅いっぱいの赤い矩形ボタン。白太字の文言に下向き三角を添える - **効能メダリオン**（`badge-medallion`）: 白い円にローズの細いリング。明朝のローズ文字で効能を 2 行で書く - **ローズのラベル帯**（`label-band-rose`）: 強調語を白抜きにする矩形の帯。縦書きのコピーの中にも差し込む - **砂金色のラベル帯**（`label-band-gold`）: 成分名や権威の前置きに使う金の帯 - **月桂樹付きの実績表示**（`laurel-stat`）: 金の月桂樹で左右を挟み、特大の明朝数字を置く - **番号付き成分カード**（`ingredient-card`）: 上に素材写真、次にローズの大きな明朝番号と成分名、効能タグ、左罫線付きの本文を並べる - **括弧枠プロフィール**（`bracket-profile`）: 四隅の角括弧で囲み、肩書きと名前を明朝で書いて経歴を小さく添える - **価格ボックス**（`price-box`）: 罫線の枠で内訳を並べ、打ち消し線の合計価格、特大明朝のセット価格、赤丸の送料無料バッジを置く ## Do's and Don'ts **Do** - 縦書きの明朝コピーを写真の余白に置く - 効能は 4 つの円バッジで繰り返し見せる - 成分素材は円で切り抜き、グリッドに並べる - 強調語はローズの帯か文字色で統一する - 訴求ごとに※注釈を小さく添える **Don't** - ビビッドな原色を地に使わない - 丸ゴシックやポップな書体を使わない - 角丸を大きくしたピル型のボタンにしない - 黒地のセクションを何度も繰り返さない - ゴールドを本文の色に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新規性と効能を一目で伝える）: グレーのボケ光を背景に黒ボトルを置き、左に縦書きの大明朝コピー、下に成分のリングバッジを 2 つ並べる 2. **商品セットと価格**（購入へ早めに誘導する）: 金の地の上に白大理石のカードを置き、3 品の物撮りと価格ボックス、赤い CTA を入れる 3. **コンセプト訴求**（独自の配合を印象づける）: 特大の明朝見出しの下に成分リングを並べ、縦書きコピーとモデル写真に効能円を縦に並べる 4. **実績**（信頼を補強する）: 月桂樹で挟んだ金の特大数字を 2 段で見せる 5. **ブランド背景と製品ライン**（開発の経緯を伝える）: 金の帯の下にハイライト見出しを置き、製品群の物撮りを並べる 6. **専門家の推薦**（第三者の評価を示す）: ピンクの地に人物写真、ローズの帯、大きなカギ括弧のコメント、括弧枠のプロフィールを置く 7. **悩みの提起**（共感を得る）: グレー地にモデルの横顔を置き、ダッシュで始まる縦書きの悩みを 4 行並べる 8. **原因の解説**（問題を深掘りする）: 黒地にゴールドの見出しを置き、ベージュの肌断面図と灰色の吹き出し注記を入れる 9. **解決策と成分概要**（1 本で済むことを示す）: 大理石の地に効能円 4 つと黒ボトルを置き、成分を円写真のグリッドで見せる 10. **成分詳細**（根拠を説明する）: 番号付きの白カードを縦に積み、カプセルの図解は金ラベルと点線で引き出す 11. **メディア出演者の推薦**（権威付けをする）: ローズの明朝見出しを置き、右上を角丸にした写真に縦書きの帯コメントを重ねる 12. **追加成分と香り**（付加価値を伝える）: 植物の円写真を 4 列のグリッドにし、香りはピラミッド図と引用符で見せる 13. **締めのビジュアルと店舗実績**（余韻と信頼を残す）: モデル写真に縦書きコピーを重ね、ポップアップストアの写真コラージュにローズの縦長パネルを重ねる ## Imagery - 30〜40 代の女性モデルを白い衣装で撮る。素肌感のある艶と柔らかい拡散光 - 黒いマットなボトルを淡いグレーの背景で撮る。ボケた光の玉と水泡を添える - 成分素材（テクスチャ、水、オイル、花）のマクロ写真を正円で切り抜く - ピンクの細胞やカプセルを描いた透明感のある 3D イメージ図 - 背景には白大理石の柔らかな模様をうっすら敷く - 金の線で描いた月桂樹の装飾 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 750px 前後の SP レイアウトを置き、左右をグレーの地で埋める想定 - PC でも縦書きコピーと写真の重ね方は維持する - 成分グリッドは PC で 4〜6 列に広げる - 価格ボックスと CTA は最大幅 600px 程度に抑える ## 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-065ad275`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kobe-beauty-labo/wrf009/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。