スマホで見やすいクリニックサイトの条件｜ファーストビュー・電話・予約ボタン・診療時間表の設計

PATIENT SCENES患者はスマホで何を確かめているか

スマートフォンでクリニックのサイトを開く患者は、多くの場合「今から行けるか」「どう連絡するか」「どこにあるか」を急いで確かめています。サイトの見やすさは、この3つの答えにどれだけ早くたどり着けるかで決まります。

患者がGoogleマップで医院を見つけてからサイトに移る流れでは、地図で見た診療時間とサイトの内容が同じであることが前提です。診療時間の登録方法はGoogleマップ診療時間の正しい登録手順、サイトに載せる情報の一覧はホームページに載せるべき情報チェックリストで確認できます。

FIRST VIEWファーストビューに置く情報

ファーストビューとは、ページを開いてスクロールせずに見える最初の画面のことです。スマートフォンでは、ここに「今日受診できるか」と「どう連絡・予約するか」の情報を置き、医院の雰囲気を伝える写真は小さめにします。

• 医院名と診療科、最寄り駅からの距離
• 今日の受付時間（曜日ごとに変わる場合は「本日」の表示、難しければ診療時間表へのリンク）
• 臨時休診・年末年始などの重要なお知らせ（1〜2行、終了後は外す）
• 電話（タップで発信）とWeb予約のボタン
• アクセス・駐車場への短いリンク

休診のお知らせを大きなポップアップで表示し、閉じないと本文が読めない形は、スマートフォンでは操作の妨げになります。Googleのページエクスペリエンスに関するドキュメントも、煩わしいインタースティシャル（ページを覆う表示）を避けているかを自己評価の観点に挙げています。お知らせは本文の上部に1行で示すのが安全です。

FIXED BUTTONS画面下に固定する電話・予約ボタン

画面の下部に電話と予約のボタンを固定すると、どのページを読んでいても、片手の親指で連絡や予約に進めます。ボタンは2〜3個に絞り、何が起きるかが分かる文言にし、本文や重要な情報を隠さない高さにします。

電話ボタンを押した数は、実際の通話数とは一致しませんが、どのページから連絡しようとしているかの手がかりになります。計測方法はGA4で電話タップを計測する方法、予約完了の計測はGA4で予約完了をキーイベントにする方法で紹介しています。ページ同士のつながりと予約への導線は内部リンク設計でも扱っています。

HOURS TABLE診療時間表の作り方

診療時間表は、画像ではなくテキストの表で作り、記号の意味と受付終了時刻を併記します。画像の表は拡大しないと読めず、検索エンジンにも読み取られにくく、変更のたびに作り直す手間から更新漏れが起きやすくなります。

次は、スマートフォンの幅でも崩れにくい診療時間表の例です（時間は仮のもの）。曜日を横に並べ、時間帯を縦に置く一般的な形でも、列が多い場合は横にスクロールできる表にするか、曜日ごとに行を分ける形にします。

• 表の上か下に、記号の意味（〇＝診療、／＝休診など）を書く
• 受付終了時刻を明記する（「受付は終了15分前まで」など）
• 昼休み、祝日、祝日のある週の扱いを文章でも補足する
• 医師によって担当日が違う場合は、担当表へのリンクを置く
• 同じ内容をGoogleビジネスプロフィールの営業時間にも登録する

表をテキストで作ると、画面の読み上げ機能を使う患者にも内容が伝わり、文字の拡大にも対応できます。画像で作った表を残したい場合も、同じ内容をテキストで併記してください。

READABILITY文字サイズ・コントラスト・ボタンの大きさ

文字は小さくしすぎず、背景との色の差（コントラスト）を十分に取り、利用者が拡大できるようにします。ボタンやリンクは指で押しやすい大きさと間隔にします。国際的なWebアクセシビリティの指針（WCAG 2.2）の数値が、院内で判断するときの目安になります。

本文の文字サイズについて決まった値はありませんが、ブラウザの標準の大きさ（多くの環境で16ピクセル）を大きく下回らない設計にすると、高齢の患者にも読みやすくなります。行間をやや広めに取り、1段落を短く区切ることも、スマートフォンでの読みやすさにつながります。

AUDIENCE高齢者・保護者・障害のある患者の視点

クリニックのサイトを見る人には、文字を拡大して読む高齢者、子どもを抱えて片手で操作する保護者、画面の読み上げ機能を使う視覚障害のある人など、さまざまな人がいます。それぞれの困りごとを想定して確認すると、誰にとっても使いやすいサイトに近づきます。

内閣府は、障害者差別解消法の改正により、2024年4月1日から事業者による障害のある人への合理的配慮の提供が義務化されたことを案内しています。ウェブサイトの具体的な基準を定めたものではありませんが、電話以外の連絡手段を用意すること、入口やバリアフリーの情報を正確に示すことは、受診前の配慮として医院ができることです。アクセスページの作り方はアクセスページの作り方、Googleマップのバリアフリー表示はバリアフリー属性の設定で扱っています。

MOBILE-FIRSTモバイルファーストインデックスとページエクスペリエンス

Googleは、スマートフォン用のクローラーで取得したページの内容をインデックス登録と評価に使います（モバイルファーストインデックス）。スマホ版で情報を省くと、その情報はGoogleにも伝わりにくくなります。表示速度などのページエクスペリエンスも、患者の使いやすさとして確認します。

ページエクスペリエンスについてGoogleは、Core Web Vitals、HTTPS、モバイルでの適切な表示、広告やインタースティシャルが主要コンテンツを妨げないことなどを自己評価の観点に挙げ、ランキングに使われる単一のシグナルはないと説明しています。表示速度の測り方と改善の考え方は表示速度とCore Web Vitalsで詳しく解説しています。サイト全体の優先順位はクリニックのSEO対策の基本で整理しています。

CHECK実機で確認する手順

見やすさは、制作会社の画面上の確認だけでなく、院のスタッフが自分のスマートフォンで実際に操作して確かめるのが確実です。機種、文字サイズの設定、通信状況を変えて、患者の場面を再現します。

COMMON MISTAKESスマホ表示でよくある失敗6つ

関連ページも同時に確認

FAQよくある質問

SUMMARYまとめ｜片手で「今日」と「連絡」にたどり着けるサイトを

今日から進めるならこの順番

スマートフォンでクリニックのサイトを開く患者は、多くの場合、体調が悪いか、急いでいるか、片手がふさがっています。開いた瞬間に「今日行けるか」と「どう連絡するか」が分かることが、何よりの見やすさです。院のスタッフ自身が患者の立場で操作し、迷う箇所から直していきましょう。