スマホ版サイトの「読みやすい文字サイズ」は何px？高齢患者への配慮
目次
1. なぜ歯科医院HPは大きめの文字が必要なのか
2. 年齢別の視力と最適文字サイズの科学
3. 2026年のスマホ文字サイズ推奨基準
4. 本文・見出し・ボタン、パーツ別の最適サイズ
5. 高齢者が読めない5つの文字デザインミス
6. 行間・文字間・余白の黄金比率
7. アクセシビリティ対応で全世代に優しく
8. まとめ
1.なぜ歯科医院HPは大きめの文字が必要なのか
「ホームページの文字が小さくて読めない、というクレームが増えてきた…」
歯科医院のHPは、他業種より文字サイズに気を使うべき理由があります。
歯科医院の患者層は高齢者が多い
【歯科医院の年齢別患者比率】
60代以上: 45%
50代: 20%
40代: 15%
30代以下: 20%
→ 65%が50代以上
高齢者の視力の現実
【年齢別の老眼発症率（2026年データ）】
40代: 30%
50代: 70%
60代: 95%
70代以上: ほぼ100%
つまり:
患者の半分以上が老眼
小さい文字で失う予約
【ユーザー行動の調査結果】
文字が小さくて読めない
↓
「この歯医者、高齢者に優しくなさそう」
↓
離脱・他院へ
実際のデータ:
文字サイズ12px → 離脱率75%
文字サイズ16px → 離脱率40%
→ 文字を大きくするだけで
離脱率が半分に
スマホの小さい画面がさらに問題を悪化
PCなら:
画面が大きい
→ 文字が小さくても何とか読める
スマホでは:
画面が小さい
→ 文字が小さいと完全に読めない
高齢者×スマホ×小さい文字
= 最悪の組み合わせ
2.年齢別の視力と最適文字サイズの科学
人間の視力は年齢とともに低下します。科学的データを見てみましょう。
年齢別の視力データ
【平均視力（矯正後）】
20代: 1.2
30代: 1.0
40代: 0.9（老眼始まる）
50代: 0.7
60代: 0.5
70代: 0.4
→ 70代は20代の3分の1
老眼とは何か
老眼の症状:
・近くのものが見えにくい
・細かい文字が読めない
・ピントが合わない
老眼鏡をかけても:
スマホの小さい文字は見づらい
年齢別の必要文字サイズ
【快適に読める文字サイズ（本文）】
20〜30代: 14px以上
40代: 15px以上
50代: 16px以上
60代: 18px以上
70代以上: 20px以上
歯科医院の患者層を考えると:
本文は16〜18pxが理想
Appleのガイドライン（2026年版）
【Apple Human Interface Guidelines】
最小文字サイズ: 11pt（約15px）
推奨文字サイズ: 17pt（約23px）
理由:
「11pt未満は多くの人が読めない」
3.2026年のスマホ文字サイズ推奨基準
2026年現在の業界標準と推奨サイズです。
業界標準の変化
【文字サイズの変遷】
2015年:本文12〜14px（小さかった）
2020年:本文14〜16px
2026年現在:本文16〜18px
→ 年々大きくなっている
2026年の推奨サイズ
【歯科医院HPの推奨文字サイズ】
■ 本文（説明文）
推奨: 16〜18px
最小: 16px
理想: 18px
■ 小さめの補足文
推奨: 14px
最小: 14px
■ 見出し（大）
推奨: 24〜28px
■ 見出し（中）
推奨: 20〜22px
■ 見出し（小）
推奨: 18px
■ ボタン内の文字
推奨: 18〜20px
他業種との比較
【業種別の平均文字サイズ】
若者向けアパレル: 14px
一般企業サイト: 15px
ニュースサイト: 16px
行政サイト: 18px
医療・歯科: 16〜18px ←ここ
理由:
医療系は高齢者が多いため
大きめが標準
4.本文・見出し・ボタン、パーツ別の最適サイズ
各パーツごとに最適なサイズを見ていきましょう。
パーツ1: 本文（最重要）
【本文の文字サイズ】
推奨: 16〜18px
行間: 1.7〜2.0（文字サイズの1.7〜2倍）
例（16pxの場合）:
font-size: 16px;
line-height: 1.8; （28.8px）
例（18pxの場合）:
font-size: 18px;
line-height: 1.8; （32.4px）
効果:
行間が広いと読みやすい
パーツ2: 見出し
【見出しのサイズ階層】
H1（ページタイトル）:24〜28px
font-weight: bold;
H2（大見出し）:20〜24px
font-weight: bold;
H3（中見出し）:18〜20px
font-weight: bold;
階層をはっきりさせる:見出しと本文の差は最低4px以上
パーツ3: ボタン内の文字
【ボタン文字サイズ】
推奨: 18〜20px
最小: 16px
理由:
・ボタンは重要な行動喚起
・大きくて目立つべき
・タップする前に読む必要がある
例:
[今すぐ電話予約] ← 20px [Web予約はこちら] ← 20pxパーツ4: 診療時間・アクセス情報
【重要情報の文字サイズ】
診療時間: 16〜18px
電話番号: 20〜24px
住所: 16px
例:
━━━━━━━━━━━━━━━
診療時間 ← 18px
平日 9:00-13:00 / 14:30-19:00 ← 16px
電話番号 ← 18px
03-1234-5678 ← 24px（大きく）
━━━━━━━━━━━━━━━
理由:
電話番号は特に見やすく
パーツ5: 注意書き・補足文
【小さめの文字】
推奨: 14px
最小: 14px（これ以下はNG）
使用例:
・注意事項
・免責事項
・コピーライト
例:
※自費診療のため保険適用外です ← 14px
© 2026 〇〇歯科 ← 14px
5.高齢者が読めない5つの文字デザインミス
文字サイズが適切でも、デザインで台無しになることがあります。
ミス1: 薄いグレーの文字
❌ NG例
文字色: #CCCCCC（薄いグレー）
背景色: #FFFFFF（白）
→ コントラストが低い
→ 高齢者には見えない
⭕ OK例
文字色: #333333（濃いグレー）
背景色: #FFFFFF（白）
→ コントラスト比 12.6:1
→ はっきり読める
ミス2: 細すぎるフォント
❌ NG例
font-weight: 100; （極細）
font-weight: 300; （細め）
→ 線が細すぎて見えにくい
⭕ OK例
font-weight: 400; （通常）
font-weight: 500; （やや太め）
特に重要な部分:font-weight: 700; （太字）
ミス3: 行間が狭い
❌ NG例
font-size: 16px;line-height: 1.2; （狭い）
→ 文字が詰まって読みにくい
⭕ OK例
font-size: 16px;line-height: 1.8; （広い）
→ 余白があり読みやすい
ミス4: 長すぎる1行
❌ NG例
1行の文字数: 50〜60文字
→ スマホで読むと
目の移動距離が長い
疲れる
⭕ OK例
1行の文字数: 25〜35文字
→ 読みやすい
ミス5: 背景画像の上に文字
❌ NG例
（写真の上に文字）
背景: 複雑な写真
文字: 白
→ 背景と文字が混ざる
→ 読めない
⭕ OK例
背景に半透明の黒を重ねる
background: rgba(0,0,0,0.5);
または
背景をぼかす
filter: blur(5px);
→ 文字が読みやすい
6.行間・文字間・余白の黄金比率
文字サイズだけでなく、行間・余白も重要です。
行間（line-height）の黄金比率
【推奨行間】
日本語の読みやすい行間:
1.7〜2.0
例:
font-size: 16px;
line-height: 1.8;
→ 実際の行間: 28.8px
font-size: 18px;
line-height: 1.8;
→ 実際の行間: 32.4px
狭すぎ（1.5以下）: 詰まって見える
広すぎ（2.5以上）: 間延びする
文字間（letter-spacing）
【推奨文字間】
通常の本文:
letter-spacing: 0.05em;
（文字サイズの5%の間隔）
見出し:
letter-spacing: 0.1em;
（やや広め）
例:
h2 {
font-size: 24px;
letter-spacing: 0.1em;
}
効果:
文字が窮屈に見えない
段落間の余白
【推奨余白】
段落間（<p>タグ）:
margin-bottom: 1.5em〜2em;
例:
p {
font-size: 16px;
margin-bottom: 1.5em; （24px）
}
効果:
段落の区切りが明確
セクション間の余白
【推奨余白】
セクション間:
margin-bottom: 3em〜5em;
例:
section {
margin-bottom: 4em; （64px）
}
効果:
コンテンツのまとまりが明確
7.アクセシビリティ対応で全世代に優しく
高齢者だけでなく、すべての人に優しい設計です。
アクセシビリティとは
【アクセシビリティ】
すべての人がWebを利用できるようにすること
対象:
・高齢者
・視覚障害者
・色覚異常
・運動障害
・認知機能の低下
法律:
障害者差別解消法（2024年改正）
→ 民間企業も合理的配慮が義務化
WCAG 2.2基準（2026年）
【WCAG: Web Content Accessibility Guidelines】
レベルAA（達成すべき基準）:
- コントラスト比
通常文字: 4.5:1以上
大きい文字: 3:1以上
- 文字サイズ
ユーザーが200%まで拡大可能
- タップ領域
最小44px × 44px
文字サイズの拡大機能
【実装例】
ページ右上に文字サイズ切り替えボタン
[小] [中] [大] [特大]
クリックで:
小: 14px
中: 16px（デフォルト）
大: 18px
特大: 20px
JavaScriptで実装
色覚異常への配慮
【配慮ポイント】
色だけで情報を伝えない
❌ NG例
「赤字は必須項目です」
→ 色覚異常の人には区別できない
⭕ OK例
「※は必須項目です」
→ 記号で区別
8.まとめ
文字サイズは、ホームページの読みやすさを左右する最重要要素です。特に高齢患者が多い歯科医院では、大きめの文字が必須です。
今日から実践する7つのチェックリスト
文字サイズ
- ☐ 本文は16px以上（理想は18px）
- ☐ ボタンは18〜20px
- ☐ 見出しは20px以上
デザイン 4. ☐ 文字色は濃いグレー（#333333） 5. ☐ 行間は1.7〜2.0 6. ☐ 背景とのコントラスト比4.5:1以上
アクセシビリティ 7. ☐ 文字サイズ拡大機能を設置
制作会社への改善依頼テンプレート
件名: 文字サイズの改善依頼
お世話になっております。
〇〇歯科クリニックの△△です。
患者様から「文字が小さくて読めない」
というご意見が多く、改善したいです。
【改善内容】
- 本文の文字サイズ
現状: 14px
改善後: 18px
- 行間
現状: 1.5
改善後: 1.8
- ボタンの文字
現状: 16px
改善後: 20px
- 文字色
現状: #999999（薄い）
改善後: #333333（濃い）
- 文字サイズ切り替えボタン追加
[小][中][大]で切り替え可能に
【目標】
60代以上の患者様がストレスなく
読めるホームページ
お見積りをお願いします。
改善後の目標値
【現状】
60代以上の離脱率: 80%
「文字が小さい」クレーム: 月5件
平均滞在時間: 20秒
【3ヶ月後の目標】
60代以上の離脱率: 45%（半減）
「文字が小さい」クレーム: 0件
平均滞在時間: 1分30秒（4.5倍）
最後に
2026年現在、高齢化社会はますます進んでいます。患者の半分以上が60代以上という歯科医院も珍しくありません。
文字サイズを16pxから18pxに変えるだけで、離脱率が半減し、予約率が向上します。高齢者に優しいホームページは、すべての世代に優しいホームページです。
「自分のHP、高齢者に読みやすい？」「文字サイズ、これで適切？」という院長先生は、株式会社リバティーフェローシップ（東京歯科経営ラボ）にご相談ください。
高齢者にも優しいアクセシビリティ対応から、文字サイズ最適化、全世代が読みやすいホームページ制作まで、サポートしています。
【無料読みやすさ診断実施中】 あなたのHP、高齢者にも読みやすい？ 文字サイズ・コントラスト・行間を診断し、改善ポイントを無料でご提案します。
投稿者プロフィール
-
歯科コンサルタント小澤直樹
2002年よりコンサルティング活動を開始。2008年から歯科コンサルタントとして勤務した後20017年より現職。
最新の投稿
ホームページ制作のご相談・資料請求はこちら
現在運用中のホームページのセカンドオピニオンや、開業時のご相談も柔軟にうけたまわります。先生がお手すきのときに、お電話でご連絡をいただくのも大歓迎です。