DESIGN.md — くすみローズ×金の女性向け薄毛クリニックLP（Dusty Rose Mincho Women's Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: くすみローズ・明朝見出し・ゴールド数字・淡いグラデーション地・繰り返しCTA・女性医療
• 地の質感: 白〜ピンクベージュ〜薄グレーのやわらかいグラデーション地。光が差すような明るいフェード。
• 形: 角丸は小さめの四角カードが基本。円形バッジ・円形イラスト・角丸CTAボタン。
• 温度感: やや暖色寄りのニュートラル。ローズとベージュで温かく、グレーで落ち着かせる。

Colors

• 白・ピンクベージュ・ブルーグレー・グレージュの淡い地を、セクションごとに切り替える。
• CTAブロックは毎回ピンクベージュ地に白カードを置き、同じ配色で繰り返す。
• ボタンはWEB=ローズ、LINE=緑、電話=ゴールドの3色で役割を分ける。
• 見出し中のキーワードだけをローズかゴールドにして強調する。
• 大きな数値・価格・院名はゴールド。
• FAQだけはグレーモーブの濃い地に白カードを置き、リズムに変化をつける。
• 彩度の高い色は緑のLINEボタン以外に使わない。
• button-primary は文字 #FFF7FA × 背景 #E1A6B2 のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C14961、4.54:1）を使う。
• button-line は文字 #FFF7FA × 背景 #63BB6D のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#388040、4.6:1）を使う。
• button-tel は文字 #FFF7FA × 背景 #B5A882 のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#7E714B、4.58:1）を使う。
• benefit-badges は文字 #D27F90 × 背景 #FEFEFE のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C15067、4.52:1）を使う。
• card-header は文字 #FFF7FA × 背景 #CCACB2 のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9E626D、4.51:1）を使う。
• band-heading は文字 #FFF7FA × 背景 #B5A882 のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#7E714B、4.58:1）を使う。

Typography

• 見出しと本文の大半を明朝体でそろえ、上品さを保つ。
• 大見出しの上に、字間を広くとった小さな英字ラベルを置く。
• 見出しでは強調語だけ文字を大きくし、色も変える。
• 数値は大きく、単位や%は小さく右上に付ける。
• 注釈は※付きの小さなゴシック体で、数値のすぐ下に置く。
• 見出しは中央揃え。本文は左揃え。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。ポイントカードやバッジは2〜3列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの見出しは中央に置き、上に英字ラベルを添える。
• CTAブロックは数セクションごとに同じ内容で挿入する。
• バッジや特典は3等分の横並びにする。
• 症例・メリット・フローはスライダーとドットのページャで見せる。
• 院情報は白カード内に項目名と内容の2列表を組み、写真と地図を続ける。

Elevation & Depth

• CTAボタンの下に薄く濃い色の帯を付け、立体的に見せる。
• FAQ・院カードには、ごく弱いドロップシャドウを付ける。
• 基本はフラットにして、線と地色の差で区切る。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの矩形。人物は切り抜いて地に重ねる。イラストは円形にトリミングする。
• セクション境界: 直線で地色を切り替える。下向きの三角矢印で次のセクションへつなげる箇所もある。
• 予約ボタンは角丸6px前後の横長ボタンにする。
• 悩みや要因は白い円の中に入れる。
• 吹き出しはグレーの雲形にする。
• ステップ番号は斜めに切った平行四辺形のラベルにする。
• 注意喚起バーと経歴ボタンだけをピル型にする。

Components

• 予約CTAブロック（cta-block）: ピンクベージュ地に白カードを置き、認定表記・見出し・受付時間・WEB/LINE/電話ボタン・注釈を縦に並べる。
• WEB予約ボタン（button-primary）: ローズの横長ボタン。メールアイコンと明朝の大きな文字を入れる。
• LINE予約ボタン（button-line）: 緑の横長ボタン。LINEアイコンを付ける。
• 電話ボタン（button-tel）: ゴールドのボタン。大きな電話番号と、小さな診療時間の2段組みにする。
• 特典の3連バッジ（benefit-badges）: 白い枠付きの小さなカードを3つ並べる。項目名の下に、ローズの大きな数字を置く。
• ローズ見出し付きカード（card-header）: 上部にローズの帯（英字ラベル）を付けた白カード。ポイント・プラン・症例に使う。
• 円形キーワード（circle-bubble）: 白い円に、要因や悩みを2〜3行で中央揃えに入れる。
• FAQアコーディオン（faq-item）: グレーモーブ地の上に白カードを置く。左に大きな薄いQ、右端に＋を付ける。
• 実績数値（stat-number）: 明朝の大きな数値と小さな%・※を組み、下に調査注釈を添える。
• 帯見出し（band-heading）: 幅いっぱいのゴールドかローズの帯に、白い明朝文字で強調コピーを入れる。

Do's and Don'ts

Do - 見出しは明朝体で、字間をゆったりとる。 - 強調語はローズかゴールドの1色だけで目立たせる。 - CTAブロックは同じデザインで3〜5回繰り返す。 - 数値には必ず※注釈を添え、信頼感を出す。 - 地色は淡い色のトーン内で切り替える。 - 女性スタッフや患者の明るい笑顔の写真を使う。

Don't - 原色の赤や黒を広い面に使わない。 - 太いゴシック体で見出しを組まない。 - 大きな角丸やポップな装飾を入れない。 - LINEボタン以外に鮮やかな色を使わない。 - 濃い地のセクションを連続させない。 - 注釈なしで効果や数値を断定しない。

Page Structure

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

1. ファーストビュー（専門性と満足度を一目で伝える）: 上部に帯コピー、笑顔の医療スタッフ写真、縦書きのローズ帯の見出し、大きな数値、特徴3つ、院の写真3枚を置く。
2. キャンペーン（お得情報で行動を促す）: 英字ラベル付きの見出しの下に、バナー2枚を置く。下部はローズの帯ボタンにする。
3. 予約CTA（予約へ誘導する）: 白カードにWEB・LINE・電話の3ボタンと特典バッジ3つを入れる。
4. 返金保証（不安を取り除く）: ピンクのグラデーション地に、大きなローズの明朝見出しと医師写真を置く。
5. 医療チーム紹介（体制の信頼性を示す）: 集合写真の上に、職種ごとのモーブ色の円を重ねる。下に実感率の数値を置く。
6. 悩みの提起（放置するリスクを伝える）: グレー地に女性のイラストとグレーの吹き出しを置く。下にゴールドの帯で警告する。
7. 医療機関のメリット（自己ケアとの違いを示す）: タブとスライダーのカードに、番号と写真を入れる。
8. 症例実績（ビフォーアフターで効果を見せる）: 年代タブ、ローズ見出しのカード、2枚並べた写真、コースの詳細表、プロセスを置く。
9. 特長ポイント（選ぶ利点を4つ示す）: POINTラベル付きのカードを2列の非対称グリッドに並べる。
10. 原因・症例解説（症状への理解を深める）: 白い円のキーワード群、円形イラスト、進行度ラベルを使う。
11. 選ばれる理由（3つの理由で差別化する）: Reasonラベル、ローズの番号、写真、本文、数値の順で組む。
12. 料金プラン（価格を明示する）: ローズ見出しのカードを3つ並べる。ゴールドで1日あたりの価格を示し、アイコンを添える。
13. 治療の流れ・よくある質問（手順と疑問を解消する）: ステップのスライダーの後、グレーモーブ地にFAQアコーディオンを置く。
14. クリニック情報（院の所在とスタッフを示す）: グレージュ地に白カードを置き、医師紹介・院一覧・情報表・写真スライダー・地図を入れる。

Imagery

• 白衣の女性医療スタッフが、明るい自然光の中で微笑む写真。
• 白と木目が基調の清潔な院内写真に、観葉植物を添える。
• ブラウンの髪の女性を細い線で描き、淡い色で塗った頬染めイラスト。
• 検査や薬の写真は白背景で彩度を抑える。
• 人物は切り抜いて、淡いグラデーション地に重ねる。
• 六角形の線画や分子模様を、薄いグレーで背景装飾に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約70%幅のコンテンツ列を置き、左右は地色を伸ばす。
• PCではCTAのLINEとWEBのボタンを横並びにし、電話番号は1行にまとめる。
• PCではキャンペーンバナー・院カード・プランを横に2〜3列で並べる。
• PCでは症例カードを写真と詳細の横並びにする。
• FVは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 行書くと起動時に読み込まれる。