2026年3月3日 / 最終更新日時 : 2026年3月3日 NAOKI OZAWA スマホ・モバイル最適化

歯科医院HPのスマホ表示チェックリスト！公開前に確認すべき20項目

目次
1. なぜスマホ表示チェックが必須なのか
2. チェックに使うべきツールと実機
3. 表示速度・パフォーマンスのチェック（5項目）
4. レイアウト・デザインのチェック（5項目）
5. 操作性・ユーザビリティのチェック（5項目）
6. コンテンツ・情報設計のチェック（5項目）
7. チェックリスト一覧表（印刷用）
8. まとめ

1.なぜスマホ表示チェックが必須なのか

「PCでは完璧だったのに、スマホで見たらボタンが押せない、文字が読めない…」

2026年現在、ホームページのアクセスの87%がスマホです。スマホでの表示チェックを怠ると、患者さんの9割に不便を強いることになります。

スマホ表示の不具合で失う予約

【よくある問題と影響】

問題: 予約ボタンが小さくてタップできない

→ 予約率が70%低下

問題: 電話番号がタップで発信できない

→ 電話予約が50%減少

問題: 表示速度が8秒かかる

→ 離脱率が90%に上昇

問題: 文字が小さくて読めない

→ 高齢者の離脱率が95%

公開後の修正はコストが高い

【公開前チェック】

制作会社: 無料で修正

時間: 1〜2日

【公開後の修正依頼】

制作会社: 追加費用5〜10万円

時間: 1〜2週間

→ 公開前のチェックが絶対に必要

Googleの評価にも影響

2026年現在、Googleの検索順位は「モバイルフレンドリー」が最重要要素の1つです。

スマホで見づらいサイト

→ Googleの評価が下がる

→ 検索順位が下がる

→ アクセスが減る

2.チェックに使うべきツールと実機

チェックには、ツールと実機の両方が必要です。

必須ツール1: Google Mobile-Friendly Test　　　……2023.12で提供終了しているようです

【使い方】

Googleで「Mobile-Friendly Test」と検索
公式サイトにアクセス
自院のHPのURLを入力
「テストを実行」をクリック

【判定結果】

✓ モバイルフレンドリーです

または

✗ モバイルフレンドリーではありません

問題がある場合、具体的な指摘が表示されます。

必須ツール2: PageSpeed Insights

【チェック項目】

・表示速度

・パフォーマンススコア

・改善提案

【目標値】

スマホスコア: 70点以上

表示速度: 2秒以内

必須ツール3: Chrome デベロッパーツール

【使い方】

Chrome（PC）でHPを開く
F12キーを押す
画面左上のスマホアイコンをクリック
各種デバイスでの表示を確認

【確認できるデバイス】

・iPhone SE（小画面）

・iPhone 12/13/14（標準）

・iPhone 14 Pro Max（大画面）

・Galaxy S21

・iPad

必須: 実機での確認

ツールだけでは不十分です。実際のスマホで必ず確認しましょう。

【確認すべき実機】

最低限:

・iPhone 1台（できれば2機種）

・Android 1台

理想:

・iPhone SE（小画面）

・iPhone 14/15（標準）

・Android（標準サイズ）

・iPad（タブレット）

確認環境:

・Wi-Fi接続

・4G/5G接続（両方）

チェックのタイミング

【チェックを実施するタイミング】

デザイン確定時（仮公開）
コンテンツ入稿後
公開直前（最終確認）
公開後1週間以内（実運用確認）

3.表示速度・パフォーマンスのチェック（5項目）

チェック項目1: ページ表示速度

【確認方法】

実機（4G接続）でストップウォッチ計測

【合格基準】

トップページ: 2秒以内

下層ページ: 3秒以内

【不合格の場合】

・画像を圧縮

・不要なスクリプトを削除

・サーバーを見直し

チェック項目2: 画像の読み込み速度

【確認方法】

画像が表示されるまでの時間を計測

【合格基準】

ファーストビューの画像: 1秒以内

スクロール後の画像: 2秒以内

【不合格の場合】

・画像をWebP形式に変換

・Lazy Load（遅延読み込み）を実装

・画像サイズを見直し（1枚200KB以下）

チェック項目3: スクロールのスムーズさ

【確認方法】

実機で上下にスクロールして確認

【合格基準】

カクつかない、滑らかにスクロールできる

【不合格の場合】

・アニメーション効果を削減

・JavaScriptの処理を最適化

・固定要素を減らす

チェック項目4: タップの反応速度

【確認方法】

ボタンをタップして反応時間を確認

【合格基準】

タップ後0.3秒以内に反応

【不合格の場合】

・JavaScriptの処理を最適化

・不要なスクリプトを削除

チェック項目5: ページサイズ

【確認方法】

Chrome デベロッパーツールのNetworkタブで確認

【合格基準】

トップページ: 3MB以下

下層ページ: 2MB以下

【不合格の場合】

・画像を圧縮

・動画を削除または軽量化

・不要なファイルを削除

4.レイアウト・デザインのチェック（5項目）

チェック項目6: 横スクロールが発生しないか

【確認方法】

各ページを開いて横にスクロールできるか確認

【合格基準】

すべてのページで横スクロールなし

【不合格の場合】

よくある原因:

・画像が画面幅より大きい

・テーブル（表）が横に長い

・固定幅のコンテンツ

修正:

・画像をmax-width: 100%に設定

・テーブルをレスポンシブ対応

・固定幅を削除

チェック項目7: 文字が読める大きさか

【確認方法】

実機で本文・見出し・ボタンの文字を確認

【合格基準】

本文: 16px以上

見出し: 20px以上

ボタン: 18px以上

【不合格の場合】

CSSで文字サイズを調整

チェック項目8: ボタンがタップしやすいサイズか

【確認方法】

予約ボタン・電話ボタンをタップして確認

【合格基準】

ボタンの高さ: 60px以上

ボタンの横幅: 画面の80%以上

ボタン間の余白: 16px以上

【不合格の場合】

・ボタンを大きく

・余白を広げる

・隣接するボタンとの間隔を空ける

チェック項目9: 画像が鮮明に表示されるか

【確認方法】

実機で写真の画質を確認

【合格基準】

ぼやけていない、鮮明に見える

【不合格の場合】

・画像の解像度を上げる（ただし容量に注意）

・Retina対応（2倍サイズの画像を用意）

チェック項目10: 色のコントラストは十分か

【確認方法】

実機（屋外の明るい場所）で文字が読めるか確認

【合格基準】

文字と背景のコントラスト比: 4.5:1以上

【確認ツール】

WebAIM Contrast Checker（無料）

【不合格の場合】

・文字色を濃くする（#333333など）

・背景色を調整

5.操作性・ユーザビリティのチェック（5項目）

チェック項目11: 電話番号がタップで発信できるか

【確認方法】

電話番号をタップして電話アプリが起動するか確認

【合格基準】

タップで即座に電話アプリが起動

【不合格の場合】

電話番号に<a href=”tel:0312345678″>のリンクを設定

修正例:

チェック項目12: 予約ボタンが常に表示されるか

【確認方法】

ページをスクロールして予約ボタンが見えるか確認

【合格基準】

画面上部または下部に固定され、常に表示される

【不合格の場合】

追従型のボタンを実装

position: fixed;で固定

チェック項目13: フォーム入力がしやすいか

【確認方法】

予約フォームに実際に入力してみる

【合格基準】

・入力欄が大きい（高さ50px以上）

・キーボードが適切に表示される

・入力項目が少ない（4つ以内）

【不合格の場合】

・入力欄を大きく

・入力項目を削減

・input type を適切に設定

（type=”tel” で数字キーボード表示など）

チェック項目14: メニューが使いやすいか

【確認方法】

ハンバーガーメニューをタップして確認

【合格基準】

・タップで開く

・メニュー項目が読みやすい

・閉じるボタンがわかりやすい

【不合格の場合】

・開閉ボタンを大きく

・メニュー項目の文字を大きく

・背景を半透明にして視認性向上

チェック項目15: リンクが誤タップされないか

【確認方法】

リンクが密集している箇所をタップ

【合格基準】

意図したリンクだけがタップされる

隣のリンクを誤タップしない

【不合格の場合】

・リンク間の余白を16px以上に

・タップ領域を広げる（padding追加）

6.コンテンツ・情報設計のチェック（5項目）

チェック項目16: ファーストビューに必要情報があるか

【確認方法】

トップページを開いて、スクロールせずに確認

【合格基準】

以下が表示されている:

・医院名

・場所（駅から徒歩〇分）

・専門性・強み

・予約ボタン

【不合格の場合】

ファーストビューの情報を見直し

チェック項目17: 情報が詰め込みすぎていないか

【確認方法】

各ページの文章量を確認

【合格基準】

スクロール回数: 5画面以内

1画面あたりの文字数: 200文字以内

【不合格の場合】

・文章を削減

・アコーディオン（折りたたみ）を使う

・詳細はPC版へ誘導

チェック項目18: 写真が効果的に配置されているか

【確認方法】

各ページの写真を確認

【合格基準】

・院内・院長の写真がある

・笑顔の写真がある

・写真点数: 各ページ3〜5枚程度

【不合格の場合】

・写真を追加（多すぎる場合は削減）

・暗い写真は削除

・人物写真を増やす

チェック項目19: 診療時間・アクセスが見やすいか

【確認方法】

診療時間とアクセス情報の視認性を確認

【合格基準】

・文字サイズ: 16px以上

・表組みが見やすい

・地図が表示される

【不合格の場合】

・文字を大きく

・表をシンプルに

・Googleマップを埋め込む

チェック項目20: 口コミ・評価が表示されているか

【確認方法】

Googleマップの口コミ評価が表示されているか確認

【合格基準】

トップページに以下を表示:

・星評価（★★★★★ 4.8）

・口コミ件数（150件）

・代表的な口コミ（1〜2件）

【不合格の場合】

・口コミウィジェットを追加

・評価を目立つ位置に配置

7.チェックリスト一覧表（印刷用）

表示速度・パフォーマンス

No	チェック項目	合格基準	チェック欄
1	ページ表示速度	2秒以内	□
2	画像の読み込み速度	1秒以内	□
3	スクロールのスムーズさ	カクつかない	□
4	タップの反応速度	0.3秒以内	□
5	ページサイズ	3MB以下	□

レイアウト・デザイン

No	チェック項目	合格基準	チェック欄
6	横スクロールなし	スクロールしない	□
7	文字サイズ	16px以上	□
8	ボタンサイズ	60px以上	□
9	画像の鮮明さ	ぼやけていない	□
10	色のコントラスト	4.5:1以上	□

操作性・ユーザビリティ

No	チェック項目	合格基準	チェック欄
11	電話番号タップ	即発信	□
12	予約ボタン常時表示	固定表示	□
13	フォーム入力	しやすい	□
14	メニュー操作	使いやすい	□
15	リンク誤タップ防止	余白十分	□

コンテンツ・情報設計

No	チェック項目	合格基準	チェック欄
16	ファーストビュー情報	必須情報あり	□
17	情報量	詰め込みすぎない	□
18	写真配置	効果的	□
19	診療時間・アクセス	見やすい	□
20	口コミ表示	表示されている	□