--- version: alpha name: Soft Pink Aesthetic Clinic Menu LP description: 淡いピンクの霞がかったファーストビューの下に、施術ごとの横長バナーを縦に並べる美容外科 LP。部位別の悩みは大きな黒い筆記体の英字と、モデル写真から引き出し線で伸びるピル型ラベルで見せる。後半はベージュ見出しの STEP カードで来院の流れを説明し、黒いナビタイルで締める。 colors: primary: '#F27FB0' background: '#FFFFFF' tint-1: '#FEE2EC' secondary: '#D3A1BB' cta: '#FD5C9A' on-cta: '#FFFFFF' accent-1: '#3DB43A' accent-2: '#0C85E2' tint-2: '#F4E6BF' accent-3: '#A8873F' line: '#F4E5C8' dark-section: '#333333' background-alt: '#EAEAEA' text: '#252C31' cta-accessible: '#E8035B' primary-accessible: '#E4176F' typography: display: fontFamily: Zen Maru Gothic fontSize: 40px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em accent: fontFamily: Mr Dafoe fontSize: 90px fontWeight: 400 lineHeight: 1.0 headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 12px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' header-cta-trio: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px treatment-banner: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 150px ornament-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 56px script-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 100px concern-pill: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 150px nav-tile: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 62px floating-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 50px --- # DESIGN.md — 淡いピンクと黒筆記体の美容クリニック LP（Soft Pink Aesthetic Clinic Menu LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: やさしい・柔らかい、上品・高級、情報量多め・訴求型 - **キーワード**: 淡いピンクの霞・施術バナーの縦並び・黒い筆記体の英字・引き出し線ラベル・ベージュの STEP 見出し・3 色の予約ボタン - **地の質感**: パステルピンクのぼかし背景にきらめきを散らす。下層は白地のフラットな面 - **形**: アーチ枠・ピル型ラベル・角の小さいカード・斜めの灰色帯 - **温度感**: 暖かくやわらかい。ピンクとベージュが中心 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F27FB0` | 見出し帯・ブランドを代表するピンク | 3% | 推定 | | `background` | `#FFFFFF` | ページの地 | 30% | 画素の実測 | | `tint-1` | `#FEE2EC` | FV の淡いピンクの地 | 8% | 画素の実測 | | `secondary` | `#D3A1BB` | FV 大見出しのくすみモーブ | 1% | 画素の実測 | | `cta` | `#FD5C9A` | WEB 予約ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#3DB43A` | LINE 予約の緑 | 1% | 推定 | | `accent-2` | `#0C85E2` | 電話予約の青 | 1% | 画素の実測 | | `tint-2` | `#F4E6BF` | STEP 見出しのベージュ | 2% | 画素の実測 | | `accent-3` | `#A8873F` | STEP の小見出しの金茶 | 0% | 推定 | | `line` | `#F4E5C8` | STEP カードの枠線 | 0% | 画素の主要色に補正 | | `dark-section` | `#333333` | ナビタイル・筆記体英字 | 3% | 画素の実測 | | `background-alt` | `#EAEAEA` | 斜めの薄灰帯 | 4% | 画素の実測 | | `text` | `#252C31` | 本文 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#E8035B` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E4176F` | AA を満たす補正値（計算） | | 計算 | - 地は白。ファーストビューだけ淡いピンクのぼかしで包む - ピンクは見出し帯と予約ボタンに絞る - 予約手段は緑・ピンク・青で色を分け、どのページでも同じ色にする - 流れのセクションはベージュの見出しと金茶の小見出しでまとめ、ピンクは使わない - 締めのナビは濃いグレーの面に、ピンクの線画アイコンを置く - `header-cta-trio` は文字 `#FFFFFF` × 背景 `#FD5C9A` のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E8035B`、4.57:1）を使う。 - `script-heading` は文字 `#FFFFFF` × 背景 `#F27FB0` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E4176F`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大キャッチ | 丸ゴシック | Zen Maru Gothic | 500 | 40px | 1.3 | 0.05em | | `headline-lg` | 施術名（バナー内） | 明朝 | Shippori Mincho | 700 | 34px | 1.2 | 0.05em | | `accent` | 部位の英字（黒い筆記体） | 欧文スクリプト | Mr Dafoe | 400 | 90px | 1.0 | 0.0em | | `headline-md` | STEP 見出し・メニュー見出し | ゴシック | Noto Sans JP | 400 | 18px | 1.4 | 0.02em | | `headline-sm` | ピンク帯ラベル・小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.0em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | 予約ボタン・ナビタイルの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em | - 価格は大きな数字にし、税込などの注記は小さく添える - 英字の筆記体は画面幅に近いほど大きくし、和文ラベルと重ねる - 本文は飾らないゴシックで短く書く - 施術名は明朝またはゴシックの太字を、バナーごとに使い分けてよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ナビだけ 2×2 のグリッド - **本文ブロックの幅**: 画面幅の約 96% - **余白**: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算） - 施術バナーは全幅で横長にし、間隔は約 16px で縦に並べる - バナーの右端に丸い矢印ボタンを置く - 悩みのラベルは写真の左右に 2 列で置き、引き出し線で写真上の部位とつなぐ - STEP カードは上下に 40px ほどの間隔をとって積む - ヘッダー直下に予約ボタンを 3 つ並べて固定する ## Elevation & Depth - 影はほとんど使わない - 予約ボタンだけ下側に薄い影をつけ、立体感を出す - 悩みのラベルは半透明の白にして、写真の上に浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: FV の人物は上部をアーチ型の細枠で囲む。バナー内の人物は角丸なしの矩形で切る - **セクション境界**: 悩みのブロック間は、斜めに切った薄灰色の帯でつなぐ - 悩みのラベルは細い黒枠のピル型にする - STEP カードは角丸なし、または 2px 程度にする - ナビタイルは角丸 8px の濃い面にする ## Components - **3 色の予約ボタン**（`header-cta-trio`）: LINE・WEB・電話の予約ボタンを横に 3 つ並べる。上に小さな白いバッジをのせ、ボタン上部には短い補足を入れる - **施術バナー**（`treatment-banner`）: 左に人物、右に施術名と価格帯を置く全幅バナー。右端に丸い矢印をつける - **きらめき枠見出し**（`ornament-heading`）: 細い二重線の枠の角に星のきらめきを添えた見出し。下に小さな SCROLL の文字と矢印を置く - **筆記体見出し**（`script-heading`）: 黒い大きな筆記体の英字に、ピンク帯の和文ラベルを重ねる - **悩みラベル**（`concern-pill`）: 半透明の白いピル型ラベル。細い線で写真上の部位を指す - **STEP カード**（`step-card`）: ベージュの見出し帯に、枠線つきの白い本文を続ける。右側に予約ボタンの画像を置く - **ナビタイル**（`nav-tile`）: 濃いグレーの面に、ピンクの線画アイコンと白文字を置いた 2×2 のリンク - **追従予約バナー**（`floating-banner`）: 画面下に固定する黒い帯。左にロゴを置き、無料を示すバッジと閉じるボタンをつける ## Do's and Don'ts **Do** - 価格帯は「〜」でつなぎ、大きな数字で見せる - 予約手段は 3 色で色分けし、何度も繰り返し置く - 悩みは写真と引き出し線で、部位と対応させて見せる - FV にはきらめきとアーチ枠を入れ、やわらかい光の感じを出す **Don't** - 暗い背景の FV にしない - STEP にピンクを多用しない - 悩みのラベルを塗りの濃いボタンにしない - 筆記体の英字を小さくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと予約の導線）: ロゴ・一覧・メニューの下に、3 色の予約ボタンを並べる 2. **ファーストビュー**（ブランドの世界観を伝える）: ピンクの霞の背景に、アーチ枠で囲んだ笑顔の人物を置く。大きな丸ゴシックのキャッチと、英字の筆記体を添える 3. **おすすめ施術一覧**（人気の施術と価格を見せる）: きらめき枠の見出しの下に、色味の違う施術バナーを 7〜8 本縦に並べる 4. **顔の悩み**（悩みから施術を選ばせる）: 筆記体の英字とピンク帯の見出しの下に、顔写真と引き出し線つきのラベルを 8 個置く 5. **体の悩み**（体の施術への導線）: 同じ型でラベルを 3〜4 個置く 6. **肌の悩み**（肌の施術への導線）: 同じ型でラベルを 4 個置く 7. **診療までの流れ**（来院の不安を減らす）: ベージュ見出しの STEP カードを 5 つ並べる。予約手段ごとにボタンを添える 8. **ナビゲーション**（関連ページへ誘導する）: 黒いタイルを 2×2 で並べ、その下に水色のページ TOP ボタンを置く 9. **フッター**（規約と著作権の表示）: ピンクのリンクと、灰色の小さな文字を置く ## Imagery - 人物は明るく柔らかい光で撮り、肌の質感が伝わるアップにする - 手を頬に添えた笑顔の構図を多めに使う - 施術バナーはそれぞれ違うパステル調のグラデーションにする - 体の写真はベージュの無地の背景で、肌色の下着を着せて撮る - 星形のきらめきと細い線の装飾を散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため推奨として書く。PC では中央 750px 程度の幅に収め、左右に淡いピンクの地を見せる - 施術バナーは PC でも 1 列のまま、または 2 列にする - 悩みのセクションは写真を大きくし、ラベルを左右に余裕をもって置く - 予約ボタンはヘッダーの右側に横並びにする ## 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-e5040412`（元 LP の URL から採番） - **元 LP**: https://tcb-beauty.net/yahoo - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。