UIXHERO
#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.

関連する解説記事

関連する記事詳細が見つかりませんでした。

関連する原則

作成: 2026年2月12日
更新: 2026年2月21日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: