#276
心理学・認知バイアス
#276ほわいとすぺーす
ホワイトスペース (White Space)
別名・表記:White SpaceNegative Space余白ネガティブスペース
UIXHERO Definition
「余白は、デザインの一部」。情報を整理し、視線を誘導し、息抜きを与えるための能動的なスペース。
概要
「ネガティブスペース（Negative Space）」とも呼ばれる。 マクロホワイトスペース（大きなレイアウト上の余白）と、ミクロホワイトスペース（文字間や行間などの小さな余白）に分類される。 余白は「空きスペース」ではなく、「要素同士の関係性を定義する見えない線」として機能する。 人間の知覚（グルーピング・視線移動・負荷軽減）に直接作用するため、UXの根幹に関わる。
UXでの活用
- グループ化: 関連する要素の余白を狭くし、関連しない要素との余白を広げることで、境界線を使わずに情報のまとまりを表現する（近接の法則）。
- 視線誘導: 重要な要素（CTAボタンなど）の周りに十分な余白を取ることで、他の要素からの干渉を防ぎ、自然と視線が集まるようにする。
- 可読性の向上: 行間（line-height）や段落間を適切に空けることで、ユーザーが文章を読む際の負担（アイフローの阻害）を軽減する。
💡 使いどころ
情報が詰まっていて読みにくい時。高級感や洗練された印象を与えたい時。特定の要素（CTAボタンなど）を目立たせたい時。
⚠️ 注意点・誤用
クライアントや上司に「スカスカだ」「スペースがもったいない」と言われることがあるが、情報の詰め込みすぎは逆効果（認知的負荷の増大）であることを説明する必要がある。
具体例
- Appleのウェブサイト（広大な余白が製品を引き立てる）
- 雑誌のレイアウト（文字を詰め込まず、写真と余白で世界観を作る）
出典・参考文献:
- Edward Tufte, The Visual Display of Quantitative Information
- Nielsen Norman Group, Whitespace and Visual Hierarchy
- Gestalt Psychology (Law of Proximity)