【簡単なのに効果的】余白のスゴイ効果とデザインに取り入れるコツをわかりやすく解説します

こういった悩みを解決します。

「余白＝何もない場所」なのでデザインとどう関係あるのかイマイチピンとこないですよね。

でもあえて余白を作るとデザイン全体に大きなメリットがあります。

漫才でいう「間」みたいなものですね。
間があるからこそボケとツッコミがさらに面白くなるという感じです。

実はこのブログのデザインも、余白を取り入れてからだいぶあか抜けたと思います。
 

 

今回はデザインでの余白の効果と実際に余白をつくる具体的な方法を解説しますね。

デザイン初心者の方にもわかりやすいように図解や具体例を用いて解説しますのでぜひご覧ください。

デザインの余白の効果

デザインであえて余白を取り入れるのは、こんな効果があるからです。

ひとつずつ見ていきましょう。

伝えたいことが目立つ

デザインでいちばん伝えたいことを目立たせてくれます。

タイトルや見せたい写真、イラストなど、その周辺に余白があると自然と視線がいくのです。
 

 

情報を整理してくれる

続いて2つ目の効果です。
文章のかたまりが並んでるレイアウトでは、余白が区切りとなって情報を整理してくれます。
 

 

内容ごとにグループ分けされていると、読む人が内容を理解しやすいですよね。

もし情報量の多い雑誌に余白がなくぎゅうぎゅうだったら、最初から読む気を失くしてしまうはずです。
 

 
余白があることで内容の理解を助けてくれます。

文章が読みやすい

文字まわりの余白を調節することで文章を読みやすくしてくれます。
 

 

文字はこれらの要素が可読性に大きく影響するからです。

さきほどの情報整理はレイアウト全体の話ですが、これは文字そのものの話です。

いくら文章のかたまりがグループごとに並んでたとしても、フォント自体がぎゅうぎゅう詰めだったら見づらいですよね。

本文の場合、太いゴシック体より細めのフォントで余白を作った方が読みやすくなります。
 

 

高級感や洗練さを演出できる

ここまでは余白の機能的な面でしたが、ここからはデザイン全体の印象についてです。

余白をコントロールすることでデザイン全体に高級感や洗練さをだすことができます。

写真や文章などの要素を最小限に抑えて、余白をたっぷりとると上品ですよね。
 

 

高級ブランドの広告を思い出してみると、商品がドアップで写ってるより、ゆとりのある商品の配置になってることが多いです。
 

 

もしイラストや文字など要素が多い場合、逆にカジュアルな雰囲気になります。

ダサいデザインから脱却できる

余白をしっかり作ることで素人っぽいデザインから脱却できます。

イマイチなデザインになる原因のひとつが、スペースいっぱいに文字や写真、イラストを配置してることです。
 

 

デザイン初心者のときは空いてるスペースに何か置かないと不安になってしまうのですが、要素が多いと圧迫感を与えてしまいます。

服装も上下柄物を着ちゃうとダサくなっちゃいますよね？
デザインも余白をあえてつくることでオシャレになります。

具体的な余白の作り方

ここまでデザインでの余白の効果を解説してきました。
ここからは実際に余白を作る具体的な方法を解説します。

やるべきことは主に以下の通りです。

ひとつずつ図を使って解説していきます。

メインの要素周辺を空ける

 
メインの要素周辺には何も置かず余白を作ります。

メインの要素とは真っ先に目が行ってほしいタイトルや主役の写真、イラストなどです。
 

 

周りの余白がタイトルを引き立ててくれますね。

ちなみにタイトルは小さい字でも大丈夫です。
余白のおかげで目立つためタイトルだと認識できますよね。
 

 
余白にポツンと文字があるとつい読みたくなりませんか？

罫線の代わりに余白を使う

 
要素を区切りたい場合、罫線の代わりに余白を使うのをおすすめします。

デザイン全体で見ると、罫線より余白の方がスッキリして見えます。
 

 
もし罫線が多いと全体的に黒っぽくなってしまうことがあります。

集中してデザインを間近で見ていると気づきづらいので、少し顔から離してデザインを見てみましょう。
 

 
そうするとなんとなく「黒っぽい」「白っぽい」というのがわかると思います。

このように余白でも要素を区分けできるので必ずしも罫線にこだわる必要はないです。

文字を調節する

 
文字の書体やサイズにまで気を配ると余白を作りだせます。

具体的には以下の調節をします。

文字の間隔

文字同士の間は空け過ぎても詰め過ぎても読みづらいので注意です。
ただ装飾性を高めたい場合はゆったり空けることもあります。
 

 

行間

基本的には文字サイズの50～75％程度を基準にします。
 

 

大きさや太さ

目立たせたい気持ちから、大きく太いフォントを使うと読みづらくなることがあります。
小さいフォントでも余白をとればおのずと視線がいきます。
 

 

読みやすい書体

書体にも向き不向きがあります。

見出しにはゴシック体や太め明朝体。
 

 
本文には明朝体、細めゴシック体です。
 

 

長文に太めゴシック体を使ってしまうと可読性が下がるので注意です。
 

 

漢字の配分

少し細かい話ですが、文章で漢字の配分が多いと余白が減り、重苦しい感じを与えます。
読者が読む気をなくしてしまうので、特に文字量の多いページは注意です。
 

 

なおフォントについては知っておくほどデザインの印象を変えられます。
伝わる文字レイアウトができるこちらの記事もご覧ください。

伝わる文字の配置とは？レイアウト6つのコツをわかりやすく解説します

2021年9月24日

ぼかしや透過を作る

フォントの話が少し細かかったですが、ここからは単純です。

写真やべた塗り（全面に色がついてる）デザインなど、白色の部分がなかったとしても余白を作ることは可能です。

ぼかしや透過で白くします。
 

 

暗すぎる写真は圧迫感や威圧感を与えてしまうので注意です。
（もちろん狙いならOKですが）

同じくべた塗りのデザインは堅苦しい印象を与えてしまうこともあるので注意です。
 

 
たとえ写真やべた塗りだったとしても軽さをだしてあげましょう。

必要最低限の要素を使う

 
もしデザインに上品さや洗練さを演出したければ、最小限の要素だけを配置して余白を多めに作ります。
 

 

デザイン初心者のときは「要素を減らすとさびしくなっちゃうかも？」と不安になるかもしれませんが、むしろ本当に伝えたいことが目立ちます。

逆に要素を詰め込んじゃうとにぎやか過ぎて、結局何を伝えたいデザインなのかわからなくなってしまいます。

余白による洗練さは、ヒョウ柄のシャツより「白Ｔシャツ＆ジーパン」でさわやかさをだすのと似てるかもしれません。

余白を効果的にするための注意点

ここまで余白の効果と実際の使い方を解説してきました。
最後に余白をさらに効果的にするための注意点を簡単に説明します。

それはデザインの基本4原則を意識してデザインすることです。

【超単純】デザインの基本4原則をわかりやすく図解します【センス以前に大事なこと】

2021年7月25日

センス不要でデザインの見栄えが良くなるので知っておいて損はないです。

当然ながら余白だけを意識しても良いデザインは完成しないです。
デザインの基本的なルールとともに余白を使いこなしましょう。

まとめ

今回はデザインでの余白の効果と使い方の解説でした。

最後に余白を知るうえで持ってないと損する本を紹介します。
 

けっきょく、よはく。余白を活かしたデザインレイアウトの本
 
他の本より良い例と悪い例の比較が多く記載されてるので、デザインの改善点がよくわかります。
 

 

 
自分のデザインがダサかった原因がよくわかる本でした。

何度も重版になってる人気の本なので知ってる人も多いかもしれませんが、持ってない人はぜひチェックしてくださいね。
Amazonで中身のサンプルがたくさん見れるのでぜひご覧ください。

今回はここまでです。