DESIGN.md — 若草色×カフェブラウンの歯科医院 LP（Natural Olive Green and Cafe Brown Dental Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: ナチュラル、やさしい・柔らかい、清潔・爽やか、信頼・誠実
• キーワード: 生成り地・若草グリーン・カフェブラウン・英字透かし・白カード・有機的な写真切り抜き
• 地の質感: フラットな単色面。グラデーションと影はほぼ使わず、薄い英字の透かしで奥行きを出す
• 形: 角を大きく丸めた白カード、不定形のブロブで切り抜いた写真、ピル型の線ボタン
• 温度感: 暖かい中間色に爽やかなグリーンを差した、温かく清潔な印象

Colors

• 地は生成り→白→ブラウン→ベージュ→グリーン→白→ネイビーの順にセクションごとに切り替える
• 強調語や番号、アイコンは若草グリーンでそろえる
• ブラウンは帯状の面と施設案内の箱だけに使い、文字には使わない
• 英字の透かしは地より少し濃い同系色で、大きく薄く敷く
• フッターだけスレートネイビーにしてページを締める
• 見出しの一部の語だけグリーンのマーカー面に白抜き文字を載せる
• button-primary は文字 #FFFFFF × 背景 #7CAB01 のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#5D8001、4.61:1）を使う。
• number-badge は文字 #FFFFFF × 背景 #AE8760 のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#936F4B、4.55:1）を使う。
• stat-circle は文字 #6E9A1E × 背景 #C8CEA5 のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 英字見出しの右に縦線を挟んで、日本語の小見出しを小さく添える
• 見出しの強調語だけグリーンにし、ひと回り大きくする
• 本文は行間を広め（2.0）に取り、字間も少し空ける
• 英字の透かしは細いウェイトで画面幅いっぱいに置く
• 太字はあまり使わず、500〜700までにとどめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はテキストと写真の 2 カラム、メニューは 5 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真とテキストは左右を交互に入れ替えて並べる
• 特長は 2 列×3 段。SP では 1 列にする
• 白いカードは画面端から少しはみ出すように大きく置く
• 経歴は淡い面の箱に、箇条書きを 2〜3 列で入れる
• 初診の流れはアコーディオン型の番号付きリストにする

Elevation & Depth

• 影はほぼ使わず、面の色の差で階層を分ける
• 写真を重ねて少しずらし、奥行きを出す
• カードは白い面だけで、枠線は付けない

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 基本は角丸の長方形。特長だけ不定形のブロブ型で切り抜く
• セクション境界: 直線で色を切り替える。白カードの上側だけ大きく角を丸める
• ボタンは細いグリーンの枠線のピル型で、右端に矢印を付ける
• 数値バッジは淡いオリーブの正円にする
• メニューカードは白い正方形に近い形で、右下に小さな矢印を付ける

Components

• 予約ボタン（button-primary）: グリーンの面に白文字を載せた角丸ボタン。アイコンを添える
• 線ボタン（button-outline）: 細いグリーンの枠線のピル型ボタン。右に矢印を置く
• 英字＋和文の見出し（section-heading）: 大きめの英字・縦線・小さな和文を横に並べる
• 番号丸（number-badge）: 茶色の小さな円に01・02などの番号を入れ、見出しの頭に置く
• 診療メニューカード（menu-card）: 線画アイコンと名前を載せた白カード。縦書きの英字を添える
• 特長ブロック（feature-blob）: ブロブ型に切り抜いた写真と、グリーンの下線付き見出しを組み合わせる
• アコーディオン（accordion）: 白い角丸の帯に番号と＋/−を付ける。開いた中身はグリーンの面に入れる
• FAQ行（faq-item）: グリーンのQの後に質問文を置き、右端に＋を付ける。行の間は罫線で区切る
• 数値の丸バッジ（stat-circle）: 淡いオリーブの円に、ラベルとグリーンの大きな数字を入れる
• 名前プレート（name-plate）: 人物写真の下端に重ねるグリーンの帯。肩書きと氏名を入れる

Do's and Don'ts

Do - 生成り・白・ブラウン・グリーンの 4 色を軸に、セクションごとに地の色を切り替える - 人物写真は明るく自然光で、笑顔のスタッフを中心に撮る - 見出しは英字と和文の 2 段構成で統一する - 余白は広めに取り、本文は行間 2.0 にする - ボタンはピル型と矢印で統一する

Don't - 原色の赤や青、ビビッドな色は使わない - 濃いドロップシャドウやグラデーションのボタンは使わない - 太いゴシックで本文を詰めて組まない - 写真を暗く、冷たいトーンに加工しない - フッター以外に濃い色の大きな面を作らない

Page Structure

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

1. ファーストビュー（医院の雰囲気と理念を伝える）: 診療風景とスタッフの集合写真を横に並べ、左上に短い 2 行のキャッチを置く。右下にお知らせ帯を重ねる
2. 理念の紹介（方針と立地などの基本情報を伝える）: 生成り地に短い文章を置き、INFO 欄にグリーンの箇条書きを並べる。写真は重ねて配置する
3. ピックアップ診療（主力の診療 2 つを訴求する）: 英字透かしの上に白い大きなカードを置き、番号付きの見出し・写真・バナーを載せる
4. 診療メニュー（診療科目の一覧への導線）: ブラウンの帯に白いアイコンカードを 5 列で並べ、その下にグリーンのバナーを置く
5. 院長・理事長の紹介（医師の信頼性を示す）: 人物写真に名前プレートを重ね、経歴は淡い面の箱に年表形式で入れる
6. 特長（6 つの強みを伝える）: ベージュの地に英字透かしを敷き、ブロブ型の写真と見出しを 2 列×3 段で並べる
7. 施設案内（院内の設備を見せる）: 写真のコラージュにブラウンの箱を重ね、POINT 番号付きの写真カードを 2 枚並べる
8. 初診の流れ（受診までの不安をなくす）: グリーンの地で、左に説明と写真、右に番号付きのアコーディオンを置く
9. よくある質問（疑問を解消する）: 白い地に Q 付きの行を罫線で区切って並べ、右上に一覧ボタンを置く
10. 採用（求人への導線）: 大きな英字の見出しとスタッフ写真を 2 カラムで組み、旗の飾りを添える
11. 診療時間・予約（予約と来院を促す）: 電話ボタンと Web 予約ボタンを並べ、診療時間表はグリーンの丸で示す。下に数値の丸バッジを並べる
12. フッター（サイト内の回遊を助ける）: ネイビーの地に白文字のリンク列とグリーンの予約ボタンを置く

Imagery

• 自然光で明るく撮った院内とスタッフの写真。ベージュの制服や木目の家具など暖色系でそろえる
• 患者と医師が向き合う、笑顔の診療シーン
• 特長の写真は有機的なブロブ形に切り抜く
• アイコンはグリーンの細い線画で、歯や器具を簡略化して描く
• 背景には大きな英字のアウトライン風の透かしを入れる
• 旗のガーランドなど、小さな手描き風の飾りを少しだけ添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像から推定した値。SP は 1 カラムにして、写真を上・テキストを下に置く
• メニューカードは SP で 2〜3 列のグリッドにする
• 特長の 2 列は SP で 1 列にし、ブロブ写真は右寄せで小さめにする
• 英字の透かしは SP で 40px 程度に縮める
• 予約ボタンは SP で画面下部に固定する
• 経歴の多列リストは SP で 1 列にまとめる

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