DESIGN.md — 生成り×オレンジのやさしい歯科医院 LP（Warm Beige Orange Friendly Dental Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、ナチュラル
• キーワード: 生成りベージュ・オレンジ差し色・大きな角丸・地域密着・スタッフの笑顔・和の小イラスト
• 地の質感: フラットな単色面。影はごく薄く、紙のような柔らかい地。
• 形: 角丸 12〜20px のカードと写真、ピル型ボタン、ゆるい波形のセクション境界。
• 温度感: 暖色寄り。ベージュとオレンジで温かく、白カードで清潔感を足す。

Colors

• 地はベージュとオフホワイトを交互に使い、セクションを分ける。
• 主ボタンと強調語は全部オレンジに揃える。
• 黄色は主力メニューのカードと問い合わせ帯だけに使う。
• 白いカードはベージュ地の上に置いて、浮いて見えるようにする。
• フッターだけグレーブラウンの濃い面にして、ページを締める。
• 文字は黒ではなくブラウン系にして、柔らかさを保つ。
• button-primary は文字 #FEFEFE × 背景 #F37B23 のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BF570A、4.54:1）を使う。
• blog-panel は文字 #5A5048 × 背景 #FDAB6C のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#FDB57E、4.52:1）を使う。

Typography

• 見出しは和文の下に小さな英字ラベルを添える 2 段構成にする。
• キャッチの一語だけオレンジ色にして強調する。
• 本文は中央揃えで行間を広めにとる。
• 見出しは丸ゴシックの太字、本文は細めのゴシックで差をつける。
• 電話番号はアイコン付きで大きく太く出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。診療メニューは 2 列グリッド、口コミは横スクロールのカルーセル。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの間は 64〜80px 空ける。
• 見出しは左寄せで、説明文を右か下に置く。
• 主力メニュー 2 つは色付きの大きなカード、その他は白い小さなカードに分ける。
• 各セクションの最後には中央にピル型ボタンを置く。
• 店舗情報は写真・診療時間表・地図をまとめて組む。

Elevation & Depth

• 白いカードはごく薄い影（0 2px 8px rgba(0,0,0,0.05)）だけ付ける。
• ボタンは影を付けず、色面だけで見せる。
• 院長メッセージのカードは、オレンジ面の上に白い面を重ねて奥行きを出す。

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。ギャラリーは傾けた角丸タイルを並べてコラージュにする。
• セクション境界: ゆるい波形の曲線、または直線で区切る。
• 写真・カード・帯はすべて角を丸くする。
• アイコンは円形の淡いベージュ地に線画で入れる。
• ボタンは完全なピル型にして、右端に矢印を付ける。

Components

• オレンジのピルボタン（button-primary）: 各セクション末尾の中央に置く。白文字の右に矢印を付ける。
• 和英 2 段見出し（section-heading）: 太い丸ゴシックの見出しの下に、小さな英字ラベルを置く。
• 主力メニューの色カード（feature-card-color）: 黄またはオレンジの面に、円形アイコン・見出し・説明を入れる。
• 診療メニューの白カード（menu-card）: 円形アイコン、メニュー名、2 行の悩み文を中央揃えで入れる。
• 口コミカード（review-card）: 丸い似顔絵アイコン、イニシャル名、本文で作り、横スクロールで並べる。
• ブログ一覧パネル（blog-panel）: 淡いオレンジの角丸枠の中に白い面を置き、日付とタイトルを 2 列で並べる。
• 問い合わせ帯（contact-band）: 黄色の面に見出し、電話番号、オレンジのボタンを入れる。
• 右端の追従丸ボタン（floating-nav）: 予約・電話・診療時間の丸いアイコンを縦に並べ、右端に固定する。

Do's and Don'ts

Do - ベージュとオフホワイトを交互に使い、セクションのリズムを作る。 - スタッフの笑顔の写真を角丸で大きく見せる。 - 地域を表す小さな和風イラストを、見出しの近くに添える。 - 主ボタンはオレンジのピル型に統一する。 - アイコンは細い線画で、円形の地に入れる。

Don't - 純黒の文字や、寒色の強い色を主に使わない。 - 角の鋭い四角いカードや写真を使わない。 - 濃い影やグラデーションを多用しない。 - オレンジと黄色を同じ面積で並べすぎない。 - 医療らしい冷たい青白のトーンにしない。

Page Structure

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

1. ファーストビュー（温かい医院だと第一印象で伝える。）: 左に 2 行のキャッチ（一語をオレンジ）、右に受付スタッフの角丸写真。下端は波形にし、和の小イラストを添える。
2. キャンペーンバナー（主力の自費メニューを価格つきで訴求する。）: オレンジの見出し帯、人物写真、価格を大きく載せた横長のバナー。
3. 医院紹介（理念と姿勢を伝える。）: 大きな角丸写真に白い見出しボックスを重ね、下に中央揃えの本文とボタン。
4. 診療案内（対応できる診療を一覧で見せる。）: 色カード 2 枚の下に、アイコン付きの白カードをグリッドで並べる。
5. 特長（選ばれる理由を示す。）: 写真付きの白カードを 2 枚並べ、見出しと本文を入れる。
6. 院長メッセージ（院長の人柄で信頼を作る。）: オレンジ地に白カードを重ね、左に写真とプロフィール表、右に本文と署名。
7. 院内ギャラリー（院内とスタッフの雰囲気を見せる。）: オレンジ地に、傾けた角丸写真をコラージュで並べる。
8. お客様の声（患者の安心感を伝える。）: 似顔絵アイコン付きの口コミカードを横スクロールで見せ、下にスクロールバーを付ける。
9. ブログ（更新している様子と親しみを伝える。）: 院長のイラストと吹き出しを添え、淡いオレンジ枠に日付つきの一覧を入れる。
10. 問い合わせ（電話とフォームに誘導する。）: 黄色の帯に電話番号を大きく出し、オレンジのボタンを置く。下に山並みの写真。
11. アクセス・診療時間（来院に必要な情報を伝える。）: 外観写真、オレンジ見出しの診療時間表、地図、駐車場の図を組み合わせる。
12. フッター（サイト内リンクと医院情報を載せる。）: グレーブラウンの面に、ロゴとオレンジの点が付いたリンクを 2 列で並べる。

Imagery

• スタッフは制服姿の自然な笑顔で、明るい院内で撮る。
• 写真は暖色寄りで明るく補正し、肌を柔らかく見せる。
• 地域の名所や山並みの風景写真で、地元らしさを出す。
• 塔・山・鳥居・木・鳥などの小さなフラットイラストを、ワンポイントで散らす。
• 院長は似顔絵風の手描きイラストと、吹き出しで親しみを出す。
• 口コミには丸い簡素な似顔絵アイコンを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP ではファーストビューを写真が上、キャッチが下の縦積みにする。
• 診療メニューのグリッドは PC の 3 列から SP の 2 列にする。
• 特長と院長メッセージは PC の 2 列から SP の 1 列にする。
• 口コミはどちらも横スクロールのままで、SP では 1.2 枚見える幅にする。
• 追従の丸ボタンは SP では画面下の固定バーに置き換える。

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