ブログ

ホワイトスペースはなぜ読みやすさを上げるのか? UXで使える余白の点検法

余白を「空き」ではなく、読む順番と情報のまとまりをつくる構造として扱います。

読まれない原因は、文章量ではないかもしれません

同じ文章でも、見出し・本文・リンク・ボタンが詰まった画面と、関連する要素が近く話題の変わり目に余白がある画面では、読む疲れが変わります。

ホワイトスペースは飾りではありません。何を一緒に読み、何を分けて考えるかを示す構造です。

結論:余白は情報量を減らさず、読む負担を減らす

密集した画面では、読者は内容の前にラベルや枠線、操作を仕分けます。適切な余白は視覚的な競合を減らし、次の文や主要CTAを見つけやすくします。

ただし曖昧な文章や弱いコントラストを余白だけで直すことはできません。明確な階層を見えやすくする増幅器です。

読む流れを変える三つのルール

同じ考えは近く、別の考えは離す

近い要素は一つのグループに見えます。カードのタイトル・説明・ボタンは近くに置き、次のカードとの間は明確に広げます。

  • 見出しは導入する本文に近づける
  • ラベルは自分の入力欄に近づける
  • グループ内とグループ間を同じ間隔にしない

段落に「考えが終わった」印をつける

行間と段落間隔が似ると長文は壁に見えます。一段落に一つの役割を置き、話題が変わる所に小見出しか大きな間をつくりましょう。

モバイルでも確かめる

行の長さ、段落の区切り、CTAの見つけやすさ、文字間隔を広げた後の崩れを確認します。

5分チェック

  1. 視線は見出し→説明→主要CTAへ進むか
  2. 関連要素は一つの単位に見えるか
  3. 話題や作業が変わる所に一呼吸あるか
  4. 枠線や色が少なくても所属が分かるか
  5. 拡大とモバイル幅でも順序が保たれるか

余白についての質問を変える

「もっと余白を入れるべきか」ではなく、この間隔は、まとめるべきものと分けるべきものを明確にしているかと問います。答えが「はい」なら、余白は見た目ではなく理解のための道具になります。

参考:W3C Cognitive Accessibility—Use White Space。固定のpx値ではなく、設計判断のためのパターンです。

ホワイトスペース可読性UXデザイン認知負荷タイポグラフィアクセシビリティ

あわせて読みたい記事