余白とはなにか。デザインが上達する６つのTips

TL;DR

余白とはなにか、漠然としていたので、今回は余白の種類や使い方を少しでもマスターするために参考になる知識をまとめました。

余白（margin）とはタイポグラフィやレイアウトにおいて何も書かれていない空間、もしくは何も配置されていない空白部分のことをいいます。一見何も存在しない真っ白のスペースのようでありながら、意図的に配置されていることもあります。だからといって白である必要はありません。

つまり、余白とは「一見何もなさそうだけど ○○」といったような感じです。例えば…

西洋画に余白を使った絵は少ないですが、雪舟のような水墨画では「間」や「静かさ」を演出するなどの余白の使われ方によって、しみじみとした余情を感じることができます。

雑誌などの紙面では小さなテキストを広い余白に配置し存在感を出したり、視線の滞在時間をコントロールするなどの活用方法があります。

コメディアンは「間」という余白を使って観客を熱狂させます。スピーチの前に沈黙という余白を作ることによって、観客を静かにさせるような手法もあります。交渉相手に沈黙を使って主導権を握る人もいます。

Web サイトやポスターなどにおいては、何かに注視させたいときやキービジュアルを引き立たせたいときに余白を活用します。

このようにデザインだけでなく生活のいたるところに余白は存在します。余白は一見目立たないようでいて、見る人をナチュラルにコントロールする重要な要素なのです。

文字・画像・ボタンなどが配置されていない余白部分をホワイトスペースといいます。こちらは画像・アイコン周辺の余白に関するビジュアルホワイトスペース、ノド余白のレイアウトスペースに関する基礎知識と、それがなぜ必要なのかが書かれてあります。

ゲシュタルトとは

全体性を持ったまとまりのある構造ゲシュタルト心理学 - Wikipedia

とのことですが、この中に記載してあるプレグナンツの法則に

と書いてあります。逆をいえば離れていたり（余白がある）、異なっていたりするとグループとして認識されにくいということです。

距離が近いオブジェクトや似ているものを一つのグループとして認知する性質をゲシュタルトの法則といいます。

ブログやサイトリニューアルを考えるときに一番最初に思い浮かぶサイトの横幅と余白。ユーザーの使っているモニターの解像度を参考にするか、美しく収まりのよい対比を採用するか。サイト横幅に最適な値はあるのか。

以下の記事を読んで「デザインは 8 の倍数でつくることができる」という仮説をもとに、物は試しということで、サイトをリニューアルしたときは横幅は 1280px、余白は 16px を採用。画像やアイキャッチなどの要素は黄金比で統一すると収まりのよいレイアウトに。

ウィリアム・モリスが提唱した冊子などに使われる美しいマージンの比率について書かれてあります。パンフレットやチラシ作成時に。

画面を三分割し、分割したときにできる基準線を基準として、要素を分けたりアクセントを境界線にくるように配置するレイアウト法です。横長の紙面の場合は横に分割し、縦長の場合は縦に分割することが多いようです。簡単に綺麗な構図を作成できるので使いやすいです。

アクティブ・ホワイトスペースとは視線誘導するためとか意図的に作ったスペースで強調のために配置し、パッシブ・ホワイトスペースは行間など元から定められているスペースで要素周辺に配置します。

MORE SKILL UP!