--- version: alpha name: Lavender Bubble Oral Care Device LP description: 淡いラベンダーと白を地にして、くすんだ紫の帯と濃紺の見出しで構成した美容家電のLP。透明な泡や水しぶきの写真、数値の大きな見せ方、黄緑のマーカーを組み合わせ、清潔感と科学的な説得力の両方を出している。 colors: primary: '#8C85C0' secondary: '#494A80' text: '#464674' text-body: '#55557A' background: '#FFFFFE' background-alt: '#EDECFA' tint-1: '#B2B3E3' surface: '#DFE0E9' marker: '#EBFD9B' on-dark: '#FCFEFF' line: '#72638E' accent-1: '#B3B3E4' primary-accessible: '#746CB3' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em accent: fontFamily: Montserrat fontSize: 16px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.15em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 0px full: 999px spacing: unit: 8px card: 18px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 34px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 48px circle-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 130px point-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 80px feature-split: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 220px price-block: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 80px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px button-outline: textColor: '{colors.text}' height: 30px --- # DESIGN.md — ラベンダー×白の泡感オーラルケア機器LP（Lavender Bubble Oral Care Device LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: 清潔・爽やか、上品・高級、信頼・誠実、情報量多め・訴求型 - **キーワード**: ラベンダー・微細な泡・水しぶき・数値訴求・清潔感・美容×健康 - **地の質感**: 泡や水滴が浮かぶ透明感のある写真と、メタリックな銀のグラデーション面 - **形**: 角丸なしの四角い帯と枠、数値や効能を入れる円形バッジ - **温度感**: やや寒色寄りで、落ち着いた涼しさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8C85C0` | ブランドを表すくすみ紫。帯や見出し背景に使う | 12% | 画素の主要色に補正 | | `secondary` | `#494A80` | 濃い紫紺。グラフや AFTER ラベルに使う | 2% | 画素の実測 | | `text` | `#464674` | 見出しの濃紺文字 | 3% | 画素の実測 | | `text-body` | `#55557A` | 本文のグレー紫 | 2% | 推定 | | `background` | `#FFFFFE` | 基本の白地 | 24% | 画素の実測 | | `background-alt` | `#EDECFA` | 淡いラベンダーのセクション地 | 18% | 画素の実測 | | `tint-1` | `#B2B3E3` | 使い方セクションの明るい藤色地 | 7% | 画素の実測 | | `surface` | `#DFE0E9` | 銀グレーのメタリック面 | 9% | 画素の主要色に補正 | | `marker` | `#EBFD9B` | 文字下の黄緑マーカー | 1% | 画素の実測 | | `on-dark` | `#FCFEFF` | 紫の帯の上の白文字 | 2% | 画素の実測 | | `line` | `#72638E` | カードの枠線や区切り線 | 1% | 画素の主要色に補正 | | `accent-1` | `#B3B3E4` | Q&A の A アイコンなどに使う淡い紫 | 0% | 画素の実測 | | `primary-accessible` | `#746CB3` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡いラベンダー・銀グレーを交互に使い、セクションの区切りを色で示す - 強調の帯やラベルはくすみ紫に白抜き文字にする - 見出しと数値は濃紺。純粋な黒は使わない - 黄緑のマーカーはキーフレーズの下半分だけに引く - 比較では『なし』を淡い紫、『あり』を濃い紫紺にして差を見せる - 暖色は歯茎の写真以外には使わない - `label-band` は文字 `#FCFEFF` × 背景 `#8C85C0` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#746CB3`、4.57:1）を使う。 - `point-tag` は文字 `#FCFEFF` × 背景 `#8C85C0` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#746CB3`、4.57:1）を使う。 - `feature-split` は文字 `#FCFEFF` × 背景 `#8C85C0` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#746CB3`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | 明朝 | Shippori Mincho | 500 | 34px | 1.5 | 0.08em | | `headline-lg` | セクションの主見出し | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.4 | 0.08em | | `headline-md` | 見出しの上に置く小見出し・リード | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.5 | 0.08em | | `accent` | 英字のセクションラベルや大きな数値 | 欧文サンセリフ | Montserrat | 500 | 16px | 1.2 | 0.15em | | `body-md` | 本文・口コミ・Q&A | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.05em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `headline-sm` | カード見出しや Q の質問文 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.05em | - 見出しの中の助詞（の・も・で）は 6 割程度の大きさに落とし、要語を目立たせる - 数値は Montserrat で本文の 3〜4 倍に、単位は小さくする - 英字のラベルは大文字にして字間を広くとる - 見出しはどれも字間 0.08em 以上で広めにする - ※の注釈は小さく、本文より淡い色にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。機能紹介は写真と文字の 2 分割、または 2 列カード - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 18px（375px 幅換算） - 写真は画面幅いっぱいか、左右に 5% の余白を残して置く - 見出しは中央揃え、本文は左揃えにする - セクションの最後に注釈ブロックを置く - 英字を縦に配置して透かしの装飾にする - 数値は円グラフと 2 段の数値リストで並べる ## Elevation & Depth - 影はほとんど使わない平面的な構成にする - 円形バッジにだけ、ごく弱いぼかし影とメタリックなグラデーションを付ける - 奥行きは写真の透明感で出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は四角形で切り抜き、要所に円形のバッジやアイコンを重ねる - **セクション境界**: 背景色を直線で切り替える - カードとラベルは角丸なしの四角にする - 効能や数値は白〜銀の円形バッジに入れる - 部位のラベルは角丸の大きな紫のタブにしてもよい - 枠は 1px の細い線にする ## Components - **紫の帯ラベル**（`label-band`）: 見出しの一部や部位名を、紫の四角い帯に白抜きで入れる - **マーカー見出し**（`marker-heading`）: 主見出しの下半分に黄緑のマーカーを引く - **円形の効能バッジ**（`circle-badge`）: 白〜銀のグラデーションの円に、効能や数値を 2 行で入れる - **口コミカード**（`voice-card`）: 細い枠のカード。枠の上に VOICE と大きな細い番号を載せ、文中にマーカーを引く - **POINT 番号ブロック**（`point-tag`）: 上半分が紫、下半分が白の正方形に、POINT と番号とアイコンを入れる - **機能紹介の分割カード**（`feature-split`）: 左に写真、右に紫地でアイコン・見出し・説明を置く - **価格表示**（`price-block`）: 濃紺の四角に送料無料などのバッジを入れ、横に大きな細い数字の価格を置く。下に保証の枠を付ける - **Q&A**（`faq-item`）: Q は濃紺の丸、A は淡い紫の丸。項目の間は細線で区切る - **詳細へのリンクボタン**（`button-outline`）: 細い枠と山括弧の矢印を付けた、小さな四角いボタン ## Do's and Don'ts **Do** - 泡や水しぶきの写真で、透明感と清潔感を出す - 効果は大きな数値と円グラフ・棒グラフで見せ、すぐ近くに注釈を添える - セクションの頭に英字の大文字ラベルを細い字で置く - 比較はなし／ありを色の濃淡で対にする - 紫の濃淡だけで階層を作る **Don't** - 赤やオレンジのボタン、派手な原色を入れない - 角丸の大きなポップなカードにしない - 太い影や立体的なボタンを使わない - 明朝体を本文に使わない（明朝はキャッチだけ） - 黄緑のマーカーを面の塗りに広げない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（製品の独自性と専門家の推奨を一目で伝える）: 紫の泡の写真の上に、明朝のキャッチと製品写真、円形バッジを置く。下に数値の帯を付ける 2. **技術の紹介**（核となる技術を短く伝える）: 紫地に細い線の枠と英字ラベル、白抜きの見出しとマーカーを置き、続けてイメージ写真を入れる 3. **副次効果**（もう一つの効果を数値で見せる）: 人物写真に、帯ラベルの見出しと数値の円形バッジを重ねる 4. **専門家の推奨**（信頼を得る）: 人物の切り抜き写真と肩書きの一覧を並べ、下の紫帯にコメントを入れる 5. **満足度データ**（実感の数値を示す）: 円グラフと 2 段の数値リストを置き、横に製品写真を並べる 6. **お客様の声**（使用感を伝える）: 番号付きの枠カードを 3 枚並べ、文中にマーカーを引く 7. **悩みの提起**（磨き残しの課題を見せる）: 銀の地に、部位を写した円形の写真 3 枚と、チェック付きの悩み 4 つを紫の枠で並べる 8. **特長**（仕組みと効果を説明する）: POINT ブロック、サイズ比較の円、棒グラフ、ビフォーアフターで構成する 9. **ブランドの思い**（情緒的な価値を伝える）: 淡い紫の地に詩的なコピーを置き、ポートレートに縦書きの英字を重ねる 10. **使いやすさ**（仕様のメリットを伝える）: 写真と紫地を左右に分けたカードと、2 列カードで見せる 11. **カラー展開・価格**（購入の判断材料を出す）: 色違いの製品写真に英字のラベルを付け、ロゴ・パッケージ写真・大きな価格・保証の枠を続ける 12. **返金保証**（不安を取り除く）: 銀の地に白い見出しボックスを置き、問い合わせ先と枠線のボタンを並べる 13. **使い方**（手順を示す）: 藤色の地に白いカードを置き、大きな細い番号、線画のイラスト、POINT の枠を入れる 14. **よくある質問**（疑問を解消する）: 白地に Q と A の丸アイコンを置き、細線で区切って並べる ## Imagery - 紫の光を当てた背景に、微細な泡と水しぶきが舞う高速シャッター風の写真 - 白い製品を明るいグレーの地に置き、透明な円盤やガラス球を添えた静物写真 - 白〜銀の 3DCG の歯に、紫の汚れの粒が飛ぶ説明図 - 素肌感のある女性のポートレート。白シャツや淡い背景に合わせる - 使い方は細い線の単色線画で描く - アイコンは細い線で紫か白の単色にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP のレイアウトを幅約 37% の中央カラムにそのまま置く - PC の左右の余白には、紫の泡と水しぶきの写真を固定背景として敷き詰める - PC でも文字サイズや構成は変えず、カラムの比率を保つ - PC 専用の多カラムには組み直さない ## 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-bd4ec297`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kobe-beauty-labo/bea100/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。