ホームページの余白（ホワイトスペース）が与える心理効果とは？
目次
1. 余白がないホームページが患者を逃す理由
2. 余白の心理学：なぜ余白があると高級に見えるのか
3. 歯科医院に最適な余白の量と配置
4. 余白を活用した視線誘導テクニック
5. スマホとPCで異なる余白設計
6. 余白が少なすぎる・多すぎるサイトの改善法
7. まとめ
1.余白がないホームページが患者を逃す理由
「情報をたくさん載せたのに、誰も読んでくれない…」その原因、余白不足かもしれません。
余白なしサイトの典型的な問題
❌ NG例
━━━━━━━━━━━━━━━━
〇〇歯科クリニック03-1234-5678
当院の特徴虫歯治療インプラント矯正
ホワイトニング予防歯科小児歯科訪問診療
最新設備完備経験豊富な医師スタッフ一同
お待ちしております診療時間9:00-19:00
土日診療駐車場完備予約優先制当日予約OK
━━━━━━━━━━━━━━━━
問題点:
・どこから読めばいいかわからない
・重要な情報が埋もれる
・目が疲れる
・すぐに離脱される
余白があるサイトとの比較
⭕ OK例
━━━━━━━━━━━━━━━━
〇〇歯科クリニック
（余白）
03-1234-5678
（余白）
当院の3つの特徴
（余白）
- 痛みの少ない治療
- 土日診療で通いやすい
- 最新設備完備
（余白）
[今すぐ予約]
━━━━━━━━━━━━━━━━
効果:
・読む順番が明確
・重要な情報が目立つ
・落ち着いて読める
余白の有無による滞在時間の違い
【実験結果】
余白なしサイト:
平均滞在時間: 23秒
離脱率: 78%
余白ありサイト:
平均滞在時間: 2分18秒（6倍）
離脱率: 42%（半減）
2.余白の心理学：なぜ余白があると高級に見えるのか
余白は単なる「空間」ではなく、心理的な効果をもたらします。
余白が与える5つの心理効果
【効果1: 洗練された印象】
余白が多い → 高級ブランド、上質
余白が少ない → 安っぽい、雑
AppleやChanelのサイトは余白が多い
→ 高級感の演出
【効果2: 情報の重要性を伝える】
余白に囲まれた情報 → 重要
詰め込まれた情報 → 重要度が不明
【効果3: 読みやすさの向上】
適度な余白 → 目の負担が減る
余白なし → 疲れて読むのをやめる
【効果4: 信頼感の向上】
余白がある → 丁寧、余裕がある
余白がない → 雑、急いでいる
【効果5: 行動を促す】
ボタンの周りに余白 → クリックされやすい
ボタンが密集 → 誤クリック、スルー
高級審美歯科と一般歯科の余白比較
【高級審美歯科】
余白率: 60%（画面の60%が余白）
印象: 洗練、高級、上質
平均客単価: 50万円
【一般歯科（余白不足）】
余白率: 20%（画面の80%が情報）
印象: 雑多、安い、混雑
平均客単価: 3万円
余白の使い方で印象が180度変わる
3.歯科医院に最適な余白の量と配置
推奨余白率
【画面全体の余白率】
理想: 50〜60%
最低: 40%
計算例:
画面サイズ: 1000px × 1000px = 100万px
コンテンツ: 40万px
余白: 60万px
→ 余白率60%
パーツごとの余白設計
【見出し周りの余白】
上の余白: 60px
下の余白: 30px
例:
<h2 style=”margin-top: 60px; margin-bottom: 30px;”>
当院の特徴
</h2>
【段落間の余白】
段落間: 30px
【セクション間の余白】
セクション間: 80〜100px
大きな余白でコンテンツを区切る
コンテンツ幅の制限
【推奨最大幅】
PC表示: 1200px以下
タブレット: 768px以下
スマホ: 375px前後
理由:
横幅が広すぎると、視線の移動が多く疲れる
NG例: 横幅1920pxいっぱいに文章
→ 1行が長すぎて読めない
OK例: 横幅800pxに制限
→ 読みやすい
4.余白を活用した視線誘導テクニック
余白を戦略的に配置することで、患者の視線をコントロールできます。
テクニック1: Zパターン
【Zパターンとは】
人間の視線は「Z」の形に動く
━━━━━━━━━━━━━━━━
[ロゴ] [電話番号] ←左から右↘
[メインビジュアル] ←中央
↘
[診療内容] [予約ボタン] ←左から右━━━━━━━━━━━━━━━━
この動線に沿って余白を配置
テクニック2: Fパターン
【Fパターンとは】
テキストの多いページでは「F」の形に視線が動く
━━━━━━━━━━━━━━━━
[見出し──────────] ←横棒 [本文──] ←横棒（短め） [本文] [小見出し────] ←横棒（短め） [本文]━━━━━━━━━━━━━━━━
左側の余白を多めに確保
重要な情報は左寄せ
テクニック3: 余白で重要情報を囲む
⭕ 効果的な配置
━━━━━━━━━━━━━━━━
（余白）
無料カウンセリング実施中
（余白）
━━━━━━━━━━━━━━━━
余白で囲むことで、情報が目立つ
5.スマホとPCで異なる余白設計
デバイスによって最適な余白は異なります。
PCの余白設計
【PC（横幅1200px以上）】
左右の余白: 各15%以上
→ コンテンツ幅を70%に制限
例:
━━━━━━━━━━━━━━━━
[余白15%][コンテンツ70%][余白15%]━━━━━━━━━━━━━━━━
セクション間: 100px
スマホの余白設計
【スマホ（横幅375px前後）】
左右の余白: 各5%（20px程度）
→ 画面が狭いため余白は最小限に
例:
━━━━━━━━━━━━━━━━
[余白][コンテンツ][余白]━━━━━━━━━━━━━━━━
セクション間: 60px
（PCより狭くてOK）
レスポンシブ対応の余白
CSS例:
.container {
padding: 100px 15%; /* PC */
}
@media (max-width: 768px) {
.container {
padding: 60px 5%; /* スマホ */
}
}
画面サイズに応じて余白を自動調整
6.余白が少なすぎる・多すぎるサイトの改善法
余白が少なすぎるサイトの改善
【改善ステップ】
- 不要な情報を削除
「本当に必要？」と全ての要素を見直す
- 行間を広げる
line-height: 1.5 → 1.8
- セクション間に余白追加
margin-bottom: 80px
- 左右の余白を確保
padding: 0 15%;
- ボタン周りに余白
margin: 40px 0;
before:
余白率20% → 情報過多
after:
余白率50% → スッキリ読みやすい
余白が多すぎるサイトの改善
【問題点】
余白率80%以上 → スカスカ、手抜き感
【改善ステップ】
- 必要な情報を追加
患者の声、症例写真など
- 余白を60%程度に調整
適度な情報密度に
- コンテンツ幅を広げる
max-width: 600px → 800px
7.まとめ
余白は「何もない空間」ではなく、読みやすさ、信頼感、高級感を生み出す重要なデザイン要素です。画面の50〜60%を余白にすることで、情報が整理され、患者の滞在時間が6倍になります。
今日から改善する5つのポイント
- ☐ 行間を1.8以上に
- ☐ セクション間に80px以上の余白
- ☐ 左右に15%の余白を確保（PC）
- ☐ ボタン周りに40pxの余白
- ☐ 不要な情報を削除
制作会社への依頼テンプレート
件名: 余白を増やしたデザイン改修の依頼
お世話になっております。〇〇歯科クリニックの△△です。
現在のホームページは情報が詰まりすぎており、余白を増やしてスッキリさせたいです。
【改修内容】
- 余白率を50%以上に
- 行間を1.8に設定
- セクション間に80pxの余白
- PC表示時、左右に15%の余白
- 不要な情報の削除提案
お見積りをお願いいたします。
改善後の目標
【現状】
余白率: 20%
平均滞在時間: 23秒
離脱率: 78%
【3ヶ月後】
余白率: 55%
平均滞在時間: 2分（5倍）
離脱率: 40%（半減）
予約率: 2倍
最後に
「情報をたくさん載せる」ことと「読んでもらう」ことは別です。余白を増やすことで、本当に伝えたい情報が際立ち、患者の行動を促せます。
「情報が多すぎる？」「余白が適切？」という院長先生は、株式会社リバティーフェローシップ（東京歯科経営ラボ）にご相談ください。
現状の余白診断から、最適な余白設計、デザイン改修まで、読みやすいホームページ制作をサポートしています。
【無料診断受付中】 あなたのHP、余白は適切？情報密度を診断し、改善策を無料でご提案します。
投稿者プロフィール
-
歯科コンサルタント小澤直樹
2002年よりコンサルティング活動を開始。2008年から歯科コンサルタントとして勤務した後20017年より現職。
最新の投稿
ホームページ制作のご相談・資料請求はこちら
現在運用中のホームページのセカンドオピニオンや、開業時のご相談も柔軟にうけたまわります。先生がお手すきのときに、お電話でご連絡をいただくのも大歓迎です。