高齢患者にも優しいホームページデザイン！文字・色・レイアウトの配慮点
目次
1. なぜ歯科医院は高齢者対応が必須なのか
2. 文字サイズ・フォントの最適解
3. 色使いとコントラストの配慮
4. 高齢者が迷わないレイアウト設計
5. クリック・タップしやすいボタン設計
6. 音声読み上げ・拡大機能への対応
7. まとめ
1.なぜ歯科医院は高齢者対応が必須なのか
歯科医院の患者層は、他業種と比べて高齢者比率が圧倒的に高いです。
歯科医院の年齢別患者比率
【厚生労働省 患者調査（2023年）】
60代以上: 48.2%
50代: 18.5%
40代以下: 33.3%
→ 患者の約半数が60代以上
→ 3人に2人が50代以上
高齢者のインターネット利用率
【総務省 通信利用動向調査（2025年）】
60代のスマホ利用率: 89.3%
70代のスマホ利用率: 71.2%
→ 高齢者もスマホでホームページを見る時代
しかし、多くの歯科医院のホームページは若年層向けに作られており、高齢者には見づらい設計になっています。
高齢者に優しくないサイトの離脱率
【G歯科医院のデータ】
60代以上の訪問者:
平均滞在時間: 18秒
離脱率: 82%
理由（ユーザーテストの結果）:
「文字が小さくて読めない」
「どこをタップすればいいかわからない」
「情報が多すぎて疲れる」
高齢者に優しいデザインにすることで、患者の半数以上にアプローチできます。
2.文字サイズ・フォントの最適解
推奨文字サイズ
【60代以上向け】
本文: 18px以上（理想は20px）
見出し: 26px以上
ボタン内文字: 20px以上
【一般的なサイト（若年層向け）】
本文: 14〜16px
→ 高齢者向けは1.5倍大きく
年齢別に見える文字サイズの違い
20代: 14pxでも読める
40代: 16pxが快適
60代: 18px以上が必要
70代以上: 20px以上が理想
フォントの選び方
【推奨フォント】
日本語:
・游ゴシック
・メイリオ
・Noto Sans JP
理由:
・読みやすい
・太さが適度
・Windowsでも見やすい
【避けるべきフォント】
・明朝体（細くて読みにくい）
・装飾的なフォント
・細いウェイト（Light、Thin）
行間の重要性
推奨行間（line-height）: 2.0
例:
font-size: 18px;
line-height: 2.0;
→ 実際の行間: 36px
狭い行間（1.5）:
文字が詰まって読みづらい
広い行間（2.0）:
余白があり、目が疲れない
3.色使いとコントラストの配慮
コントラスト比の基準
【WCAG 2.2基準（2026年）】
レベルAA（達成すべき）:
通常文字: 4.5:1以上
大きい文字: 3:1以上
レベルAAA（理想）:
通常文字: 7:1以上
大きい文字: 4.5:1以上
高齢者向けは、レベルAAA推奨
良い組み合わせ・悪い組み合わせ
⭕ 高齢者に優しい配色
黒文字 × 白背景
コントラスト比: 21:1
→ 最も読みやすい
濃いグレー（#333333） × 白背景
コントラスト比: 12.6:1
→ まぶしさを軽減、読みやすい
❌ 高齢者に厳しい配色
薄いグレー（#999999） × 白背景
コントラスト比: 2.8:1
→ 基準未達、読めない
黄色文字 × 白背景
コントラスト比: 1.07:1
→ ほぼ見えない
青文字 × 黒背景
→ 暗くて読みづらい
色覚異常への配慮
【注意すべき組み合わせ】
赤と緑の組み合わせ:
色覚異常（特に赤緑色覚異常）の人には区別しにくい
対策:
色だけで情報を伝えない
❌ NG例
「赤字は必須項目です」
⭕ OK例
「※印は必須項目です」
4.高齢者が迷わないレイアウト設計
シンプルな構造
【推奨レイアウト】
━━━━━━━━━━━━━━━━
[ロゴ] [電話番号大きく]━━━━━━━━━━━━━━━━
[メニュー]（3〜5項目のみ）━━━━━━━━━━━━━━━━
[メインビジュアル]大きな見出し
━━━━━━━━━━━━━━━━
[予約ボタン大きく]━━━━━━━━━━━━━━━━
[お知らせ]━━━━━━━━━━━━━━━━
[診療内容]（3つ程度）━━━━━━━━━━━━━━━━
[アクセス]━━━━━━━━━━━━━━━━
ポイント:
・1カラム（縦1列）
・余白を十分に
・情報を詰め込まない
避けるべきレイアウト
❌ NG例
・3カラムレイアウト（情報が多すぎ）
・サイドバーに大量のメニュー
・スライドショー（変化が速い）
・自動再生の動画
・ポップアップ広告
ナビゲーションメニュー
【推奨メニュー数】
トップレベル: 3〜5項目
例:
・診療内容
・医院紹介
・アクセス・予約
※「会社概要」「採用情報」など患者に関係ない項目は最小限に
5.クリック・タップしやすいボタン設計
ボタンサイズ
【推奨サイズ】
最小: 60px × 60px
推奨: 80px × 80px以上
理由:
高齢者は手の震えがある場合も
大きいボタンなら正確にタップできる
【一般的なサイト】
44px × 44px（Appleガイドライン）
→ 高齢者向けは約2倍大きく
ボタンの余白
ボタン間の余白: 24px以上
理由:
誤タップを防ぐ
ボタンの色・デザイン
⭕ 高齢者に優しいボタン
・大きく、目立つ色
・「ボタン」だとわかるデザイン
・立体的（影、グラデーション）
例:
━━━━━━━━━━━━━━━━
[📞 今すぐ電話で予約]
（大きなオレンジボタン）
━━━━━━━━━━━━━━━━
❌ 避けるべきデザイン
・フラットデザイン（平面的すぎる）
・文字だけのリンク（ボタンに見えない）
・薄い色（目立たない）
6.音声読み上げ・拡大機能への対応
音声読み上げソフトへの対応
【実装すべき技術】
- alt属性の設定
すべての画像に説明文を記載
例:
<imgsrc=”doctor.jpg” alt=”院長の笑顔の写真”>
- 見出しタグの適切な使用
H1、H2、H3を階層的に
- リンクテキストの明確化
「こちら」ではなく「診療時間を見る」
文字サイズ変更機能
【実装例】
ページ右上に文字サイズ切り替えボタン
[小] [中] [大] [特大]
クリックで:
小: 16px
中: 18px（デフォルト）
大: 20px
特大: 24px
JavaScriptで簡単に実装可能
ふりがな機能
専門用語にふりがなを振る
例:
齲蝕（うしょく）
歯周病（ししゅうびょう）
7.まとめ
高齢者に優しいデザインは、すべての世代に優しいデザインです。患者の半数以上が60代以上という歯科医院では、高齢者対応は必須です。
今日から改善する7つのポイント
【文字】
- ☐ 本文を18px以上に
- ☐ 行間を2.0に
【色】
- ☐ コントラスト比4.5:1以上
- ☐ 薄いグレー文字を濃く
【レイアウト】
- ☐ 1カラムのシンプル構造
- ☐ 余白を広く
【ボタン】
- ☐ 60px × 60px以上
制作会社への依頼テンプレート
件名: 高齢者対応デザインへの改修依頼
お世話になっております。〇〇歯科クリニックの△△です。
当院の患者様の60%以上が60代以上のため、ホームページを高齢者対応にしたいです。
【改修内容】
- 文字サイズ
本文: 18px以上
見出し: 26px以上
行間: 2.0
- 色・コントラスト
WCAG 2.2レベルAA準拠
薄いグレー文字を濃く
- レイアウト
シンプルな1カラム
余白を広く
- ボタン
60px以上の高さ
オレンジなど目立つ色
- その他
文字サイズ変更機能追加
お見積りをお願いいたします。
改善後の効果測定
【現状】
60代以上の離脱率: 82%
平均滞在時間: 18秒
【3ヶ月後の目標】
60代以上の離脱率: 50%（-32%）
平均滞在時間: 1分30秒（5倍）
予約率: 2倍
最後に
「若い人向けのオシャレなデザイン」よりも、「高齢者が使いやすいデザイン」の方が、歯科医院には適しています。文字を大きく、色を濃く、ボタンを大きく。この3つを改善するだけで、予約率は大きく向上します。
「高齢者対応デザインにしたい」「現在のサイトは見にくい？」という院長先生は、株式会社リバティーフェローシップ（東京歯科経営ラボ）にご相談ください。
高齢者ユーザビリティ診断から、アクセシビリティ対応、デザイン改修まで、すべての世代に優しいホームページ制作をサポートしています。
【無料診断受付中】 あなたのHP、高齢者に優しい？文字サイズ・色・ボタンを無料で診断します。
投稿者プロフィール
-
歯科コンサルタント小澤直樹
2002年よりコンサルティング活動を開始。2008年から歯科コンサルタントとして勤務した後20017年より現職。
最新の投稿
ホームページ制作のご相談・資料請求はこちら
現在運用中のホームページのセカンドオピニオンや、開業時のご相談も柔軟にうけたまわります。先生がお手すきのときに、お電話でご連絡をいただくのも大歓迎です。