🦷 さくらデンタルクリニック デモサイトを実際に体験できます
PC・スマートフォン両対応。全セクションを自由にご覧いただけます。
はじめに
Pharmapiaでは、AI × Web制作の実力をリアルに体感いただくため、業種別のデモサイトを順次公開しています。今回の医療デモサイト③は「さくらデンタルクリニック（架空）」——歯科医院向けのランディングページです。
「清潔感 × 温かみ × 信頼」をコンセプトに、縦書きヒーロー・診療カレンダー自動ハイライト・タブ型診療内容UI・スクロールフェードインなど、実際の歯科医院サイトで求められる要素をすべて盛り込みました。HTML / CSS / Vanilla JS のみで構成しており、軽量・高速・メンテナンスしやすいのも特徴です。
このデモでわかること
- 歯科医院に最適なカラーパレット・フォントの選び方（セルリアンブルー × アンバー）
- 縦書きキャッチコピー（CSS writing-mode）の実装方法
- JavaScript で当日の曜日を自動判定して診療カレンダーをハイライトする手法
- タブ切り替えUIで複数の診療科目をコンパクトに表示するテクニック
- IntersectionObserver によるスクロールフェードインアニメーション
- PC・タブレット・スマートフォンに対応したレスポンシブデザインの実装
- フォーム・予約ボタンをデモ対応（送信時アラート）する方法
デモサイト仕様
| 項目 | 内容 |
|---|---|
| サイト名 | さくらデンタルクリニック（Sakura Dental Clinic） |
| コンセプト | 清潔感 × 温かみ × 信頼 |
| キャッチコピー | 「あなたの笑顔が、私たちの誇りです。」 |
| 技術スタック | HTML / CSS（カスタムプロパティ）/ Vanilla JS（ライブラリ不使用） |
| フォント | Noto Serif JP（見出し）/ Noto Sans JP（本文）/ Cormorant Garamond（英字） |
| カラー | メイン: #2E7D9A（セルリアンブルー）/ アクセント: #F2A65A（アンバー） |
| 対応デバイス | PC / タブレット / スマートフォン（レスポンシブ） |
| ページ構成 | 1ページ完結スクロール型LP（全10セクション） |
| 公開URL | https://demo-dental.pharmapia.jp |
各セクション解説（スクリーンショット付き）
① ヒーローセクション（メインビジュアル）
フルスクリーンの歯科診療室写真を背景に、CSS writing-mode: vertical-rl で縦書きキャッチコピーを配置。右下の「本日の診療時間」カードは JavaScript の new Date() で動的に日付・曜日を表示し、土日は「🌸 本日（土日）も診療中」バッジを自動表示します。ヘッダーはスクロール前は透明、スクロール後は白背景＋ブラーに切り替わるUI設計です。
② 診療情報バー（インフォバー・週間カレンダー）
診療内容・電話番号と、週間診療カレンダーを2カラムで並べました。カレンダーは JavaScript で当日の曜日を自動検出してハイライト表示。年中無休のクリニックであることがひと目でわかるデザインです。
③ 選ばれる理由（4カラム特徴カード）
「年中無休」「最新設備」「丁寧なカウンセリング」「予防歯科」の4つの強みをカード形式で訴求。ホバー時に translateY(-8px) でカードが浮き上がり、シャドウが強調されるマイクロインタラクションを実装。IntersectionObserver によるスクロールフェードインで、ページ訪問者の注目を自然に引きつけます。
④ 診療内容（タブ切り替えUI）
「一般歯科・予防歯科・小児歯科・審美歯科・矯正歯科」の5科目をタブ切り替えUIで表示。各タブには Unsplash の高品質な写真・説明文・「詳しく見る」ボタンを配置。JavaScript の dataset 属性とクラス付与で実装し、jQuery不要の軽量構成です。
⑤ 医師紹介
院長の写真・氏名・英語表記・メッセージ・経歴・資格バッジをカード形式で表示。Cormorant Garamond のイタリック体で引用スタイルのメッセージを演出し、信頼感と親しみやすさを同時に表現しています。スマートフォンでは縦並びに自動調整されます。
⑥ 患者様の声（口コミグリッド）
6件の患者口コミをPCでは3カラムグリッドで表示。★★★★★の評価・コメント本文・「40代 男性」などの属性で社会的証明（ソーシャルプルーフ）として機能。スマートフォンでは1カラムに切り替わります。
⑦ アクセス・診療時間
Google Maps の iframe 埋め込み（デモ：東京駅）と、診療時間テーブルを2カラムで並べました。住所・電話番号・アクセス方法・駐車場情報を明示し、来院ハードルを下げる設計です。
⑧ ネット予約CTAセクション
メインカラー（セルリアンブルー）のグラデーション背景に白テキスト＋アンバーのCTAボタン。「お電話での予約」ボタンと「ネット予約はこちら」ボタンの2種類のCTAでユーザーの好みに応じた導線を用意しています。デモサイトでは予約ボタン押下時にアラートを表示。
⑨ スマートフォン表示
390px幅（iPhone 14相当）での表示。縦書きキャッチコピーは横書きに自動変換され、ナビゲーションはハンバーガーメニューに切り替わります。clamp() 関数でフォントサイズを流動的に調整し、どの画面サイズでも快適に読めるレイアウトを実現しています。
技術仕様
| 機能 | 実装方法 |
|---|---|
| スクロールフェードイン | IntersectionObserver API + CSS transition |
| ヘッダー背景変化 | scroll イベント + classList トグル |
| ハンバーガーメニュー | クラストグル + aria-expanded |
| 縦書きキャッチコピー | CSS writing-mode: vertical-rl |
| 今日の日付・曜日表示 | new Date() で動的生成 |
| 診療カレンダーハイライト | getDay() で当日曜日を判定しクラス付与 |
| タブ切り替え | dataset属性 + classList（jQuery不使用） |
| レスポンシブ | CSS Grid + clamp() + メディアクエリ（768px / 1024px） |
| スムーズスクロール | scroll-behavior: smooth + JS オフセット補正 |
| 予約フォームデモ対応 | 送信時 alert() でデモ表示 |
歯科医院サイトの法的・表示必須チェックリスト
歯科医院のホームページは、医療法・景品表示法などの規制により、広告できる内容に制限があります。実際にサイトを制作する際は以下の点を必ず確認してください。
- 医師名・医療機関名・所在地・電話番号・診療時間・休診日の明示
- 専門医・認定医の記載は取得した認定機関名を併記（根拠のない「専門家」は不可）
- 治療費の目安を掲載する場合は「個人差があります」などの注記
- ビフォーアフター写真は「効果を保証するものではありません」の注記
- 患者体験談は事実に基づき、過度な期待を抱かせる表現を避ける
- 「No.1」「最高」などの最上級表現は客観的根拠がなければ使用不可
- 個人情報保護方針（プライバシーポリシー）の掲載
- 医療広告ガイドライン（厚生労働省）への準拠確認
Pharmapia への相談・お問い合わせ
Pharmapiaでは今回のような歯科医院・クリニック・調剤薬局向けのホームページ制作を承っています。AI活用による高品質なサイト制作を、リーズナブルな価格でご提供。「まず話を聞いてみたい」という段階でも、お気軽にご相談ください。
🦷 さくらデンタルクリニック デモサイトを実際に体験できます
PC・スマートフォン両対応。全セクションを自由にご覧いただけます。
※このデモサイトは架空のクリニック「さくらデンタルクリニック」を題材としたサンプルです。実在の医療機関ではありません。電話番号・住所・医師名はすべて架空です。予約・診療の申し込みはできません。写真はUnsplash（著作権フリー素材）を使用しています。
