DESIGN.md — クリーム×オレンジのやさしい歯科医院 LP（Warm Cream & Orange Family Dental Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、清潔・爽やか
• キーワード: 地域密着・子ども連れも安心・暖色パステル・丸い形・イラスト添え
• 地の質感: フラットな単色面。診療案内の帯だけ薄い方眼グリッドを敷き、ノートのような手触りを出す
• 形: 円形アイコンボタン、角丸の小さいカード、雲のような不定形の写真マスク
• 温度感: 暖かい（クリーム・ピーチ・オレンジ）に水色を少し差して清潔感を出す

Colors

• 地は白を基本とし、セクションごとにクリーム・生成り方眼・ピーチの帯を交互に敷く
• オレンジはボタン・カード枠・小見出し・アイコンに限定し、大面積はフッター最下部の帯だけ
• 水色はきらめき装飾と小鳥イラストだけの差し色にする
• 本文は濃グレーにし、真っ黒は使わない
• 円形ナビは淡いオレンジの円にオレンジのアイコンと文字を載せる
• header-reserve-tab は文字 #FFFFFF × 背景 #FB9501 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AC6601、4.51:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #FB9501 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AC6601、4.51:1）を使う。
• button-outline は文字 #FA9402 × 背景 #FFFFFF のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AC6601、4.51:1）を使う。
• circle-nav は文字 #FA9402 × 背景 #FDF2E2 のコントラスト比が 2.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AC6601、4.53:1）を使う。

Typography

• 見出しは太くしすぎず中くらいの太さで、字間を広めにとる
• 紹介文は中央揃えで短く改行し、段落の間を 1 行あける
• 和文見出しの下に小さな英字ラベルをオレンジで添える
• 電話番号は受話器アイコンと組んで大きめに出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。診療カードは 2 列、円ナビは 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは見出し、短い説明文、カード群の順に中央揃えで組む
• セクションの切り替えは背景色の帯で示す
• よくある質問は写真と質問リストを並べ、SP では縦に積む
• 医院情報では診療時間表と地図を並べ、SP では縦に積む
• 画面の端に小鳥や木のイラストを小さく置き、余白を生かす

Elevation & Depth

• 基本は影なしのフラット
• お知らせカードはごく薄い影と細い枠線で、紙のように浮かせる
• カードは影ではなくオレンジの細い枠で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: ファーストビューは雲や豆のような不定形マスク、その他の写真は角丸 8px
• セクション境界: 直線で背景色を切り替える。診療案内の帯だけ方眼柄
• ナビボタンは正円にする
• ボタンは角丸 4px 程度の長方形に右向き矢印を添える
• 電話予約ボタンは上辺を画面上端に付け、下側だけを角丸にしたタブ型にする

Components

• 電話予約タブ（header-reserve-tab）: 右上に固定するオレンジのタブ。小さなラベルと電話番号を入れる
• 詳細ボタン（button-primary）: オレンジ塗りに白文字と矢印を入れた長方形ボタン
• メール問い合わせボタン（button-outline）: 白地にオレンジの細い枠とオレンジの文字
• きらめき見出し（heading-sparkle）: 見出しの左右に水色の四芒星を置く。オレンジの波線を添える版もある
• 円形ナビボタン（circle-nav）: 淡いオレンジの正円に線画アイコン、和文ラベル、英字ラベルを縦に並べる
• お知らせカード（news-card）: 白いカードの上にクリップのイラストを載せ、左に見出し、右に日付と件名のスクロールリストを置く
• 診療カード（service-card）: オレンジ枠の白カード。歯のアイコン、オレンジの小見出し、説明文を入れる
• 質問リスト（faq-list）: オレンジの小さな丸を行頭に置き、点線で区切った質問を縦に並べる
• 診療時間表（hours-table）: 見出し行はオレンジ地に白文字。各行に曜日ごとの丸やバツを入れる

Do's and Don'ts

Do - 暖色パステルの帯を交互に使い、柔らかな流れをつくる - 見出しには水色のきらめきや手描き風の小物を添える - アイコンはオレンジの線画で統一する - 子どもや家族の笑顔の写真を使い、安心感を伝える - 電話番号と予約導線をヘッダーと医院情報の両方に置く

Don't - 濃い原色や黒を大きな面に使わない - 影の強いカードやグラデーションボタンは使わない - 明朝体や角張った太い書体で硬くしない - イラストを詰め込みすぎない（1 セクションに 1〜2 点まで） - 医療的に冷たい青一色の配色にしない

Page Structure

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

1. ヘッダー（ロゴ・メニュー・電話予約）: 白地の左にロゴ、右にアイコン付きメニュー。電話予約はオレンジのタブにする
2. ファーストビュー（安心感と笑顔の訴求）: クリーム地の左に字間の広い短いキャッチ、右に不定形マスクの診療写真。下にスライダーのドットを置き、小鳥のイラストを添える
3. 医院紹介（方針と通いやすさを伝える）: きらめき見出しの下に、中央揃えの紹介文を 2 段落入れる
4. 円形ナビ（理念・挨拶・院内紹介へ誘導）: 淡いオレンジの正円を 3 つ横に並べる
5. お知らせ（最新情報）: クリップを載せた白カードに日付付きのスクロールリストを入れる
6. 診療案内（診療科目の一覧）: 方眼柄の帯に説明文を置き、オレンジ枠のカードを 4 つ並べる（SP は 2 列）
7. よくある質問（不安の解消）: ピーチ地に家族の写真と質問リストを並べ、オレンジの詳細ボタンを置く
8. 医院情報（連絡先・診療時間・地図）: ロゴ、住所、電話、メールボタン、診療時間表を置き、地図を並べる
9. フッター（サイトマップとコピーライト）: 白地にメニューを 5 列並べ、ページトップへ戻る小鳥を置く。最下部にオレンジの帯を敷く

Imagery

• 自然光で明るく撮った、子どもや家族と歯科スタッフの笑顔の写真
• 写真は暖色寄りで高めの明るさ、柔らかなコントラストに仕上げる
• 水色の小鳥、黄色い鳥、小さな木、草など、水彩風のフラットイラストを余白に点在させる
• アイコンはオレンジの単色線画（歯・ハート・書類など）
• 四芒星のきらめきを水色で散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は最大幅約 760px で中央に寄せ、診療カードは 4 列、FAQ と医院情報は 2 カラムで組む
• SP はヘッダーメニューをハンバーガーにし、電話予約を固定ボタンにする
• SP のファーストビューは写真を上、キャッチを下に積む
• SP の診療カードは 2 列、円ナビは 3 列を維持して小さくする
• SP のフッターメニューは 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 行書くと起動時に読み込まれる。