--- version: alpha name: Coral and Leaf Green Sensitive Skincare LP description: 薬用スキンケアの通販LPで、左右に分けたコーラルと若葉グリーンで2つの商品を色分けしている。方眼紙柄の白地と水面風の背景に、こげ茶の丸ゴシック体を載せた。悩み→医師の解説→商品→ポイント解説→特典→購入の順に並ぶ、情報量の多い訴求型の構成。 colors: primary: '#F36952' secondary: '#72BB69' background: '#FDFDFD' background-alt: '#FF9782' tint-1: '#FEEECA' surface: '#E4E4E4' text: '#7B4C4B' dark-section: '#7D4339' cta: '#9B0C0C' on-cta: '#FEFAF5' accent-1: '#02A498' accent-2: '#23B473' marker: '#F2E85A' accent-3: '#F5C86A' primary-accessible: '#DC2D0F' secondary-accessible: '#42813A' typography: display: fontFamily: Zen Maru Gothic fontSize: 38px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.15em headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Zen Maru Gothic fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Dancing Script fontSize: 24px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 6px md: 12px lg: 24px 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: 56px offer-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 900px benefit-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 70px worry-bubble: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px point-number: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 90px voice-tag: textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 24px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px ingredient-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px effect-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 70px --- # DESIGN.md — コーラル×若葉グリーンの敏感肌スキンケアLP（Coral and Leaf Green Sensitive Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型、信頼・誠実 - **キーワード**: コーラル・若葉グリーン・方眼紙柄・丸ゴシック・皮膚断面図・特典カード - **地の質感**: 白地に薄い方眼グリッド。水面の波紋やシャボン玉の淡い写真背景。CTAには光沢グラデーション - **形**: 角丸カード、花形の吹き出し、円形の成分バッジ、ピル型のラベル - **温度感**: 暖かめ。コーラルとクリームで温もりを出し、グリーンとミントで清潔感を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F36952` | ブランドのコーラル（特典セクションの地・見出し強調） | 8% | 画素の実測 | | `secondary` | `#72BB69` | 洗顔料の若葉グリーン（FV左半分・Stepラベル） | 5% | 画素の主要色に補正 | | `background` | `#FDFDFD` | 基本の白地（方眼柄） | 23% | 画素の実測 | | `background-alt` | `#FF9782` | 特典・シリーズ紹介セクションのサーモン地 | 9% | 画素の実測 | | `tint-1` | `#FEEECA` | お客様の声セクションのクリーム地 | 4% | 画素の実測 | | `surface` | `#E4E4E4` | 淡いグレーのセクション地 | 7% | 画素の実測 | | `text` | `#7B4C4B` | 見出し・本文のこげ茶 | 2% | 画素の実測 | | `dark-section` | `#7D4339` | 特典カードのヘッダー帯（こげ茶） | 4% | 画素の実測 | | `cta` | `#9B0C0C` | 購入ボタンの深紅 | 2% | 画素の実測 | | `on-cta` | `#FEFAF5` | CTAボタン上の白文字 | 0% | 画素の実測 | | `accent-1` | `#02A498` | ポイント番号のティール | 0% | 画素の実測 | | `accent-2` | `#23B473` | 洗顔料の訴求帯・グリーン系CTAの濃い緑 | 2% | 画素の実測 | | `marker` | `#F2E85A` | 見出しの黄色マーカー・強調 | 0% | 推定 | | `accent-3` | `#F5C86A` | 特典カード見出しのゴールド文字 | 0% | 推定 | | `primary-accessible` | `#DC2D0F` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#42813A` | AA を満たす補正値（計算） | | 計算 | - 商品ごとに色を固定する。化粧水はコーラル系、洗顔料は若葉グリーン系で、見出し帯・番号・枠線も同じ色にそろえる - 本文と見出しは黒を使わず、こげ茶で統一する - 特典・購入エリアはサーモンの地に白カードを置き、他のセクションより温度を上げる - CTAは深紅の光沢グラデーションにする。洗顔料単品のCTAだけ濃い緑にする - 強調語は文字色をコーラルにするか、黄色のマーカーを引く - ポイント番号は化粧水がティール、洗顔料がコーラルレッドの大きな数字 - `benefit-tab` は文字 `#FEFAF5` × 背景 `#F36952` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DC2D0F`、4.57:1）を使う。 - `effect-band` は文字 `#FEFAF5` × 背景 `#72BB69` のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#42813A`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し・特典タイトル | 丸ゴシック | Zen Maru Gothic | 900 | 38px | 1.3 | 0.15em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.4 | 0.1em | | `headline-md` | ポイント見出し・商品名 | 丸ゴシック | Zen Maru Gothic | 700 | 21px | 1.4 | 0.08em | | `headline-sm` | カード見出し・チェックリスト項目 | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.5 | 0.05em | | `body-md` | 説明本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.8 | 0.05em | | `note` | 注釈・効能効果 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 番号の前に添える筆記体の「Point」・大きな番号 | 欧文スクリプト | Dancing Script | 400 | 24px | 1.0 | 0.0em | | `label-button` | CTAボタンの文言 | ゴシック | Noto Sans JP | 700 | 20px | 1.2 | 0.1em | - 見出しは丸ゴシックの太字にし、字間を広めにとる - 見出しの中でキーワードだけを大きくし、コーラルにする - 小見出しは「＼ ／」の斜線で挟む - ポイント番号は太い欧文数字を約60pxで表示し、筆記体の「Point」を重ねる - 価格は数字を約40pxの太字にし、「円」「(税込)」は小さく添える - 注釈は※番号付きで、セクション末尾にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品比較・成分円・選択肢だけ 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右に約16pxの余白を残して中央に置く - お客様の声は写真と文を左右交互に並べるジグザグ配置 - 各ポイントは番号→見出し→リード文→図解カードの順に縦へ積む - 特典カードはヘッダー帯→商品と価格→特典1・2→CTAの順で、ページ内で3回くり返す - FVは画面を左右に2分割し、商品を1つずつ配置する ## Elevation & Depth - 白カードには、ふんわりした薄い影をつける - CTAボタンには下方向に濃い影と上部のハイライトをつけ、押せる立体感を出す - 商品写真は背景を切り抜き、床に落ちる影を残す ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は切り抜き。使用シーンの写真は角丸の長方形。成分は円形にクロップ - **セクション境界**: 下向き三角の切り欠き、またはゆるい山形の境界でセクションを区切る - 悩みはギザギザの花形バッジに入れる - Stepや商品ラベルはピル型にする - 特典番号は半円のタブにつける - ポイント見出しのカードは上の角を大きく丸める ## Components - **購入CTA**（`button-primary`）: 深紅の光沢グラデーションに白太字。右端に三角アイコン - **初回特典カード**（`offer-card`）: こげ茶のヘッダー帯（ゴールドの強調文字）＋白地に商品・価格・特典を載せる - **特典番号ボックス**（`benefit-tab`）: コーラルの角丸箱。上部の半円タブに番号を入れ、筆記体のpointを添える - **悩み花形バッジ**（`worry-bubble`）: こげ茶とコーラルのギザギザ円に白文字。人物写真の周りに4つ配置する - **ポイント番号見出し**（`point-number`）: 筆記体の「Point」＋大きな2桁の数字＋右に2行の見出し - **VOICEラベル**（`voice-tag`）: コーラルの細枠で囲んだ小さなラベル。年代と肌質はコーラル文字 - **チェックリスト**（`check-list`）: チェックボックス型のアイコン付きで、処方のこだわりを縦に並べる - **成分の円バッジ**（`ingredient-circle`）: 半透明の水玉風の円に成分名を入れ、3つ＋2つで配置する - **効能効果帯**（`effect-band`）: 写真の下にグリーンまたはコーラルの2分割帯で訴求を2つ並べ、×でつなぐ。その下に細い効能欄を置く ## Do's and Don'ts **Do** - 商品ごとの色分けを、FVからポイント解説・CTAまで一貫させる - 皮膚断面図などのやさしい図解で、仕組みを視覚的に説明する - 白い方眼紙柄の地を使い、清潔で研究的な印象を出す - 強調語はコーラル文字か黄色マーカーで目立たせる - 医薬部外品の表示や注釈を、枠付きの小ラベルで正確に添える **Don't** - 本文に純黒や寒色系の濃紺を使わない - CTAを単色フラットにしない。光沢と影で目立たせる - 原色の赤や鮮やかすぎる蛍光グリーンを広い面に使わない - 角張ったゴシック体の見出しで硬い印象にしない - 注釈を省略したり、本文と同じサイズで書いたりしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象者と2ステップのケアを一目で伝える）: 左をグリーン、右をコーラルに2分割。上に大きな見出し、中央に商品の切り抜き、下にStepラベルと商品名 2. **悩みの提起**（対象者の悩みに共感する）: 方眼の白地。中央に悩む女性の写真を置き、周りに花形バッジで悩みを4つ配置 3. **専門家の解説**（原因を説明して信頼を得る）: コーラルの見出し帯つきのカード。チェックリストで3要因を示し、右に白衣の人物写真 4. **解決策の提示**（シリーズ商品を紹介する）: 淡いグレーの泡背景に、円形の特長バッジ2つと商品を並べる 5. **使い方ステップ**（洗顔→保湿の順番を示す）: 商品色の枠線カードにピル見出しをつける。使用写真＋2分割の効能帯 6. **初回購入特典**（購入を後押しする）: サーモン地に月桂樹の装飾と大見出し。特典カードと深紅のCTA 7. **お客様の声**（使用感の口コミを紹介する）: クリームの地。写真と文を左右交互に並べ、VOICEラベルをつける 8. **化粧水のポイント**（成分と仕組みを説明する）: グラデーションの帯見出し＋ティールの番号。断面図と成分の円バッジ、チェックリスト 9. **洗顔料のポイント**（泡・抗菌・成分・処方を説明する）: グリーンの帯見出し＋コーラルの番号。写真の上に文字帯、成分の円写真カード、豆知識コラム 10. **特典の再掲とシリーズ紹介**（関連商品のついで買いを促す）: サーモン地に集合写真と商品別の白カード（価格＋送料無料ボタン） 11. **フッター**（法定表記とリンクを載せる）: 白地に小さなグレー文字のリンクを縦線で区切り、コピーライトを添える ## Imagery - 商品は白背景で切り抜き、泡や液体のしずくを横に添える - 人物は素肌感のある女性。白Tシャツで、洗顔・頬に触れるなどのしぐさ - 背景は水面の波紋・シャボン玉・泡を淡くぼかした写真 - 図解はフラットなイラスト。肌色・ピンク・水色で角質層を描き、点線の丸と矢印で説明する - 植物成分は葉や花の切り抜きを淡い円の中に置く - 装飾は月桂樹のリース、手描き風の吹き出し線、筆記体のpoint - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC画像がないため、PCでは中央に幅約480〜750pxのカラムを置き、左右は方眼柄やセクション色で埋めることを推奨する - FVの左右2分割はPCでも維持し、商品を大きく見せる - お客様の声のジグザグ配置は、PCでは写真の比率を大きくする - 成分の円バッジやシリーズ商品カードは、PCで3〜4列に広げてよい - CTAの幅は最大420px程度に抑え、中央に置く ## 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-1c6d552b`（元 LP の URL から採番） - **元 LP**: https://www.collage-shop.jp/shop/lp/repair2025_acne.aspx - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。