みずなぎ歯科クリニック
今日の診療時間がすぐ分かるFVと、医療広告ガイドラインに沿った言葉選び
自主制作サイトを開くdemo-dental.tsukuruneko-portfolio.workers.dev
01Overview
制作概要
北九州市小倉北区の架空の歯科医院を想定した、4ページのサイト（＋404）です。スマホの最初の画面に、今日の診療時間・いま受付中か・駅からの徒歩分数・Web予約・電話を集めました。医院名・院長名・数値・連絡先はすべて架空で、全ページの上部に明記しています。
- 制作区分
- 自主制作デモ（架空の医院。実在しません）
- 業種
- 歯科医院
- サイト種別
- クリニックサイト（4ページ）
- 公開
- 2026年10月（検索エンジンに載せない営業用デモとして公開）
02Problem
課題
「今日はやっているか」「何時まで受付か」を、探さずに分かるようにする
- 制作目的
- Web予約・電話へ迷わず進ませる。今日は診療しているか、何時まで受付か、どう行けばよいかを、最初の画面で分かるようにする。歯科医院への営業用サンプルとして制作した。
- 読み手
- 北九州市小倉北区の近隣に住む人、子ども連れの保護者、歯医者が苦手な人（サイトの想定読者）。
03Decision
設計判断
説明してから始めること、痛みへの配慮、子ども連れでも通えることを、誇大・断定の言葉を使わずに伝える。白と淡い水色の「凪いだ水面」をトーンにした。
医療広告ガイドラインに沿って、言葉と載せるものを決めた
「最新」「痛くない」「絶対」のような誇大・断定の表現は使っていません。痛みについては、表面麻酔やゆっくりかける麻酔、手を挙げたら処置の手を止めるといった具体的な工夫と、「感じ方には個人差がある」ことで伝えています。患者の声・ビフォーアフター・料金・他院との比較は載せず、診療科目は標榜できる名称（歯科・小児歯科・歯科口腔外科）だけにしました。
架空の医院であることを、全ページで明示した
全ページの上部に「営業用サンプルサイトです」の帯、写真の角に「SAMPLE」を置きました。電話番号は表示だけで発信できず、Web予約のボタンも説明を出すだけです。検索エンジンにも載せない設定にしています。
04Implementation
実装
ファーストビューに「今日の診療時間」を置き、いま受付中かを自動で判定した
日本時間の曜日と時刻から、診療中か、次の診療はいつからか、本日の受付が終わったかを判定して表示します。祝日（2026〜2027年、振替休日を含む）と年末年始の休診も判定し、60秒ごとに表示を更新します。判定は時刻を固定した自動検査で確かめています。
一滴が水面に落ちると、診療時間の帯が満ちていく
一滴が水面に落ちて院名が浮かび、その瞬間に合わせて今日の診療時間の帯が左から満ち、「いま」の点から波紋が広がります。初診の流れは5つの線画が順に描かれます。すべてSVGとCSSだけで作り、写真と診療時間は動きを待たずに最初から表示しています。
05Verification
検証
別の目のレビューで、ページ間の言葉の矛盾まで直した
祝日にも「診療時間内です」と出る、診療の終了後に次の案内が出ない、「必ず説明してから始める」と「急な痛みは処置を優先」が同じページで食い違う、子ども連れの扱いがページごとに違う、といった10件の指摘を受け、判定と文言を直しました。
06Result
成果
自主制作のため事業成果はありません。数値は、公開中のデモのトップページを Lighthouse（モバイル）で測ったものです（2026-10-21）。
モバイル実測（Lighthouse・同一条件）
- Performance
- 100
- LCP
- 1.7秒
- CLS
- 0
07Screens
Desktop / Mobile
枠の中を縦にスクロールすると、ページ全体を確認できます
08Scope
担当範囲・使用技術
担当範囲
- 要件定義
- 構成設計
- コピーライティング
- 医療広告ガイドラインの確認
- アートディレクション
- モーション設計
- AI画像生成
- 実装
- レスポンシブ対応
- 構造化データ
- 独立レビューと修正
- 公開
使用技術
- Astro（静的）
- SVG＋CSSアニメーション（ライブラリ不使用）
- 祝日を含む診療時間の判定（JavaScript）
- 見出しフォントのサブセット化（Zen Maru Gothic）
- AI画像生成 + WebP最適化
- Cloudflare Workers