DESIGN.md — ミント×ハイビスカスの南国風歯科医院 LP（Tropical Mint Dental Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、親しみ・手作り感、信頼・誠実
• キーワード: ミント水色・エメラルド・ハイビスカス・波形区切り・白カード・明朝見出し
• 地の質感: フラットな単色面。写真はハイキーで明るく、装飾は南国の花と葉のフラットイラスト
• 形: 大きな角丸カード、ピル型ボタン、不定形ブロブで切り抜いた写真、波形のセクション境界
• 温度感: 涼しげな寒色ベースに、赤いハイビスカスと赤 CTA で温かみを足している

Colors

• 地色はミント水色→エメラルド→淡ミントを交互に配置し、セクションの切り替えを色で示す
• エメラルド帯の上には淡ミントの大きな角丸パネルを置き、その中に白カードを入れ子にする
• 主ボタンはエメラルド地に白文字。予約だけは赤を使い、最優先の行動として目立たせる
• 赤はハイビスカス・番号丸・強調語・予約ボタンだけに使い、面積は小さく抑える
• 本文は濃グレー。見出しの一部は緑文字にして、医療らしい清潔感を出す
• 英字ラベルはエメラルド帯の上なら白、淡色の地ならグレーにする
• button-reserve は文字 #FFF1EE × 背景 #E9564F のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D8241B、4.55:1）を使う。
• button-outline-white は文字 #14B09A × 背景 #FEFFFE のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0F8474、4.58:1）を使う。
• step-number は文字 #FFF1EE × 背景 #C55D5A のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BE4945、4.51:1）を使う。

Typography

• 見出しは明朝で字間を広めに取り、上品さとやわらかさを出す
• 各見出しの上に、小さな欧文セリフの英字ラベルを添える
• セクション上端には大きな英字を置き、パネルの縁に半分重ねる
• 本文はゴシックで行間 1.8 前後。段落は中央揃えを基本にする
• 強調語は赤文字かかぎ括弧で示し、太字は多用しない
• メニュー番号は小さな英字と大きなセリフ数字を組み合わせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。診療メニューのアイコンカードだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 18px。大パネルは画面幅の 90% にする
• エメラルド帯の中に淡ミントの大パネルを置き、その中に白カードを入れ子にする（3 層）
• カードの中の箇条書きは淡ミントの角丸枠に入れ、ピル型ラベルを見出しにする
• 理由セクションはブロブ写真→緑見出し→説明文の縦並びを繰り返す
• FAQ は白い角丸の質問バーと、地の上に置く回答文を交互に並べる

Elevation & Depth

• 影はほぼ使わず、色面の差で階層を表す
• 白カードはフラット。角丸と地色とのコントラストだけで浮かせる
• 地図や SNS バナーにもごく弱い影にとどめる

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: メニュー写真は角丸なしの横長矩形。理由セクションの写真は不定形ブロブ、FV は大きな曲線で切り抜く
• セクション境界: 緩やかな波形カーブ。波の上にスタッフのミニイラストを並べることもある
• 大パネルは角丸 28px 前後と大きくする
• ボタンとラベルは完全なピル型にし、右端に白丸アイコンや矢印を置く
• 番号は赤の正円、FAQ の Q はエメラルドの正円
• 吹き出しは白地に緑の点線枠で角丸にする

Components

• エメラルドのピルボタン（button-primary）: 白文字を中央に置き、右端に白丸のドットアイコン
• 予約フォームボタン（button-reserve）: 赤地の角丸ボタン。上段に小さく開始日、下段に大きくボタン名
• 白ピルボタン（button-outline-white）: エメラルド帯の上に置く白地・緑文字の一覧ボタン
• 診療メニューカード（menu-icon-card）: 白い角丸カードに青緑の線画アイコンとメニュー名＋矢印を載せ、2 カラムで並べる
• ピル型の小見出しラベル（pill-label）: 箇条書き枠の上に置くエメラルド地・白文字の小さなラベル
• スタッフの吹き出し（speech-bubble）: 白地に緑の点線枠。人物の切り抜き写真の上に添える短い一言
• FAQ の質問バー（faq-item）: 白い角丸バーの左にエメラルド丸の Q。回答は下の地に直接置く
• 診療時間表カード（schedule-table）: 白い角丸カード。診療日は青ドット、休診日は斜線で示し、下に住所と注釈
• ステップ番号（step-number）: 赤い正円に白数字。横に工程名と所要時間を添える

Do's and Don'ts

Do - ミント水色とエメラルドの帯を交互に配置し、境界は波形にする - セクションの角にハイビスカスと葉のイラストを重ね、南国らしさを出す - 見出しは明朝＋小さな英字ラベルのセットにする - 情報は白カードや淡ミント枠に入れて整理する - 予約の導線だけ赤ボタンにして、最も目立たせる

Don't - 赤を広い面に使わない - 直角の箱や、強い影のカードを使わない - 暗く寒々しい医療写真を使わない - 見出しを太いゴシックにしない（明朝のやわらかさを残す） - セクションの境界を直線だけで区切り続けない

Page Structure

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

1. ファーストビュー（開院告知と第一印象）: 曲線で切り抜いた笑顔の人物写真、明朝のキャッチコピー、白帯の院名、診療時間表カード、ハイビスカスの装飾
2. 導入オファー（予防歯科への誘導と特典の提示）: 大きなシアン英字の下に白カード。写真、赤の見出し、価格訴求、エメラルドのボタン、特典ピルを並べる
3. 診療のご案内（診療メニューの一覧）: 線画アイコン付きの白カードを 2 カラムで 10 枚並べ、下に波形の区切りとスタッフのイラスト
4. 想いのメッセージ（院の理念を伝える）: エメラルド帯に淡ミントの大パネル。中央揃えの文章と、ドクターの切り抜き写真＋吹き出し
5. 予防メニュー（定期検診の内容を具体的に示す）: 番号付きの白カードに写真、見出し、ピルラベル付きの箇条書き。最後に V 字矢印でまとめ文へつなぐ
6. おすすめ診療（自費メニューの訴求）: ドット付きの見出し、メイン写真＋サムネイル 3 枚、特徴の箇条書き、ピルボタンを持つカードを繰り返す
7. 選ばれる理由（安心材料の提示）: 淡ミント地に、ブロブ写真＋緑見出し＋短い説明の組を 5 つ縦に並べる
8. 初診の流れ（来院の不安を解消する）: 白パネルに写真と赤番号のステップを並べ、所要時間のタイマーアイコンと赤字のひと言を添える。下に全スタッフの集合写真
9. よくある質問（疑問の解消）: カテゴリ見出しを線で挟み、Q バーと回答を交互に。最後にもっと見るボタン
10. コラム・お知らせ・SNS（継続的な接点をつくる）: エメラルド帯に白ピルボタンと SNS バナーを 2 列で並べる
11. アクセス（所在地と診療情報の提示）: 点線区切りの定義リスト、白い注意カード、角丸の地図
12. フッター予約（電話・Web 予約で締める）: 淡ミント地にロゴ、リンク一覧、赤の電話番号、赤の予約ボタン、診療時間表

Imagery

• 写真はハイキーで白飛び気味の明るい院内。スタッフが笑顔で患者に寄り添う場面を選ぶ
• スタッフはカラフルなスクラブ姿で、自然光のような柔らかい光
• 赤・ピンクのハイビスカスと、緑・青のモンステラ葉のフラットイラストを角に重ねる
• 診療アイコンは青緑の細い線画に、淡ミントの塗りを少しだけ入れる
• 波形の上に、小さな人物イラストを点在させる
• 人物は白背景で切り抜き、吹き出しと組み合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 75% 幅のコンテナに収め、ヘッダーにグローバルナビ・電話番号・赤の予約ボタンを常に表示する
• FV は左にコピーと診療時間表、右に大きな人物写真の 2 分割
• 診療メニューカードは 5 列×2 段
• 予防メニューは写真を左、テキストを右に置く横並びカード。おすすめ診療は 2 列
• 選ばれる理由は 3 列＋2 列。初診の流れは 3 ステップを横並び
• アクセスは情報と説明文の 2 カラム、フッターはリンクと予約・時間表の 2 カラム

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