--- version: alpha name: Botanical Lavender Gentle Cleansing LP description: 中央に細長い SP 幅のカラムを置き、左右はグレー地と植物の影で囲んだ化粧品 LP。紫のボトル色、深緑のピル型 CTA、赤ピンクの割引表示を組み合わせる。明朝の見出しに黄色マーカーとピンクの強調を添え、上品さとセールス訴求を両立させる。 colors: background: '#ECECEC' surface: '#FDFDFD' primary: '#15440B' on-primary: '#FFFFFF' cta: '#E25666' on-cta: '#FFFAF7' secondary: '#8A5FB8' text: '#2D322C' accent-1: '#E2437A' marker: '#F3E46A' background-alt: '#F4E9E3' tint-1: '#E9F1DA' accent-2: '#5EACB3' dark-section: '#2E2E2E' cta-accessible: '#DC3145' accent-2-accessible: '#3F8085' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Playfair Display fontSize: 32px fontWeight: 400 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em headline-sm: fontFamily: Playfair Display fontSize: 40px fontWeight: 700 lineHeight: 1.0 rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px offer-box: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 180px worry-bubble: backgroundColor: '{colors.dark-section}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 60px point-badge: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 56px ingredient-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 160px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px --- # DESIGN.md — 深緑×ラベンダーの植物系スキンケア LP（Botanical Lavender Gentle Cleansing LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、ナチュラル、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: 植物由来・ラベンダー・深緑・明朝見出し・透明感・割引訴求 - **地の質感**: 白地に細い方眼、水滴やグラデーション、木漏れ日の写真背景 - **形**: ピル型ボタン、角丸カード、円形の写真、六角形バッジ、V 字のセクション区切り - **温度感**: やや涼しく清潔。ベージュや桃色のパートでぬくもりを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#ECECEC` | ページ外側の地色 | 60% | 画素の実測 | | `surface` | `#FDFDFD` | 本文カラムの白地 | 12% | 画素の実測 | | `primary` | `#15440B` | 深緑の CTA とブランドの色 | 1% | 画素の実測 | | `on-primary` | `#FFFFFF` | 緑ボタン上の白文字 | 0% | 画素の主要色に補正 | | `cta` | `#E25666` | クーポンや価格を囲む赤ピンク | 1% | 画素の実測 | | `on-cta` | `#FFFAF7` | ピンクの帯の上の白文字 | 0% | 画素の実測 | | `secondary` | `#8A5FB8` | ボトルや見出しに使うラベンダー紫 | 2% | 推定 | | `text` | `#2D322C` | 見出しと本文の濃い墨色 | 3% | 画素の実測 | | `accent-1` | `#E2437A` | 本文中の強調に使うピンク | 0% | 推定 | | `marker` | `#F3E46A` | 見出しの下に引く黄色マーカー | 0% | 推定 | | `background-alt` | `#F4E9E3` | ベージュピンクのセクション地 | 4% | 画素の実測 | | `tint-1` | `#E9F1DA` | お客様の声の黄緑グラデーション地 | 3% | 画素の主要色に補正 | | `accent-2` | `#5EACB3` | 成分バッジのティール | 1% | 画素の実測 | | `dark-section` | `#2E2E2E` | 悩みの吹き出しの黒灰 | 1% | 推定 | | `cta-accessible` | `#DC3145` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#3F8085` | AA を満たす補正値（計算） | | 計算 | - 外側はグレー地に植物の影を置き、中央カラムは白、ベージュ、淡いグラデーションで切り替える - 主 CTA は深緑のピル型に統一する - 割引・価格・クーポンだけに赤ピンクを使い、訴求をはっきりさせる - 紫は商品とキービジュアルの見出しに限定する - 本文の強調は、ピンクの文字か黄色マーカーのどちらかにする - `offer-box` は文字 `#E25666` × 背景 `#FDFDFD` のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DC3145`、4.52:1）を使う。 - `ingredient-badge` は文字 `#FFFFFF` × 背景 `#5EACB3` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#3F8085`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きキャッチ | 明朝 | Shippori Mincho | 600 | 34px | 1.3 | 0.08em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 24px | 1.5 | 0.05em | | `headline-md` | 悩み・原因パートのゴシック見出し | ゴシック | Noto Sans JP | 700 | 21px | 1.5 | 0.05em | | `accent` | Point 番号や英字の筆記体見出し | 欧文セリフ | Playfair Display | 400 | 32px | 1.2 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em | | `note` | 成分の注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ボタンのラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.0 | 0.1em | | `headline-sm` | 価格の数字 | 欧文セリフ | Playfair Display | 700 | 40px | 1.0 | 0.0em | - 情緒的な見出しは明朝、説明と訴求はゴシックで分ける - 見出しの 1 語に黄色マーカーを引くか、色を変えて強調する - 見出しの上に小さなリード文を添える - 英字見出しは筆記体寄りのセリフ体にし、下に和文の小見出しを置く - 注釈は 10px 程度のグレーでまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC も中央の 1 カラムで、左右にナビと CTA を固定する - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの背景は端まで塗り、本文は左右 16〜20px の余白で組む - Point セクションは、円バッジの番号、見出し、写真、本文の順に積む - 写真は横幅いっぱいか、四方に 16px の余白を取って置く - 商品カードは縦に並べ、左に画像、右に説明を置く ## Elevation & Depth - お客様の声と商品カードには、ごく薄い影（0 2px 8px rgba(0,0,0,.08)）を付ける - 悩みの吹き出しは平面の黒灰で、影は付けない - ボタンは影なしで、平面のピル型にする ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 基本は四角。生活シーンの写真は大きな円で切り抜く - **セクション境界**: V 字の矢印カット、波形、写真の境界で直線に切り替える - Point 番号は白い半円の上に重ねる - 成分は六角形か円形のバッジで示す - 価格ボックスは赤ピンクの細い枠と角丸で囲む ## Components - **購入ボタン**（`button-primary`）: 深緑のピル型。右側にカートアイコンを置く - **ブランドサイトボタン**（`button-outline`）: 白地に濃色の細い枠を付けたピル型。右に矢印を置く - **初回割引ボックス**（`offer-box`）: 赤い円形の割引バッジ、通常価格に打ち消し線、大きな割引価格、ピンクのクーポン帯を組み合わせる - **悩みの吹き出し**（`worry-bubble`）: モノクロの肌写真の上に黒灰の雲形吹き出しを置き、白文字の一部を黄色にする - **Point 番号**（`point-badge`）: 白い半円の中に、筆記体の Point と大きな数字を入れる - **成分バッジ**（`ingredient-badge`）: ティールの円の中に成分名を白文字で入れる - **お客様の声カード**（`review-card`）: 白い角丸カード。星評価、ピンクの強調文、本文を並べ、右下に年代とアイコンを置く - **関連商品カード**（`product-card`）: 左に商品画像、右に商品名・価格・説明を置き、深緑の VIEW MORE ボタンを添える ## Do's and Don'ts **Do** - CTA は深緑、価格訴求は赤ピンクと、役割で色を分ける - セクションごとに淡い地色やグラデーションを切り替えて、リズムを作る - 情緒的な見出しは明朝で、行間を広めに組む - 植物の葉や影を、背景の余白にうっすら重ねる - 成分には※番号を付け、注釈を小さく添える **Don't** - ビビッドな原色で広い面を塗らない - 主 CTA を角張ったボタンにしない - 赤ピンクを見出しの装飾に多用しない - セクション内で書体を 3 種類以上混ぜない - 写真に強いフィルターをかけて彩度を上げすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の印象と、主な訴求点 3 つを伝える）: ラベンダーの光のグラデーションの上に商品ボトルを置き、縦書きの明朝キャッチと六角形バッジ 3 つを配置する 2. **初回オファー**（割引価格で購入を促す）: 赤ピンク枠の価格ボックス、クーポン帯、深緑の購入ボタンを並べる 3. **悩みの提起**（共感を呼ぶ）: モノクロの肌写真に黒灰の吹き出しを 4〜5 個散らす。下端は V 字で区切る 4. **原因の提示**（悩みの原因を説明する）: 白地にゴシックの見出しを置き、キーワードに黄色マーカーとピンクの強調を付ける 5. **解決策と成分**（独自の成分を訴求する）: 水滴のテクスチャを背景に、ティールの円バッジと青い明朝の見出しを置く 6. **Point 1〜5**（特長を順に説明する）: 方眼の白地に番号バッジ、見出し、写真、強調入りの本文を繰り返す。果実成分は円形のアイコンで並べる 7. **使用感と比較**（使い心地と、使用前後の変化を見せる）: ベージュ地に線画イラストと植物の線画を添え、使用前後の写真を左右に並べる 8. **生活シーン**（使う時間をイメージさせる）: 桃色から紫へのグラデーション地に、円形の写真と短い文を左右交互に置く 9. **お客様の声**（信頼を得る）: 黄緑のグラデーション地に、英字の筆記体見出しと白い角丸カードを 4 枚置く 10. **ブランド紹介**（ブランドの背景と理念を伝える）: 木漏れ日の緑の写真を背景に、ロゴ、明朝のコピー、集合写真、枠線ボタンを置く 11. **関連商品**（ほかの商品へ誘導する）: 英字の見出しの下に、白い商品カードを縦に 4 枚並べる 12. **クロージング CTA**（最後に購入を後押しする）: 商品画像、大きな価格、購入ボタンを置き、初回オファーをもう一度見せる ## Imagery - 商品は白背景か、光が拡散したラベンダーのグラデーションの上で撮る - 人物は明るい自然光で、タオルや手を頬に当てる柔らかい表情を撮る - 成分は果実、花、塩などの素材を、明るく清潔に撮る - 背景に葉の影や木漏れ日をうっすら重ねる - 使用感は淡いピンクの線画で女性を描く - 水滴や泡で透明感と潤いを表す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも本文は幅 375px 前後の中央カラムに収める - PC の左右の余白はグレー地にし、植物の影を重ねる - PC の左側にはロゴとアンカーナビを固定する - PC の右側には購入ボタン、ブランドボタン、筆記体の英字を固定する - SP では左右の固定要素をなくし、中央カラムだけを全幅で見せる ## 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-142ea159`（元 LP の URL から採番） - **元 LP**: https://lp.stemsai-beauty.com/index2.html - **解析に使った画像**: PC（PC版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。