--- version: alpha name: Warm Cream Handwritten Botanical Body Care LP description: 淡いクリームと白い大理石調の地に、茶色の手書き風キャッチとベージュのマーカーを重ねた、やさしく親しみやすいボディケア商品LP。1カラムで中央揃えのテキストが流れ、吹き出しのレビューや診断チャートで読ませる構成。 colors: primary: '#856D5A' background: '#FBFBFA' background-alt: '#FFF7D6' marker: '#FDECCB' line: '#DCBA9B' cta: '#D29B92' on-cta: '#FFF5F0' text-body: '#555555' text-muted: '#888888' dark-section: '#5B5B5B' surface: '#FEFEFE' accent-1: '#E08A5A' accent-2: '#84A3C2' secondary: '#F2B93B' cta-accessible: '#B05749' primary-accessible: '#7D6755' typography: display: fontFamily: Yomogi fontSize: 34px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Klee One fontSize: 24px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.1em body-lg: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 4px md: 16px lg: 24px 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.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px marker-highlight: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 32px handwritten-catch: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.display}' height: 44px worry-bubble: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 44px review-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-lg}' rounded: '{rounded.md}' height: 130px sns-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 200px diagnosis-chart: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' rounded: '{rounded.full}' height: 110px store-button: backgroundColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 75px --- # DESIGN.md — クリーム色と手書き文字のボタニカルボディケアLP（Warm Cream Handwritten Botanical Body Care LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: やさしい・柔らかい、ナチュラル、親しみ・手作り感、かわいい - **キーワード**: クリーム色グラデ・手書き風キャッチ・ベージュマーカー・大理石調テクスチャ・吹き出し・植物とクリームの散らし - **地の質感**: 白い大理石やミルクの質感をうっすら敷き、クリーム色のグラデで区切る。 - **形**: 角丸の吹き出し、丸や雲形の写真マスク、ピル型ボタン。 - **温度感**: 暖かい。黄み寄りのクリームと茶色が基調。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#856D5A` | 手書き見出し・強調文字の茶色 | 4% | 画素の主要色に補正 | | `background` | `#FBFBFA` | 基本の白地 | 30% | 画素の実測 | | `background-alt` | `#FFF7D6` | クリーム色セクション地 | 20% | 画素の実測 | | `marker` | `#FDECCB` | 文字背面のベージュマーカー | 2% | 画素の実測 | | `line` | `#DCBA9B` | マーカー枠・吹き出し枠 | 1% | 画素の主要色に補正 | | `cta` | `#D29B92` | 購入ボタンのくすみピンク | 1% | 画素の実測 | | `on-cta` | `#FFF5F0` | ボタン文字 | 0% | 画素の実測 | | `text-body` | `#555555` | 本文のグレー | 3% | 推定 | | `text-muted` | `#888888` | 注釈 | 0% | 推定 | | `dark-section` | `#5B5B5B` | 悩み吹き出しのチャコール | 1% | 画素の実測 | | `surface` | `#FEFEFE` | レビュー吹き出し・診断の白丸 | 5% | 画素の実測 | | `accent-1` | `#E08A5A` | 診断のYES矢印オレンジ | 0% | 推定 | | `accent-2` | `#84A3C2` | 診断のNO矢印ブルー | 0% | 画素の実測 | | `secondary` | `#F2B93B` | 購入先ボタン枠の黄 | 0% | 推定 | | `cta-accessible` | `#B05749` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#7D6755` | AA を満たす補正値（計算） | | 計算 | - 地は白とクリームを交互に使い、境界はグラデでぼかす。 - 強調は茶色文字＋ベージュマーカーで行い、原色は使わない。 - CTAはくすみピンク1色に統一する。 - 悩みの提示だけはチャコールの吹き出しで締める。 - 診断のYES/NOはオレンジとブルーの細矢印で色分けする。 - `button-primary` は文字 `#FFF5F0` × 背景 `#D29B92` のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B05749`、4.55:1）を使う。 - `marker-highlight` は文字 `#856D5A` × 背景 `#FDECCB` のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#7D6755`、4.57:1）を使う。 - `handwritten-catch` は文字 `#856D5A` × 背景 `#FDECCB` のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#7D6755`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 手書き風キャッチ・診断タイトル | 手書き・筆 | Yomogi | 700 | 34px | 1.3 | 0.05em | | `headline-lg` | 文中の手書き強調フレーズ | 手書き・筆 | Klee One | 600 | 24px | 1.5 | 0.05em | | `headline-md` | 中央揃えの導入文・セクション見出し | 丸ゴシック | Zen Maru Gothic | 500 | 20px | 1.9 | 0.1em | | `body-lg` | 語りかける本文 | 丸ゴシック | Zen Maru Gothic | 500 | 18px | 2.0 | 0.1em | | `body-md` | レビュー・SNS投稿文 | ゴシック | Zen Kaku Gothic New | 400 | 14px | 1.9 | 0.03em | | `note` | 注釈・成分補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | 購入ボタン | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.2 | 0.1em | - 本文は中央揃え・短い改行で詩のように流す。 - 各ブロックに手書きフレーズを1つだけ入れ、ベージュマーカーを敷く。 - キーワードは茶色太字＋薄枠マーカー箱で強調する。 - 字間は広め(0.1em)で柔らかく見せる。 - 注釈は小さく灰色で画像直下に置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（SNS投稿のみ写真＋テキストの2分割） - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - テキストは中央揃えで縦に積む。 - 写真は全幅または丸マスクで大きく配置。 - 商品写真の下に名称・容量・価格を中央に小さく置き、直後にCTA。 - レビュー吹き出しは縦に3つ、16px間隔。 - 植物・果物・クリームの素材を余白の左右に散らす。 ## Elevation & Depth - 吹き出しやボタンは右下に同色系の濃いベタ影(3〜4px)をずらす。 - ぼかし影はほぼ使わない。 - 素材写真は切り抜きで浮かせ、影は自然な落ち影のみ。 ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 切り抜き商品・丸や楕円・雲形マスク、SNSは角丸なしの四角 - **セクション境界**: 直線を使わず、クリーム→白のグラデでぼかして切り替え - 吹き出しは角丸16pxに尻尾付き。 - マーカーは角なしの帯か細枠の箱。 - 診断ノードは白い正円。 - 購入先ボタンは黄枠の角丸正方形。 ## Components - **購入ボタン**（`button-primary`）: くすみピンクのピル型、左端に商品画像がはみ出し、右に下向き矢印。 - **マーカー強調**（`marker-highlight`）: 茶色文字の背面にベージュ帯や細枠箱を敷く。 - **手書きキャッチ**（`handwritten-catch`）: 茶色の手書き書体で1行、下にベージュ帯。 - **悩み吹き出し**（`worry-bubble`）: チャコール地に白い手書き文字、斜めに互い違いに配置。 - **レビュー吹き出し**（`review-bubble`）: 白地に茶色細枠とベタ影、尻尾付き。強調語はマーカー。 - **SNS投稿カード**（`sns-card`）: 写真とアカウント名ラベル、罫線入り本文。左右交互、間にクリームの太線。 - **診断チャート**（`diagnosis-chart`）: 白い丸ノードをYES/NO色矢印で結び、最下段に商品を並べる。 - **購入先ボタン**（`store-button`）: 白地に黄枠の角丸正方形、ロゴと下矢印。4つ横並び。 ## Do's and Don'ts **Do** - 強調は茶色＋ベージュマーカーに統一する。 - 手書きフレーズで語りかける温度を出す。 - 植物・果物・クリームの切り抜きを余白に散らす。 - セクション境界はグラデでぼかす。 - 商品写真の直後に価格とCTAを置く。 **Don't** - 彩度の高い赤・青をCTAや見出しに使わない。 - 直線の区切りや濃い帯の見出しを入れない。 - 本文を左揃えの長文にしない。 - 手書き書体を本文に使わない。 - 硬いぼかし影や角張ったボタンを使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の挨拶と印象付け）: クリーム地に手書きキャッチの白い吹き出し、傾けた商品と果物・ハーブ・クリームを散らす。 2. **ブランドのこだわり**（成分・無添加の訴求）: 中央揃え本文に、こだわり3点を枠付きマーカーで×記号でつなぐ。 3. **使用シーン**（家族で使える安心感）: 親子の写真を全幅で、下に注釈。 4. **シリーズ実績**（信頼の提示）: クリーム地の導入文と、シリーズ集合写真を全幅で。 5. **商品紹介とCTA**（主役商品の提示）: 手書き強調文の後、雲形マスクの商品写真、名称・価格、ピル型CTA。 6. **悩みの提起**（共感）: 大理石地にチャコール吹き出しを2〜3個互い違いに。 7. **使用感・香りの訴求**（テクスチャと香りの魅力）: 肌に塗る写真、クリームの質感写真、手書き強調の本文、3枚並びのイメージ写真。 8. **お客様の声**（共感と信頼）: クリーム地に白い吹き出し3つ、楕円マスクの商品写真とCTA。 9. **SNS投稿**（口コミの拡散感）: 写真とテキストを左右交互に並べたカード3件。 10. **診断チャート**（シリーズから選ばせる）: 手書き大見出し、白丸ノードの分岐図、商品4種と購入先ボタン。 11. **締めのメッセージ・フッター**（ブランド想いで締める）: 大理石地に手書きマーカー文、ロゴと企業リンク。 ## Imagery - 白いボトルを自然光で明るく撮り、切り抜きで斜めに置く。 - オレンジ・はちみつ・ラベンダー・カモミールなど植物素材を切り抜きで散らす。 - クリームのひと塗りを白背景で質感強めに撮る。 - 人物は親子や手肌のアップで柔らかい光、肌色の温かい色調。 - 背景は淡い大理石やリネン調テクスチャ。 - 空や花畑の明るい写真を楕円マスクで使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はSP幅(約400〜480px)の中央カラムを維持し、左右はクリームか大理石の地で埋める。 - 3枚並び写真やSNSカードはPCで横幅を広げてもよい。 - CTAは最大幅360px程度で中央揃え。 - 散らし素材は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-5e78ff2e`（元 LP の URL から採番） - **元 LP**: https://www.diane-botanical.com/lp/021/?utm_medium=paid&utm_source=ig&utm_id=120242218184660378&utm_content=120242218184670378&utm_term=120242218184700378&utm_campaign=120242218184660378&fbclid=PAaWdyZAQ6DXNleHRuA2FlbQEwAGFkaWQBqy-y-HVwmnNydGMGYXBwX2lkDzU2 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。