--- version: alpha name: Sage and Amber Herbal Bath Product LP description: くすんだセージグリーンと琥珀オレンジを2種の商品に割り当てた入浴剤LP。湯気・泡・生薬の写真を全面に敷き、白抜きの細い明朝体で静かに語りかける。効能は角丸ラベルとドットリストで整理し、穏やかなバスタイムの空気感を保つ。 colors: primary: '#83A585' secondary: '#F2B35C' background: '#A59787' background-alt: '#E4EADC' accent-1: '#3E8A86' accent-2: '#CD7B54' cta: '#D3833C' on-cta: '#FFFFFF' on-dark: '#FAFAF5' text: '#3A3632' accent-3: '#C1865C' surface: '#F4F1EA' tint-1: '#CCE3D3' tint-2: '#E4955C' background-accessible: '#AA9D8E' primary-accessible: '#4C694E' accent-1-accessible: '#387E7A' cta-accessible: '#AB6527' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 10px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.15em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 2px md: 6px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 0px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' circle-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px effect-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 24px effect-list-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 90px column-frame: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 420px check-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 100px ingredient-strip: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 70px step-card: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 72px scent-pyramid: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 120px --- # DESIGN.md — セージ緑×琥珀色の和漢ハーブ入浴剤LP（Sage and Amber Herbal Bath Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: ナチュラル、上品・高級、やさしい・柔らかい、和風 - **キーワード**: 和漢ハーブ・湯気と泡・2色の対比・白抜き明朝・生薬の静物写真・温浴ケア - **地の質感**: 泡・水面・湯気のにじみがある写真をセクション背景に全面で使う。光が柔らかく、粒子感のあるしっとりした質感。 - **形**: 基本は直線で区切った全幅ブロック。丸い錠剤のモチーフ、円形バッジ、小さな角丸ラベルがアクセントになる。 - **温度感**: 緑は清涼、オレンジは温もり。全体はくすみ寄りの中間〜暖色。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#83A585` | 緑系商品のブランド色・セクション地 | 22% | 画素の主要色に補正 | | `secondary` | `#F2B35C` | オレンジ系商品の地色・温かさの表現 | 20% | 画素の実測 | | `background` | `#A59787` | PC時のコンテンツ外の背景 | 30% | 画素の主要色に補正 | | `background-alt` | `#E4EADC` | 悩み選択・香り紹介の淡いクリーム地 | 6% | 画素の実測 | | `accent-1` | `#3E8A86` | 緑商品の効能ラベル（くすんだティール） | 1% | 推定 | | `accent-2` | `#CD7B54` | オレンジ商品のラベル（テラコッタ） | 2% | 画素の実測 | | `cta` | `#D3833C` | 手順セクション帯・強調の焼きオレンジ | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | オレンジ帯上の白文字 | 0% | 推定 | | `on-dark` | `#FAFAF5` | 写真上の白抜き見出し | 2% | 推定 | | `text` | `#3A3632` | 淡い地の上の見出し・本文 | 2% | 推定 | | `accent-3` | `#C1865C` | オレンジ系の大見出し文字 | 1% | 画素の実測 | | `surface` | `#F4F1EA` | 効能リスト・成分帯の半透明白パネル | 3% | 推定 | | `tint-1` | `#CCE3D3` | 円形バッジの淡いミント | 0% | 画素の実測 | | `tint-2` | `#E4955C` | 円形バッジのサーモン | 0% | 画素の実測 | | `background-accessible` | `#AA9D8E` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#4C694E` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#387E7A` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#AB6527` | AA を満たす補正値（計算） | | 計算 | - 緑系とオレンジ系を2商品に1対1で割り当て、セクションごとに交互に切り替える - 背景は単色ではなく、その色味の写真やぼかしグラデーションで敷く - 写真上の見出しは白抜き＋薄い影で可読性を確保する - ラベルは緑商品＝くすんだティール、オレンジ商品＝テラコッタで色分けする - 淡いクリーム地は比較・香り紹介など情報整理セクションのみに使う - 彩度の高い原色や純黒は使わず、くすみトーンで統一する - `page` は文字 `#3A3632` × 背景 `#A59787` のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#AA9D8E`、4.52:1）を使う。 - `circle-badge` は文字 `#83A585` × 背景 `#CCE3D3` のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4C694E`、4.51:1）を使う。 - `effect-label` は文字 `#FAFAF5` × 背景 `#3E8A86` のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#387E7A`、4.52:1）を使う。 - `column-frame` は文字 `#FAFAF5` × 背景 `#83A585` のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4C694E`、4.55:1）を使う。 - `step-card` は文字 `#FFFFFF` × 背景 `#D3833C` のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AB6527`、4.54:1）を使う。 - `scent-pyramid` は文字 `#FAFAF5` × 背景 `#83A585` のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4C694E`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真上の大見出し（白抜き） | 明朝 | Shippori Mincho | 500 | 34px | 1.3 | 0.08em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 500 | 26px | 1.4 | 0.08em | | `headline-md` | 商品別の効能見出し・比較見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.05em | | `headline-sm` | 見出し上の小さなリード | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.5 | 0.1em | | `body-md` | 説明文・手順本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.05em | | `note` | 注釈・成分表記・イメージ注記 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0em | | `accent` | STEP表記・欧文の小ラベル | 欧文サンセリフ | Montserrat | 600 | 10px | 1.2 | 0.15em | | `label-button` | 効能ラベル・商品名ラベル | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.3 | 0.05em | - 情緒的な大見出しは細めの明朝、機能説明はゴシックで役割を分ける - 大見出しは2行に分けて中央揃えにする - 注釈記号（※）を見出し右肩に小さく付ける - 写真上の白文字は細いウェイトでも影を付けて沈ませない - 字間はやや広めにとり、静かな印象を保つ - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較・悩み選択は 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは隙間なく全幅写真ブロックを縦に積む - 各ブロックは上部に見出し、中央に主役写真、下部に情報パネルの順 - 2商品の比較は左右に緑／オレンジを並べる - 効能リストは半透明パネル内に3列のドットリストで詰める - 注釈は各ブロック最下部に小さく入れる ## Elevation & Depth - 影はほぼ使わず、写真の奥行きで立体感を出す - 情報パネルは白の半透明（不透明度80%前後）で背景写真を透かす - 白抜き文字に柔らかなドロップシャドウを付ける ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の矩形で切り抜き、錠剤や容器は切り抜き合成で配置する - **セクション境界**: 直線で切り替え。水面ラインや泡で上下をつなぐ場合もある - 特長のバッジは正円で3つ横並びにする - ラベルは角ほぼ直角の小さな帯にする - 香りのノートは三角形（ピラミッド）図で表す - 手順番号は白い正円に入れる ## Components - **円形特長バッジ**（`circle-badge`）: 半透明の正円に特長を2行で入れ、3つ横並びにする - **効能ラベル帯**（`effect-label`）: 商品色の帯に悩み・効能をスラッシュ区切りで白文字表示 - **効能ドットリストパネル**（`effect-list-panel`）: 半透明白パネルの左に丸い見出し、右に丸ドット付きの効能を3列で並べる - **コラム枠**（`column-frame`）: 緑写真の上に細い白枠のボックスを置き、線画イラストと本文を入れる - **悩みチェックリスト**（`check-list`）: チェックボックス記号付きの悩みを2列で並べ、左右で商品色を変える - **成分アイコン帯**（`ingredient-strip`）: 色帯の見出しの下に、生薬の小さな切り抜き写真と名称を7つ並べる - **手順カード**（`step-card`）: オレンジ地に白い丸のSTEP番号、線画アイコン、説明文を横並びにする - **香りピラミッド**（`scent-pyramid`）: 三角形をTOP/MIDDLE/LASTで3段に分けて香調を示す ## Do's and Don'ts **Do** - 緑とオレンジを2商品に固定して割り当て、セクションごとに使い分ける - 背景は泡・湯気・水面の写真で全面を埋める - 見出しは細めの明朝で2行に分け、中央揃えで余白を広くとる - 効能や成分は半透明パネルで整理して読みやすくする - 生薬・花・果物を錠剤の周りに置いた静物写真を使う **Don't** - 原色や蛍光色は使わない - 太いゴシックの大見出しで押し出しすぎない - 白い無地の背景を長く続けない - ボタンや装飾に強い影を付けない - 2商品の色を混ぜて同じパネルに使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品カテゴリと2種の商品を一目で示す）: 緑からオレンジへ移るグラデ写真に2つの箱を斜めに重ね、生薬を周りに置く。短い効能ラベルを添える 2. **商品の基本特長**（入浴剤の種類と特長を示す）: 泡立つ錠剤の写真に明朝の見出しと、3つの円形バッジを並べる 3. **コラム**（入浴の正しい方法で信頼を得る）: 緑地に白枠のボックスを置き、湯温・時間の丸アイコンと線画イラストを入れる 4. **2商品の比較**（悩み別に違いを示す）: 2箱を並べ、下を左右2列に分ける。商品色のラベルと香りの説明を置く 5. **成分訴求**（和漢素材のこだわりを伝える）: 生薬の接写を4分割で並べ、中央に白抜き明朝の大見出しを重ねる 6. **効果の訴求**（温浴効果と効能を示す）: 琥珀色の写真に錠剤を置き、円形の成分バッジと効能リストを添える 7. **湯色・香りのイメージ**（使うときの心地よさを想像させる）: 湯をすくう手の写真に白抜き見出しを入れる 8. **悩みから選ぶ**（自分に合う商品へ誘導する）: クリーム地に2列のチェックリスト。下に緑とオレンジの写真を並べ、商品名の帯を付ける 9. **商品詳細（緑）**（1つ目の商品の効能・成分・香りを示す）: 緑地に箱写真、成分アイコン帯、香りピラミッド、効能パネルを縦に積む 10. **商品詳細（オレンジ）**（2つ目の商品の効能・成分・香りを示す）: 緑と同じ構成をオレンジ地で作る 11. **無添加の訴求**（安心感を示す）: 生薬を散らした写真の中央に白抜き見出しと、配合しない成分のパネルを置く 12. **おすすめの入浴方法**（使い方を3手順で示す）: オレンジ地に番号付きの手順カードを3つ縦に並べる 13. **エンディング**（ブランドの印象を残す）: 水面の上に生薬、下に沈む錠剤の写真を置き、中央にロゴを入れる ## Imagery - 生薬・ハーブ・花・果物を錠剤の周りに置いた、柔らかい光の静物写真 - 泡が立ち上る錠剤や水中の気泡を写した写真を背景に使う - 水面を境に上下を見せる構図で、入浴のイメージを出す - 生薬は接写して質感を見せ、分割配置で並べる - 人物は手や肩までに絞る。入浴姿勢は細い線画で描く - 写真全体を緑またはオレンジの色調に寄せて揃える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版は約 480px 相当の縦長カラムを中央に置き、左右はくすんだトープ色のグラデで埋める - SP では同じカラムを画面幅いっぱいに広げる - 2列の比較・チェックリストは SP でも2列のまま使う - 効能リストは SP では2〜3列にし、文字は 11px 以上を保つ - PC に広げる場合も、本文の幅は 480〜560px までに抑える ## 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-71bac3f0`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kobe-beauty-labo/btn471/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-14、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。