デザインのコツ

余白をデザインする。余白のバランスを取る簡単な方法を解説

デザインをしていると、なにかデザインが窮屈な感じがするとか

落ち着いた、お洒落な感じにしたいのに
なんかゴチャゴチャしていて、もっとスッキリさせたい。

または、目立たせたいところがあんまり目立ってないなど。

そんな経験はデザイナーなら誰もがあるかと思います。

その原因はいろいろあるかと思いますが、
一つの要因として「余白」の使い方がうまくいってないことが挙げられます。

「余白」はレイアウトではとても重要な要素です。

とは言え、ただ余白を取っただけだと、ただの空白にしか見えません。

余白の使い方でデザインは良くも悪くもガラッと変わります。

今回は「余白」の使い方とバランスの取り方の解説をします。

余白ってなに?

余白とは何も配置していない空白の部分のことをいいます。

紙面に文字や写真など配置して、その他余ったスペースのことです。

余ったスペースと聞くと成り行きで余ってしまったと感じますが
そうではなく、意図的に余白を意識して作り出していくのです。

 

余白の役割ってなに?

余白にはデザインする上でいろいろな効果を生み出します。

良いデザインのすべては余白がうまく使われていると言っても過言ではありません。

では余白の役割は大きく以下の4つ

  • 目立たせたい物をしっかり強調する。
  • 関連した要素を結びつける。また、関連性のないものを明確に分ける。
  • 紙面のデザインを見やすく、読みやすくする
  • 紙面に動きを出して印象を変えられる。

では一つ一つ解説していきます。

目立たせたい物をしっかり強調する。

キャッチコピーがあまり目立たない。なんてことはよくありますよね。

大きくしているのに、なんか目立たない。

そんな時は目立たせたい部分の周りにしっかりと余白をとると
ぐっと目立つようになります。

例えは下の図で赤丸が目立つのはどちらですか?

Bの方が明らかに赤丸が目立ちますね。

赤丸以外を整理して赤丸の周りに余白を大きく取りました。

他の要素との対比ができて赤丸が独立したものとして認識されます。

大きくしたり、色を変えたりすることで目立たせることも可能ですが
余白をうまく使うことで目立たせたい部分を自然に強調できます。

これを利用してキャッチコピーの周りに余白を取れば、そんなに大きな文字にしなくても自然と目立つ様になります。

関連した要素を結びつける

イメージとそれに関連したコピーなどの情報の区分けを余白を使って
分けることでデザインがより見やすく、わかりやすくなります。

例えば下のAとBではどちらが見やすく感じますか?

Aはイメージとコピーの区分けが曖昧でイメージに対してコピーがわかりにくく、
カテゴリーの大小も少しわかりにくいです。

Bは各カテゴリーを余白で区分けしているので、どのイメージのコピーかが
一目でわかります。

また、カテゴリーの大小も余白によってわかりやすくなっています。

ラインや飾りケイで区分けしなくても余白を意識するだけで
わかりやすいレイアウトになります。

紙面のデザインを見やすく、読みやすくする

紙面の外側に適度な余白を入れることで、見た印象がかなり変わります。

Aは余白を入れないデザイン。

Bは紙面の周りに余白を入れたデザイン。

一目でわかりますよね。

Aは窮屈な印象で、このレイアウトが何十ページも続くと読むのも苦痛になりそうです。

Bは余白を入れることで、ゆったりとした感じで、
上下のカテゴリー分けも一目でわかりやすく、読みやすい印象です。

これを見るだけでも余白の重要性がわかりますよね。

紙面に動きを出して印象を変えられる。

紙面に余白を意識して作ることで印象的で、スッキリしたレイアウトになります。

A,Bではどちらが印象的なレイアウトに感じますか?

Aは紙面の中を均等にレイアウトしています。賑やかな印象にはなりますが、
少し窮屈で平凡な感じがします。

Bは右上、左下に適度な余白を作ることでメリハリのあるレイアウトになっています。

余白の逃げ道を作ることで紙面に広がりができて印象的なデザインになります。

 

余白の使い方のコツ。バランスの取り方。

余白を意識したデザインを作るのにはちょっとしたコツがあります。

闇雲に余白を作ってもそれはただの空いたスペースになったり、
スカスカした印象のバランスの悪いデザインになってしまします。

やり方は四隅の2〜3箇所はしっかり抑えて他の隅を空けるやり方です。

余白があっても角にある青丸の2箇所ないし3箇所をしっかり抑えることで、安定した印象を保ちつつ、バランスの取れた印象的なデザインになります。

簡単なやり方ですが、これを意識するだけでかなり変わってきます。

デザインには重心があります。この重心を意識することで余白のあるデザインがバランスよく見えてきます。重心について書いた記事も参考までにどうぞ。

【重心】がデザインのバランスを決める!バランスの良いデザインの作り方今回はデザインの重心のお話です。 デザインに重さ・軽さがあるの? と思うかもしれませんが、あるんです。 なんとなくバラ...

おすすめの本

余白をうまく使ったレイアウトが満載。見てるだけでなるほどと思う本。余白の大切さがわかり、即実践で使えそうなテクニックが多数掲載されています。

 

まとめ

いかがだったでしょうか。

余白をうまく使うことで読みやすく、見やすいデザインになることが
わかっていただけたかと思います。

オブジェクトをどこに配置するかと同様に、どこに余白を置くか
意識するだけで、仕上がりは大きく変わると思います。

デザインは何も配置しない余白を含めてデザインなのですね。

余白のお話でした。

関連記事はこちら