--- version: alpha name: Clean Green Medicated Skincare LP description: 白と淡いミント地に鮮やかな緑を主色にした、薬用スキンケアの訴求型 LP。原因菌の解説図、ポイント番号つきの特長カード、円グラフ、口コミカードを縦に積む。購入ボタンだけを赤ピンクのグラデーションで目立たせる。 colors: primary: '#05A43D' on-primary: '#FFFFFF' background: '#FEFEFE' background-alt: '#E2F9E9' tint-1: '#EDFAE0' secondary: '#3FB16B' cta: '#E0405E' on-cta: '#FFF2F4' accent-1: '#D54561' accent-2: '#359D9A' accent-3: '#9272BC' text: '#333333' text-muted: '#888888' surface: '#F2F2F2' cta-accessible: '#D92345' primary-accessible: '#048933' accent-1-accessible: '#D43F5C' secondary-accessible: '#308651' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.02em label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 4px md: 10px lg: 16px 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.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 64px ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 48px point-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 44px offer-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 680px review-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 190px qa-block: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px pill-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px efficacy-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 36px pie-chart: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 200px --- # DESIGN.md — 若草グリーン×白の清潔感ある薬用洗顔料 LP（Clean Green Medicated Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、信頼・誠実、情報量多め・訴求型 - **キーワード**: 清潔感・薬用・緑・解説図・円グラフ・特典訴求 - **地の質感**: 白とミントのフラットな地。方眼の細い格子柄と淡い黄緑のグラデーション帯を使う - **形**: 細い緑の枠線カード、両端を尖らせた六角形のリボン見出し、円形の番号バッジ、ギザギザの円 - **温度感**: やや涼しげで明るい。購入ボタンの赤だけが温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#05A43D` | ブランドの緑（見出し・帯・枠） | 7% | 画素の実測 | | `on-primary` | `#FFFFFF` | 緑の帯の上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の地の白 | 36% | 画素の実測 | | `background-alt` | `#E2F9E9` | 特長セクションのミント地 | 9% | 画素の実測 | | `tint-1` | `#EDFAE0` | 特典ボックスの淡い黄緑地 | 7% | 画素の実測 | | `secondary` | `#3FB16B` | グラフ・ラベルの中緑 | 5% | 画素の実測 | | `cta` | `#E0405E` | 購入ボタンの赤ピンク | 2% | 推定 | | `on-cta` | `#FFF2F4` | 購入ボタンの文字 | 0% | 画素の実測 | | `accent-1` | `#D54561` | 強調文字・吹き出しのサーモン赤 | 2% | 画素の実測 | | `accent-2` | `#359D9A` | 細菌側を示すティール | 1% | 画素の実測 | | `accent-3` | `#9272BC` | 真菌側を示す紫 | 1% | 画素の実測 | | `text` | `#333333` | 本文・見出しの墨色 | 4% | 推定 | | `text-muted` | `#888888` | 注釈・フッターの灰色 | 0% | 推定 | | `surface` | `#F2F2F2` | 問い合わせ帯の明るい灰 | 4% | 画素の実測 | | `cta-accessible` | `#D92345` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#048933` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D43F5C` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#308651` | AA を満たす補正値（計算） | | 計算 | - 地は白とミントを交互に使い、セクションを区切る - 見出し・枠線・番号バッジはすべて primary の緑に揃える - cta の赤ピンクは購入ボタンだけに使う。少し縦グラデーションと影をつける - accent-1 のサーモン赤は悩みの強調文と特典の吹き出しだけに使う - 細菌はティール、真菌は紫と決めて、対比の図で使い続ける - 特典ボックスは淡い黄緑の地に白いカードを重ねる - `button-primary` は文字 `#FFF2F4` × 背景 `#E0405E` のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D92345`、4.5:1）を使う。 - `ribbon-heading` は文字 `#FFFFFF` × 背景 `#05A43D` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#048933`、4.53:1）を使う。 - `point-badge` は文字 `#FFFFFF` × 背景 `#05A43D` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#048933`、4.53:1）を使う。 - `pill-label` は文字 `#FFFFFF` × 背景 `#D54561` のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D43F5C`、4.5:1）を使う。 - `efficacy-bar` は文字 `#FFFFFF` × 背景 `#05A43D` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#048933`、4.53:1）を使う。 - `pie-chart` は文字 `#FFFFFF` × 背景 `#3FB16B` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#308651`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | ゴシック | Zen Kaku Gothic New | 500 | 34px | 1.3 | 0.05em | | `headline-lg` | ポイント見出し・セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.3 | 0.04em | | `headline-md` | 中見出し・悩みの問いかけ | ゴシック | Noto Sans JP | 700 | 21px | 1.5 | 0.08em | | `headline-sm` | 口コミのタイトル・カードの見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `body-md` | 本文・口コミの本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.03em | | `note` | 出典・※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 価格の数字・グラフの％ | 欧文サンセリフ | Montserrat | 700 | 48px | 1.1 | -0.02em | | `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 22px | 1.2 | 0.1em | - 見出しは緑の太いゴシックにし、字間を少し広げる - 悩みを強調するところは、緑・赤・墨の 3 色で語ごとに色を変える - 「（細菌）」のような補足は、本文より小さい文字で添える - 見出しの下に、黄緑の斜線マーカーを敷くことがある - 注釈は※番号つきで 10px 前後の灰色にする - 価格の数字は特大の緑にし、「円」「（税込）」は小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品比較と成分紹介だけ 2 列にする - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 特長セクションは、ミント地の上に白い大きなカードを置き、ポイントごとに分ける - ポイント見出しの下に、緑の太い横線を全幅で引く - 購入特典ブロックはページ内で 4 回繰り返す - 写真と文章は左右に並べ、写真を画面端まで出す - 口コミカードは縦に積み、間を 12px 空ける ## Elevation & Depth - 基本はフラットにし、カードは枠線で区切る - 購入ボタンだけに下向きの影（0 4px 8px rgba(0,0,0,.2)）をつける - 白いカードは影なしで、淡い地との明度差で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は角丸なしの矩形で端まで出す。泡や成分の写真は円形に切り抜く。菌の写真はギザギザの円にする - **セクション境界**: 直線で地の色を切り替える。淡い黄緑のグラデーション帯や方眼の背景も使う - 特典の見出しは、両端を尖らせた六角形のリボンにする - 番号は緑の円に白い数字を入れ、上に小さな英字の弧形ラベルを載せる - 口コミカードは緑の 2px 枠で、角丸 12px - 吹き出しのラベルは、角丸 full のピル型 - 効能ラベルは、緑地と白地の 2 区画に分けた横長のボックスにする ## Components - **購入ボタン**（`button-primary`）: 幅いっぱいの赤ピンクのグラデーションボタン。角丸 8px で影をつけ、右端に「>」を置く - **六角リボン見出し**（`ribbon-heading`）: 両端を尖らせた緑のリボン。白い二重線で縁取り、白文字を載せる - **ポイント番号**（`point-badge`）: 緑の円に白い数字を入れ、上に小さな英字の弧形ラベル。右に大きな緑の見出しを置く - **購入特典ボックス**（`offer-box`）: 淡い黄緑の地に白いカードを 2 段重ねる。送料無料のカードとサンプル同梱のカードの下に、価格と商品画像を置く - **口コミカード**（`review-card`）: 白地に緑の枠。緑のタイトル、人物アイコンと名前、本文の順に並べる - **Q&A ブロック**（`qa-block`）: 緑の大きな Q と点線の下線。回答は黄緑地のカードに、緑の円で囲んだ A をつける。カードの下には斜線の影を敷く - **吹き出しラベル**（`pill-label`）: サーモン赤または緑のピル型ラベル。白文字で、カテゴリ名や問いかけを入れる - **効能表示**（`efficacy-bar`）: 左が緑地に白文字のラベル、右が白地に本文。外側を細い枠で囲む - **満足度の円グラフ**（`pie-chart`）: 緑の濃淡と灰で塗り分けた円グラフ。中央に白い大きな％を置き、下に凡例を並べる ## Do's and Don'ts **Do** - 見出し・枠・番号は緑一色で統一する - 購入特典ブロックは同じデザインで何度も繰り返す - 原因の説明は、色分けした図と番号つきのリストで見せる - 数値や効能の表示には※注釈と出典を必ず添える - 白い枠のカードで情報を細かく区切り、整理された印象にする **Don't** - 購入ボタン以外に赤ピンクの大きな面を使わない - 暗い背景や黒い面を広く使わない（菌の写真の円だけは例外） - 明朝体や手書き書体を混ぜない - 強い影や立体的な装飾を多用しない - 緑を何色にも増やさない。濃・中・淡の 3 段階までにする ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（成分の特長と商品を一目で伝える）: 淡いラボ風の写真背景の中央に商品を置く。左右に白い枠の特長ボックスを置き、上に緑の大見出しを載せる 2. **購入特典 CTA**（初回特典と価格を提示する）: 六角リボン見出し、送料無料、サンプル同梱、大きな価格、赤い購入ボタンの順に並べる 3. **原因の解説**（悩みの原因を科学的に説明する）: 方眼の背景にする。ティールと紫のラベル 2 つと、ギザギザ円の菌写真を置く。その下に、緑の枠で囲んだ毛穴の断面図と番号リストを入れる 4. **悩みの提起**（繰り返す悩みに共感する）: 人物写真の上に、白い帯で区切った問いかけの文字を重ねる 5. **解決の提示と商品紹介**（商品で解決できることを示す）: 3 色で強調した文と、黄緑グラデーションの帯を置く。本体と詰め替えを並べて価格を表示する 6. **4 つのポイント**（特長を順に説明する）: 緑の全幅の帯にタイトルを載せる。ミント地の上に白いカードを置き、番号バッジ、図、円グラフ、写真で 1 つずつ見せる 7. **お客様の声**（使用者の実感で信頼を高める）: 見出しの下に吹き出し形の線を引く。緑の枠の口コミカードを 3 枚並べ、最後に出典の注釈を添える 8. **よくある疑問**（疑問に答えて不安を消す）: 緑の大きな枠の中に、Q と黄緑の A カードを左右にずらして配置する 9. **開発者の推薦**（専門家による裏付けを示す）: 白衣の線画イラストと緑の枠の見出しを置き、淡いミントの本文ボックスを続ける 10. **シリーズ紹介**（関連商品へ誘導する）: 水色地とピンク地のカードを 2 列に並べ、商品画像と効能表示を入れる 11. **問い合わせ・フッター**（電話窓口と法的リンクを示す）: 灰色の地に白いカードを置き、フリーダイヤルを大きく表示する。下に小さな文字のリンクを並べる ## Imagery - 商品は白背景の切り抜きにし、やわらかい影をつける - 人物は白いヘアバンドやタオルを使い、自然光で明るく撮った清潔な洗顔シーンにする - 成分は植物を白背景で撮った写真にし、淡い緑の円の上に載せる - 解説図は肌色・黄色・赤のフラットなイラストにし、緑の番号線を引く - 研究室のガラス器具を淡く写した写真を、背景に薄く敷く - 開発者は細い線画で、親しみのある人物イラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 750px 前後のカラムに SP と同じ構成を収め、左右は淡い地で埋める - PC では写真と文章の 2 列を広げ、ポイントカードの余白を増やす - 購入ボタンは PC で最大 600px 幅にとどめる - 口コミカードは PC で 2〜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-99c798b5`（元 LP の URL から採番） - **元 LP**: https://www.collage-shop.jp/shop/lp/ffwhipsoap.aspx - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。