DESIGN.md — 青グラデと明朝で魅せる眼科クリニックLP（Serene Blue Mincho Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、上品・高級、清潔・爽やか、情報量多め・訴求型
• キーワード: くすみブルー・明朝見出し・英字サブタイトル・金の月桂冠メダル・ティールCTA・ドットの光粒子
• 地の質感: 青のグラデーションに点描の光粒子を重ね、写真には青みの寒色補正をかける。面はマットで影はごく薄い。
• 形: 角丸の少ない直線的なカードとアコーディオン。CTAだけ完全なピル型にする。楕円の弧でセクションを区切り、正円の特長バッジを並べる。
• 温度感: 寒色が中心で静か。生成りと金色で冷たくなりすぎないようにする。

Colors

• 地色は白・生成り・薄灰をセクションごとに交互に切り替える
• ポイントカードと一覧アコーディオンは青紫の単色かグラデーションで塗る
• CTA帯は青のグラデーションに点描の光粒子を重ねる
• ティールは主CTAにだけ使う
• 金色は医院名の強調、実績メダル、保証・問い合わせ枠に限って使う
• 青い面に乗る本文の強調は黄色の文字にする
• button-primary は文字 #FFFFFF × 背景 #4AB2C2 のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#30818D、4.52:1）を使う。

Typography

• 見出しは明朝、本文はゴシックで分ける
• セクション見出しは、小さな前置きの行と大きな本題の行を2段で組む
• 見出しの下に英字セリフのサブタイトルと細い罫線を添える
• POINTの番号は大きな欧文セリフ数字で示す
• 字間はやや広めの0.04〜0.1emにする
• FVのコピーは縦書きの明朝で組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長バッジだけ 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約15pxで、カードは画面幅いっぱいに近く置く
• ポイントは写真の下に青い面の説明ブロックを接続した縦カードにする
• CTA帯はページ上部・中盤・末尾の3か所に入れる
• アコーディオンは高さ約45pxで10px間隔に積む
• 医師紹介と流れはカルーセルにし、左右に円形の矢印を置く

Elevation & Depth

• FAQカードには薄く広い影を付ける（0 2px 8px rgba(0,0,0,.08)）
• 医師カードと流れのカードは白面に薄い影を付ける
• 円形バッジは白から淡青へのグラデーションと微かな影で立体感を出す
• CTAボタンは影なしで平面にする

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は四角で角丸なし、横長に切り抜く。人物の一部だけ円形に切り抜く
• セクション境界: 楕円の大きな弧と、下向きの浅いV字で区切る
• CTAはピル型で、左端に白い正円の「無料」バッジを置く
• 特長は正円バッジを3つ並べる
• 実績は金枠に月桂冠と星を付けた円形メダルで見せる
• サブ見出し帯は左右の端を斜めにカットした平行四辺形にする

Components

• 予約CTA（button-primary）: ティールのピル型ボタン。左に白丸の「無料」、右端に「>」を置く
• CTA帯（cta-band）: 青グラデの面に平行四辺形のラベル、明朝の一行コピー、ボタン、営業時間の注記を縦に並べる
• ポイントカード（point-card）: 写真の下に青紫の面を付け、POINT番号・見出し・罫線・黄色強調入りの本文を載せる
• 2段見出し（section-title）: 小さな前置き、大きな明朝の見出し、英字サブタイトルと右へ伸びる細線の順に組む
• 青紫アコーディオン（accordion-dark）: 中央揃えの白文字に、下向きの矢印か＋を付ける
• FAQカード（faq-item）: 白いカードに薄い影を付け、青い明朝の質問文と右端の矢印を置く
• 枠線トグル（outline-toggle）: 淡い青の地に青い細枠を付け、青の明朝ラベルと矢印を置く
• 実績メダル（badge-medal）: 白い円に金の細枠、星、月桂冠を付け、中に青い明朝の数字を入れる
• 電話窓口枠（contact-box）: 生成りの面を金の細枠で囲み、青い大きな電話番号を入れる

Do's and Don'ts

Do - 見出しは明朝体にし、英字サブタイトルと罫線をセットで付ける - 数字の実績には※を付け、近くに小さな注釈を置く - 青い面の上の強調は黄色の文字で示す - セクションごとに地色を白・生成り・薄灰で切り替える - CTA帯は一定の間隔で繰り返す

Don't - 赤や原色の派手な強調色は使わない - ティールをCTA以外に広く使わない - ポップ体や丸ゴシックで見出しを作らない - 大きな角丸のカードを多用しない - 暖色に寄った写真補正にしない

Page Structure

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

1. ファーストビュー（実績と安全性を一目で伝える）: 青く補正した執刀写真に縦書き明朝の大コピーを重ね、下に円形メダルを3つとロゴ、注釈を置く
2. CTA（無料相談へ誘導する）: 青グラデの帯に平行四辺形ラベル、ピル型ボタン、営業時間の注記を入れる
3. 悩みの提起（迷いに共感する）: 人物写真の横に、悩みを書いた青紫の円を2つ並べる
4. 信頼性の訴求（クリニック選びの基準を示す）: 淡い目元の写真の上に、細枠と明朝のコピーを重ねる
5. 特長（実績と安全の根拠を4つ示す）: 生成りの地に、写真と青紫の説明面を組んだポイントカードを縦に積む
6. 配慮・サポート（不安を和らげる）: 楕円の白い面の中に、集合写真と3つの円形アイコンバッジを置く
7. 約束（丁寧な説明の姿勢を示す）: 番号ごとに短い説明文と枠線トグルを置く
8. 料金（価格と付帯サービスを示す）: 青帯の見出し、大きな青い価格、生成りの小さなボックス3つ、分割払いの案内を並べる
9. 保証（術後の安心を示す）: 写真の下に保証内容を書いた白い枠を置き、V字の区切りの後に延長の案内を続ける
10. 費用比較（長期的な割安さを示す）: 青紫の棒グラフに金色の基準線と円を重ねる
11. よくある質問（疑問を解消する）: 青紫のアコーディオンと白いFAQカードを並べる
12. 医師紹介・手術の流れ（人と手順で安心させる）: 白いカードをカルーセルにし、左右に円形の矢印を置く
13. 院の案内（所在地を示す）: 院ごとに＋付きの青紫アコーディオンを並べる
14. クロージング（最後に予約を促す）: 医師の写真と縦書きコピー、メダル、CTA帯、電話窓口の枠、フッターの順に置く

Imagery

• 手術室や診察室の写真は、青みに寄せた寒色で補正する
• 医師は白衣か術衣で、落ち着いた表情か穏やかな笑顔の写真にする
• 女性モデルは自然光で白基調、柔らかいトーンで撮る
• 製品は水しぶきと水色の背景で透明感を出す
• 装飾には点描の光粒子の波と、金の月桂冠を使う
• アイコンは青の細い線画で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではコンテンツを中央の約60%幅に収め、周囲に地色を広げる
• ポイントカードは写真とテキスト面を左右に並べ、行ごとに左右を入れ替える
• 料金・保証・費用比較は 2 カラムにする
• FV は楕円の弧で切り抜き、横長の写真にする
• カルーセルは3枚を同時に見せる

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