DESIGN.md — 水色×ゴールドの清潔感ある美容医療 LP（Clean Aqua and Gold Aesthetic Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、上品・高級、情報量多め・訴求型
• キーワード: 淡い水色・ゴールドの帯・白衣の医師写真・中央の細いカラム・繰り返す CTA・料金アコーディオン
• 地の質感: 白と水色の淡いグラデーション。光が差すような柔らかいボケ背景で、ゴールドは金箔風のグラデーションにする
• 形: 角丸は小さめで矩形が基本。円形バッジと六角形を一部に使う
• 温度感: やや寒色寄りで清潔な印象。金色で温かさと高級感を足す

Colors

• 地は白と淡い水色を交互に置き、生成りは安心・サポート系のセクションだけに使う
• 見出しはティール、番号と約束系の強調はゴールドに分ける
• CTA ブロックは上から下へ水色が濃くなるグラデーション地に白いカードを置く
• 主ボタンは緑、副ボタンは黄で、2 段に並べる
• 赤ピンクは本文中の重要語だけに使い、面には使わない
• 電話番号は大きなティールの数字にする
• button-primary は文字 #FFFFFF × 背景 #0BC354 のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#08893B、4.51:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #FCC23C のコントラスト比が 1.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#9D6E02、4.5:1）を使う。
• cta-block は文字 #2593B4 × 背景 #6DBCDA のコントラスト比が 1.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• promise-card は文字 #2593B4 × 背景 #FFFFFF のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#20809D、4.53:1）を使う。
• badge-circle は文字 #2593B4 × 背景 #EAFCFF のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#20809D、4.59:1）を使う。
• price-accordion は文字 #2593B4 × 背景 #EAFCFF のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#20809D、4.59:1）を使う。
• heading-label-band は文字 #FFFFFF × 背景 #2593B4 のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#20809D、4.53:1）を使う。

Typography

• 見出しは中央揃えで 2 行に収める
• セクション見出しの脇に英字ラベルを縦書きで薄く添える
• 数字（番号・料金・電話）は細めのセリフ体で大きく出す
• Point 見出しは金色のイタリック体にする
• 本文は行間を 1.8 程度にとってゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表は横スクロールにし、医師紹介は 2〜3 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは中央の細いカラムに置く（PC で約 360px）
• 約束カードは左右に交互にずらした白いパネルにする
• CTA ブロックは 3〜4 セクションおきに挟む
• 料金はアコーディオンを縦に積む
• 表は罫線区切りにして余白を詰める

Elevation & Depth

• 白いカードには薄い影（0 2px 8px rgba(0,0,0,.06)）をつける
• CTA カードは影なしの白い面で地から浮かせる
• 表とアコーディオンはフラットにし、罫線だけで区切る

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 人物は白背景の切り抜きか矩形。医師は正方形の証明写真風に並べる
• セクション境界: 直線を基本にする。V 字の矢印や緩い弧を一部に使う
• CTA ボタンだけピル型にする
• 特長のバッジは円形の淡い水色にする
• 認証系の表示は六角形を組み合わせる
• 見出し枠は金色の細い矩形枠にする

Components

• 無料カウンセリング予約ボタン（button-primary）: 緑のピル型ボタン。左にアイコン、右に矢印を置く
• 相談・問い合わせボタン（button-secondary）: 主ボタンのすぐ下に置く黄色のピル型ボタン
• 水色グラデーションの CTA ブロック（cta-block）: 医師の切り抜き写真と吹き出しの見出しを上に、白いカードにボタン 2 つと電話番号 2 つを入れる
• 番号付きの約束カード（promise-card）: 金色の大きな番号、ティールの見出し、下線、円形バッジ 3 つ、本文の順に並べる
• 円形の特長バッジ（badge-circle）: 淡い水色の円に短い特長語を入れて 3 つ横に並べる
• 料金アコーディオン（price-accordion）: ティールの帯にキャッチ、淡い水色の地に施術名と大きな料金、右に下向き矢印を置く
• Point 解説ボックス（point-box）: 淡い黄の地。左上に金色のイタリックで Point と入れ、右に医師のイラストを添える
• Q&A アコーディオン（faq-item）: 淡い水色の地にティールの Q を付け、右に＋アイコンを置く
• ティール帯の小見出し（heading-label-band）: 原因などに使う白抜き文字の帯見出し

Do's and Don'ts

Do - 白と淡い水色を基調にし、余白を広くとる - 金色は番号・約束・枠線に絞って高級感を出す - 医師・専門医の写真を多く並べて信頼を示す - 料金・比較表・リスクは表形式で明示する - CTA ブロックは同じ型で繰り返す

Don't - 濃い原色や黒を広い面に使わない - 角丸を大きくしすぎてポップに寄せない - 主ボタンを緑以外の色にしない - リスクや副作用の記載を省かない - 装飾フォントを本文に使わない

Page Structure

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

1. ファーストビュー（悩みと対応範囲を示す）: 右に笑顔の女性、左に円の中の悩みワードを散らす。下に金色の帯ラベルとティールの大見出しを置く
2. 実績バッジ（実績を数字で示す）: 数字入りの短い実績を縦線で区切って 3 つ並べる
3. 症例写真（施術の効果を見せる）: タブ切り替えで Before/After を並べたカードのスライダーにする
4. CTA（予約へ誘導する）: 水色グラデーションの地に白いカードを置き、ボタン 2 つと電話番号を入れる
5. 悩みの提起（施術前の不安に共感する）: グレーの霧のような地に、白い多角形とチェックリストを置く
6. 3 つの約束（不安を解消する強みを示す）: 金色の枠の見出しの下に、番号付きの白いパネルを左右交互に置く
7. サポート体制（アフターケアで安心させる）: 生成りの地に金色のパネルを置き、写真と項目リストを続ける
8. 原因の解説（悩みの原因を教える）: 写真の下にティール帯の小見出しを付けた原因を 3 つ並べ、Point ボックスで締める
9. 施術比較表（施術を比べられるようにする）: 灰水色のヘッダーを付け、◎○△ の記号で示す表にする
10. 料金（価格を明示する）: 料金アコーディオンを縦に積む
11. ドクター紹介（医師の顔を見せて信頼を得る）: 正方形の写真の下に役職と名前を入れたグリッドにする
12. 施術の流れ（来院から施術までの手順を示す）: 淡い水色の帯に STEP カードを置いたスライダーにする
13. よくある質問（疑問を解消する）: Q 付きのアコーディオンを縦に並べる
14. 院一覧・リスク・注意事項（院の所在と法令上の表記を示す）: 日本地図の線画、リスクの見出しと本文、罫線表で構成する

Imagery

• 人物は白い背景の明るい自然光で撮り、素肌感のある笑顔の女性にする
• 医師は白衣でグレー背景の正面バストアップにし、揃えた構図で並べる
• 背景は水色と白のボケや光の筋で透明感を出す
• 金色は箔のグラデーションにして帯やパネルに使う
• 日本地図や薬瓶は淡い水色の線画・写真で控えめに見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも本文カラムは約 360〜400px の中央寄せのままにし、左右は背景のグラデーションを見せる
• SP では約束パネルの左右交互のずらしをやめ、全幅にする
• 比較表は SP で横スクロールにする
• 医師グリッドは PC で 5 列、SP で 2〜3 列にする
• CTA カードは SP で画面幅の 90% にする

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