1.まずは「誰が・何を最優先で探すか」を決める
パソコン苦手な院長メニューを増やすほど親切と思って、項目がどんどん増えてしまいます…。



最優先の検索目的を3つに絞りましょう。
多くの医院では①「診療メニュー」②「アクセス・診療時間」③「予約・問い合わせ」が最頻需要。
まずはこの3導線を最短1クリックで到達できる構造にします。
- 予約:WEB予約 / 電話
- 来院準備:アクセス・診療時間・駐車場・持ち物
- 診療情報:診療科目・費用目安・よくある質問
2.メインナビは「5〜7項目」+動詞系ラベルで
メインメニューは5〜7項目が目安。増やしすぎは認知負荷を高め、迷いを生みます。ラベルは「診療案内」「医院について」「アクセス」「予約」など、患者様が口にする言葉で統一します。
| Good(推奨) | Not Good(避けたい) |
|---|---|
| 診療案内 / 医院紹介 / 医師紹介 / アクセス / 予約 | Services / About / Staff / Location / Contact(英語混在) |
| 費用・お支払い / よくある質問 | その他 / 各種情報(抽象的で曖昧) |
動詞・目的語の組み合わせ(例:予約する / 確認する / 調べる)は意思決定を後押しします。スマホでは「予約ボタン」をナビ外に独立CTAとして固定表示するのがおすすめ。
3.ドロップダウン(メガメニュー)は「2階層まで」
診療項目が多い場合も、2階層までに抑えます。第1階層で「一般歯科 / 矯正 / 口腔外科 / 小児 / 予防」など、患者様が迷わないグループ分けに。第2階層で個別治療へ。
- 目的別(痛みを治す / 見た目を整える / 予防する)
- 年齢別(お子様 / 大人 / ご高齢)
- 状態別(初診 / 再診 / 応急)
4.スマホ優先:親指で届く「予約」ボタン設計



PCのメニューは整ってきましたが、スマホで迷われていないか不安です。



モバイルの親指ゾーン(画面下部)に予約ボタンを固定しましょう。
「電話」「WEB予約」「LINE」の3分岐が多い場合は、最優先の1つをボタン、他はメニュー内に退避が◎。
ハンバーガーメニュー内は、検索・予約・アクセスをトップに。折り畳み(アコーディオン)で第2階層を配置すると、一覧性と到達速度の両立ができます。
5.パンくずとフッターで「迷子ゼロ」を実現
パンくずは階層の現在地を示す道標。トップ>診療案内>矯正歯科 のように、各階層をリンク化して回遊性を高めます。フッターには「予約・アクセス・診療時間」を再掲し、離脱直前の再案内を徹底します。
6.ラベルと言い回しを「患者様の語彙」に合わせる
院内で使う専門語ではなく、患者様が検索や会話で使う言葉に寄せます。例:「補綴」→「被せ物・詰め物」「審美」→「見た目を整える治療」。
ラベル統一はトーン&ボイスの一貫性にも直結します。
| 専門語 | 患者様語彙 |
|---|---|
| 補綴 | 被せ物・詰め物 |
| 口腔外科 | 外科的な治療 |
| 咬合 | 噛み合わせ |
| 矯正装置 | 矯正の装置(マウスピース等) |
7.院内運用まで含めた「ヘッダー+院内掲示」の一致
サイトのナビゲーションと院内の案内(掲示/配布物/LINEメニュー)を同じ語と順番で揃えると、初診から再来院まで迷いが減ります。院内QRとサイトメニューのラベル一致は、問い合わせ率を安定させるカギです。
8.「予約前の不安」を解消するサブナビ設計
治療内容ページの上部やサイドに、患者様の不安を解くリンク群(例:費用 / 治療期間 / 痛み / 保障 / よくある質問)をまとめます。
これにより離脱→比較サイトへの連鎖を防ぎ、院内情報で意思決定を完結させられます。
9.アクセシビリティ:タップ領域・コントラスト・フォーカス
リンクやメニューボタンは44×44px以上のタップ領域、文字と背景の十分なコントラスト、キーボード操作時のフォーカス可視化を担保しましょう。これだけで体感の「使いやすさ」が大きく改善します。
10.チェックリスト:公開前の最終確認(保存版)
- ・メインナビは5〜7項目に収まっている
- ・「予約 / アクセス / 診療案内」が1クリックで到達
- ・スマホ下部に予約CTAを固定(親指ゾーン)
- ・ドロップダウンは2階層まで
- ・メニューラベルは患者様語彙で統一
- ・パンくずが各階層リンク化されている
- ・フッターに予約/アクセス/診療時間を再掲
- ・タップ領域44×44px以上
- ・文字/背景のコントラスト比を確保
- ・キーボードフォーカスが見える
- ・院内掲示/LINEメニューと同じ語・順番
- ・各ページのサブナビに不安解消リンクを配置
- ・404/検索結果ページにも主要導線を配置
- ・英語ラベルや専門語の混在なし
- ・メニューのホバー/アクティブが視覚化
- ・ヘッダーの高さが過大でない(ファーストビュー確保)
- ・スクロール時の縮小ヘッダーで視界を広げる
- ・「予約する」ボタンは色・形で一貫
- ・重要導線のABテスト(位置/文言/色)を実施
- ・公開後、GSCのサイトリンクと内部リンクの整合を確認
ぱそあんのまとめ
- まずは最優先の3導線を1クリックで
- メインは5〜7項目、モバイルは親指ゾーン
- 患者様語彙のラベル統一で迷子ゼロへ
- パンくず・フッターで再案内を徹底
- 公開前は20項目チェックで仕上げ









