余白を「作ること」とは？余白の効果について

こんにちは。
デザイナーのTAMです

皆さんはデザインをする上で余白についてどのくらい意識していますか？
クリエイティブはもちろんのこと、印刷物やウェブなど、どのような媒体であっても見ている人の関心を引き付けるためには、シンプルで見やすいデザインを追求していきたいですよね。

では、どうすればそんな理想的なデザインが作れるようになるのか？？
読みやすく情報が整理され、シュッとしているデザイン、
そこに共通していることの一つとしてあげられることは「余白」です。

しかし、いざ余白について説明するとなると感覚的に行っている部分もあり、スラスラと言語化することは難しいと感じる方も多いのではないでしょうか。

余白はデザインをする上で重要な要素の一つなので、
いくつか余白の効果の例を踏まえ考えみたいと思います。

▼ 目次

そもそも「余白」とは？
余白がもたらす効果
まとめ

そもそも「余白」とは？

余白(ホワイトスペース）とは読んで字の如く「何もない空白の部分」のことを指しますが、必ずしも白いスペースである必要はありません。

デザイン的な解釈では「レイアウトの中で要素が何も配置されていない部分」と捉えられます。

余白がもたらす効果

1.「情報のグループ化」

同じ重要度の要素をレイアウトする際、枠線で区画を設けたり見出しタイトルの色を変えるなどの方法がありますが、余白を上手く使うことでグループ分けを行うことができます。
以下の作例を見比べてみましょう。

NGの作例では個々の要素の余白がそれぞれ同じくらいの狭さで上下どちらの写真の説明文なのかが分かりにくく、左右のグループの認識もできません。
OKの作例では、それぞれの余白を調整し、左右のグループ間の余白もしっかり取っているため関係性がはっきり理解できるようになっています。

それぞれの要素の関係性によって余白の大きさを調整すると、より情報が明確になります。
1:写真と説明文の余白は最も狭い余白に設定します。
2:個々のパンの間の余白は１よりも広く、適度な余白に。
3:大枠のブロックタイトルとコンテンツの間の余白は2よりも広く、適度な余白に。
4:グループを分ける余白は一番広く設定します。広ければ広いほど別のグループだと認識しやすくなります。
このように要素を離す近づけるということをすることで自然にそれぞれのグループを認識させることができます。