DESIGN.md — 金×ベージュの上品な歯科インプラントLP（Gold Beige Premium Dental Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 上品・高級、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 金茶・ウォームグレー・明朝見出し・影付き白カード・大理石・幾何学テクスチャ・安心感
• 地の質感: 薄いグレーの幾何学ポリゴン模様や大理石テクスチャを背景に敷き、白カードに柔らかい影を落とす
• 形: 角が小さい長方形カードと、八角形・円形の金メダル風バッジ。写真は長方形でカードと重ねてずらす
• 温度感: 暖色寄りのニュートラル。白地に金とベージュで温かく落ち着いた印象

Colors

• 地は白とウォームグレー/クリームを交互に使いセクションを区切る
• 強調は金茶1色に絞り、見出しのキーワード・番号・帯・CTAにのみ使う
• 悩み提起だけダークグレー地＋白文字にして緊張感を出す
• カードは白地＋薄い影で背景から浮かせる
• 料金表の項目列のみくすみ紺で情報を締める
• 原色は使わず彩度を落とした色で揃える
• button-primary は文字 #FFFFFF × 背景 #A27D24 のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#917020、4.62:1）を使う。

Typography

• 見出しとボタンは明朝、本文はゴシック
• 見出しのキーワードだけ金色・大きめにする
• セクション見出しの上に金色の英字ラベルを添える
• CTA上に斜線で挟んだ小さいマイクロコピーを置く
• 数字（料金・実績）は明朝で特大にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードと写真は縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクション後に中央寄せの CTA ボタンを挟む
• 写真とテキストカードを重ねずらして左右交互に配置
• 見出しは中央揃え、本文カード内は左揃え
• フローはカード間に下向き三角を挟む
• FAQはQ帯とA白行のペア

Elevation & Depth

• 白カードにぼかしの大きい薄い影（0 4px 16px rgba(0,0,0,0.12)）
• CTAボタンに軽いドロップシャドウ
• 写真には影なしか、カード同様の薄い影

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形のまま、カードと重ねて段違いに配置
• セクション境界: 直線の切り替えが基本。料金見出しは下向き山型の帯、FVの下端は金の曲線
• 角丸はごく小さく抑える
• 実績バッジは八角形・円形の金メダル風
• 番号は金茶の小さな正方形タグ

Components

• 金茶CTAボタン（button-primary）: 左にアイコン、右に三角矢印。上にマイクロコピー
• 電話CTA（button-tel）: 濃紺地に白で電話番号を大きく表示
• 英字ラベル付き見出し（section-heading）: 金の英字セリフ＋明朝の日本語見出しを中央に積む
• 実績メダル（badge-medal）: 金グラデーションの八角形・円形に数字を白抜き
• 悩みチップ（worry-chip）: 暗い地の上に白い小札、チェック印とキーワード金色
• 番号付き特長カード（feature-card）: 写真と重なる白カード、金の番号＋明朝見出し＋下線＋本文
• 症例データ表（case-table）: 金茶の項目セルと白の値セルの2列表、クリーム地に配置
• FAQ（faq-item）: 金茶帯にQ、白行にA
• ステップカード（flow-step）: STEP番号金色、見出し、本文、右に写真。間に金の下向き三角

Do's and Don'ts

Do - 金茶は強調箇所に絞って使う - 見出しは明朝で上品に - 白カードに薄い影をつけて浮かせる - 各セクション後に同じ型のCTAを置く - 実績・保証・料金の数字を大きく見せる

Don't - 原色や蛍光色を使わない - 大きな角丸やポップな装飾を入れない - 見出しを太いゴシックにしない - 背景を真っ白だけで続けない - 影を濃くしすぎない

Page Structure

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

1. ファーストビュー（治療の安心感と実績を伝える）: 右に医師写真、左に明朝の大見出し、金メダル型バッジと証書、下端に金の曲線
2. CTA（無料相談へ誘導）: マイクロコピー＋金茶ボタン
3. 悩みの提起（不安を言語化し共感）: ダークグレー地に悩みチップを6つ、まとめ帯
4. 共感（不安は自然と受け止める）: 白カードに女性写真と短文
5. 選ばれる理由（実績）（権威付け）: クリーム地に白カード、月桂樹の実績見出し、証書3枚
6. 特長（安心の体制を4点）: 写真と番号付きカードを左右交互に重ね配置
7. 院長挨拶（人柄と経歴で信頼獲得）: 大理石背景、院長写真＋メッセージカード、略歴2列
8. 選ばれる理由（強みを3つ要約）: 写真付き3カード、金の番号タグ
9. 症例（ビフォーアフター提示）: 金茶ラベル帯＋比較画像＋データ表
10. 料金（費用の透明性）: 山型帯見出し、月額を特大表示、内訳表、支払い方法枠
11. 治療の流れ（手順の明示）: 7ステップの白カードを三角で連結
12. よくある質問（不安解消）: Q帯とA行を5組
13. 最終CTA・医院情報（予約と来院案内）: 相談ボタンと電話ボタンを並置、診療時間表、地図、SNSバナー

Imagery

• 清潔な白衣の医師・スタッフの自然光写真
• 笑顔の女性モデルのポートレート（明るい背景）
• 診療設備・CT・診療台の実写
• 証書・認定書を額装したカット
• 背景に薄い大理石や幾何学ポリゴンのテクスチャ
• 金の月桂樹・メダル装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラムで写真の上にカードを少し重ねる
• 悩みチップはSPで2列
• 理由3カードはSPで縦積み
• 症例表・料金表はSPで1列に縦積み
• 最終CTAの2ボタンはSPで縦並び
• PCは本文幅約900px中央寄せ

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