--- version: alpha name: Soft Pink Esthetic Skincare Trial LP description: 白と淡いグレーを地に、ローズピンクのオファー帯を何度も繰り返すスキンケアのトライアルLP。自然素材の写真と余白の広い字間ゴシックで、エステの上品さとやさしさを出しつつ、価格訴求ははっきり見せる。 colors: primary: '#EB6B8E' background: '#FEFEFE' background-alt: '#F9F9F9' tint-1: '#F6D9D3' tint-2: '#FDEAEE' surface: '#FCF1F3' cta: '#5A1420' on-cta: '#FFEEEA' text: '#3C3533' text-body: '#6E6461' accent-1: '#9B1C35' secondary: '#ECF1F4' dark-section: '#5E5654' text-muted: '#D9D9D7' primary-accessible: '#D61D4F' text-body-accessible: '#6A605D' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.12em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 22px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 64px offer-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.display}' height: 860px discount-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 56px concern-cloud: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px cause-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 36px step-badge: backgroundColor: '{colors.text-muted}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 90px voice-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 180px free-circle: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 82px lead-label: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 70px --- # DESIGN.md — ローズピンク×霧グレーのエステ系スキンケアLP（Soft Pink Esthetic Skincare Trial LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: やさしい・柔らかい、上品・高級、清潔・爽やか、ナチュラル - **キーワード**: ローズピンク・霧がかったグレー・広い字間・自然素材写真・繰り返しオファー・エステ感 - **地の質感**: 白〜霧グレーのグラデーションに、ぼかした円形の雲が浮かぶ柔らかな空気感 - **形**: 角丸は控えめ。円形バッジやぼかした楕円、細い線で囲む円で柔らかさを出す - **温度感**: やや暖かいピンクと、冷たいグレーの中間 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EB6B8E` | オファー帯の地色・ブランドピンク | 10% | 画素の実測 | | `background` | `#FEFEFE` | 基本の地色 | 26% | 画素の実測 | | `background-alt` | `#F9F9F9` | 淡いグレーの区切り帯 | 15% | 画素の実測 | | `tint-1` | `#F6D9D3` | 淡いピンクの区切り帯・声カード | 6% | 画素の実測 | | `tint-2` | `#FDEAEE` | ごく淡いピンク地（創業者・声セクション） | 6% | 画素の実測 | | `surface` | `#FCF1F3` | オファー内の白カード | 3% | 画素の実測 | | `cta` | `#5A1420` | 申込ボタン（深いワインレッド） | 2% | 推定 | | `on-cta` | `#FFEEEA` | ボタン文字 | 0% | 画素の実測 | | `text` | `#3C3533` | 見出し文字 | 2% | 画素の主要色に補正 | | `text-body` | `#6E6461` | 本文（暖かいグレー） | 3% | 推定 | | `accent-1` | `#9B1C35` | 見出し前の小さなリード文字（ワイン） | 0% | 推定 | | `secondary` | `#ECF1F4` | 悩みタグ等の青グレー面 | 1% | 画素の実測 | | `dark-section` | `#5E5654` | 割引率バッジ・限定帯 | 0% | 推定 | | `text-muted` | `#D9D9D7` | STEPバッジの灰円 | 0% | 画素の実測 | | `primary-accessible` | `#D61D4F` | AA を満たす補正値（計算） | | 計算 | | `text-body-accessible` | `#6A605D` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いグレーを交互に使い、ピンクはオファー帯に集中させる - オファー帯は全面ローズピンク、内側に淡ピンクの白寄りカードを置く - 主CTAはピンク帯上で目立つ深いワインレッドにする - 見出し前のリード文はワインレッドで小さく - 本文は黒ではなく暖かいグレーで柔らかく - ビフォーアフターの好転側ラベルはピンク文字で示す - `offer-block` は文字 `#FFEEEA` × 背景 `#EB6B8E` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D61D4F`、4.5:1）を使う。 - `voice-card` は文字 `#6E6461` × 背景 `#F6D9D3` のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#6A605D`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | オファー帯の大見出し・価格 | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.3 | 0.1em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.12em | | `headline-sm` | 商品名・小見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 2.0 | 0.1em | | `accent` | 英字見出し・VOICE番号・STEP | 欧文サンセリフ | Montserrat | 700 | 22px | 1.2 | 0.08em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `label-button` | CTAボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.4 | 0.12em | - 全体に字間を0.1em前後に広げ、ゆったりさせる - 本文は行間2.0で短い改行を多めに入れる - 英字見出しは太いジオメトリック系サンセリフを大文字で - 価格は数字を特大、税込や割引率は小さく添える - 強調したい語にはピンクの下線を引く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。テクスチャ説明は画像左＋文右の2列 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 見出しは中央揃え、本文は左揃えで中央寄せブロックにする - オファー帯は同じ構成で4〜5回繰り返す - 写真セクションは全幅で余白なしにする - 使い方は左に小さなラベル線、右に商品画像を並べる - 声カードは全幅の淡ピンク帯にして、イラストを左右交互に置く ## Elevation & Depth - 基本はフラットで影はほぼ使わない - 商品画像は下に鏡面反射を付けて浮かせる - 素材写真のグリッドは軽いドロップシャドウ - 書籍・雑誌の書影にはやわらかい影 ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの矩形。人物イラストは円で囲む - **セクション境界**: 基本は直線。写真の上端だけゆるい弧形 - CTAはピル型でグラデーション付きにする - 悩みワードはぼかした不定形の雲に入れる - STEPやバッジは塗りの円 - フリー処方は細い線の円に斜線を入れる ## Components - **申込ピルボタン**（`button-primary`）: 深いワインレッドのグラデーションを付けたピル型。幅は約90% - **オファー帯**（`offer-block`）: ピンクの全幅帯。円形の白線バッジ、セット商品画像、番号付きアイテムタグ、価格、内容カード、CTA、定期ではない旨の注意枠を順に並べる - **割引率円バッジ**（`discount-badge`）: 濃グレーの円に割引率を白文字で入れ、特大価格の左に置く - **悩みの雲**（`concern-cloud`）: 白〜灰のぼかした楕円に悩みの単語を入れ、大きさを変えて散らす - **原因タグ**（`cause-tag`）: 青グレーの面を2×2に並べ、短い語を中央に置く - **STEP円バッジ**（`step-badge`）: 灰または淡ピンクの円に英字STEPと番号、下に種類名 - **お客様の声**（`voice-card`）: 円で囲んだ線画イラストとピンクのVOICE番号、年代を添える。下に淡ピンク帯の本文と引用符、強調部に下線 - **フリー処方アイコン**（`free-circle`）: 細いグレー線の円に斜線を入れ、成分名を中央に置く。4＋3で配置 - **リード付き見出し**（`lead-label`）: ワインレッドの小さなリード文の下に、黒の太字見出しを置く ## Do's and Don'ts **Do** - オファー帯は同じデザインのまま複数回挟む - 本文は暖かいグレーで、広い字間と行間をとる - 自然素材や手肌の写真は全幅で大きく見せる - 価格は通常価格に打ち消し線、割引率バッジ、特大の価格の順に並べる - 定期購入ではないことを注意枠ではっきり示す **Don't** - ピンクを本文セクションの地に多用しない - 真っ黒の太いボーダーや強い影を使わない - ポップな丸ゴシックや手書き書体を使わない - 字間を詰めた窮屈な組版にしない - ビビッドな原色を差し色にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と主張の提示）: 霧の山と岩に置いたボトルの写真。中央にロゴとコピー、左に円形の価値バッジを2つ、右にチェック付きの効果語を3つ、右下にピンクの円バッジ 2. **リード文**（ブランドの約束）: 白地に中央揃えの3行文 3. **オファー**（トライアル申込）: ピンクの全幅帯にセット画像、価格、内容リスト、CTAを置く 4. **悩みの提起**（共感）: ぼかした雲に悩み語を散らし、原因タグを2×2で並べる 5. **解決策**（考え方の提示）: 施術写真の上端を弧形にし、グレーのグラデ地に本文とビフォーアフター写真を置く 6. **成分**（素材のこだわり）: 英字ラベル付き見出しと鉱石・植物の写真。素材写真を5列の不揃いなグリッドで並べる 7. **テクスチャー・フリー処方**（使用感と安心）: 手肌の写真と泡の装飾。線の円アイコンを7つ並べる 8. **使い方**（商品ラインの説明）: 毎日／週1の帯を灰とピンクで分け、商品ごとにSTEPバッジ、商品画像、テクスチャ写真を2列で置く 9. **お客様の声**（社会的証明）: 線画アバターとVOICE番号、淡ピンク帯の本文を4件 10. **開発者紹介**（権威と想い）: 淡ピンク地に人物写真、想いの文、白カードの経歴、書籍・雑誌の書影 11. **申込規約・フォーム**（申込完了）: 灰地に規約テキスト。ピンク見出し帯の入力フォームと緑の確認ボタン 12. **フッター**（締め）: 淡ピンクの巨大ロゴ文字の装飾と、リンク・コピーライト ## Imagery - 霧のかかった山や空を背景に、商品を岩の上に置いて撮る - 鉱石や植物は白〜淡青の背景で、下に反射を付ける - 手肌やエステ施術は白基調の柔らかい自然光で撮る - クリームのテクスチャを正方形でアップにする - お客様は細い線画の女性イラストを円で囲む - 水滴や泡を浮遊装飾として散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC版がないため推奨として書く - PCでは本文幅を約480〜640pxの中央カラムに固定し、左右は淡いグレーの地にする - オファー帯は全幅のままにし、内側の要素は2カラム（画像｜価格・CTA）にする - 使い方とテクスチャは横並びを保ち、余白を1.5倍に広げる ## 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-98002cf3`（元 LP の URL から採番） - **元 LP**: https://mem-mem.jp/lp?u=trialset_l - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。