モバイルファースト時代の歯科医院HP！PCサイトとの情報量調整術
目次
1. 2026年現在、スマホ比率は85%超の時代
2. スマホとPCで「情報量」を変えるべき理由
3. スマホ版で削減すべき3つの情報タイプ
4. PC版でこそ充実させるべきコンテンツ
5. レスポンシブデザインの落とし穴
6. 情報量を最適化する具体的テクニック
7. 表示・非表示の切り替え実装方法
8. まとめ
1.2026年現在、スマホ比率は85%超の時代
「ホームページはPCで見ることを前提に作っていたけど、最近はスマホからのアクセスばかり…」
2026年現在、この認識を改める必要があります。
歯科医院HPのデバイス比率（2026年）
【アクセス元デバイス】
スマホ: 87%
PC: 11%
タブレット: 2%
→ ほぼすべてがスマホ
5年前との比較
【2021年】
スマホ: 65%
PC: 30%
タブレット: 5%
【2026年】
スマホ: 87%（+22%）
PC: 11%（-19%）
タブレット: 2%（-3%）
→ PCユーザーは激減
これが意味すること
従来の考え方:
「PCサイトをメインに作って、スマホ版はおまけ」
2026年の正解:
「スマホサイトがメイン、PC版はサブ」
設計思想が真逆になった
モバイルファーストとは
【モバイルファースト設計】
- スマホ版を先に設計
- スマホで最適な情報量・レイアウト
- その後、PC版に拡張
従来の方法:
- PC版を先に設計
- スマホに縮小
- 情報が多すぎて見づらい
→ 発想の転換が必要
2.スマホとPCで「情報量」を変えるべき理由
同じ情報量をスマホとPCで表示すると、スマホでの体験が悪化します。
スマホの制約
制約1: 画面が小さい
PC: 1920px × 1080px
スマホ: 390px × 844px
→ 面積は約10分の1
同じ情報量を表示すると
スマホは情報過多になる
制約2: スクロールが長くなる
PC版で画面1つ分の情報
→ スマホでは5画面分
例:
PC版: スクロール不要
スマホ版: 5回スクロール必要
→ ユーザーが疲れる
制約3: 通信速度・データ量
PCは光回線が多い（高速）
スマホは4G/5G（環境による）
同じページでも:
PC: 2秒で表示
スマホ: 8秒で表示
→ 情報量を減らして軽量化
実際の問題例
❌ NG例（PC版と同じ情報量）
【スマホで見た診療内容ページ】
━━━━━━━━━━━━━━━
一般歯科
（説明文500文字）
（写真5枚）
小児歯科
（説明文500文字）
（写真5枚）
矯正歯科
（説明文500文字）
（写真5枚）
…以下10項目続く
━━━━━━━━━━━━━━━
問題:
・スクロールが20画面分
・読むのに10分以上
・ユーザーが途中で離脱
3.スマホ版で削減すべき3つの情報タイプ
スマホ版では、思い切って情報を削減します。
削減タイプ1: 装飾的なテキスト
❌ PC版（冗長）
「当院は患者様お一人お一人のお口の健康を第一に考え、丁寧な診療を心がけております。開業以来30年、地域の皆様に愛される歯科医院として…」
（300文字続く）
⭕ スマホ版（簡潔）
「〇〇市で開業30年。地域に愛される歯科医院」
（30文字のみ）
→ 10分の1に圧縮
削減タイプ2: 大量の写真
❌ PC版
治療風景の写真ギャラリー
・院内写真 20枚
・設備写真 15枚
・スタッフ写真 10枚
⭕ スマホ版
代表的な写真のみ
・院内写真 3枚
・設備写真 2枚
・スタッフ写真 1枚
→ 6分の1に削減
削減タイプ3: 詳細すぎる説明
❌ PC版（詳細すぎ）
【インプラント治療について】
- インプラントとは
（500文字の説明）
- 治療の流れ
（10ステップ、各100文字）
- メリット・デメリット
（各300文字）
- 費用について
（詳細な料金表）
- よくある質問
（20問）
⭕ スマホ版（要点のみ）
【インプラント治療】
・失った歯を取り戻す治療
・治療期間: 3〜6ヶ月
・費用: 1本30〜50万円
詳しくはお電話で
[今すぐ電話相談]
→ 詳細はPC版へ誘導
削減の基準
【スマホ版で残す情報】
✓ 今すぐ予約したい人に必要な情報
✓ 3秒で理解できる情報
✓ 行動を促す情報
【スマホ版で削る情報】
✗ じっくり読む長文
✗ 詳細すぎる料金表
✗ 複雑な図表
✗ 大量の写真
→ これらはPC版で見せる
4.PC版でこそ充実させるべきコンテンツ
PC版は「じっくり比較検討したい人」向けです。
PC版で充実させるコンテンツ
コンテンツ1: 詳細な治療説明
【PC版の強み】
画面が広い
→ 図解・写真を並べて表示
→ ビフォーアフター比較
→ 治療の流れを詳しく
例:
インプラント治療ページ
・3,000文字の詳細説明
・写真20枚
・動画埋め込み
・料金シミュレーター
コンテンツ2: 料金表
【PC版の料金表】
横に広い表組みが可能
| 治療内容 | 期間 | 費用 | 保険 |
|———|——|——|——|
| インプラント | 3ヶ月 | 40万 | × |
| セラミック | 2週間 | 8万 | × |
…
【スマホ版】
表組みは見づらい
→ シンプルなリスト形式
・インプラント: 40万円〜
・セラミック: 8万円〜
詳細な料金表はPC版で
コンテンツ3: 症例集
【PC版】
ビフォーアフター写真を
横並びで比較
[Before] [After]
（写真）（写真）
【スマホ版】
写真は代表的な1〜2例のみ
Before
（写真）
After
（写真）
詳細な症例はPC版へ
PC版とスマホ版の役割分担
【スマホ版の役割】
・今すぐ予約させる
・電話をかけさせる
・場所を確認させる
・基本情報を伝える
→ 行動重視
【PC版の役割】
・じっくり比較検討させる
・詳細な情報を提供
・信頼性を高める
・専門性を示す
→ 情報重視
5.レスポンシブデザインの落とし穴
レスポンシブデザインは便利ですが、落とし穴もあります。
レスポンシブデザインとは
【レスポンシブデザイン】
1つのHTMLで
画面サイズに応じて
自動的にレイアウトが変わる
メリット:
・管理が楽（1つのファイル）
・URLが統一される
デメリット:
・スマホでも全情報を読み込む
・表示速度が遅くなる
よくある失敗パターン
失敗1: PC版の情報をそのまま縮小
❌ NG例
PC版: 3カラムレイアウト
[左サイド][メイン][右サイド]
スマホ版: 縦1列に変換
[左サイド] [メイン] [右サイド]
→ スクロールが異常に長い
→ 見づらい
失敗2: 画像が重い
❌ NG例
PC用の高解像度画像を
スマホでも読み込む
画像サイズ: 5MB
→ スマホで表示に10秒
正解:
スマホ用に軽量化した画像を用意
画像サイズ: 200KB
→ 1秒で表示
失敗3: 非表示でも読み込む
❌ NG例
スマホでは「非表示」にした要素も
HTMLには存在する
→ データは読み込まれる
→ 表示速度が遅い
正解:
スマホでは最初から削除
または遅延読み込み
6.情報量を最適化する具体的テクニック
スマホとPCで情報量を変える実践的な方法です。
テクニック1: アコーディオン（折りたたみ）
【スマホ版でアコーディオン使用】
一般歯科 [+] ← タップで開く
小児歯科 [+]
矯正歯科 [+]
→ 最初は見出しだけ表示
→ 興味があるものだけ開く
→ スクロール量が減る
【PC版】
一般歯科
（説明文が全て展開済み）
小児歯科
（説明文が全て展開済み）
→ 一覧性が高い
テクニック2: 要約文と詳細文の切り替え
【スマホ版】
インプラント治療
失った歯を取り戻す治療です。
期間3〜6ヶ月、費用30〜50万円。
[詳しく見る]ボタン
→ タップでPC版ページへ
【PC版】
インプラント治療
（3,000文字の詳細説明）
（写真20枚）
（動画）
テクニック3: 画像の出し分け
【実装例】
<picture>
<source
media=”(max-width: 767px)”
srcset=”image-mobile.jpg”>
<source
media=”(min-width: 768px)”
srcset=”image-pc.jpg”>
<imgsrc=”image-pc.jpg” alt=””>
</picture>
効果:
スマホ: 軽量画像（200KB）
PC: 高解像度画像（2MB）
テクニック4: コンテンツの動的読み込み
【遅延読み込み（Lazy Load）】
スマホ版:
スクロールして画面に入った時点で
初めて画像を読み込む
効果:
・最初の表示が速い
・通信量を削減
・離脱率が下がる
7.表示・非表示の切り替え実装方法
制作会社に依頼する際の具体的な実装方法です。
CSS で制御する方法
/* スマホで非表示 */
@media (max-width: 767px) {
.pc-only {
display: none;
}
}
/* PCで非表示 */
@media (min-width: 768px) {
.sp-only {
display: none;
}
}
<!– 使用例 –>
<div class=”pc-only”>
PC版だけに表示される詳細説明
</div>
<div class=”sp-only”>
スマホ版だけに表示される簡潔な説明
</div>
実装時の注意点
【重要】
単に「display: none」で非表示にしても
HTMLは読み込まれる
→ ページが重くなる
解決策:
サーバー側で出し分け
または
JavaScriptで動的に生成
制作会社への依頼例
件名: スマホ・PC版の情報量調整依頼
お世話になっております。
〇〇歯科クリニックの△△です。
現在のHPはPC版と同じ情報量が
スマホでも表示されており、
スクロールが長く、離脱率が高いです。
以下の改善をお願いできますか。
【スマホ版】
・診療内容の説明文を100文字以内に短縮
・写真は各項目3枚まで
・詳細はアコーディオンで折りたたみ
・「詳しく見る」ボタンでPC版へ誘導
【PC版】
・現状の詳細情報を維持
・料金表を見やすく
・症例写真を充実
【技術要件】
・レスポンシブデザイン
・画像の出し分け（軽量化）
・スマホ版の表示速度2秒以内
お見積りをお願いします。
8.まとめ
2026年現在、スマホ比率87%の時代。PC版と同じ情報量をスマホに詰め込むのは時代遅れです。
今日から実践する7つのチェックリスト
情報量の調整
- ☐ スマホ版の文章を3分の1に削減
- ☐ スマホ版の写真を5枚以内に厳選
- ☐ 詳細情報はアコーディオンで折りたたみ
デバイス別最適化 4. ☐ スマホ用に軽量化した画像を用意 5. ☐ PC版で詳細情報を充実 6. ☐ スマホ→PC版への誘導ボタン設置
表示速度 7. ☐ スマホ版の表示速度を2秒以内に
デバイス別の設計思想
【スマホ版】
・情報は最小限
・行動を促す
・表示速度を最優先
・縦スクロール5画面以内
【PC版】
・情報を充実
・比較検討を促す
・専門性を示す
・横並びレイアウト活用
改善後の目標値
【現状】
スマホでの離脱率: 70%
スマホでの滞在時間: 15秒
スマホでの予約率: 1.2%
【3ヶ月後の目標】
スマホでの離脱率: 40%（-30%）
スマホでの滞在時間: 1分30秒（6倍）
スマホでの予約率: 3.5%（2.9倍）
最後に
「スマホはPC版の簡易版」という考え方は、もう古いです。2026年現在、スマホこそがメイン。スマホに最適化し、PCはサブという発想の転換が必要です。
情報量を調整するだけで、離脱率が半減し、予約率が3倍になります。
「自分のHP、スマホで情報多すぎ？」「PC版とスマホ版、どう使い分ける？」という院長先生は、株式会社リバティーフェローシップ（東京歯科経営ラボ）にご相談ください。
モバイルファースト設計から、デバイス別の情報量調整、表示速度最適化まで、2026年の最新基準に沿ったホームページ制作をサポートしています。
【無料モバイル診断実施中】 あなたのHP、スマホで見やすい？ デバイス別の最適化を診断し、改善ポイントを無料でご提案します。
投稿者プロフィール
-
歯科コンサルタント小澤直樹
2002年よりコンサルティング活動を開始。2008年から歯科コンサルタントとして勤務した後20017年より現職。
最新の投稿
ホームページ制作のご相談・資料請求はこちら
現在運用中のホームページのセカンドオピニオンや、開業時のご相談も柔軟にうけたまわります。先生がお手すきのときに、お電話でご連絡をいただくのも大歓迎です。