--- version: alpha name: Teal and Gold Aesthetic Clinic Body Contouring LP description: 白地にティールの帯見出しを置き、金色のメダル型番号とコーラル色のピル型CTAを差し色にした美容クリニックのLP。明朝の大見出しで上品さを出し、ゴシックの本文で読みやすくしている。症例のビフォーアフターを並べ、施術の流れ・医師紹介を順に見せて信頼につなげる。豊胸のパートだけはピンク基調に切り替える。 colors: primary: '#5FB1B0' tint-1: '#81C3C1' cta: '#FE5555' on-cta: '#FFF5F2' background: '#FFFFFF' background-alt: '#FBFBFB' accent-1: '#C9A84E' accent-2: '#BB397F' tint-2: '#F6D3E4' accent-3: '#E07372' text: '#353535' text-muted: '#74716D' line: '#DEDBD3' marker: '#FFFDC4' cta-accessible: '#E40101' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 600 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.06em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Playfair Display fontSize: 20px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.06em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px 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 section-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 90px point-medal: backgroundColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 56px case-slider: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 200px risk-toggle: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 24px feature-badge: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px worry-bubble: backgroundColor: '{colors.text-muted}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 80px price-accordion: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 64px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 72px step-card: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 170px --- # DESIGN.md — ティール×金メダルの美容外科痩身 LP（Teal and Gold Aesthetic Clinic Body Contouring LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: 上品・高級、信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: ティール帯見出し・金メダル番号・コーラルのピルCTA・明朝の大見出し・症例スライダー・方眼紙の地 - **地の質感**: 白地に薄い方眼グリッドや光のボケを敷く。金色の部品は箔のようなグラデーションにする - **形**: 見出し帯は四角。CTAはピル型。カードは小さめの角丸。流れのステップは下向き山形で区切る - **温度感**: 清潔で少し涼しげ。そこにコーラルとピンクで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5FB1B0` | 見出し帯・強調文字のティール | | 画素の主要色に補正 | | `tint-1` | `#81C3C1` | 料金エリアの薄いティール地 | | 画素の実測 | | `cta` | `#FE5555` | LINE予約ボタンのコーラル | | 画素の実測 | | `on-cta` | `#FFF5F2` | CTAボタンの文字 | | 画素の実測 | | `background` | `#FFFFFF` | ページの地 | | 画素の実測 | | `background-alt` | `#FBFBFB` | ページ外側とグリッド地のグレー | | 画素の実測 | | `accent-1` | `#C9A84E` | POINTメダル・特長バッジの金 | | 推定 | | `accent-2` | `#BB397F` | 豊胸パートの見出しなどのマゼンタ | | 画素の実測 | | `tint-2` | `#F6D3E4` | 豊胸パートの淡いピンク地 | | 推定 | | `accent-3` | `#E07372` | FAQのQマーク・スライダー矢印のピンク | | 画素の主要色に補正 | | `text` | `#353535` | 見出しと本文の濃い色 | | 画素の実測 | | `text-muted` | `#74716D` | 補足文のグレー | | 画素の主要色に補正 | | `line` | `#DEDBD3` | 注釈ボタンの枠線・区切り線 | | 画素の主要色に補正 | | `marker` | `#FFFDC4` | 本文中の黄色マーカー | | 画素の実測 | | `cta-accessible` | `#E40101` | AA を満たす補正値（計算） | | 計算 | - 基本は白地。ティールは見出し帯・料金エリア・ポイント見出し・フッターに使う - CTAはコーラルのグラデーションのピル型だけにし、他の部品には使わない - 金色はPOINT番号メダルとFVの特長バッジに限る - 豊胸など別施術のパートはピンクとマゼンタに切り替え、ティールと混ぜない - 本文の強調は太字にする。重要な一文だけ黄色マーカーを引く - 左右の外側は薄いグレーにし、白い本文カラムを浮かせる - `button-primary` は文字 `#FFF5F2` × 背景 `#FE5555` のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E40101`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大キャッチ | 明朝 | Shippori Mincho | 600 | 56px | 1.15 | 0.02em | | `headline-lg` | セクション大見出し | 明朝 | Noto Serif JP | 500 | 28px | 1.4 | 0.06em | | `headline-md` | ポイント見出し・症例部位名 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | | `headline-sm` | 料金・FAQの小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.02em | | `note` | 注釈・リスク表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 英字ラベル（Price、FAQ など）と番号 | 欧文セリフ | Playfair Display | 400 | 20px | 1.2 | 0.08em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.3 | 0.06em | - 大見出しは明朝。キーワードは大きく、助詞は小さくして字の大きさに強弱をつける - セクション帯は英字ラベルを「— Price —」の形で添え、その下に日本語見出しを置く - 本文はゴシック。強調したい語句だけ太字にする - 番号（01など）は細いセリフ体をティールの大きな字で入れる - 医師紹介の添え文は縦書きの明朝でもよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。FVの特長バッジだけ 3 列 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 本文カラムの左右に約7%の余白をとる - セクション見出し帯は画面幅いっぱいにする - 主要セクションの切れ目ごとにCTAを繰り返し置く - ポイントは左にメダル、右に見出しと本文を置く横並びにする - 流れのステップは左に丸い写真、右に番号・見出し・本文を置く ## Elevation & Depth - CTAボタンの下にやわらかい影をつける - 料金のアコーディオンと支払いカードは白地に薄い影をつける - 医師カードは白地で角丸、浅い影をつける - 本文カラム全体の左右に淡い影をつけ、外側のグレーから浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 症例は左右2枚の四角い比較写真。流れのステップは円形に切り抜く。人物はセクションの背景に溶け込ませる - **セクション境界**: 基本は直線で切り替える。流れのステップは下向きの山形で区切る - CTAは丸い白地に「無料」バッジを入れた完全なピル型にし、右端に矢印を置く - 見出し帯と症例のラベル帯は角丸なしにする - POINTメダルはギザ縁の金色の円にする - 注釈ボタンは細い枠線の四角にする ## Components - **LINE予約CTA**（`button-primary`）: コーラルのグラデーションのピル型ボタン。左に白丸の「無料」バッジ、右に矢印。文字は2行 - **ティール見出し帯**（`section-band`）: 幅いっぱいのティールのグラデーション帯。上に英字ラベル、下に白の明朝見出し - **POINT番号メダル**（`point-medal`）: 金色のギザ縁メダルに「POINT」と数字を白で入れる。右にティールの見出しを置く - **症例ビフォーアフタースライダー**（`case-slider`）: ティールのラベル帯で術式名と部位を示し、その下に比較写真2枚。左右にピンクの矢印、下にドットのページ送り - **リスク注釈トグル**（`risk-toggle`）: 細い枠線の四角ボタン。小さな太字と下向きの矢印 - **FVの金バッジ**（`feature-badge`）: 金色のグラデーションの角丸四角を3つ並べ、白の太字で強みを書く - **悩みの吹き出し**（`worry-bubble`）: 濃いグレーの雲型の吹き出し。白文字で、キーワードは黄色。人物の周りに4つ配置する - **料金アコーディオン**（`price-accordion`）: 白地に細いティール枠の角丸バー。右にプラスの丸いアイコン - **FAQ項目**（`faq-item`）: 左にピンクのセリフ体のQ、右にプラス記号。下に区切り線。カテゴリ見出しは左に縦線のついたグレーのバー - **流れのステップ**（`step-card`）: 円形写真と、ティールのセリフ体番号＋太字見出し。下向きの山形で次のステップへつなぐ ## Do's and Don'ts **Do** - CTAは3〜4セクションごとに同じ形で繰り返す - 症例写真の下には必ずリスク注釈のトグルを置く - 大見出しは明朝、本文はゴシックで役割を分ける - 施術ごとにテーマ色を変える場合は、そのパート全体で統一する - 医師の経歴は年と内容の2列の表で見せる **Don't** - コーラルをCTA以外の大きな面に使わない - ポップな丸ゴシックや原色を使わない - 比較写真の大きさや角度を左右でそろえずに並べない - 金色を本文の文字色に使わない - 注釈やリスク表記を省かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（施術の内容と効果を一目で伝える）: 人物写真の上に明朝の大きなキャッチ。下に金バッジ3つとCTA 2. **症例ビフォーアフター**（効果を実例で示す）: 欧文セリフの大見出しの下に、部位ごとのスライダーを縦に並べる 3. **施術のポイント**（メリットを3つに絞って示す）: 方眼紙の地に金メダルの番号付きリストを置く 4. **悩みの提起**（ターゲットに自分のことだと感じてもらう）: 考え込む女性の写真を中心に、雲型の吹き出し4つ。その後にCTA 5. **併用施術の提案**（関連施術へ誘導する）: ピンクのボケ背景。マゼンタのBefore/After帯の症例と、特徴の説明カード 6. **アフターケア**（術後の安心感を伝える）: 月桂樹の飾りがついたティール帯。医師写真と縦書きの添え文。クリーム地の飾り枠カード 7. **医師紹介**（権威と信頼を示す）: ティールのピル型ラベルの下に、写真と経歴表を載せた白カードのスライダー 8. **料金プラン**（費用と支払い方法を示す）: ティールのグリッド地にアコーディオン。支払い方法は白カードにアイコンとカードロゴを並べる 9. **施術までの流れ**（予約から術後までの手順を示す）: 円形写真と番号のステップ5つを山形の区切りでつなぐ 10. **よくある質問**（不安を解消する）: カテゴリ別に、Qマークとプラス記号のアコーディオン 11. **アクセス**（所在地と診療情報を示す）: 地図の下に、左縦線の小見出しで住所・時間・電話を並べ、CTAを置く 12. **クロージングCTA**（気軽な相談を促す）: 医師と女性の写真。チェック付きで不安を3つ挙げ、最後のCTAとティールのフッター ## Imagery - 症例写真は暗い背景に同じ角度・同じ明るさで撮り、左右に並べる - 人物は明るい白背景のスタジオ撮影。女性モデルが自然な表情や考え込むポーズをとる - 医師は白衣またはスクラブ姿で、患者と話す場面を撮る - 背景には薄い光のボケ、方眼グリッド、流れるような曲線の装飾を入れる - アイコンはティールの線画（ハート、カード、聴診器など）にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは本文を中央の固定幅（約750px）の1カラムのまま表示し、左右はグレー地にする - PCではスライダーを左右の矢印つきのまま中央に置く - 見出し帯はPCでも本文カラムの幅に合わせる - 流れのステップとポイントは、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-8b591917`（元 LP の URL から採番） - **元 LP**: https://keiseikai-cl-lp.com/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。