--- version: alpha name: Pink Pop Medical Hair Removal Clinic LP description: ローズピンクの地に白い角丸カードを重ねた、女性向け医療脱毛の訴求型 LP。価格の大きな数字、比較図、番号付きメリットを繰り返し、ポイントごとに地色を黄・紫・橙へ切り替えてリズムを出す。主 CTA は濃いピンクのピル型ボタン。 colors: primary: '#ED7C9D' background: '#FBFBFB' background-alt: '#FEDEEC' cta: '#D8476E' on-cta: '#FFF6F8' secondary: '#4FB8D6' accent-1: '#EDBD3C' accent-2: '#D59BDA' accent-3: '#FA993E' text: '#4A4A4A' dark-section: '#969696' tint-1: '#FDF2F6' marker: '#F2D24A' cta-accessible: '#D3305C' secondary-accessible: '#237B95' primary-accessible: '#DF1F57' typography: display: fontFamily: Montserrat fontSize: 64px fontWeight: 600 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.12em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 28px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.3 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}' 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 button-fv: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 88px price-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 160px merit-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 900px compare-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 180px number-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 90px faq-item: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 72px sticky-bar: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px --- # DESIGN.md — ピンク×白カードの医療脱毛クリニック LP（Pink Pop Medical Hair Removal Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: かわいい、ポップ・元気、情報量多め・訴求型、やさしい・柔らかい - **キーワード**: ローズピンク・白カード・大きな価格数字・比較図・番号見出し・カルーセル - **地の質感**: フラットな塗りが中心。紙吹雪の三角とキラキラ装飾を少し足す - **形**: 上部が半円タブになった角丸カード、ピル型ボタン、リボン型ラベル - **温度感**: 暖かく甘い。ピンク基調でパステルを差し色にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#ED7C9D` | ブランドピンク・セクション地 | 24% | 画素の実測 | | `background` | `#FBFBFB` | カード・基本地 | 38% | 画素の実測 | | `background-alt` | `#FEDEEC` | 料金プラン帯の淡ピンク地 | 9% | 画素の実測 | | `cta` | `#D8476E` | 主CTAボタン | 2% | 推定 | | `on-cta` | `#FFF6F8` | CTA文字 | 0% | 画素の実測 | | `secondary` | `#4FB8D6` | FVの水色ボタン・見出しラベル | 2% | 推定 | | `accent-1` | `#EDBD3C` | ポイント02地・番号バッジの黄 | 4% | 画素の実測 | | `accent-2` | `#D59BDA` | ポイント03の紫地 | 4% | 画素の実測 | | `accent-3` | `#FA993E` | ポイント04の橙地 | 4% | 画素の実測 | | `text` | `#4A4A4A` | 見出し・本文の濃グレー | 3% | 推定 | | `dark-section` | `#969696` | 比較の他社側グレー | 2% | 画素の実測 | | `tint-1` | `#FDF2F6` | 情報テーブル見出し・FAQ地 | 5% | 画素の実測 | | `marker` | `#F2D24A` | 価格下の黄マーカー線 | 0% | 推定 | | `cta-accessible` | `#D3305C` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#237B95` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#DF1F57` | AA を満たす補正値（計算） | | 計算 | - 地はピンクと淡ピンクを交互に使い、その上に白カードを置く - 番号付きポイントは 1 つずつ地色を変える（ピンク→黄→紫→橙）。カード内の本文色も地色に合わせる - 強調したい語はピンク文字にするか、白抜きのピンク帯に入れる - 主 CTA はほかより濃いピンクのグラデーション。白文字で書く - 他社との比較はグレー、自社はピンクで色を分ける - 価格の数字の下に黄色のマーカー線を敷く - `button-primary` は文字 `#FFF6F8` × 背景 `#D8476E` のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D3305C`、4.55:1）を使う。 - `button-fv` は文字 `#FFF6F8` × 背景 `#4FB8D6` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#237B95`、4.56:1）を使う。 - `price-card` は文字 `#ED7C9D` × 背景 `#FBFBFB` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DF1F57`、4.54:1）を使う。 - `merit-card` は文字 `#ED7C9D` × 背景 `#FBFBFB` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DF1F57`、4.54:1）を使う。 - `compare-box` は文字 `#FFF6F8` × 背景 `#ED7C9D` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DF1F57`、4.5:1）を使う。 - `faq-item` は文字 `#FFF6F8` × 背景 `#ED7C9D` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DF1F57`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 総額などの価格数字 | 欧文サンセリフ | Montserrat | 600 | 64px | 1.0 | -0.02em | | `headline-lg` | セクション見出し（大きな数字と組み合わせる） | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.3 | 0.05em | | `headline-md` | メリットやポイントの見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.1em | | `headline-sm` | カード内の小見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 17px | 1.5 | 0.08em | | `body-md` | 説明文 | 丸ゴシック | M PLUS Rounded 1c | 500 | 13px | 1.9 | 0.12em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | MERIT・POINT・STEP の弧状英字と番号 | 欧文サンセリフ | Montserrat | 500 | 28px | 1.0 | 0.1em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 20px | 1.3 | 0.05em | - 見出しは字間を広め（0.08em 以上）にして、やわらかく見せる - セクション見出しは白抜きの巨大な数字の横に 2 行で添える - 見出しは灰色で書き、キーワードだけピンクにする - MERIT・POINT・STEP は弧状に並べた英字と中抜きの 2 桁番号で示す - 前置きの一言は「＼ ／」のスラッシュで挟む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。追加サポートだけ 2×2 グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 色の帯の内側に、幅 90% の白カードを中央寄せで置く - 比較図は左に灰色の小カード、右にピンクの大カードを重ねて置く - 料金プランと CTA のまとまりを 3〜4 回繰り返し挿入する - ポイントと手順はカルーセルにし、ドットインジケーターを付ける - 画面下に Web 予約バーを固定する ## Elevation & Depth - CTAボタンには下方向に濃いピンクの影を付け、立体感を出す - 追加サポートの小カードに薄い影を付ける - ほかのカードは影なしのフラットにする ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: カード幅いっぱいの長方形。人物は背景を切り抜くか、斜めの多角形で切る - **セクション境界**: 基本は直線。見出しの下や FAQ の上だけ V 字の三角で切り替える - カード上部には番号用の半円タブを付ける - 料金ラベルは両端が切れ込んだリボン型にする - 番号付きリストは黄色い正方形に数字を入れる - 回数を並べる帯は矢羽根型にする ## Components - **主CTAボタン**（`button-primary`）: 濃いピンクのグラデーションで作るピル型ボタン。白い太字を入れ、下に影を付ける - **FV水色ボタン**（`button-fv`）: 水色グラデーションの角丸ボタン。右に再生アイコンを付ける - **料金プランカード**（`price-card`）: リボン型の見出し、黄色い部位バッジ、巨大な価格数字、注釈で構成する白カード - **番号タブ付きカード**（`merit-card`）: 上部の半円タブに弧状の英字と番号を入れた白カード - **他社比較ボックス**（`compare-box`）: 灰色の他社カードとピンクの自社カードを重ね、下に吹き出しの矢印を付ける - **番号付き理由リスト**（`number-list`）: 白い帯の左上に黄色い正方形の数字を重ねる - **FAQアコーディオン**（`faq-item`）: ピンクの帯に大きな細字の Q と白文字の質問を置き、右端に下向きの山形を付ける - **固定予約バー**（`sticky-bar`）: 画面下に固定する水色の帯。受付時間のピルと矢印丸を入れる ## Do's and Don'ts **Do** - 白カードは必ずピンクか淡ピンクの地の上に置く - 価格の数字は画面幅いっぱいに大きく見せる - 料金と CTA のまとまりを、セクションの合間に何度も挟む - 比較は灰色とピンクで色を分け、自社の優位を示す - ポイントごとにパステルの地色を変える **Don't** - 暗い色や黒をセクションの地にしない（注意喚起の帯だけは例外） - 見出しを詰めた字間で組まない - 寒色を主役にしない（水色は FV ボタンとバーだけに使う） - カードの角を直角にしない - 写真を暗く加工しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（期間限定キャンペーンと価格を伝える）: ピンクの地に放射線と紙吹雪を散らす。白い枠の中に水色のラベル、金色のコース名、巨大な価格、期間を並べ、下に水色の CTA を置く 2. **注意喚起と機器紹介**（安いサロンとの違いを提起する）: 斜めストライプの暗い帯に黄色の大見出しを置く。続けて機器写真とピンクの機器名を見せ、回数ごとの比較図を並べる 3. **料金プランとCTA**（申込みを促す）: 淡ピンクの地にリボン付きの料金カードを置き、点線で囲んだ一言と濃いピンクのピル型 CTA を続ける 4. **メリット3つ**（技術面の優位を示す）: 大きな白抜きの数字の見出しを置き、番号タブ付きカードに図解と他社比較を入れる 5. **こだわりポイント4つ**（信頼と安心を示す）: 地色をポイントごとにピンク・黄・紫・橙へ変える。写真、線画イラスト、色付きの本文をカルーセルで見せる 6. **追加サポート**（付帯サービスを伝える）: 白カードの中に、淡ピンクの小カードを 2×2 で並べる 7. **追加料金ゼロ**（費用面の不安を取り除く）: 白い円を扇形に分割して線アイコンを入れ、中央にピンクの円で 0 円を示す 8. **予約の取りやすさ**（予約面の不安を取り除く）: 切り抜いた人物と問いかけを置き、黄色い番号付きの理由を 3 つ並べる 9. **割引プラン**（お得感を出す）: V 字の見出し帯の下にピンク枠のカードを置き、割引率を大きく書いて黄マーカーを敷く。カルーセルにする 10. **比較表**（医療脱毛とエステ脱毛の違いを示す）: 項目列は金色地。自社側はピンクの枠で強調し、エステ側はベージュにする 11. **施術の流れ**（来院までの手順を示す）: 大きな数字の見出しを置き、STEP タブ付きカードをカルーセルで見せる。写真の上にピンクの帯の文字を重ねる 12. **よくある質問**（疑問を解消する）: 細字の大きな英字見出しを置き、ピンクのアコーディオンを縦に積む 13. **クリニック情報**（所在地と連絡先を示す）: 白地に淡ピンクの見出し帯を置き、中央揃えのテキストと注意事項を続ける ## Imagery - 明るい白基調の院内で撮った、清潔な女性モデルの写真 - 人物は背景を切り抜き、斜めの多角形や淡ピンクの面に重ねる - 灰色の細い線で描いた、手描き風のアイコンとイラスト - 肌の断面やレーザーは、パステルの平面図で図解する - キラキラと三角の紙吹雪を少しだけ散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像はないため、以下は推奨。PC ではコンテンツ幅を 750px 前後で中央に固定し、両脇に淡ピンクの地を広げる - 比較図やカードの構成は SP と同じ 1 カラムのまま拡大する - 追加サポートは PC で 4 列に並べる - カルーセルは PC で 2〜3 枚を同時に見せる - 固定予約バーは PC では右下の浮動ボタンに変える ## 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-f299f791`（元 LP の URL から採番） - **元 LP**: https://win-clinic.jp/lp-00-fb/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。