--- version: alpha name: Dusty Rose and Charcoal Beauty Device LP description: チャコールの黒い帯とくすみローズの差し色、明朝体の大見出しで作る美容機器 LP。黒地と白地を交互に置き、モデル写真と製品写真を全幅で見せる。科学的な図解と実績の数字で信頼感を足す。 colors: primary: '#DB9595' dark-section: '#24242A' on-dark: '#FFFFFF' background: '#FFFFFF' background-alt: '#EAEDEF' text: '#303030' text-body: '#444650' text-muted: '#999999' secondary: '#A8956A' surface: '#FEFEFE' tint-1: '#FEFDFC' accent-1: '#3C72C4' line: '#DEE4E7' marker: '#6B6D75' primary-accessible: '#C45050' secondary-accessible: '#85744E' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Noto Serif JP fontSize: 32px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.12em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Cormorant Garamond fontSize: 14px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-label: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px whats-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 30px circle-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px laurel-stat: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.display}' height: 200px worry-list: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' height: 200px highlight-text: backgroundColor: '{colors.marker}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 22px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px step-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 28px contact-button: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px --- # DESIGN.md — くすみローズ×チャコールの美顔器 LP（Dusty Rose and Charcoal Beauty Device LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: 上品・高級、クール・先進的、情報量多め・訴求型 - **キーワード**: くすみローズ・チャコール・明朝の大見出し・全幅のモデル写真・図解・月桂冠の実績表示 - **地の質感**: マットな黒地に紫や青の発光グラデーションをのせる。白地は薄いグレーのグラデーションで透明感を出す。 - **形**: 矩形が基本。ラベルは角丸の小さい帯にする。特長の言葉は白い円バッジで見せる。 - **温度感**: 黒とグレーで涼しくまとめ、ローズで温かみを少し足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DB9595` | ラベル帯・強調文字のくすみローズ | 5% | 画素の実測 | | `dark-section` | `#24242A` | 黒い帯セクションの地 | 22% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地の上の白文字 | 3% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 29% | 画素の実測 | | `background-alt` | `#EAEDEF` | 薄いグレーブルーのセクション地 | 10% | 画素の主要色に補正 | | `text` | `#303030` | 見出しの墨色 | 3% | 画素の実測 | | `text-body` | `#444650` | 本文のダークグレー | 3% | 画素の主要色に補正 | | `text-muted` | `#999999` | 注釈・英字ラベルのグレー | 1% | 画素の実測 | | `secondary` | `#A8956A` | 実績表示のオリーブゴールド | 2% | 推定 | | `surface` | `#FEFEFE` | グレー地の上の白カード | 6% | 画素の実測 | | `tint-1` | `#FEFDFC` | 淡いピンクベージュの帯 | 4% | 画素の実測 | | `accent-1` | `#3C72C4` | 光LEDを示す青のマーカー | 1% | 画素の実測 | | `line` | `#DEE4E7` | 区切り線・枠線 | 1% | 画素の主要色に補正 | | `marker` | `#6B6D75` | 黒地本文の灰色ハイライト | 1% | 推定 | | `primary-accessible` | `#C45050` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#85744E` | AA を満たす補正値（計算） | | 計算 | - 白地とチャコールの黒帯を交互に置き、セクションのリズムを作る - ローズは POINT ラベル、What's ラベル、強調文字だけに使う - 実績や受賞の表示にはオリーブゴールドの月桂冠を使う - 黒地の本文で強調したい部分は、灰色の帯ハイライトで示す - LED の説明だけ青を差し色にし、他の場所では使わない - グレー地の上には白カードをのせ、情報をまとめる - `whats-label` は文字 `#FFFFFF` × 背景 `#DB9595` のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C45050`、4.55:1）を使う。 - `laurel-stat` は文字 `#A8956A` × 背景 `#FFFFFF` のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#85744E`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真に重ねるコピー・大見出し | 明朝 | Shippori Mincho | 500 | 44px | 1.3 | 0.08em | | `headline-lg` | セクションの見出し | 明朝 | Noto Serif JP | 500 | 32px | 1.4 | 0.1em | | `headline-md` | サブ見出し・リード | ゴシック | Noto Sans JP | 400 | 20px | 1.6 | 0.12em | | `headline-sm` | Q&A・カードの見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `accent` | 英字の小見出し（POINT・EVENT など）・数字 | 欧文セリフ | Cormorant Garamond | 500 | 14px | 1.2 | 0.2em | | `label-button` | ラベル帯・ボタン | ゴシック | Noto Sans JP | 500 | 15px | 1.4 | 0.1em | - 大見出しは明朝体にし、字間を広めにとる - 見出しの中のキーワードや数字だけ、1.5〜2 倍に大きくする - 英字のセリフ体の小見出しを和文見出しの上に添える - 本文はゴシック体の細めの字で、行間を広めにとる - 強調語はローズの太字にする - ※注釈は小さいグレー文字で右寄せか下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。機能紹介は写真とテキストを左右交互に並べる 2 分割 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は端末幅いっぱいに配置する - 見出しは中央揃え、本文は左揃えにする - セクションの冒頭に POINT 番号のラベル帯を置く - 図解は白カードに収める - 実績の数字は月桂冠で挟んで中央に置く ## Elevation & Depth - 影はほぼ使わずフラットにする - 白カードには薄い影かグレーの地との差で浮かせる - 製品写真には発光グラデーションで奥行きを出す ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 矩形で全幅、または 2 分割の正方形に近い形で切り抜く。製品のみ白い円で見せることもある - **セクション境界**: 直線で切り替える。悩みセクションの下端だけ V 字の矢印形にする - ラベル帯は角丸の小さい矩形にする - 特長キーワードは白い円バッジにする - 黒地から次の写真へは縦線と丸点でつなぐ ## Components - **POINT ラベル帯**（`point-label`）: ローズの帯の中に、英字セリフの番号と短い機能名を白で入れる - **What's ラベル**（`whats-label`）: 用語の説明ボックスの上端に重ねる小さいローズの帯 - **特長の円バッジ**（`circle-badge`）: 白や淡いグレーの円の中に、2〜4 文字の特長語を 3〜5 個並べる - **月桂冠の実績数字**（`laurel-stat`）: ゴールドの月桂冠で巨大な数字を挟み、上に小さい説明を添える - **悩みのチェックリスト**（`worry-list`）: 黒地にチェックボックスのアイコンと悩みを 4 行並べる。強調語はローズにし、行の間に細線を入れる - **帯ハイライト本文**（`highlight-text`）: 黒地の本文の一部に灰色の帯を敷いて強調する - **Q&A**（`faq-item`）: 黒丸の Q とローズ丸の A を並べたアイコン付きの質問行 - **使い方ステップ**（`step-card`）: 黒い見出し帯に丸数字と手順名を入れ、写真と太字の説明を続ける 2 列グリッド - **問い合わせボタン**（`contact-button`）: ローズの全幅帯に白の太字 ## Do's and Don'ts **Do** - 見出しは明朝体にし、キーワードを大きくしてメリハリを出す - 黒帯と白地を交互に置き、高級感とリズムを保つ - 機能ごとに POINT ラベル、見出し、全幅写真、図解の順で構成する - 数値の根拠や※注釈を必ず添える - 写真のコピーは白の明朝体で大きく重ねる **Don't** - ビビッドな赤や黄色の CTA を使わない - ポップな丸ゴシックや手書き文字を使わない - 大きい角丸のカードやピル型のボタンを多用しない - ローズを広い面に使わない - 白地のまま写真のない区間を長く続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（モデルと製品で第一印象をつかむ）: モデル写真を斜めに分割して配置し、黒地に発光する製品写真を置く。ロゴと円バッジ 3 つ、保証の帯を続ける 2. **ビフォーアフター**（効果を実感させる）: 黒の見出し帯の後に、肌のアップ写真を BEFORE 1 枚、AFTER 2 枚並べる 3. **正規品の証明**（安心感を与える）: ローズの見出し帯付きの白カードに証書の写真と注意喚起を入れる 4. **イベント・アンバサダー**（話題性を伝える）: 黒帯に英字ラベルと明朝の見出しを置き、写真とコメントボックス、プロフィールの枠を続ける 5. **受賞・メディア実績**（社会的な証明）: 月桂冠の大きな数字、ランキングの画像、雑誌の表紙カードで構成する 6. **専門家の声**（第三者からの信頼）: 人物写真と肩書きを置き、ローズの見出し帯付きのインタビュー文を 3 段続ける 7. **数字の実績**（実績を数字で示す）: ゴールドの月桂冠で出荷台数、評価、満足度を示す 8. **悩みの提起**（共感を得る）: 顔のアップ写真に問いかけを重ね、黒地のチェックリストを置く。下端は V 字にする 9. **3 つのアプローチ**（解決策の全体像を示す）: 全幅写真 3 枚に大きな明朝のコピーを重ねる 10. **特長 POINT01〜04**（機能を詳しく説明する）: ラベル帯、見出し、全幅写真、図解カード、写真へのコピー重ねの流れを繰り返す 11. **こだわりの機能性**（使いやすさを訴求する）: 写真と黒地の説明ブロックを交互に並べるチェッカー型のグリッド 12. **セット内容・使い方**（購入前の不安を解消する）: 製品一式の写真、点線のリーダー付きのリスト、番号付きの 2 列ステップ 13. **よくある質問**（疑問を解消する）: Q と A のアイコン付きの縦並びリスト 14. **サポート・保証**（購入後の安心を伝える）: ローズ地に月桂冠の保証バナーを置き、問い合わせの帯を続ける ## Imagery - 女性モデルが製品を装着したアップ写真。明るい肌と黒い背景のコントラストで撮る - 製品は黒い背景に置き、青や紫の発光や波形のエフェクトを合成する - 仕組みは 3D の断面図、ワイヤーフレームの顔、スペクトル図など理系の図解で見せる - 写真の下端や側面には白の明朝体の大きなコピーを重ねる - 受賞はゴールドの月桂冠のイラストで表す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版は提供されていないため、以下は推奨。PC では中央 750px 前後の 1 カラムを保ち、左右に背景色を敷く - 全幅写真はカラム幅で表示する - 機能のグリッドや使い方のステップは、PC では 3〜4 列に広げてもよい - 見出しサイズは 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-c16757a5`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/nissoplus/np-qn25/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。