#312
心理学・認知バイアス
#312よはく
余白 (Negative Space)
別名・表記:Negative SpaceWhite SpaceWhitespaceホワイトスペース
UIXHERO Definition
「何もない空間」。情報の呼吸スペース。
概要
「デザインとは、余白を操作することである」と言われるほど重要な要素。 音楽における「休符」のようなもので、何もないことによって、ある部分(Positive Space)の存在を強調する。
UXでの活用
- グルーピング: 関連する要素同士は近づけ、関係ない要素とは離す(近接の法則)。線で区切るよりも、余白で区切るほうが洗練されて見える。
- 可読性: 適切な行間や段落間隔を設けることで、長文でもストレスなく読めるようになる。
- 視線誘導: 大きな余白の中に置かれた小さな要素は、強烈なインパクトを持つ(アップルのデザインなど)。
💡 使いどころ
情報を整理し、読みやすくしたい時。高級感や洗練された印象を与えたい時。特定の要素(フォーカルポイント)を目立たせたい時。
⚠️ 注意点・誤用
余白を「無駄なスペース」と考えて詰め込みすぎると、情報は伝わりにくくなる(Cognitive Loadの増大)。逆に、意味のない余白が大きすぎると、関連性が失われる(ゲシュタルト原則に基づく関連性の喪失)。
具体例
- 行間(Line Height):テキストの読みやすさに直結するミクロな余白
- セクション間のマージン:情報の区切りを示すマクロな余白
出典・参考文献:
- Ware, C. (2013). Information Visualization: Perception for Design (3rd ed.). Morgan Kaufmann.
- Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design (Revised and Updated). Rockport Publishers.
- Gestalt theory sources summarized in: Koffka, K. (1935). Principles of Gestalt Psychology. Harcourt, Brace & Company.