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

デザインの基本
  • デザインは余白が大事って聞くけどどんな効果があるの?
  • スカスカになっちゃったりスペースが無駄にならない?
  • 余白を効果的に使ったデザインのやり方を知りたい

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

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

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

  • 伝えたいことが目立つ
  • 情報を整理してくれる
  • 文章が読みやすい
  • 高級感や洗練さを演出できる
  • ダサいデザインから脱却できる

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

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

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

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

デザインの余白の効果

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

  1. 伝えたいことが目立つ
  2. 情報を整理してくれる
  3. 文章が読みやすい
  4. 高級感や洗練さを演出できる
  5. ダサいデザインから脱却できる

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

伝えたいことが目立つ

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

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

極端に言うと『ウォーリーをさがせ!』でウォーリーが、群衆に紛れて身を隠し目立たなくしてるのと逆です。
 
大見出し1
 
メインの要素を引き立てるために余白が存在するんですね。

情報を整理してくれる

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

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

もし情報量の多い雑誌に余白がなくぎゅうぎゅうだったら、最初から読む気を失くしてしまうはずです。
 
大見出し1
 
余白があることで内容の理解を助けてくれます。

文章が読みやすい

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

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

  • 文字同士の間隔
  • 行間
  • 書体
  • サイズ
  • 太さ

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

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

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

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

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

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

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

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

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

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

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

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

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

むしろデザインが苦手な人こそ余白を意識するだけで、簡単に見栄えが良くなります。

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

具体的な余白の作り方

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

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

  1. メインの要素周辺を空ける
  2. 罫線の代わりに余白を使う
  3. 文字を調節する
  4. ぼかしや透過を使う
  5. 必要最低限の要素を使う

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

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

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

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

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

ちなみにタイトルは小さい字でも大丈夫です。
余白のおかげで目立つためタイトルだと認識できますよね。
 
大見出し1
 
余白にポツンと文字があるとつい読みたくなりませんか?

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

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

デザイン全体で見ると、罫線より余白の方がスッキリして見えます。
 
大見出し1
 
もし罫線が多いと全体的に黒っぽくなってしまうことがあります。

集中してデザインを間近で見ていると気づきづらいので、少し顔から離してデザインを見てみましょう。
 
大見出し1
 
そうするとなんとなく「黒っぽい」「白っぽい」というのがわかると思います。

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

文字を調節する

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

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

  • 文字の間隔
  • 行間
  • 大きさや太さ
  • 読みやすい書体を使う
  • 漢字の配分を多くしない

文字の間隔

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

行間

基本的には文字サイズの50~75%程度を基準にします。
 
大見出し1
 

大きさや太さ

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

「目立たせる=余白を使って視線を集める」に意識を変えてみましょう。

読みやすい書体

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

見出しにはゴシック体や太め明朝体。
 
大見出し1
 
本文には明朝体、細めゴシック体です。
 
大見出し1
 

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

漢字の配分

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

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

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

ぼかしや透過を作る

 
大見出し1
 

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

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

ぼかしや透過で白くします。
 
大見出し1
 

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

同じくべた塗りのデザインは堅苦しい印象を与えてしまうこともあるので注意です。
 
大見出し1
 
たとえ写真やべた塗りだったとしても軽さをだしてあげましょう。

必要最低限の要素を使う

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

  • 大きな画像→小さい画像
  • 複数のイラスト素材→1~2個
  • カラフルな色使い→1~2色
  • なくてもいい罫線→余白で区切る

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

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

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

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

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

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

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

デザインの基本4原則とは「見やすく伝わるデザイン」にするための基本的ルールです。
しかもデザインが苦手な人にも理解しやすいとても単純な内容です。

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

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

まとめ

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

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

けっきょく、よはく。余白を活かしたデザインレイアウトの本

 
他の本より良い例と悪い例の比較が多く記載されてるので、デザインの改善点がよくわかります。
 
大見出し1
 
大見出し1
 
自分のデザインがダサかった原因がよくわかる本でした。

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

今回はここまでです。