DESIGN.md — ティール×コーラルの美容外科クリニックLP（Soft Teal Coral Aesthetic Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 清潔・爽やか、上品・高級、信頼・誠実、やさしい・柔らかい
• キーワード: ティール・コーラル・明朝見出し・白カード・線画イラスト・葉っぱ装飾
• 地の質感: フラットな単色面が基本。価格帯だけ斜めストライプの薄い柄を敷く
• 形: 角丸カード、ピル型ボタン、片側だけ大きく丸めたカード、逆三角の矢印
• 温度感: やや涼しげ。コーラルで温かみを添える

Colors

• 淡いブルーグレーの地に白カードを重ね、セクションの区切りを出す
• ティールは帯見出し・価格帯・番号・チェック・アイコンに使う
• コーラルは主CTAと見出しの強調語だけに絞る
• 見出しは黒、強調する語だけをティールかコーラルに変える
• イラストはブラウンの細い線画にして、頬に淡いピンクを差す
• 価格帯はティールの地に白文字を置き、白いピル帯でオファーを示す
• button-primary は文字 #FFF6E6 × 背景 #F18B6D のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD3E14、4.56:1）を使う。
• button-tel は文字 #4CC3C4 × 背景 #FEFEFE のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2B8182、4.56:1）を使う。
• arrow-down は文字 #FFF6E6 × 背景 #F18B6D のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD3E14、4.56:1）を使う。

Typography

• 見出しとボタンは明朝体、本文はゴシック体で分ける
• 強調語は1〜2割ほど大きくして色を変える
• 番号は細い斜体の欧文セリフをティールで大きく置く
• 本文は行間を広めの1.9にする
• 見出し左に縦の細線を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。施術手順はアイコン＋文の 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 28px（375px 幅換算）
• 淡色の地に、左右に約16pxの余白を取って白カードを置く
• 帯見出しは画面幅いっぱいか、カード幅のティール角丸帯にする
• 特長カードは写真を上、番号と見出しと本文を下に置く
• 流れは丸アイコンを点線の縦ラインでつなぐ
• 料金は見出し帯と価格を右寄せにした表組みカードにする

Elevation & Depth

• CTAボタンに柔らかいドロップシャドウを付ける
• カードは影なしの白面か、ごく薄い影にする
• ピル帯や吹き出しに軽い影を付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。特長カードは右上か左上を大きく丸める
• セクション境界: 直線で色面を切り替える。CTAへの誘導は逆三角の矢印
• 主CTAはピル型にする
• 特長カードは片側だけを大きく角丸にする
• アイコンは細枠の角丸正方形か円に入れる
• 料金カードは小さい角丸と細い枠線

Components

• 予約CTAボタン（button-primary）: コーラルのピル型ボタン。左に白地の小ラベル、右端に白丸の矢印アイコン
• 電話ボタン（button-tel）: 白いピル型ボタン。ティールの大きな番号と丸矢印を入れる
• 価格オファー帯（offer-band）: ティールの地に斜めストライプを敷く。円形の線画イラスト・白いピル帯・大きな明朝の価格を並べる
• 帯見出し（heading-band）: ティールの角丸帯の中央に白い明朝の見出しを置く
• 悩みチェックリスト（worry-check）: 灰色パネルの上に白い横長カードを4つ並べる。灰色のチェック丸を付け、語尾をティールで強調する
• 誘導の逆三角（arrow-down）: コーラルの逆三角形の中に白い明朝の誘導文を入れる
• 番号付き特長カード（feature-card）: 白カードの上に写真を置き、斜体の番号・縦線付きの見出し・本文を続ける
• 流れのステップ（step-item）: 細線の円の中に線画アイコンと番号を入れ、点線の縦ラインでつなぐ
• 料金カード（price-card）: ティールか薄灰の見出し帯の下に、説明文と右寄せの価格を縦線で区切って置く
• Q&A（faq-item）: ティールの丸にQ、薄い色の丸にAを入れ、点線で区切る

Do's and Don'ts

Do - コーラルはCTAと強調語だけに使う - 見出しは明朝体で、強調語だけ色と大きさを変える - 白カードの角に葉っぱの線画を添える - 番号は細い斜体の欧文セリフにする - 淡い地と白カードを交互に重ねて区切る

Don't - 原色や濃い色の面を広く使わない - 太いゴシックで見出しを作らない - イラストを塗りの強いタッチにしない - 影を強くしない - コーラルを地色に多用しない

Page Structure

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

1. ファーストビュー（施術と専門性を伝える）: 女性の横顔写真に明朝の大見出しを重ねる。下に強み3つを葉っぱ装飾付きのボックスで並べる
2. 価格オファーとCTA（価格と限定特典を示して予約へ誘導する）: ティールのストライプ地にピル帯と大きな価格を置き、予約と電話の2ボタンを並べる
3. 技術の重要性（外科医が担当する意義を伝える）: 淡い地の上に、写真と強調見出し、白カードの本文を置く
4. 医師の紹介（簡易）（信頼を補強する）: ティールの帯見出しを置き、医師写真と所属ラベルを左右交互に並べる
5. 悩みの提起（共感を得る）: 灰色パネルにモノクロの人物写真を入れ、悩み4つのチェックリストと逆三角の誘導を続ける
6. 解決の提示（施術で叶うことを示す）: 明朝の大見出しを複数行で置き、強調語をティールにする
7. 理想像とシミュレーション（仕上がりを確認できることを示す）: 白カードに線画の横顔と比較写真を入れる
8. 症例タイプ別の施術（施術方法を説明する）: case番号付きのカードに、ビフォーアフターの線画と帯見出し、骨格図の手順を入れる
9. 選ばれる理由（メリットを6つ示す）: 片側を大きく丸めた写真付きカードに番号を付けて縦に並べる
10. 施術の流れ（来院から術後までを示す）: 円の線画アイコンを点線でつなぐ縦タイムラインにする
11. ドクター・クリニック紹介（経歴と所在地を示す）: 写真と経歴の枠を並べ、外観写真・診療時間表・地図を続ける
12. 料金（費用を明示する）: 見出し帯付きの料金カードを並べ、支払い方法アイコンを添える
13. 限定特典・よくある質問・術後ケア（最後の不安を解消する）: 大きな割引の数字、Q&A、アイコン付きの注意事項を続ける
14. 予約フォーム（申込を受け付ける）: 明朝の見出しの下に、必須バッジ付きの入力欄を縦に並べる

Imagery

• 白背景で撮った女性の横顔や、頬に手を添えた明るく柔らかい写真
• ブラウンの細い線画で描いた横顔イラスト。頬に淡いピンクを差す
• グレーの骨格図を細枠の角丸ボックスに入れる
• 院内や医師の実写真は明るく撮り、角丸で切り抜く
• ティールの葉っぱとつるの線画をカードの角に飾る
• ブラウンの線画アイコン（書類・注射器・ベッドなど）
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約60%幅のカラムを置き、左右は淡い地にする
• PCのファーストビューは写真を右に、見出しと強みを左に置く
• PCの価格帯は左にオファー、右にCTAと電話の2カラム
• PCの悩みリストは写真の周りに散らして配置する
• PCの特長は写真と文を左右交互に並べる
• PCの流れは横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 行書くと起動時に読み込まれる。