DESIGN.md — 透明感ブルー×ピンクの審美歯科 LP（Clear Blue Glass Aesthetic Dental LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 清潔・爽やか、上品・高級、情報量多め・訴求型
• キーワード: 透明感・水面・ガラス・明朝の大見出し・ピンク価格・ビフォーアフター・電話CTA
• 地の質感: 水しぶきや絹のような淡いブルー〜シルバーの写真背景。ガラス玉や半透明の円を重ねる
• 形: 角丸小さめのカード、円形バッジ、ピル型の院一覧ボタン、下向き三角の区切り
• 温度感: 寒色主体で清涼。価格と CTA だけ暖色ピンクで温度を上げる

Colors

• 地は白・淡ブルーグレー・水の写真を交互にし、寒色で清潔感を保つ
• 価格数字と重要語はマゼンタピンクだけで強調する
• 悩みや期間の数字はブルー系文字、ネガ表現は黒やネイビー帯に白文字
• CTA ボタンは水色→ピンクの淡いグラデ枠、電話エリアは淡ピンク地
• 見出し帯にピンク→ブルーのグラデを使い、透明感と華やかさを両立
• フォームと院一覧は彩度を落とし、水色・ピンクの単色で整理する
• point-badge は文字 #FFFFFF × 背景 #50B4CE のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2A7F96、4.59:1）を使う。
• clinic-button は文字 #FFFFFF × 背景 #50B4CE のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2A7F96、4.59:1）を使う。
• form-submit は文字 #FFFFFF × 背景 #F08497 のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E42546、4.51:1）を使う。

Typography

• 感情に訴える見出しは明朝で大きく、説明はゴシックで細かく
• 価格は太い欧文数字＋小さな「円」「税込」を組み合わせる
• 英字ラベルは小さく字間を広げ、日本語見出しの上に添える
• 1見出し内で一語だけ色やサイズを変えて強調
• 注釈は小さくても必ず価格・リスクのそばに置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。症例は 2 列、特徴アイコンは 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• ポイントは円形番号→帯見出し→本文→画像の順で反復
• ビフォーアフターは矢印を挟んだ左右 2 枚組
• CTA は FV 直後と流れ内に繰り返し配置
• 価格カードは白地に影、上にプラン名帯
• フォームは 2 列の表組（項目名グレー地／入力欄）

Elevation & Depth

• 価格カード・実績パネルにソフトな大きめドロップシャドウ
• CTA ボタンは薄い外枠と軽い影で浮かせる
• 写真は影なしで角丸のみ

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 症例は角丸の矩形、FV は人物の切り抜き合成
• セクション境界: 下向き三角の吹き出し型、弧状のカーブ、水写真のフェード
• 番号バッジは正円
• 院一覧と送信ボタンはピル型
• 悩みの円は細線の半透明円を重ねる
• 見出し帯は角なしの矩形

Components

• 無料相談 CTA（cta-counseling）: 水色→ピンクの淡いグラデ地、中央にピル型ラベルと明朝の大文字、右端に黒丸矢印
• 電話 CTA（tel-block）: 淡ピンク地に黒の吹き出しラベル、フリーダイヤルマークと大きな明朝の電話番号
• ポイント番号（point-badge）: 水色グラデの正円に英字と2桁数字
• グラデ帯見出し（heading-band）: 白〜淡ピンクの帯に明朝の大見出し
• 価格カード（price-card）: グレー帯のプラン名、ピンクの大きい月額、注釈、総額アコーディオン
• 期限ピル（deadline-pill）: ネイビーのピル型に白の明朝で期限と割引率
• 院一覧ボタン（clinic-button）: 水色ピル型に白文字と右シェブロン
• 施術注釈（risk-note）: グレー地に小さい文字で施術名・リスク・価格
• 送信ボタン（form-submit）: ピンクのピル型に白文字

Do's and Don'ts

Do - 水やガラスの寒色写真で透明感を出す - 価格は必ずピンクの太数字で大きく見せる - 症例写真の下には施術注釈を置く - CTA は相談ボタンと電話番号をセットで繰り返す - 見出しは明朝で上品にまとめる

Don't - 濃い原色の背景を広く使わない - ピンクを本文や装飾に乱用しない - ゴシック極太の見出しで固くしない - 症例に注釈なしで載せない - 影を強くしてガラス感を壊さない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（施術の魅力と月額価格を一目で伝える）: 人物写真と空色背景に明朝の大キャッチ、半透明円3つ、白カードに月額価格
2. CTA（早期の相談誘導）: グラデ枠の相談ボタンと淡ピンクの電話ブロック
3. 変化の訴求（見た目が変わる期待を高める）: 水のテクスチャに白明朝の大見出し、顔の左右比較写真
4. 悩みの提起（従来治療の長さや手間を示す）: グレー地に大きなブルー数字、黒帯、円2つを等号でつなぐ
5. 解決提示（一度で複数改善できると示す）: POINT 円バッジ、グラデ帯見出し、ガラス玉3つ、ビフォーアフター
6. 特長（3つの強みを説明）: 番号円→帯見出し→本文→画像を3回反復、実績はネイビーパネルとグラフ
7. 価格（プランと費用を提示）: グラデ見出し帯、期限ピル、価格カードと症例2列
8. 治療の流れ（来院から完了までを示す）: 水色地にSTEPカードの横スライダー、吹き出しと写真
9. セカンドオピニオン（他院検討者も取り込む）: 淡ブルー地に明朝見出し、ティールのラベル帯
10. 院一覧（全国の院を案内）: 水色ピル型ボタンを縦に並べる
11. 予約フォーム（申込を完了させる）: ピンク見出し帯の表組フォーム、必須バッジ、ピンクの送信ボタン
12. フッター（運営情報）: ピンク地に白丸のTOPボタンと白小文字

Imagery

• 白シャツの笑顔の女性を明るく正面から撮る
• 水しぶき・シルクのような淡いブルー背景
• ガラス玉や泡の透明な球体を装飾に
• 症例は顔や口元を同じ構図で左右比較
• 実績は青グラデの棒グラフと矢印のシンプルなイラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後の 1 カラムを維持し左右は淡色背景
• 症例と特徴アイコンは列数を保ったまま拡大
• 院一覧は PC で 2〜3 列に並べてもよい
• フォームは表組のまま幅を広げる
• 流れのスライダーは 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 行書くと起動時に読み込まれる。