余白で変わる印象

こんにちは、つしまです。今週は名刺やバス広告のデザイン案を作成しました。

限られたスペースでマージンをどれくらい取るか、行と行の間隔はどれくらいが読みやすいか…余白で悩むことが多かったので、今回は余白が与えるイメージについてまとめていきたいと思います。

余白の持つ効果

要素の強調

要素の周りにしっかりと余白を設けると、余白が引き立て役となり、情報を目立たせることができます。

情報を目立たせようと思ったとき、テキストの色を変えたり、サイズを大きくしたり、太くしたりします。しかし、情報を目立たせる手段は「要素の主張を強くする」ことだけではありません。

例えば、横長のバス広告のデザインを作る際に「この要素を目立たせたい、でもこの要素もはっきり見えるようにしたい」と、色を多用した結果、目立たせたいところがわからないデザインになってしまいました。

こうした状況で要素を目立たせたい場合、要素の周りに余白を取ることが効果的です。情報を足して「強める」だけでなく、周りに余白をしっかり作り「引き算」をすることが大事だったのだなと学びました。

情報のグルーピング

デザインの４原則に「近接」がありますが、情報の階層やグループを正しく認識してもらうためにも、余白は重要な役割を果たします。

• 関連度の高い情報ほど余白を狭く＝要素と要素を近づける
• 関連度の低い情報ほど余白を広く＝要素と要素を遠ざける

余白を上手に使えば、線で区切ったり、枠で囲んでまとまりを表現せずとも、情報をグループ化することができます。装飾が減るので、より伝わりやすくスッキリとしたデザインに近づきます。

正しい関係性を余白で表現できるように、書かれている文章をきちんと読んだり、写真とテキストの関係性を把握した上でデザインするよう心がけたいです。

可読性を上げる

行間やパディングを広げると読みやすくなります。行間が狭いと、自分が今どの行を読んでいるのか把握しずらくなりませんか？文章全体が黒色の大きな長方形に見え、圧迫感を感じてしまいます。余白を設けるだけで見づらさが大きく改善され、読みやすい文章になります。

余白の広さで印象が変わる

https://online.actus-interior.com/ 

こちらのようなきれいめのセールバナーは、余白をたっぷり設けたデザインで、ゆったりと落ち着いた印象を受けます。高級ブランドなどの広告を見てみると、余白が多く、上品なイメージや、大人っぽさを感じさせるデザインになっています。

逆に余白が狭いと、にぎやか・力強い・インパクトのある印象になります。

https://www.family.co.jp/campaign/spot/2309_famichiki-arekore_cp_AJh10DrXAV.html 

例えば、このバナーはタイトルが横幅いっぱいに配置され、余白の少ないデザインになっています。勢いやスピード感、活気な印象を受けます。
スーパーのチラシなども余白がほとんどなく、商品写真とインパクトのある文字で埋め尽くされているものが多いです。それによりにぎやかなイメージや、インパクトを感じるデザインとなっています。

作りたいデザインのイメージに合わせて余白を使い分けるようにしたいです。

余白を意識するポイント

余白の持つ役割を再確認したところで、次に実際に意識するべき部分についてまとめます。今回は主な2つのポイントについて書いていきます。

テキストの字間・行間

一つ目のポイントは「テキストの文字間・行間」です。

字間は人が話すスピードに例えられることもあり、字間が狭いと早口な、広いとゆったりとした雰囲気に感じられます。しかし、広すぎても間がスカスカしてしまい、一文字一文字がバラバラに見え、文章のまとまりがわかりづらく読みにくくなってしまうので注意が必要です。

要素と要素の間

二つ目のポイントは「要素と要素の間」です。

具体的には、外枠とコンテンツの間の余白、見出しと本文の余白・画像とテキスト間の余白などです。

最後に

今回はデザインにおける余白の役割と効果的な使い方についてまとめました。

とりあえず「わかりやすく、大きく入れよう！」と余白を少なくデザインしてしまうことが多いです。

色々な装飾を加える前に「余白を調整してみる」という工程を足すように心がけたいです。デザインの印象といえば、どうしても色味やフォントの種類に注目しがちですが、余白によっても印象が大きく変わることを忘れないようにしたいです。