本文へスキップ

ひだまり歯科クリニック

不安を減らす順番で見せる、街の歯医者さん

既定: 静
使われている技術 14 件 ↓
012-345-0000 WEB予約

本日診療中 9:00–18:30 土曜も診療 キッズスペースあり

はじめての方も、
こわがらなくて大丈夫。

痛くなる前に気軽に寄れる、街の歯医者さん。何をするかを先に説明して、納得してから治療を始めます。

WEB予約する 治療の流れを見る

当日のご予約はお電話で受け付けています。

窓から陽が差し込む、白と木の明るい待合室

Hours

診療時間・休診日

木曜・日曜・祝日が休診です。受付は診療終了の30分前まで。

10月24日（土）は学会出席のため臨時休診です。前後の日は通常どおり診療します。

曜日別の診療時間
時間月火水木金土日祝
9:00–13:00○○○休○○休
14:30–18:30○○○休○▲休
  • ▲ 土曜の午後は 14:00–17:00 です。
  • 急な痛みの方は診療時間内にお電話ください。できる限り当日に拝見します。
  • 最終受付は午前 12:30・午後 18:00（土曜 16:30）。

2026年10月の休診日

2026年10月のカレンダー。休診日には「休」と表示
日月火水木金土
1休23
4休5678休910
11休12祝131415休1617
18休19202122休2324臨時
25休26272829休3031

休定休・祝日 臨時臨時休診（10/24 学会）

Services

診療内容

保険でできることは保険で。自費の治療は、見積もりを出してから始めます。

一般歯科

むし歯・歯周病・知覚過敏など。表面麻酔をしてから細い針で麻酔をするので、注射の痛みも小さくできます。

保険診療

予防・クリーニング

3〜4か月ごとの定期検診と、歯科衛生士による歯石取り・着色落とし。担当制なので毎回同じ人が見ます。

保険診療

小児歯科

初回は器具に触って慣れるところから。フッ素塗布・シーラント・仕上げ磨きの練習まで、親御さんと一緒に進めます。

保険診療0歳から

矯正相談

ワイヤーとマウスピース、どちらが向くかを型取りなしの初回相談で。費用と期間の目安を紙でお渡しします。

自費相談無料

ホワイトニング

院内で行うオフィスと、ご自宅で進めるホーム。しみやすい方には低濃度の薬剤を選びます。

自費16,500円〜

入れ歯・インプラント相談

噛みにくさの原因から一緒に考えます。保険の入れ歯を先に試してから、自費の選択肢を検討する順番です。

保険診療自費

Flow

治療の流れ

初診は問診と検査、説明までで約60分。痛みが強いときは応急処置を先に行います。

1. WEB予約（24時間受付）

空いている枠から都合のよい日時を選ぶだけ。初診の方は「気になっていること」を一言書いておくと、当日の説明が早くなります。当日のご予約はお電話で。

1 / 5

Staff

院長・スタッフ

院長1名・歯科医師1名・歯科衛生士3名・受付2名。全員、名札に呼び名を書いています。

院長・歯科医師

日向 恵ひなた めぐみ

大学病院の保存科で10年勤めたあと、この街で開業しました。「痛くなる前に寄れる場所」にしたくて、待合を広く、診察室の音を小さくしました。趣味は庭いじり。待合の植物は院長が世話をしています。

歯科医師

朝倉 悠あさくら ゆう

小児歯科と矯正相談を担当。子どもの「今日はここまで」を尊重して、無理に口を開けさせません。

歯科衛生士（主任）

杉本 なつすぎもと なつ

定期検診の担当制をまとめています。歯ブラシの選び方は、実物を並べて一緒に決めます。

FAQ

よくある質問

麻酔の前に表面麻酔（塗り薬）を使い、細い針でゆっくり入れます。多くの方が「思ったより平気だった」と言われます。痛みが出そうな処置は、必ず前もってお伝えします。

Access

アクセス

〒000-0000 陽野市ひだまり町2-14-6 ひだまりビル1F　電話 012-345-0000

ひだまり駅 郵便局 コンビニ 公園 ひだまり歯科 南口

ひだまり線「ひだまり駅」南口から徒歩3分。南口を出て正面の通りをまっすぐ進み、郵便局の角を左へ。黄色い看板が目印です。

  • エレベーターは南口改札の右手にあります。
  • ベビーカーのまま入れます。段差はありません。
住所
〒000-0000 陽野市ひだまり町2-14-6 ひだまりビル1F
電話
012-345-0000（診療時間内）
設備
キッズスペース・おむつ替え台・多目的トイレ・駐車場4台

本日診療中 受付 18:00 まで

電話 WEB予約

使われている技術 14

番号は「解説を重ねる」で画面に出る番号と同じ。各カードの見本はそのまま触れます。

  1. スクロール1

    縮小ヘッダーShrinking Sticky Header

    どこで 追従ヘッダー

    スクロールで薄くなり画面を占有しないが、電話とWEB予約は常に押せる位置に残す。

    図鑑で見る（仕様書・コード）→
  2. ホバー2

    下線スライドリンクAnimated Underline Link

    どこで ヒーローの副リンク

    主ボタンと競わない控えめなテキストリンクに、ホバーで下線が伸びる応答だけを付ける。

    図鑑で見る（仕様書・コード）→
  3. 静的3

    ヒーローセクションHero Section

    どこで ヒーロー

    医院名・一言・主ボタン1つを1画面に収め、写真の代わりの陽だまりの面を背景に敷く。

    図鑑で見る（仕様書・コード）→
  4. クリック4

    見出し→本文→CTA の順出しSequential Entrance

    どこで ヒーローの順出し

    見出し→本文→ボタンの順に80msずつ遅らせて出し、読む順と現れる順を揃える（動のみ）。

    図鑑で見る（仕様書・コード）→
  5. 静的5

    バッジBadge

    どこで 受付状況のバッジ

    「本日診療中」「土曜も診療」を小さな色付きラベルにして、文章を読まなくても分かるようにする。

    図鑑で見る（仕様書・コード）→
  6. クリック6

    アラート・バナーAlert / Banner

    どこで 臨時休診のお知らせ

    学会による臨時休診を情報色の帯で時間表の上に置き、×で閉じられるようにする。

    図鑑で見る（仕様書・コード）→
  7. 静的7

    カードレイアウトCard Layout

    どこで 診療内容のカード

    アイコン帯・見出し・本文・保険/自費のメタ情報を同じ型で並べ、6件を一目で比べられるようにする。

    図鑑で見る（仕様書・コード）→
  8. スクロール8

    スタッガー出現Staggered Reveal

    どこで 診療カードの出現

    6枚のカードを少しずつ遅らせて出し、並びを目で追わせる（動のみ。静では即表示）。

    図鑑で見る（仕様書・コード）→
  9. スクロール9

    フェードイン出現Scroll Reveal (Fade In Up)

    どこで 各セクションの出現

    見出しブロックがふわっと上がって現れる基本形。静では即時、reduced-motion でも止める。

    図鑑で見る（仕様書・コード）→
  10. クリック10

    ステッパーProgress Stepper

    どこで 治療の流れ

    予約から定期検診までの5段階を、次へ/戻るで進める手順表示にして全体像を先に見せる。

    図鑑で見る（仕様書・コード）→
  11. クリック11

    アクセシブルなアコーディオンARIA Accordion

    どこで よくある質問

    h3 内の button に aria-expanded を持たせ、↑↓ でも移動できる APG 準拠の開閉にする。

    図鑑で見る（仕様書・コード）→
  12. クリック12

    下線スライドタブAnimated Tabs

    どこで アクセスの来かた切替

    電車・車・バスの3通りを下線が滑るタブで切り替え、地図は共通のまま説明だけ変える。

    図鑑で見る（仕様書・コード）→
  13. 静的13

    サイトマップ型フッターSitemap Footer

    どこで フッター

    診療時間の再掲・リンク群・法務リンクを列に整理し、狭い幅では2列に畳む。

    図鑑で見る（仕様書・コード）→
  14. スクロール14

    スクロールで現れる固定CTAScroll-Revealed Sticky CTA

    どこで 予約バー

    ヒーローの主ボタンが画面外に消えたときだけ下から現れ、戻ると引っ込む。常に出しっぱなしにしない。

    図鑑で見る（仕様書・コード）→

画面の構成

  1. 01ヘッダー医院名・電話・WEB予約を常に手の届く位置に置く追従ヘッダー
  2. 02ヒーロー一言と主ボタン1つ。今日の受付状況を添えて「行けるか」を先に答える
  3. 03診療時間と休診日曜日別の時間表と今月の休診カレンダー。休診を隠さず最初に見せる
  4. 04診療内容6つの診療をカードで並べ、保険か自費かを先に伝える
  5. 05治療の流れ予約から定期検診までの5段階を手順として見せ、初めての不安を減らす
  6. 06院長・スタッフ誰が診るかを顔（抽象の似顔）と言葉で伝える
  7. 07よくある質問痛み・持ち物・子ども・予約なし来院など、来院前に聞きたいことに答える
  8. 08アクセス略図と、電車・車・バスごとの来かたを切り替えて示す
  9. 09フッター診療時間表とWEB予約を再掲し、最後まで読んだ人をそのまま予約へ
  10. 10常時表示の予約バーヒーローの主ボタンが画面から消えたら下から現れる予約・電話の帯

コンセプト

動きの度合い
静（出現も即時）
空気感
やさしい・明るい・誠実
色
#1d5c63#fffdf8#f6d365#e9dcc7
文字
見出しは太めのゴシック 26〜40px で大げさにしない。本文は 15〜16px・行間 1.8、数字は等幅で揃える
主役と脇役
主役は「いつ開いていて、どう予約するか」。診療時間・休診カレンダー・WEB予約を最初に置き、写真の代わりの陽だまりの面は背景に退かせた。動きは既定で静、動でも出現と追従だけに絞っている。

参考にした実在のサイト

見た目を真似た先ではなく、型の使われ方を観察した先。コード・写真・文章は転載していません。

読みもの

「今日行けるか」を最初に解く順番

歯医者のサイトを開く人の多くは、すでに痛いか不安を抱えている。だからヒーローの直下に診療時間表と今月の休診カレンダーを置き、院長の言葉や設備の自慢はその後ろに回した。臨時休診は目立たない注記にせず、時間表の上に情報色の帯として出す。休診日を隠さないことが、この業種では誠実さの表現になる。診療内容→治療の流れ→スタッフ→FAQ→アクセスという順番も、「何をしてもらえるか」「どう進むか」「誰がやるか」「細かい心配」「どう行くか」と、来院を決めるまでに頭に浮かぶ順に合わせている。

既定を「静」にした理由と、動で足したもの

参考にした医院サイトは動く型が多かったが、このサンプルの既定は静にした。診療時間や休診日を探している人にとって、出現待ちの数百ミリ秒はそのまま苛立ちになるからだ。動モードで足したのは、ヒーローの順出し（見出し→本文→ボタン）、セクション見出しのフェードイン、診療カードのスタッガー出現、追従ヘッダーの縮小、予約バーのスライドの5つだけで、ループする装飾は入れていない。いずれも CSS を [data-motion="lively"] の下に閉じ、静に切り替えた瞬間にすべての内容が見えている状態へ戻る。reduced-motion でも同じ扱いにしている。

予約導線を3箇所と、常時バー1本にした判断

WEB予約はヘッダー・ヒーロー・フッターの3箇所に置き、さらにヒーローの主ボタンが画面外に出たときだけ下から現れる予約バーを足した。最初から出しっぱなしにしなかったのは、ヒーローに主ボタンがある間は同じボタンが2つ見える状態になり、どちらを押すか迷わせるからだ。電話は予約バーとヘッダーに残した。高齢の方や急な痛みの人はWEBより電話を選ぶことが多く、番号を探させないほうがよい。バーは sticky で組み、フッターまで下りると自然に流れの中へ収まって本文を隠さない。

写真の出典

見本の写真は商用利用できるライセンス（CC0・パブリックドメイン・CC BY）の作品です。リサイズと WebP への変換を施しています。 店名・価格・文章は架空で、写真の作者とは関係ありません。