--- version: alpha name: Soft Mint Botanical Baby Care LP description: くすんだミントグリーンと淡いクリーム色を交互に敷いたベビー用スキンケアの LP。丸ゴシックと白い角丸カード、円形バッジ、吹き出しでやわらかく安心感のある見た目にしている。三角錐や球の小さなオブジェが自然素材らしさを足す。 colors: primary: '#67A784' background: '#FEFFFC' background-alt: '#FCF8D3' surface: '#FEFEFE' secondary: '#CDDCD2' accent-1: '#F2DB7D' tint-1: '#FDFCE7' text: '#333D35' text-body: '#6F7769' accent-2: '#7A9B82' accent-3: '#F07E6D' dark-section: '#DBDBDB' tint-2: '#E9F4DD' accent-2-accessible: '#5D7B64' text-body-accessible: '#6C7467' accent-3-accessible: '#B62813' typography: display: fontFamily: Zen Maru Gothic fontSize: 30px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.06em headline-sm: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Nunito fontSize: 13px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: M PLUS Rounded 1c fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-label: textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 20px badge-circle: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 76px badge-yellow: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px pill-label: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px point-panel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 1500px band-heading: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 30px speech-cloud: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 44px faq-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 220px check-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px coupon-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-3}' typography: '{typography.display}' height: 400px --- # DESIGN.md — ミント緑×クリームのやさしいベビーケア LP（Soft Mint Botanical Baby Care LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: やさしい・柔らかい、ナチュラル、清潔・爽やか、かわいい - **キーワード**: くすみミント・クリーム地・丸ゴシック・円形バッジ・角丸カード・積み木オブジェ - **地の質感**: マットで平らな色面。影はほぼ使わず、写真は明るくハイキーに撮る。 - **形**: 大きめ角丸のカード、正円バッジ、雲形の吹き出し、星形のスカラップ、三角錐の装飾。 - **温度感**: 少し暖かめのニュートラル。緑の清潔感とクリームのぬくもりを合わせる。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#67A784` | ブランドの緑・帯見出し・ヘッダー | 3% | 画素の実測 | | `background` | `#FEFFFC` | ポイントセクションのくすみ緑の地 | 30% | 画素の実測 | | `background-alt` | `#FCF8D3` | 悩み・コラム・FAQ のクリーム地 | 14% | 画素の実測 | | `surface` | `#FEFEFE` | 白いカード・ラベル | 11% | 画素の実測 | | `secondary` | `#CDDCD2` | FV・特長の明るいミント地 | 9% | 画素の実測 | | `accent-1` | `#F2DB7D` | 黄色の円バッジ・帯見出し・Q マーク | 3% | 画素の実測 | | `tint-1` | `#FDFCE7` | 特徴を示す円バッジのクリーム色 | 2% | 画素の実測 | | `text` | `#333D35` | 見出しの濃い灰色 | 2% | 画素の実測 | | `text-body` | `#6F7769` | 本文の灰色 | 2% | 画素の実測 | | `accent-2` | `#7A9B82` | 英字ラベルと緑の文字 | 1% | 画素の実測 | | `accent-3` | `#F07E6D` | クーポンを強調するコーラル | 1% | 画素の実測 | | `dark-section` | `#DBDBDB` | キャンペーン帯の灰色 | 2% | 画素の実測 | | `tint-2` | `#E9F4DD` | メディア推奨部の淡い黄緑 | 4% | 画素の実測 | | `accent-2-accessible` | `#5D7B64` | AA を満たす補正値（計算） | | 計算 | | `text-body-accessible` | `#6C7467` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#B62813` | AA を満たす補正値（計算） | | 計算 | - 地の色はくすみ緑とクリームを交互に置き、セクションを切り替える。 - 緑の地の上には白カードを、クリームの地の上には白か黄色の要素を置く。 - 黄色は円バッジ・帯・Q マークだけに使う。 - 強い色はクーポンのコーラルだけ。他の場所には使わない。 - 文字は真っ黒にせず、濃い灰色にする。 - 英字ラベルは緑の文字に小さな葉のアイコンを添える。 - `badge-circle` は文字 `#7A9B82` × 背景 `#FDFCE7` のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#5D7B64`、4.52:1）を使う。 - `faq-card` は文字 `#6F7769` × 背景 `#FCF8D3` のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#6C7467`、4.5:1）を使う。 - `coupon-banner` は文字 `#F07E6D` × 背景 `#DBDBDB` のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#B62813`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー | 丸ゴシック | Zen Maru Gothic | 700 | 30px | 1.5 | 0.06em | | `headline-lg` | セクションの大見出し | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.5 | 0.08em | | `headline-md` | 写真の横に置く短い効果コピー | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.3 | 0.06em | | `headline-sm` | 見出しの前置きと小見出し | 丸ゴシック | Zen Maru Gothic | 500 | 17px | 1.5 | 0.08em | | `body-md` | 本文・FAQ の回答 | 丸ゴシック | M PLUS Rounded 1c | 400 | 13px | 1.8 | 0.05em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `accent` | 英字のセクションラベル・成分名 | 欧文サンセリフ | Nunito | 600 | 13px | 1.4 | 0.1em | | `label-button` | 円バッジとラベルの文字 | 丸ゴシック | M PLUS Rounded 1c | 500 | 12px | 1.4 | 0.05em | - 全体を丸ゴシックで揃え、角の強い書体は使わない。 - 見出しは助詞を小さくして、要点の語を大きく見せる。 - 字間は 0.05〜0.1em とやや広めにする。 - 英字ラベルは見出しの上に小さく置く。 - 注釈は 9px 前後にし、該当する見出しのすぐ下に置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真とテキストは左右交互の 2 分割、バッジは 4 つ横並び、成分は 2 列のグリッド。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - ポイントごとに大きな角丸パネルで囲み、パネルの間を 30px ほど空ける。 - 効果の説明は写真と短いコピーを左右交互に並べる。 - 円バッジは写真の下端に半分重ねて 4 つ並べる。 - 見出しは英字ラベルと日本語見出しを左揃えで重ねる。 - FAQ は Q と A を円形マーク付きのクリーム色カードで縦に積む。 ## Elevation & Depth - 影は基本的に使わず、色面の差で階層をつける。 - 白カードは影なしのフラットにする。 - 立体感は写真の中のオブジェだけで出す。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸 12px の長方形に切り抜く。人物は円形に抜く。 - **セクション境界**: 直線で色を切り替える。ポイント部は角丸パネルで区切る。 - バッジは正円にする。 - 悩みのワードは雲形の吹き出しに入れる。 - 肌の悩みは星形のスカラップに入れる。 - 商品名のラベルはピル型にする。 - 三角錐と球の装飾を余白に添える。 ## Components - **英字セクションラベル**（`section-label`）: 葉のアイコンと緑の英字で、見出しの上に置く。 - **特徴の円バッジ**（`badge-circle`）: クリーム色の正円に 2 行の短い特徴を入れ、4 つ横に並べる。 - **黄色の訴求円**（`badge-yellow`）: 写真の上に重ねる大きな黄色い円。対象年齢などを示す。 - **商品名のピルラベル**（`pill-label`）: 白いピル型に灰色の文字で商品名や容量を書く。 - **ポイントパネル**（`point-panel`）: 緑の地に置く大きな角丸パネル。番号ラベル、見出し、写真、本文を順に入れる。 - **帯見出し**（`band-heading`）: 全幅の緑または黄色の帯に、白い文字で成分の分類を書く。 - **悩みの吹き出し**（`speech-cloud`）: 白い雲形の吹き出しに悩みのワードを入れ、赤ちゃんの写真のまわりに散らす。 - **FAQ カード**（`faq-card`）: クリーム色の角丸カード。黄色の Q 円と白い A 円を置き、その下に回答本文を入れる。 - **無添加タググリッド**（`check-tag`）: 白い小さな長方形のタグを 3〜4 列に並べ、成分や試験の項目を示す。 - **クーポンバナー**（`coupon-banner`）: 灰色の地に、大きなコーラルの数字と星、円形の配布中バッジを置く。 ## Do's and Don'ts **Do** - くすみ緑とクリームを交互に使い、やさしいリズムを作る。 - 写真は白い背景で、赤ちゃんの肌を明るく見せる。 - 特徴は 3〜4 語の短い言葉にして、円バッジに入れる。 - ※の注釈を丁寧に添えて、信頼感を出す。 - 余白には三角錐と球の小さな装飾を置く。 **Don't** - 彩度の高い原色や黒い地を使わない。 - 角が鋭いボタンや太い枠線を使わない。 - 強い影やグラデーションをかけない。 - 1 つのセクションに長文を詰め込まない。 - コーラルをクーポン以外に使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と、やさしさのイメージを伝える。）: ミントの地に商品写真と装飾オブジェを置く。黄色の円バッジ、大きな丸ゴシックのコピー、ピル型の商品名ラベルを添える。 2. **商品セット紹介**（内容と価格を示す。）: 白背景の商品写真を並べ、下にピル型ラベルと容量を置く。価格は大きな数字に送料無料の円を添える。 3. **専門家の推奨**（第三者の推奨で信頼を得る。）: 淡い黄緑の地に、白い角丸カードと円形の人物写真を置き、推奨コメントを載せる。 4. **コンセプト**（ブランドの思いを伝える。）: 商品写真の帯の下に短い文章を置き、白い角丸カードで実績の数値を 3 つ並べる。 5. **悩みの提起**（親の不安に共感する。）: クリームの地で、赤ちゃんの写真のまわりに雲形の吹き出しを 5 つ配置する。 6. **コラム（肌の知識）**（肌が敏感な理由を説明する。）: 白いカードの中に写真、星形のワード、肌の断面図を入れる。 7. **特長の総括**（主な訴求をまとめる。）: ミントの地に商品の写真を大きく置き、円バッジを縦に 3 つ重ねる。 8. **ポイント 1〜4**（特長を個別に深く説明する。）: 角丸パネルに番号ラベル、見出し、写真、円バッジを入れる。その下に写真とコピーの左右交互の並びや、成分の 2 列グリッドを続ける。 9. **よくある質問**（購入前の不安を解消する。）: 緑の地に、Q と A の円マーク付きのクリーム色カードを縦に積む。 10. **キャンペーン**（クーポンで購入を後押しする。）: 灰色の帯に英字の大見出しを置き、コーラルの大きな数字で割引を見せる。 ## Imagery - 商品はミント色の背景に置き、柔らかい自然光で影を薄くして撮る。 - 赤ちゃんの手足や肌のアップは、白背景でハイキーに撮る。 - パステル緑の三角錐と球のフェルト調オブジェを小道具にする。 - 原料の写真は自然光で撮り、暖かい色味にする。 - 説明のイラストは淡いピンクと青のフラットな図解にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため推奨を示す。本文の幅は最大 750px ほどにして中央に置き、左右には背景色を延ばす。 - 写真とテキストの左右交互の並びは、PC でもそのまま 2 カラムにする。 - 円バッジや成分のグリッドは、PC では 4 列に広げる。 - 見出しは PC で 1.2〜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-f29475c2`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kobe-beauty-labo/btn392/?variantId=btn392-10125107 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（13/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。