--- version: alpha name: Greige Marble Elegant Cosmetic Surgery LP description: 白〜グレージュの大理石テクスチャと波形の境界でセクションをつなぐ、上品で落ち着いた美容クリニック LP。見出しは明朝、本文はゴシック。強調色はくすんだティールブルー。濃い焦げ茶の相談 CTA ブロックを何度も入れて、電話・予約・問い合わせへ繰り返し誘導する。 colors: primary: '#A38176' background: '#FFFFFF' background-alt: '#EBE7E4' tint-1: '#F5F1EE' tint-2: '#FEF6F4' dark-section: '#2A1D15' on-dark: '#FDFAF6' secondary: '#45261A' accent-1: '#2B7A94' cta: '#2DB4D6' on-cta: '#FFFFFF' accent-2: '#F2987E' accent-3: '#BF694E' marker: '#D6335A' text: '#3D2D28' line: '#D9C6C0' primary-accessible: '#936E63' cta-accessible: '#1E8099' accent-3-accessible: '#B55D41' typography: display: fontFamily: Shippori Mincho fontSize: 52px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Cormorant Garamond fontSize: 38px fontWeight: 400 lineHeight: 1.0 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.85 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' consult-cta-block: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 560px button-phone: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-sub: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 42px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px reason-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 900px trust-badge: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 105px checklist-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 190px price-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 120px sticky-cta-bar: backgroundColor: '{colors.background}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 50px --- # DESIGN.md — グレージュ大理石と深茶の美容外科 LP（Greige Marble Elegant Cosmetic Surgery LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 上品・高級、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: グレージュ・大理石テクスチャ・明朝見出し・ティールの強調・波形の区切り・焦げ茶の CTA 帯 - **地の質感**: 薄いグレーの大理石模様と、白い霧のようなぼかし。マットで柔らかい - **形**: 波形のセクション境界、片側だけ大きく丸めたカード、ピル型ボタン、丸いバッジ - **温度感**: やや暖かいニュートラル（ピンクベージュ寄りのグレー） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A38176` | ブランドのモーブブラウン（表見出し・電話ボタン・価格） | 6% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 25% | 画素の実測 | | `background-alt` | `#EBE7E4` | グレージュの地（理由カード・メニュー） | 11% | 画素の実測 | | `tint-1` | `#F5F1EE` | ベージュのカード面 | 9% | 画素の実測 | | `tint-2` | `#FEF6F4` | 相談 CTA 内の淡いピンクの面 | 5% | 画素の実測 | | `dark-section` | `#2A1D15` | 焦げ茶の相談 CTA 帯 | 5% | 画素の実測 | | `on-dark` | `#FDFAF6` | 濃い地の上の白文字 | 1% | 画素の実測 | | `secondary` | `#45261A` | FV の焦げ茶の帯 | 1% | 画素の実測 | | `accent-1` | `#2B7A94` | ティールの強調文字・英字ラベル・番号 | 1% | 推定 | | `cta` | `#2DB4D6` | 無料カウンセリング予約ボタンの水色 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#F2987E` | 問い合わせボタンのサーモン | 1% | 画素の実測 | | `accent-3` | `#BF694E` | テラコッタのサブボタン | 0% | 画素の実測 | | `marker` | `#D6335A` | 相談文の強調ピンク赤 | 0% | 推定 | | `text` | `#3D2D28` | 見出し・本文の濃い茶黒 | 3% | 画素の主要色に補正 | | `line` | `#D9C6C0` | カード枠・表罫の線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#936E63` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#1E8099` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#B55D41` | AA を満たす補正値（計算） | | 計算 | - 地の色は白→大理石グレージュ→白を波形で交互に切り替える - 強調はくすんだティールに限る。英字ラベル・番号・本文中の要点に使う - 表の見出しセル・価格・電話ボタンはモーブブラウンで統一する - 焦げ茶の CTA 帯は約 3 セクションごとに同じデザインで繰り返す - CTA は電話＝モーブ、予約＝水色、問い合わせ＝サーモンの 3 色で役割を分ける - ピンク赤は相談文のマーカーにだけ使う - `button-phone` は文字 `#FFFFFF` × 背景 `#A38176` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#936E63`、4.52:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#2DB4D6` のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1E8099`、4.56:1）を使う。 - `button-sub` は文字 `#FFFFFF` × 背景 `#BF694E` のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#B55D41`、4.56:1）を使う。 - `price-card` は文字 `#A38176` × 背景 `#FFFFFF` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#936E63`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の施術名の大見出し | 明朝 | Shippori Mincho | 800 | 52px | 1.2 | 0.05em | | `headline-lg` | セクションの見出し | 明朝 | Shippori Mincho | 600 | 22px | 1.5 | 0.1em | | `headline-md` | カード見出し・ボックスのタイトル | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.05em | | `accent` | 見出しの上に置く英字ラベル | 欧文サンセリフ | Montserrat | 500 | 11px | 1.4 | 0.1em | | `headline-sm` | 理由の大きな番号（01〜04） | 欧文セリフ | Cormorant Garamond | 400 | 38px | 1.0 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.85 | 0.05em | | `note` | リスク・費用などの注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.05em | - 見出しは明朝で字間を広めに取り、上品さを出す - 見出しは必ず小さなティールの英字ラベルと組にする - 本文中の要点はティールの文字色で示し、太字は控えめにする - 医療広告のための注釈は小さなグレー文字で各施術の近くに必ず入れる - FV の見出しは白い帯の上に黒ゴシックで置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。医師紹介は 5 列のグリッド - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 見出しは左揃えにし、左余白を約 40px 取る - 理由カードは画面端まで伸ばし、片側の上角だけを大きく丸める - 大きな番号はカードの角からはみ出させて置く - 症例・ポイント・流れはスライダーにし、ドットで送る - 画面下に 3 分割の固定 CTA バーを置く ## Elevation & Depth - 基本はフラット。カードは白地か細い枠線で区切る - CTA ボタンには軽い下影を付ける - FV の丸いバッジには白いぼかしの光彩を付ける - 強調メッセージは白い円形グラデーションのにじみの上に置く ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 症例は横長の長方形、医師は角丸なしの縦長、FV のバッジは正円 - **セクション境界**: ゆるい波形の曲線で大理石地と白地をつなぐ - 相談 CTA のボタンはピル型で右端に矢印を付ける - サブボタンは角丸が小さい長方形のテラコッタ - 理由カードは右上か左上だけを約 40px 丸める - 強調の円は細い線の正円で、2 つを×でつなぐ ## Components - **相談 CTA 帯**（`consult-cta-block`）: 焦げ茶の帯に受付スタッフの写真と白見出し。中は淡ピンクの相談文と、3 色のピル型ボタンを縦に並べる - **電話ボタン**（`button-phone`）: モーブのピル型。受付時間と電話番号を 2 段で載せる - **予約ボタン**（`button-primary`）: 水色のピル型。アイコンと右矢印付き - **詳細リンクボタン**（`button-sub`）: テラコッタの角丸長方形。白文字と右矢印 - **英字ラベル付き見出し**（`section-heading`）: 小さなティールの英字ラベルの下に、明朝の見出しを左揃えで置く - **番号付き理由カード**（`reason-card`）: グレージュのカード。片側の上角を大きく丸め、ティールの大きなセリフ番号を角に置く - **丸い実績バッジ**（`trust-badge`）: 白〜グレーのグラデーションの正円に、実績を 3 つ並べる - **チェックリスト**（`checklist-box`）: 白いボックス。ティールの見出しに点線の下線を引き、チェック付きの箇条を並べる - **料金カード**（`price-card`）: 白地に細い枠。明朝のメニュー名を左右の線で挟み、大きなモーブの価格と推奨の丸バッジを置く - **固定 CTA バー**（`sticky-cta-bar`）: 画面下に固定。緑・水色・モーブの 3 分割ボタン ## Do's and Don'ts **Do** - 地の色は白とグレージュの大理石を波形で交互に使う - 見出しは明朝と英字ラベルの組で統一する - 要点はティールの文字色で示す - 相談 CTA 帯は同じ形で複数回入れる - 施術を紹介した近くに、リスク・費用の注釈を小さく必ず添える - ビフォーアフターの写真はラベルの帯を付けて並べる **Don't** - ビビッドな原色を広い面に使わない - 見出しをポップな丸ゴシックにしない - セクション境界を直線だけで切らない - 強い影や立体的なボタンを使わない - 注釈を省略しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（施術名と魅力を一目で伝える）: 女性のアップ写真の上に、白帯の見出し・明朝の大きな施術名・丸いバッジ 3 つ・ビフォーアフター・焦げ茶の帯を重ねる 2. **安心ポイントと実績**（無料であることと実績で信頼を得る）: ティールのチェック 2 行、注釈、丸い実績バッジ 3 つ 3. **方針と悩みの提起**（担当医制と不安への寄り添いを示す）: 不定形の白い面にチェックリストを置き、悩んでいる女性の写真を添える 4. **相談 CTA**（電話・予約へ誘導する）: 焦げ茶の帯に淡ピンクの相談文と 3 色のピル型ボタン 5. **施術の基礎知識**（施術の種類を比較して教える）: モーブの見出しセルを使った比較表 6. **施術の特長とメリット**（メリットと独自性を伝える）: 大理石地にチェックボックスのリスト。細い線の円 2 つを×でつなぐ 7. **4 つのポイント**（技術の強みを示す）: 白いカードのスライダー。ティールのピル型ラベルを付ける 8. **選ばれる理由**（4 つの理由を詳しく説明する）: 番号付きのグレージュカードを左右交互に配置する 9. **症例写真と経過**（結果で証明する）: 大きな写真の帯から入り、症例カードのスライダーと経過のタイムラインを続ける 10. **料金メニュー**（価格を明示する）: 白い料金カードを縦に並べる 11. **医師による解説**（疑問に専門家として答える）: 医師の写真と、白い Q&A カード 12. **リスクとよくある質問**（不安を解消する）: 表とアコーディオン（＋アイコン） 13. **カウンセリングと施術の流れ**（来院までの手順を示す）: 写真付きのステップスライダー 14. **医師紹介とクリニック一覧**（規模と信頼を示す）: 医師の顔写真を 5 列のグリッドで並べ、日本地図の上に院のラベルを置く。最後に相談 CTA ## Imagery - 透明感のある女性のポートレート。ソフトな自然光で、白〜ピンクベージュのトーン - 目元のビフォーアフターは同じ画角で横長に切り抜き、ロゴを透かしで入れる - 医師やスタッフは白衣で、グレー背景の証明写真風 - 背景には薄い大理石テクスチャと霧のようなぼかしを使う - 図解は淡いベージュのフラットなイラストに矢印を付ける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも本文は中央の約 60% 幅に収め、両側に大理石の地を見せる - PC の FV は横長の写真の上に、コピーを左右に分けて配置する - PC の料金はカードではなく横並びの比較表にする - PC のポイントは 2 枚並べのスライダーにする - 固定 CTA バーは 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-5d41c05f`（元 LP の URL から採番） - **元 LP**: https://www.seishin-biyou.jp/lp/eyes/double_eyelid_surgery1/lp2/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。