--- version: alpha name: Mint and Peach Character Skincare LP description: 淡いミントと淡いピーチを交互に敷き、方眼の地紋と波形の区切りで柔らかく見せる敏感肌向けスキンケアLP。黒い線画のゆるキャラ、角丸の帯見出し、丸いバッジで親しみやすさと誠実さを両立させる。 colors: primary: '#76C4B4' background: '#D9EDEB' background-alt: '#FAEBE5' surface: '#FFFFFF' secondary: '#F4A29A' cta: '#4DB39B' on-cta: '#FFFFFF' text: '#2B2B2B' accent-1: '#6CC0AE' accent-2: '#EE8C82' line: '#D7EAE8' dark-section: '#F4A29A' tint-1: '#A7C8BE' cta-accessible: '#388371' primary-accessible: '#388273' typography: display: fontFamily: Zen Maru Gothic fontSize: 34px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.2em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.15em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Kalam fontSize: 16px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Montserrat fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 72px 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.full}' height: 42px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 28px band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 30px circle-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 82px offset-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 180px outline-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 32px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 56px step-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 120px --- # DESIGN.md — ミント×ピーチのゆるキャラ敏感肌スキンケアLP（Mint and Peach Character Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: やさしい・柔らかい、かわいい、清潔・爽やか、信頼・誠実 - **キーワード**: ミント・ピーチ・方眼地紋・線画キャラクター・波形区切り・丸バッジ - **地の質感**: 淡い方眼グリッドの地紋。水滴やクリームのテクスチャ写真をアクセントに置く - **形**: 角丸カード、正円バッジ、波形とアーチ形の区切り - **温度感**: やや涼しげ。暖色ピーチで柔らかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#76C4B4` | 帯見出し・ラベルのミント | 5% | 推定 | | `background` | `#D9EDEB` | ページ全体の淡ミント地 | 30% | 画素の主要色に補正 | | `background-alt` | `#FAEBE5` | ポイントセクションの淡ピーチ地 | 10% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | カード・円バッジの白面 | 30% | 画素の主要色に補正 | | `secondary` | `#F4A29A` | ピーチの縦帯・見出し帯・フッター | 6% | 推定 | | `cta` | `#4DB39B` | 購入ボタン | 0% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#2B2B2B` | 見出し・本文・キャラ線画 | 3% | 推定 | | `accent-1` | `#6CC0AE` | 本文中の強調文字 | 0% | 推定 | | `accent-2` | `#EE8C82` | ピーチの強調文字・円枠線 | 0% | 推定 | | `line` | `#D7EAE8` | 罫線・方眼地紋 | 1% | 画素の主要色に補正 | | `dark-section` | `#F4A29A` | フッターSNS帯 | 2% | 推定 | | `tint-1` | `#A7C8BE` | 円バッジ枠と英字透かし | 3% | 画素の主要色に補正 | | `cta-accessible` | `#388371` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#388273` | AA を満たす補正値（計算） | | 計算 | - 地はミントとピーチの淡い色を交互に使い、セクションの切り替えを示す - ミントは帯見出しとラベル、ピーチは強調用のサブとして使う - 本文は濃いグレーにする。強調語だけミント文字かピーチの下地にする - カードとバッジは白面にミントかピーチの線を合わせる - 純黒は線画キャラクターだけに使う - `button-primary` は文字 `#FFFFFF` × 背景 `#4DB39B` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#388371`、4.51:1）を使う。 - `button-secondary` は文字 `#4DB39B` × 背景 `#FFFFFF` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#388371`、4.51:1）を使う。 - `band-heading` は文字 `#FFFFFF` × 背景 `#76C4B4` のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#388273`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ風タイトル | 丸ゴシック | Zen Maru Gothic | 500 | 34px | 1.3 | 0.2em | | `headline-lg` | ポイントの見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.6 | 0.15em | | `headline-sm` | 帯見出し・ラベル | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.12em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.0 | 0.1em | | `note` | 成分の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.05em | | `accent` | Point番号の手書き英字 | 欧文スクリプト | Kalam | 400 | 16px | 1.2 | 0.05em | | `label-button` | ボタン・Step番号・英字見出し | 欧文サンセリフ | Montserrat | 700 | 15px | 1.2 | 0.08em | - 字間は0.1em以上広く取り、ゆったり見せる - 本文は中央揃えで短く改行する - セクション番号は手書き風の英字を見出しの左上に添える - 円形に回り込む英字ロゴで番号を囲む - 大きな英字を淡いミントで透かして写真の背後に敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。バッジは 3 列グリッド - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - コンテンツ幅を中央に置き、左右に余白を残す - 罫線区切りの1行ずつの文章ブロックを使う - 円バッジは3列×2段で並べる - ステップは円を三角形に配置し矢印でつなぐ - 商品カードは縦に積み、それぞれにキャラを添える ## Elevation & Depth - カードは影ではなく右下にミントかピーチのずらし面を敷く - ボタンにも影は付けない - 写真に影は付けない ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜きで置く。成分写真は円か有機的な楕円で切る - **セクション境界**: なだらかな波形カーブ。キャンペーン部分はアーチ形の窓 - 帯見出しの下に小さな三角か吹き出しの尻尾を付ける - 特長は正円バッジで見せる - FVは大きな角丸の白窓にする ## Components - **購入ボタン**（`button-primary`）: ミントのピル型で、白文字にカートアイコンを付ける - **店舗リンク**（`button-secondary`）: 白地にミントの枠線を付けた小さいボタン - **帯見出し**（`band-heading`）: ミントかピーチの角丸帯に白文字を載せ、吹き出しの尻尾を付ける - **円バッジ**（`circle-badge`）: 白い正円にピーチの枠線を付け、短い特長語を入れる - **ずらし影カード**（`offset-card`）: 白いカードの右下に色面をずらして敷き、上にラベルを付ける - **黒枠タグ**（`outline-tag`）: 白地に黒の細枠とミントの下線影を付け、商品の質感を一言で示す - **擬音吹き出し**（`speech-bubble`）: 白いギザギザの丸に、肌状態の擬音を2行で入れる - **ステップ円**（`step-circle`）: 白い大円に枠付きのStep番号と商品名を入れ、矢印でつなぐ ## Do's and Don'ts **Do** - 黒線画のゆるキャラを各セクションに配置する - ミントとピーチの淡い地を交互に使う - 地に薄い方眼の地紋を敷く - 成分の注釈は小さく、必ず添える - 強調語はピーチの下地かミント文字で示す **Don't** - 濃い色を背景全面に使わない - 強い影やグラデーションのボタンを使わない - 明朝体や高級感のある装飾を使わない - 直線的なセクション区切りを多用しない - 原色の赤や青を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品シリーズとキャラクターの印象づけ）: 方眼地に大きな角丸の白窓を置く。縦書きのピーチ帯と、キャラ・商品・ミントのラベルを配置する 2. **悩みの提起**（肌の悩みへの共感）: 吹き出し形のミント帯を2段にし、困り顔のキャラと擬音吹き出しを添える 3. **解決の提示**（原因と商品の役割の説明）: 罫線で区切った1行ずつの中央揃え文に、ミントの強調文字を入れる 4. **商品ラインナップ**（3品の紹介）: 水滴と商品写真の上に、ミント枠の円ラベルを置く。下端は波形で区切る 5. **特長1**（独自成分の訴求）: ピーチ地に手書きのPoint番号と帯見出しを置く。シーソーのイラストと、ずらし影カードで見せる 6. **特長2**（配合成分の整理）: 2つの楕円を×で対比させ、ミント見出しの3列成分カードと注釈を続ける 7. **特長3**（低刺激設計の訴求）: ピーチ枠の円バッジを6つ並べ、テスト項目をチェックリストのカードにする 8. **使い方**（3ステップの提示）: 白い円を三角形に配置し、Step番号と矢印でつなぐ 9. **商品詳細**（各品の質感と特徴）: 円形の英字に囲まれた番号を見せる。白カードに黒枠タグ、商品写真、英字の透かし、ミントのラベル、本文を入れる 10. **キャンペーン**（参加型企画への誘導）: ミントの両脇にアーチ窓を置き、キャラとピル型ボタンを入れる。縦書きの英字を添える 11. **動画**（動画での補足）: 英字見出しとキャラの下に動画埋め込みを置く 12. **CTA・フッター**（購入導線とSNS）: ロゴの下にミントのピル型CTAとサブボタンを置く。ピーチ帯に白線枠のSNSアイコンを並べる ## Imagery - 太い黒線で描いた白いゆるキャラ。頬に手を当てるポーズ - 白い商品ボトルは切り抜きで、淡い背景に浮かべる - 水滴やクリームのテクスチャ写真を周囲に散らす - 成分のイメージ写真は円形に切り抜く - 背景は薄いミントの方眼地紋にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約375〜480px幅のSPカラムを固定し、左右を淡色の地で埋める - FVの背景色は左右の端まで広げる - PCでも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-d3f03b7f`（元 LP の URL から採番） - **元 LP**: https://kikumasa-cosme.jp/nyuusankin-hoppe/?utm_source=meta&utm_medium=display&utm_campaign=Meta_nyuusankin-hoppe_202609LP&utm_content=Meta_nyuusankin-hoppe_20260911_10story&utm_id=120252459895100704_v2_s11_i97937682&utm_term=120252459895100704 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（0/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。