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

• 基本は白地。ティールは見出し帯・料金エリア・ポイント見出し・フッターに使う
• CTAはコーラルのグラデーションのピル型だけにし、他の部品には使わない
• 金色はPOINT番号メダルとFVの特長バッジに限る
• 豊胸など別施術のパートはピンクとマゼンタに切り替え、ティールと混ぜない
• 本文の強調は太字にする。重要な一文だけ黄色マーカーを引く
• 左右の外側は薄いグレーにし、白い本文カラムを浮かせる
• button-primary は文字 #FFF5F2 × 背景 #FE5555 のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E40101、4.55:1）を使う。

Typography

• 大見出しは明朝。キーワードは大きく、助詞は小さくして字の大きさに強弱をつける
• セクション帯は英字ラベルを「— 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。