余白の使い方をマスターしよう
こんにちは。毎日雨ばっかりですね。。
夏はどこにいってしまったのでしょうか。
今日はデザイン制作をするときに何気なく意識している「余白」についてご紹介します。
余白とは?
その名の通り、
「字や絵などが書いてある紙面で、何も記されないで白く残っている部分。」です。
白く残っている部分(ホワイトスペース)を適切に配置することがデザイン制作をする中で大きなポイントとなります。
街中を歩いていると、ありとあらゆるところにたくさんの情報があります。
電車の中吊り、街中のポスター、スマホの画面など・・
私たちは日々たくさんの情報量の中で生きています。
忙しい毎日の中で目にすることが多いので、ちらっと見たりざっと読み流したりすることが大半です。
1枚のポスターでレイアウトがぎっちり詰まってしまっているとそれだけで、読む気が失せてしまいます。
そこで、デザイナーは構成の中で何も配置されていない領域、つまりは「ホワイトスペース=余白」をうまくバランス良く使うことで、読み手を飽きさせないで最後まで見てもらい、内容を理解してもらってからコンバージョンに至るまでの設計をした上でデザインすることがとても重要だと私は考えます。
つまり、余白を使うことで、「人にちゃんと読んでもらえる」「人に伝わる」ようなデザインをすることがポイントとなっています。
余白の種類
①見せる「余白」について
一言に「余白」といっても色々あります。
特にデザインでメジャーに使われる余白とは、Webサイトやポスターでよくある注目させたい箇所やキービジュアルを目立たせたいときに使う「余白」なのではないでしょうか。
例えばこちらのポスター、
かなり大胆に余白をとっています。
余白をうまく使って全体をすっきりと見せていますが、強調したい部分のキービジュアル(ここではお花と2のナンバー)がまず一番に目に入ってくることで、「なんだろう?かっこいいな」と興味をひくようなポスターになっています。
要素のグルーピングもしっかりされていて、とても見やすいレイアウトです。
②バランス良く見せる「余白」について
次に、ポスターやチラシ、フライヤーやPPT(パワーポイント)で資料を作っていて細かく気にすることが「余白のバランス」です。
例えば、最近作ったPPTの資料をみてください。
これはとある資料の中の1ページです。
タイトルがあって、オブジェクトの中に説明書きがあって、それぞれ写真が配置されています。
普通の、なんともないページに見えるのですが、レイアウトとしてはきれいにバランスが取れていますね。実際、どうやって作られているかご説明します。
②バランス良い余白はどこを気にすればよいのか?
では、こちらの赤い部分を見てみてください。
上下の余白は見た目、同じになっています。
上部分のテキスト開始位置と、下部分のオブジェクトが終了部分になります。
続けて、左右の余白バランス、
これもそうですね。
左右のオブジェクトの位置やテキスト開始位置は合わせています。
また、オブジェクト間の赤部分も見てみてください。
こちらの部分も同じになっています。
もっと細かい話をしますと、オブジェクト内のテキスト開始位置なども全てきちっと合わせています。
実際、PowerPointを作るときは下記のようにグリッドとオブジェクトを細かくひいて制作しています。
これは意外と誰も教えてくれないものではないでしょうか。
私も作っていく中で、習得していったものでした。
この余白バランスについてはもちろんAIやPSDで作るときも引いて、確認しながらやることがとても大切なのです。
※ガイドの引き方はこちらで説明しています。ご参照ください^^↓
PPTの基礎〜グリッドとガイドについて - k_design’s diary
もちろん、ポスターやチラシなどで、カチっとしたものを作るのではなく①のように「見せるデザイン」の場合は余白はそんなに気にしなくていいときもあります。
ですが、配布用の資料や公のポスターなど体裁をしっかりしたものを作成するときはこの余白を意識すれば、誰でもきれいな資料を作ることが出来るのです。
良かったら街中の広告など注目してみてくださいね。