縦スクロール時代のファーストビュー設計！3秒で伝える歯科医院HP
目次
1. スマホユーザーの3秒ルールとは
2. ファーストビューで絶対に伝えるべき5つの情報
3. 情報の優先順位を間違えると即離脱される
4. スマホ画面サイズ別・最適なファーストビュー設計
5. キャッチコピーの作り方と配置場所
6. 画像選びで失敗しない3つの原則
7. 成功事例と失敗事例の比較
8. まとめ
1.スマホユーザーの3秒ルールとは
「ホームページを開いて3秒以内に、このページが自分に必要かどうかを判断する」
これが、スマホユーザーの行動パターンです。
なぜ3秒なのか？
スマホユーザーの検索シーン:
電車の中、信号待ち、ちょっとした隙間時間
↓
「〇〇駅 歯医者」と検索
↓
検索結果をタップ
↓
ページが開く
↓
【ここから3秒】
・パッと見て判断
・スクロールはしない
・読み込みも待たない
↓
「違うな」と思ったら即離脱
↓
次の医院へ
PCユーザーなら10〜20秒かけてページを見ますが、スマホユーザーは3秒で判断します。
ファーストビューとは
【ファーストビュー】
スマホでページを開いた時、スクロールせずに最初に見える範囲。
iPhone SE（小さめ）: 縦568px
iPhone 12（標準）: 縦844px
Android平均: 縦720px前後
→ 縦600px以内の情報が勝負
3秒で離脱される典型的なパターン
❌ NG例
[ファーストビュー]
━━━━━━━━━━━━━━━
（大きな風景写真）
「あなたの笑顔を守ります」
↑これだけ
━━━━━━━━━━━━━━━
患者さんの思考:
「で、どこの歯医者？」
「何ができるの？」
「どこにあるの？」
→ 3秒で離脱
2.ファーストビューで絶対に伝えるべき5つの情報
スクロールせずに見える範囲に、必ず含めるべき情報があります。
必須情報1: 医院名と場所
⭕ OK例
━━━━━━━━━━━━━━━
〇〇歯科クリニック
渋谷駅東口から徒歩1分
━━━━━━━━━━━━━━━
理由:
・「ここはどこの歯医者？」に即答
・場所が合わなければ即離脱できる
（ユーザーにとっても親切）
必須情報2: 何ができるか（専門性）
⭕ OK例
━━━━━━━━━━━━━━━
〇〇歯科クリニック
渋谷駅東口から徒歩1分
お子様が怖がらない小児歯科
キッズスペース完備
━━━━━━━━━━━━━━━
理由:
・「自分の求めているものがあるか」判断できる
・専門性が明確だと選ばれやすい
必須情報3: 予約方法（行動喚起）
⭕ OK例
━━━━━━━━━━━━━━━
[☎ 今すぐ電話予約] [📅 24時間Web予約]━━━━━━━━━━━━━━━
理由:
・「どうやって予約するの？」に即答
・行動のハードルを下げる
必須情報4: 診療時間（特に強み）
⭕ OK例
━━━━━━━━━━━━━━━
平日20時まで・土日診療
仕事帰りでも通えます
━━━━━━━━━━━━━━━
理由:
・「自分のライフスタイルに合うか」判断できる
・差別化ポイントになる
必須情報5: 信頼の証（実績・口コミ）
⭕ OK例
━━━━━━━━━━━━━━━
開業20年・患者様5万人の実績
★★★★★ 4.8 (口コミ150件)
━━━━━━━━━━━━━━━
理由:
・「信頼できるのか」の判断材料
・数字は説得力がある
これら5つを配置した理想形
[ファーストビュー]━━━━━━━━━━━━━━━
〇〇歯科クリニック
渋谷駅東口から徒歩1分
お子様が怖がらない小児歯科
★★★★★ 4.8 (150件)
平日20時まで・土日診療OK
[☎ 今すぐ電話予約] [📅 Web予約はこちら]
━━━━━━━━━━━━━━━
これで3秒以内に
必要な情報がすべて伝わる
3.情報の優先順位を間違えると即離脱される
ファーストビューに何を載せるか、優先順位が重要です。
よくある優先順位の間違い
❌ NG例（よくあるパターン）
優先度1位: 医院の理念・想い
優先度2位: 院長の経歴
優先度3位: 設備紹介
優先度4位: 医院名・場所
優先度5位: 予約ボタン
結果:
スクロールしないと医院名も場所もわからない
→ 即離脱
正しい優先順位
⭕ 正解
優先度1位: 医院名・場所
優先度2位: 専門性・強み
優先度3位: 予約ボタン
優先度4位: 診療時間
優先度5位: 信頼の証
理由:
患者さんが知りたい順番
患者さんの思考の流れ
【患者さんの頭の中（3秒間）】
1秒目:
「ここはどこの歯医者？」
→ 医院名・場所を確認
2秒目:
「自分に合ってる？」
→ 専門性・診療時間を確認
3秒目:
「信頼できそう？予約方法は？」
→ 口コミ・予約ボタンを確認
判断完了:
「良さそう！予約しよう」
または
「違うな。次へ」
この思考の流れに沿った情報配置が必須です。
4.スマホ画面サイズ別・最適なファーストビュー設計
画面サイズによって、見える情報量が変わります。
iPhone SE（小画面）の場合
縦幅: 568px
【配置例】
━━━━━━━━━━━━━━━
[☎ 電話予約] ←固定ヘッダー30px━━━━━━━━━━━━━━━
〇〇歯科クリニック ←60px
渋谷駅東口から徒歩1分 ←40px
（写真） ←200px
お子様が怖がらない小児歯科 ←50px
★4.8 (150件) ←30px
平日20時まで・土日診療 ←40px
[Web予約] ←60px
━━━━━━━━━━━━━━━
合計: 510px
→ 小画面でもすべて見える
iPhone 12/13（標準）の場合
縦幅: 844px
より余裕があるため:
・写真を大きく（300px）
・文字サイズを大きく
・余白を広く取れる
Android（平均）の場合
縦幅: 720px前後
iPhone SEとiPhone 12の中間として設計
設計の鉄則
最小サイズ（iPhone SE）に合わせる
理由:
・小画面で見えれば大画面でも見える
・逆は成り立たない
・iPhone SEユーザーは意外と多い
5.キャッチコピーの作り方と配置場所
ファーストビューの中で最も重要なのがキャッチコピーです。
ダメなキャッチコピーの典型例
❌ NG例
「あなたの笑顔を守ります」
「患者様第一の医療を」
「地域に愛される歯科医院」
「最高の治療をお届けします」
問題点:
・抽象的で何も伝わらない
・どの歯医者でも言えること
・患者さんのメリットが不明
効果的なキャッチコピーの3要素
要素1: 具体的なベネフィット
⭕ OK例
「お子様が泣かない小児歯科」
→ 具体的なメリット
「痛みが少ない治療」
→ 患者さんの悩み解決
要素2: 数字を入れる
⭕ OK例
「開業20年、患者様5万人の実績」
「口コミ評価4.8 / 150件」
「渋谷駅から徒歩1分」
理由:
数字は信頼性が高い
要素3: ターゲットを明確に
⭕ OK例
「働く女性のための夜8時まで診療」
→ ターゲット: 働く女性
「家族みんなで通える歯医者」
→ ターゲット: ファミリー層
キャッチコピーの配置場所
【配置パターンA: 医院名の下】
━━━━━━━━━━━━━━━
〇〇歯科クリニック
渋谷駅東口から徒歩1分
お子様が怖がらない小児歯科 ←ここ
━━━━━━━━━━━━━━━
【配置パターンB: 写真の上】
━━━━━━━━━━━━━━━
〇〇歯科クリニック
お子様が怖がらない小児歯科 ←ここ
（写真）
━━━━━━━━━━━━━━━
どちらも効果的
文字サイズと色
推奨サイズ:
・タイトル: 24〜28px
・キャッチコピー: 18〜22px
・補足説明: 14〜16px
推奨色:
・タイトル: 濃い色（黒、濃紺）
・キャッチコピー: アクセントカラー
・補足説明: グレー系
6.画像選びで失敗しない3つの原則
ファーストビューの写真選びは慎重に。
原則1: 人の顔が写っている写真
⭕ 効果的な写真
・院長の笑顔
・スタッフと患者さん
・子供が笑っている様子
・家族連れの患者さん
❌ 避けるべき写真
・医療機器のアップ
・無人の診療室
・風景写真
・抽象的なイメージ
理由:
人の顔があると親近感が湧く
原則2: 明るく清潔感のある写真
⭕ 効果的な写真
・自然光が入る院内
・白を基調とした清潔な空間
・笑顔の人物
❌ 避けるべき写真
・暗い室内
・ごちゃごちゃした背景
・無表情の人物
原則3: スマホで見て映える写真
注意点:
・PCで見ると綺麗でもスマホで見ると暗い/小さいことがある
確認方法:
実際にスマホで見て確認する
写真のサイズと配置
推奨サイズ:
横幅: 画面幅いっぱい
高さ: 200〜300px
配置:
医院名とキャッチコピーの後
予約ボタンの前
7.成功事例と失敗事例の比較
実際の歯科医院の事例を見てみましょう。
失敗事例: A歯科医院
【改善前のファーストビュー】
━━━━━━━━━━━━━━━
（大きな風景写真のみ）
「あなたの笑顔を
一生涯サポートします」
↑これだけ
━━━━━━━━━━━━━━━
問題点:
・医院名がない
・場所がわからない
・何ができるかわからない
・予約方法がわからない
結果:
・離脱率: 75%
・滞在時間: 平均8秒
成功事例: B歯科医院
【改善後のファーストビュー】
━━━━━━━━━━━━━━━
[☎ 今すぐ電話予約]━━━━━━━━━━━━━━━
〇〇歯科クリニック
渋谷駅東口から徒歩1分
お子様が怖がらない小児歯科
★4.8 (150件の口コミ)
（笑顔の子供と歯科医師の写真）
平日20時まで・土日診療OK
キッズスペース完備
[📅 Web予約はこちら] [☎ 電話で予約]
━━━━━━━━━━━━━━━
改善効果:
・離脱率: 35%（半分以下に）
・滞在時間: 平均2分（15倍）
・予約率: 2.1% → 4.8%（2.3倍）
改善のポイント
Before → After
- 医院名なし → 明記
- 場所不明 → 駅から徒歩1分
- 抽象的コピー → 具体的なベネフィット
- 風景写真 → 人物写真
- 予約方法なし → ボタン2つ設置
- 診療時間なし → 夜間・休日対応を明記
- まとめ
ファーストビューは、ホームページの生命線です。3秒で伝わらなければ、意味がありません。
今日から実践する7つのチェックリスト
必須情報
- ☐ 医院名と場所が明記されているか
- ☐ 専門性・強みが具体的に書かれているか
- ☐ 予約ボタンが2つ以上あるか
- ☐ 診療時間（特に強み）が書かれているか
- ☐ 口コミ・実績など信頼の証があるか
デザイン
- ☐ 人の顔が写った写真を使っているか
- ☐ スマホで見て3秒で理解できるか
制作会社への改善依頼テンプレート
件名: ファーストビューの改善依頼
お世話になっております。
〇〇歯科クリニックの△△です。
現在のHPのファーストビューを改善したいと考えています。
【現状の問題】
・スクロールしないと医院名が見えない
・予約方法がわかりにくい
・離脱率が高い（推定70%）
【改善内容】
以下の情報をファーストビューに配置
- 医院名と場所
- 「お子様が怖がらない小児歯科」
- 口コミ評価（★4.8）
- 診療時間（平日20時まで・土日診療）
- 電話ボタン + Web予約ボタン
- 笑顔の院長とスタッフの写真
【参考】
スマホで見て3秒で内容が理解できるデザインを希望します。
お見積りと納期をお知らせください。
よろしくお願いいたします。
改善後の目標値
【現状】
離脱率: 70%
滞在時間: 10秒
予約率: 1.5%
【3ヶ月後の目標】
離脱率: 40%（-30%）
滞在時間: 1分30秒（9倍）
予約率: 3.5%（2.3倍）
最後に
「ホームページを見る人の80%はスマホユーザー」「3秒で判断される」という現実を踏まえ、ファーストビューの設計を見直しましょう。
大掛かりなリニューアルは不要です。ファーストビューに必要な情報を配置し直すだけで、離脱率が半減し、予約率が2倍になります。
「自分のHPのファーストビュー、これで合ってる？」「3秒で伝わってる？」という院長先生は、株式会社リバティーフェローシップ（東京歯科経営ラボ）にご相談ください。
ファーストビュー診断から、スマホ最適化、情報設計まで、3秒で伝わるホームページ制作をサポートしています。
【無料ファーストビュー診断実施中】 あなたのHP、3秒で伝わってる？ スマホでの見え方を診断し、改善ポイントを無料でご提案します。
投稿者プロフィール
-
歯科コンサルタント小澤直樹
2002年よりコンサルティング活動を開始。2008年から歯科コンサルタントとして勤務した後20017年より現職。
最新の投稿
コンテンツマーケティング2026年3月19日インプラント・矯正の自費患者をHPで集めるための3つのポイント
業者選び2026年3月16日ホームページ制作を分割払いにするメリットと注意点
コンテンツマーケティング2026年3月15日症例写真の見せ方で成約率が変わる！ビフォーアフター掲載の極意
ローカルSEO・地域戦略2026年3月14日複数の市区町村から患者を集める！広域集患型HPのSEO設計術
ホームページ制作のご相談・資料請求はこちら
現在運用中のホームページのセカンドオピニオンや、開業時のご相談も柔軟にうけたまわります。先生がお手すきのときに、お電話でご連絡をいただくのも大歓迎です。