DESIGN.md — 青×オレンジの医療ダイエットクリニック LP（Clinical Blue Medical Diet Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、力強い・インパクト
• キーワード: 医療の信頼感・青と水色・オレンジCTA・数値訴求・斜体見出し・表組み
• 地の質感: フラットな単色の面と淡い水色のグラデーション。写真の上に半透明の青を重ねた帯をはさむ
• 形: 角が直線的な四角の箱と帯が基本。ボタンだけ小さめの角丸。セクションの境目に斜めカットを一部使う
• 温度感: 寒色が中心でクール。オレンジと黄色で温かみと行動のきっかけを足す

Colors

• 地色は白を基本にする。セクションごとに淡いグレー・水色・淡い黄色を交互に入れてリズムをつける
• 青は見出し帯、表の見出し、英字ラベルの見出し文字に限って使う
• オレンジは予約ボタン・電話番号・理由カードの見出しなど、行動に関わる場所だけで使う
• 強調したい語句は黄色マーカーか青文字で示す
• CTA帯は写真に半透明の青を重ね、その上に白文字を置く
• 黒い帯は悩みの提起見出しとフッターに限る
• button-primary は文字 #FFFFFF × 背景 #FC9A2B のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B46103、4.51:1）を使う。
• floating-nav は文字 #FFFFFF × 背景 #FC9A2B のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B46103、4.51:1）を使う。

Typography

• セクション見出しは、灰色の小さな英字ラベルと青の和文見出しを上下2段で中央に置く
• FVの大見出しは斜体の極太ゴシックにし、白い帯の上に重ねる
• 価格や減量の数値は大きな青字にし、単位と税表記は小さく添える
• 本文は小さめで行間を広く取り、中央揃えか左揃えにする
• 見出し文字は文字間隔を少し広げて、落ち着いた印象にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。症例・理由・院一覧は 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 83%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• コンテンツは左右に約8%の余白を取って中央に置く
• 見出しは中央、本文ブロックはカードや表に収める
• 症例はビフォーアフター写真2枚と数値表を横に並べる
• 理由カードは3列×2段にし、各カードの左上に番号バッジを付ける
• 院一覧は青見出し付きの枠の中で2列カードにし、地図サムネイルと予約ボタンを入れる

Elevation & Depth

• 基本はフラットにし、影はほとんど使わない
• CTAボタンには薄い下向きの影を付けて浮かせる
• カードは細い線か淡い面で区切る

Shapes

• 角丸: 小 3px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角い切り抜き。人物写真は背景を切り抜いて、FVやセクションの端に配置する
• セクション境界: 基本は直線で切り替える。悩みセクションと解説ボックスの下端だけ斜めのV字カット
• 見出し帯は角のない長方形
• CTAボタンは小さな角丸で、右端に矢印を付ける
• 年代ラベルなどの小バッジはピル型
• 院一覧の外枠は角丸の線で囲む

Components

• 予約CTAボタン（button-primary）: オレンジのグラデーション。左に人物アイコン、右に矢印を付け、白太字で押す理由を書く
• 青のCTA帯（cta-band）: 院内写真に青を重ねた全幅の帯。白文字のコピーと黄色マーカーの強調語を置き、ボタンと電話番号を添える
• 英字ラベル付き見出し（section-heading）: 灰色の小さな英字の下に、青の和文見出しを中央揃えで置く
• チェックリスト枠（check-list-box）: グレーの太枠の中に、青いチェックアイコン付きの短い特長を2×2で並べる。キーワードには黄色マーカーを引く
• 症例カード（case-card）: 青の見出し帯と白ピルの年代バッジ。ビフォーアフター写真の横に、大きな数値と淡いグレーの属性表を置く
• 理由カード（reason-card）: 写真を上、オレンジの見出しと小さな補足を下に置く。左上にオレンジの四角い番号を付ける
• FAQアコーディオン（faq-item）: Q.付きの青文字の質問を書き、右端に＋を置く。上下は細線で区切る
• STEPブロック（step-block）: タブで通院とオンラインを切り替える。青帯にオレンジのSTEP番号と見出しを入れ、説明文と写真を横に並べる
• 追従サイドボタン（floating-nav）: 画面右下に縦に並ぶ予約・オンライン診療などのアイコンボタン

Do's and Don'ts

Do - CTAは全部同じオレンジのボタンで統一し、ページ内で2回以上くり返す - 数値（価格・減量・実績）は大きく見せる - セクション地色は白・淡いグレー・水色・淡い黄色を交互に使う - 注釈は小さな灰色文字で、該当箇所のすぐ下に置く - 医師やスタッフの写真で安心感を補強する

Don't - オレンジをCTA以外の大きな面に使わない - 見出しに明朝体や手書き体を使わない - 大きな角丸や丸いカードを多用しない（直線的な医療らしさが崩れる） - 暗い背景を多用しない - 効果を断定する表現を注釈なしで載せない

Page Structure

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

1. ファーストビュー（手軽さと価格を一目で伝える）: 人物の切り抜き写真に斜体の大見出しを白帯で重ねる。水色帯に価格を大きく載せ、右上に料金無料のバッジを付ける
2. 特長チェックリスト（要点を4つにまとめる）: グレー枠の中に、チェックアイコン付きの短い文を2×2で並べる
3. CTA（予約と電話に誘導する）: 青のCTA帯に、オレンジのボタンと電話番号を置く
4. 悩みの提起（共感を得る）: 黒帯の白文字見出しと、悩みを3行並べたリスト。右側に体型の写真を置き、下端は斜めカット
5. 解決策・仕組みの解説（治療の仕組みを伝える）: 水色の面に大きな英字のロゴ風見出しと解説を置き、グレーとオレンジの比較カード2枚を並べる
6. メリット（選ぶ利点を示す）: 写真2枚に青帯の見出しを重ね、水色の帯で医師のイラストとポイントを示す
7. 価格（料金を明示する）: 青見出しの料金表と散布図風のポジショニング図を並べ、下に注意事項を小さく書く
8. 症例（効果の実例を見せる）: 年代別の症例カード。ビフォーアフター写真と大きな数値表を並べる
9. 選ばれる理由（差別化を伝える）: 淡い黄色の地に、番号付きの写真カードを3×2で並べる
10. 実績（信頼性を補強する）: 水色グラデーションの地に、実績の数字と金メダル・月桂樹のエンブレムを置く
11. よくある質問（不安を解消する）: 細線で区切ったアコーディオン
12. 診療の流れ（来院時の手順を示す）: タブ切り替えの枠の中に、STEP帯・説明・写真を3段で並べる
13. 院一覧・アクセス（近くの院を探してもらう）: 2列の院カード。院名・電話・診療時間・地図・オレンジの予約ボタンを入れる
14. 提携サービス・フッター（関連サービスへ誘導する）: 緑地の中にバナーと白ボタンを置く。その下に黒のフッター

Imagery

• 人物の写真は白背景か明るいスタジオで撮り、輪郭で切り抜く
• ビフォーアフターは同じ壁の前で横向き全身を撮り、条件を揃える
• 院内写真は白基調で明るく清潔に見せる。医師は白衣で正面か作業中の姿
• 医師のイラストは細い線画に水色を差した、親しみのあるタッチ
• 背景には水色の泡や光のぼかしを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版もSPと同じく約480px幅の縦長レイアウトを中央に置く構成
• PCに広げる場合は本文を最大1000px程度に収め、左右の余白を淡いグレーにする
• 院一覧と理由カードはPCで3〜4列に増やす
• 症例は写真と数値表を横並びのまま大きく見せる
• 追従のサイドボタンは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 行書くと起動時に読み込まれる。