DESIGN.md — 黒×金と炎の高級感ある医療ダイエット LP（Dark Gold Medical Diet Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型、上品・高級
• キーワード: 黒×金・炎と光沢・大きな数字・立体緑CTA・医療の信頼感・キャンペーン訴求
• 地の質感: 黒地に金の光沢グラデーション、炎や光の粒、カーテン状の金背景、薄いマーブル調の白地を交互に使う
• 形: 金縁の角張った帯見出し、八角形のSTEP番号、立体感のあるピル型ボタン、円形の切り抜き写真
• 温度感: 暖色寄り（金・赤・茶）に、CTAの緑と一部の紺がアクセント

Colors

• 黒地と白・金ベージュ地をセクションごとに交互に切り替える
• 金はグラデーションと光沢で使い、見出し帯・数字・枠線に限定する
• CTAは緑のみ。他の要素に緑を使わない
• 赤は「今だけ」「限定」などの緊急性訴求と強調帯に絞る
• 価格や実績の大数字は金グラデーション文字で黒地に載せる
• 黒地上の本文は白、明地上の本文は濃いグレー
• button-primary は文字 #FEFEFE × 背景 #4F8A2A のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#4B8228、4.6:1）を使う。

Typography

• インパクト見出しは極太ゴシック、上品な見出しは明朝と使い分ける
• 数字は文字の2〜3倍の大きさにして単位を小さく添える
• 金文字はグラデーションと影で立体感を出す
• 強調語だけ色を変え（金・赤・オレンジ）、文中の他は黒/白
• 注釈は※付きで10px程度、該当ブロック直下に置く
• 欧文イタリックや筆記体風の英字をサブ見出しに添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（比較表のみ 4 列）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは画像主体で全幅、本文ブロックのみ左右余白12〜20px
• 全セクションの間にCTAボタンを挟み、加えて画面下部に追従表示
• キャンペーンは「or」で区切って縦に並べる
• 施術紹介は左右矢印付きカルーセルカード
• 流れはSTEP番号を中央に置いた縦の手順

Elevation & Depth

• CTAボタンは下側に濃い緑の厚み＋ドロップシャドウで立体化
• 金の見出し帯は上下のハイライトで光沢感
• カードは白面に薄い影と金縁
• 大数字はドロップシャドウで浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 全幅の角版が基本、ビフォーアフターや体型比較は円形切り抜き
• セクション境界: 直線の切り替えが中心。一部でV字・山形の金帯で区切る
• CTAはピル型＋左端に円形バッジ
• 見出し帯は角丸なしの矩形か両端を斜めカット
• STEP番号は八角形の金バッジ
• 特長アピールは円形メダル型バッジを3つ並べる

Components

• 追従立体CTA（button-primary）: 緑のピル型。左に白い円形の所要時間バッジ、上段に白ラベル2つ（割引・先着限定）、下段に申込文言
• 円形訴求メダル（badge-medal）: 金縁の白い円に赤や黒の太字で強みを3つ並べる
• 金帯見出し（heading-gold-band）: 金グラデーションの横長帯に黒文字、黒地セクションの冒頭に置く
• 価格ボックス（price-box）: 黒地に左の金ラベル、取り消し線の通常価格、金の大数字価格
• 今だけバッジ（tag-limited）: 赤い八角形に白文字を斜めに配置して帯の角に重ねる
• 施術カード（card-treatment）: 上に写真、金帯の施術名、効果を色付き大文字、下に小さく説明とリスク
• STEP番号（step-badge）: 茶金の八角形にSTEPと数字を白で
• 比較表（comparison-table）: 自院列を茶金で強調し◎、他は灰色地に×△
• 情報開閉ボタン（button-secondary）: 淡い水色のピル型に下向き三角

Do's and Don'ts

Do - CTAは全セクション間に繰り返し配置する - 価格・実績・満足度は大きな金数字で見せる - 黒地と明地を交互にしてリズムを作る - 訴求には必ず※注釈を添える - 施術説明にはリスクも併記する

Don't - CTAを緑以外の色にしない - 金をフラットな黄土色で使わない（光沢を残す） - パステル調・丸ゴシックで軽くしない - 大数字を本文と同じサイズにしない - 白地だけの単調な構成にしない

Page Structure

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

1. ファーストビュー（医療×ダイエットの価値を一目で伝える）: 黒地に炎の背景、女性モデル、極太白文字と金文字、円形メダル3つ
2. 価格提示（特別価格で行動を促す）: 金帯見出し＋黒地価格ボックス
3. 選べるキャンペーン（複数特典で背中を押す）: 黒地カードを「or」で区切り縦に3つ並べる
4. 実績（件数・成功率で信頼を示す）: 金カーテン背景に月桂樹と巨大な金数字
5. ビフォーアフター（効果を視覚化）: 左右比較写真カルーセルと体重数字、茶地の体験談
6. 悩みの提起（共感を得る）: 暗い写真に吹き出しで悩みを短く並べ、明朝の大見出しで励ます
7. 原因の解説（従来の方法の限界を示す）: イラストの比較図と赤・オレンジの強調文字
8. 解決策の提示（医療アプローチの必要性）: 医師写真＋縦書き明朝の大見出し
9. アプローチ紹介（施術内容を具体化）: 番号メダル付き見出しと施術カードのカルーセル
10. 選ばれる理由（差別化）: point番号の欧文＋明朝見出し、写真と本文
11. 比較表（他手段との優位性）: 黒地に自院列を金強調した4列表
12. No.1実績（第三者評価で信頼補強）: 金メダル型バッジを横並び、調査注釈
13. カウンセリングの流れ（来院の不安解消）: 八角形STEP番号＋金帯見出し＋写真＋本文、山形の金区切り

Imagery

• 黒背景に炎や火の粉を合成したドラマチックな写真
• スポーツウェアの女性モデルを自信ある表情で
• 白衣の医師・スタッフが接客する清潔なクリニック写真
• 悩みパートは暗めでモノクロ寄りのトーン
• 脂肪細胞を黄色の円で描いたシンプルなイラスト
• 金のカーテン・光の粒・月桂樹などの装飾素材
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に SP 幅（約 750px）のカラムを置き、左右は暗色や柄で埋める想定
• 追従CTAは PC でもカラム幅に合わせ下部固定
• 比較表は PC で列幅を広げ文字を大きくする
• カルーセルは PC で 2〜3 枚同時表示も可
• 大数字・見出しは PC で 1.3〜1.5 倍に拡大

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