余白は空白ではなく情報である
デザインを学ぶとよく耳にする言葉がある。「余白を恐れるな」。では、なぜ余白が可読性を高めると言われるのか。単に「すっきり見えるから」ではなく、実際には脳が情報を処理する仕組みと関係している。この記事では余白と可読性の関係を認知心理学の研究をもとに整理し、どこまでが検証された根拠でどこからが誇張なのかを区別する。
行の長さと読書速度 — 比較的堅固な根拠
タイポグラフィ研究で最も古く、繰り返し検証されてきたテーマの一つが「1行に何文字を収めるか」だ。複数の研究と業界ガイドラインが共通して挙げる範囲は1行50〜75文字（英文基準）で、その中でも約66文字前後が安定した基準値としてよく引用される。この推奨値はタイポグラファーのロバート・ブリングハースト（Robert Bringhurst）の古典的ガイドライン（45〜75文字）にまで遡る。実証研究では、ダイソン（Dyson）とヘイズルグローブ（Haselgrove）の研究がよく引用され、約55文字前後の中程度の行長が速い読書・遅い読書のいずれにも効果的だったという結果を示している。行が長すぎると次の行に移る際に視線が迷いやすく（トラッキング疲労）、逆に短すぎると読書のリズムが頻繁に途切れる。
UXリサーチ機関Baymard Instituteの実使用調査もこれを裏付ける。1行80文字を超える商品説明テキストは、60〜70文字の範囲のテキストよりはるかに頻繁に読み飛ばされたという結果が出ている。つまり左右の余白（マージン）の取り方が行の長さを決め、それが実際の読書速度や離脱率に影響するという点で、余白は美感ではなく機能である。
歴史的によく引用される研究に、コリン・ウィールドン（Colin Wheildon）の『Type & Layout』がある。彼は数年にわたる調査で、標準的なレイアウト（適切な余白・字間・行間）を守った紙面とそうでない紙面の理解度の差を測定し、標準を守った方が理解度が大きく高かったと報告した。ただし、この研究は方法論の公開が限定的で、学界で再現性についての議論があることも併せて知っておく必要がある。つまり絶対的な数値として引用するより、方向性を示す参考資料として受け止めるのが安全だ。
認知負荷理論：余白が不足すると脳がより疲れる
教育心理学者ジョン・スウェラー（John Sweller）が1988年に提唱した認知負荷理論（Cognitive Load Theory）はUXデザインでも広く引用される。核心は、人間の作業記憶（working memory）には容量と持続時間に制限があり、新しい情報はすべてこの限られた作業記憶を経て初めて長期記憶に移るというものだ。理論は負荷を3種類に分ける。
- 内在的負荷（intrinsic load）：コンテンツ自体の複雑さ
- 外在的負荷（extraneous load）：情報の提示方法（レイアウト、タイポグラフィ）から生じる不要な負担。デザインで減らせる領域
- 本質的負荷（germane load）：実際の理解・学習に使われる認知資源
ここでデザイナーが直接コントロールできるのが外在的負荷だ。スウェラーとタルミジ（Tarmizi）が1988年に初めて報告した「分割注意効果（split-attention effect）」は、互いに関連する情報（例：図とその説明）が物理的に離れていると、学習者がそれを頭の中で統合する追加の負担が生じることを示している。この負担は関連情報を物理的に近くに配置すれば減少または消失する。余白はこの統合負担を減らす最も直接的な手段だ。情報ブロック間に適切な余白があれば、ユーザーはコンテンツの理解にだけ作業記憶を使える。
ゲシュタルトの近接の法則 — 余白がグループを作る
ゲシュタルト心理学の近接の法則（Law of Proximity）は、余白が可読性だけでなく情報構造の認識にも関わることを示している。Nielsen Norman Group（NN/g）は、近くに配置された要素は一つのグループとして認識され、離れた要素は無関係なものとして認識されると説明する。近接性はグルーピングの原理の中でも特に強力で、色や形の類似性のような競合する信号よりも優先して働くことが多い。つまり余白の大きさそのものが「このテキストとあのテキストは関連している」あるいは「これは別のセクションだ」という情報を無言で伝えている。
NN/gは特にフォーム（入力欄）デザインでこの原理が重要だと強調する。ラベルと入力欄の間隔がフィールドグループ間の間隔と似ていると、ユーザーはどのラベルがどの入力欄に属するのか混乱する。逆にグループ間の余白をグループ内の余白より明確に大きく取れば、複雑な作業でも認知負荷を減らせる。
実際のUI事例に見る余白の効果
Appleの製品詳細ページは余白を積極的に活用する代表例だ。1画面に1〜2個の核心メッセージだけを配置し、残りは広い余白で埋める。これは単にミニマルな美感のためではなく、ユーザーがスクロールしながら一つのメッセージにだけ視線を集中するよう誘導し、外在的認知負荷を最小化する戦略と見ることができる。
Mediumのような記事レイアウトは本文カラムの幅を意図的に狭く制限する。これは先に見た行長研究と正確に一致する設計で、広いモニターでも左右に十分な余白を残し、視線が行末で迷わないようにする。
一方、情報を詰め込みすぎたランディングページ（割引バナー、CTAボタン、ポップアップが同時に露出するECページなど）は近接の原理が崩れた代表例だ。無関係な要素が似たような間隔で並んでいると、ユーザーはどの情報が重要か自分で判断しなければならず、その判断過程自体が追加の認知負荷になる。
モバイルアプリの入力フォームも余白設計がユーザビリティに直結する領域だ。ラベルと入力欄の間隔が狭く、フィールド間の余白が一定でないと、ユーザーは誤って違うフィールドをタップしたり必須項目を見落としたりする。逆にフィールドグループごとに余白を階層化すれば（グループ内は狭く、グループ間は広く）、近接の原理に従って自然に情報が整理されて見える。
実務チェックリスト
- 行の長さ：本文テキストは1行45〜75文字（日本語基準で約25〜35文字）程度を維持する。広い画面ではカラム幅を制限するか左右の余白を増やす。
- 行間（line-height）：本文はフォントサイズの1.4〜1.8倍程度を基本値として検討する。行間が狭いと行と行の間の余白が不足し、次の行を見つけにくくなる。
- 段落間隔：段落と段落の間には行間より明確に大きい余白を置く。段落内の行間と段落間の間隔が似ていると近接の原理が崩れ、文章が一つの塊に見える。
- グループ間余白の階層：関連する要素（ラベル＋入力欄、見出し＋説明）は近く、無関係なセクションは明確に遠く配置する。余白の差がそのまま情報構造のシグナルになる。
- 画面あたりの情報量：1画面（またはスクロール1区間）に収める核心メッセージを最小化する。同時に処理すべき情報が多いほど外在的認知負荷が大きくなる。
- 余白を空白の無駄と見ない：余白を減らして情報をもっと詰め込みたい誘惑に駆られたら、それがコンテンツ理解を助けるのか、単に密度を高めるだけなのかを区別する。
誇張された主張はふるいにかける
インターネット上には「余白を増やすと理解度が何%p上昇する」という具体的な数値を掲げる記事が多い。しかし今回の調査では、そうした定量的な因果関係を直接証明する信頼できる一次研究は確認できなかった。一方、行の長さと読書速度・離脱率の関係、認知負荷理論の作業記憶の制約、ゲシュタルトの近接の原理は、複数の独立した出典から一貫して裏付けられていた。余白を設計する際は「余白＝無条件に良い」という単純な公式より、余白が実際にどんな認知的負担を減らしているのかを具体的に検討する姿勢がより有用だ。