移行中の知識
余白
Whitespace
定義
余白（whitespace）とは、文字、画像、UI部品など主要な要素が占有していない空間を、layout上のspacingや構成関係として扱う概念です。背景色が白である必要はありません。要素の分離、まとまり、焦点、リズム、均衡などに関わり、単なる「余った空間」ではありません。figureとgroundの関係から空いた領域自体のshapeを読むnegative spaceとは重なる場面がありますが、すべての文脈で同義ではありません。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
長い設定フォーム
フォームのセクション間隔
見るポイント
同じグループ内のラベルと入力欄は近く、別グループの間にはより大きな余白を置き、どこまでが一まとまりかを距離でも示す。単一のspacing値を全階層へ繰り返さない。
responsive landing page
スマホとPCでHero周囲の余白を組み替える
見るポイント
PCの広いviewportで成立する大きな余白を比率だけでmobileへ縮小せず、見出し・説明・CTAのまとまりと画面内の可視範囲を見ながら間隔を再調整する。狭幅でも詰め込まず、広幅でも間延びさせない。
注意
誤解しやすい点
- 空いている場所は情報で埋めるべきだと考え、要素間の区切りや焦点を弱める。
- 余白を広く取ること自体を品質とみなし、関連する要素まで離してしまう。
- desktopのspacingを一定比率で縮小・拡大すればmobileやwide screenにも最適化できると考える。
- whitespaceとnegative spaceをすべての文脈で完全な同義語にする。
観察
見比べて確かめる
関連
関連する概念
出典