DESIGN.md — 白地×オーロラグラデの歯科矯正 LP（Iridescent Pastel Gradient Dental Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 清潔・爽やか、上品・高級、情報量多め・訴求型、やさしい・柔らかい
• キーワード: オーロラグラデーション・白基調・明朝見出し・ピンク強調・比較表・透明感
• 地の質感: 白地に虹色のぼかし光や水彩状のパステルグラデを薄く重ねた、つるりとした透明感
• 形: 角丸はほぼなく直線的。円形の悩みバッジや番号丸、グラデーション帯の矩形を写真の背後にずらして配置
• 温度感: やや寒色寄りの清涼感に、ピンクの暖かみを差す

Colors

• 地は白が基本、説明や悩みブロックは淡グレー #EEF2F5 で面を分ける
• 装飾はピンク→紫→水色のグラデーションに統一し、単色の濃い面は使わない
• 価格・重要語はマゼンタピンクで太字にし、本文中に点在させる
• 推奨プラン列や予約ボタンなど「選ばせたい所」だけグラデ塗りにする
• 小見出し枠・Q&A枠は淡い青の細線で囲む
• 背景の隅に虹色のぼかし光を薄く重ねて透明感を出す
• button-reserve は文字 #FFFFFF × 背景 #E04FD0 のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE24BB、4.57:1）を使う。
• worry-badge は文字 #EA648F × 背景 #FCFDFE のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E1215E、4.5:1）を使う。
• boxed-subheading は文字 #3E8EDB × 背景 #FCFDFE のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#2577C6、4.55:1）を使う。

Typography

• セクション見出しは明朝で中央揃え、下に大文字英字を字間広めのグレーで添える
• 本文と小見出しはゴシックで統一
• 番号やFeatureラベルはピンクの筆記体＋グラデ数字を組み合わせる
• 価格は数字だけ特大にし、単位と税表記は小さく
• 強調語はピンク太字、下線やマーカーは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PCは写真とテキストの2カラム交互）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは中央、本文は左揃え
• 特長は写真と文章を左右交互にずらして配置
• 写真の背後にグラデ帯を斜め下へずらして敷く
• 比較表・料金表は全幅の表組み
• CTA帯はページ中盤と末尾に2回入れる

Elevation & Depth

• 影はほぼ使わずフラット
• 悩みバッジの円に淡いピンクのぼかしグローを付ける
• 奥行きは写真とグラデ帯のずらし重ねで作る

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。人物は切り抜きも使用。悩みは円形バッジ
• セクション境界: 直線で切り替え。悩み→解決の間に下向きのグラデ三角を置く
• ボタンは角ばった長方形のグラデ塗り
• 番号は円形のグラデ塗り＋白数字
• 手順は番号丸を縦線でつなぐ

Components

• WEB予約ボタン（button-reserve）: ピンク→水色のグラデ矩形。左にカレンダーアイコン、上に受付時間の小ラベル
• 相談CTA帯（cta-band）: 医師写真＋明朝の訴求文＋電話番号＋予約ボタンを横並び。上に灰色の小タグ
• 悩み円形バッジ（worry-badge）: 白い円にピンクのグロー。筆記体のReason番号と悩みを中央に3行で
• 明朝セクション見出し（section-heading）: 中央揃えの明朝見出し＋下に字間広い英字グレー
• 比較表（comparison-table）: 3列比較。推奨列のみ水色→紫の縦グラデ塗り、○△×の大きなアイコン
• 手順ステップ（flow-step）: グラデの番号丸を縦線で連結、右にタイトルと本文、写真を添える
• 青線枠の小見出し（boxed-subheading）: 淡い青の細線で囲んだ全幅の小見出し
• Q&A（faq-item）: 青枠内に青字Q、下にピンクのAと回答。回答の要点はピンク
• 料金表（price-table）: 左に淡ブルーグレーの項目セル、右に白地の金額。総額はピンク特大

Do's and Don'ts

Do - 白地を広く取り、グラデは帯・ボタン・番号に絞る - 見出しは明朝、本文はゴシックで役割を分ける - 価格と要点はピンク太字で示す - 写真の背後にグラデ帯をずらして重ねる - 比較表では推奨列だけ色付けする - 英字の筆記体ラベルを特長や章の頭に添える

Don't - 濃い単色や黒背景の面を使わない - 角丸の大きいピル型ボタンにしない - 強い影や立体的な装飾を付けない - ピンク以外の強調色を増やさない - グラデの色相をオレンジや緑に広げない

Page Structure

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

1. ファーストビュー（治療内容と月額・総額を一目で伝える）: 白とパステル光の背景に笑顔の女性写真。左にグラデのラベル、大キャッチ、ピンクと青の特大価格。右上に予約丸ボタン
2. 悩みの提起（治療をためらう理由に共感する）: 淡グレー地に考える女性写真、右に円形バッジを5つ配置
3. 解決の提示（悩みの解消を宣言する）: グラデ三角の下に明朝2行の見出しを中央に
4. 特長（6つの特長を伝える）: グラデの大数字見出し。写真と文章を左右交互にジグザグ配置
5. 法的な説明（規制上の位置づけを明示）: 淡グレー地に青線枠の小見出しと小さめ本文を並べる
6. 比較（他の方法との違いを示す）: 3列比較表。推奨列は水色→紫グラデ
7. 設備・技術紹介（先進設備で信頼を得る）: 写真と文章の2カラム、背後にグラデ帯、筆記体ラベル
8. CTA（無料相談へ誘導）: 医師写真＋明朝訴求＋電話＋グラデ予約ボタン
9. 症例（実際の変化を見せる）: 前後の口腔写真を矢印で並べ、下に罫線の詳細表
10. 料金（費用を明示）: 2列の料金表、総額をピンク特大で
11. 治療の流れ（来院後の流れを説明）: 番号丸を縦線でつないだ7ステップ、右に写真
12. よくある質問（不安を解消）: 青枠のQとピンクのAを縦に積む
13. 院長メッセージ（人柄で信頼を得る）: 左に文章と署名、右に院長写真、下にグラデ帯
14. アクセス・フッター（所在地と診療時間）: ロゴ・住所と診療時間表を2カラム、下に地図

Imagery

• 白い歯の笑顔を見せる女性モデルの明るいハイキー写真
• 清潔な診療室で医師やスタッフが笑顔で施術する写真
• 透明な装置を白背景や暗背景で撮った製品写真
• 背景にピンク・紫・水色のぼかし光やホログラム風の帯
• 筆記体の英字を斜めにあしらう装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは2カラムを写真→文章の縦積みにする
• 悩みバッジはSPで2列に並べ替える
• 比較表はSPで横スクロールか推奨列を目立たせた縦型にする
• CTA帯はSPで写真を上、電話と予約ボタンを縦に並べ全幅に
• 見出しはSPで22px前後に縮める

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 行書くと起動時に読み込まれる。