デザインの「余白」には何が詰まっているか。

デザインと余白

余白は無いほうが良い?

余白恐怖症

デザインする上で大変に悩まされるのが「余白(ホワイトスペース)」です。

余白をなくして、もっと情報を入れたいとクライアントからよく要望がきます。

クライアントは絶対なので、とりあえず要望通りに作りはしますが…
修正を重ねていくと最終的には情報量を削ぎ落とし、適度な余白を保ったデザインに落ち着きます。

デザイナー・クライアントには「余白恐怖症」という病気があります。
余白があると、どことなく寂しい。
もっと言いたいことをつぎ込めるんじゃないか。
これじゃ伝わらないんじゃないか。
と、半ば強迫観念に圧されるように余白を埋めてしまう病気です。

この「余白恐怖症」をぐっとこらえて、あえてデザイン画面に余白を作るとギチギチの画面よりもよっぽどスッキリ見えます。

余白はとっても重要な要素

実は余白はキャッチコピーやメインビジュアルと同じくらい重要な要素なのです。
優れたデザインは余白を計算に入れて画面を構築していきます。

余白は一見すると「何もない」ように見えるのですが、デザインを構成する上でとても重要なことがぎっしりと詰まっています。
ただ「何もない」ように見えるために、その重要性に気づきにくいんですよね。

余白には何が詰まっているのか。今回はそれを明らかにしていきたいと思います。

「余白」には何が詰まっている?

先に結論から言ってしまうと、一般的に余白の中には下記の役割・機能が詰まっています。

  • 可読性
  • 情報のグルーピング機能
  • 図を引き立たせる地としての機能
  • 余韻
  • 操作性の確保(Webデザイン)

可読性

可読性を確保のために、あえて余白を設けることは賢い選択です。
ギチギチに詰まった画面は紙であれ、Webページであれ、とても見にくくなります。

とくに文字組みでの余白の確保は大切です。
とてもきれいなフォントであっても、行間・字間等の余白のとり方一つで、読みにくくなることがあります。

情報のグルーピング機能

ゲシュタルトの法則、という言葉をご存知でしょうか。

人は似ているものをグループ化したり、まとまった形を見つけようとする傾向を持つ、という法則です。

適切な余白は、ゲシュタルトの法則に則って、見る人に”塊”を認識させることができます。
これを利用して情報をブロックにまとめて、紙面を見やすくするのです。

図を引き立たせる地

画面の中には主役がいます。
イラストであれば、一番書きたい部分であったり、ポスターであれば、メインビジュアルであったり。

その主役を引き立たせるために、地としてあえて余白をつくるという手法があります。

画面がゴチャってしまうと、脇役と主役の違いがなくなってしまうため、こういった余白を作ることが必要になるのです。

余韻

適切な余白を画面の中につくると、何とも言えない雰囲気を与えることができます。

一見して何もない空間なのに、物語を感じてしまうこともあるくらいに。

余白は画面の主役・主張の余韻としても使えるのです。

ただ余白を余韻として使うことは、デザイン上級者向けのテクニックです。
あまりにも余白を空けすぎると、物足りなさを感じさせたり、画面から動きがなくなってしまうことがあります。この点には注意しましょう。

操作性の確保(Webデザイン)

Webデザインやアプリデザインでは、とくにボタン周りで余白を十分にとらなければなりません。

ギチギチに詰まった画面では、ユーザーは針の穴を通すような操作を強いられるためです。
そのせいでECサイトで欲しくもない商品を買ってしまっては、たまったものではありませね。

適切な余白は良いユーザー体験をもたらすのです。


余白の中には何が詰まっているのか。
なんとなく分かってきたと思います。

「余白を使いこなせるか」はデザイナーの登竜門

できるデザイナーはみんな余白の使い方が絶妙です。

できるデザイナーはただ”かっこいいから”とか”雰囲気出るから”とか単純な見た目のために、余白を作っているのではありません。
きちんと主役・情報・図と地…を計算して、あえて余白を入れているのです。

ポスターやWebデザインを作っている時に、読みにくさ・見づらさを感じたならば、余白を意識してみましょう。