自分の作ったデザインが野暮ったい。何だかイケてない。
そんな風に思うことはありませんか？
その原因の一つに「余白」のとり方が関係しています。
ただ適当に余白をつけると逆効果になることも。
ということで今日は実際のデザイン事例も交えながら、余白のとり方をご紹介したいと思います。
デザインの余白とは？
デザインにおける余白には様々な役割があります。
グループ分け、時間や心理的な表現など。
余白を広くとるか、せまくとるかで与える印象は大きく異なり、この余白を意図的に作り出すことで、デザインの幅が大きく広がります。
余白の効果と3つの具体的手法
余白を上手にとることで、見る人の気持ちを落ち着かせたり、垢抜けたデザインに仕上げることができます。
また、余白のとり方はデザインテイスト（POP/高級感）などでも変わってきます。
では具体的にどのように余白をとればいいのかというところをご紹介したいと思います。
グルーピング
次の画像のように要素がタイル状に並んでいるデザインの場合。
上下の余白より左右の余白の方が狭いので、視線は左から右へ流れます。
デザインする時は同じカテゴリの情報同士の余白は狭く、異なるカテゴリの情報は広く余白をとってみましょう。
時間
余白では時間も表現することができます。
次の写真をご覧ください。
人の視線が向いている余白では未来、その逆は過去を表現できます。
学習塾などの広告ではよく使われるデザインパターンです。遠くを見つめている学生の写真を使って、目線の先に「合格率90%」のようなタイトルをドカンと配置したりします。
補足ですが、余白だけではなく、色でも時間を表現できたりします。
上の画像のように、黄色などの明るい色は未来、暗く重い色は過去を表現できます。
カーニング
文字同士の余白のことをカーニングと呼びます。
Illustratorなどで文字を打ち込むと隣り合う文字同士に必ず不自然な余白が生まれます。
この余白を調整して見た目をよくする方法です。
特にかな文字と数字の組み合わせの場合、明らかに不自然な余白がうまれます。
細かいことですが、このような地味な作業をきっちりすることで、最終的なデザインのクオリティに大きく影響してきます。
デザインテイストによる余白のとり方
次にデザインテイストによる余白のとり方をパッケージデザインを例にご紹介したいと思います。
森永の有名なチョコDARS。
同じDARSでもこちらは余白をたくさん使った高級感のあるパッケージデザイン。
こちらはPOPなイメージで余白が少なめなパッケージデザイン。
こうやって同じカテゴリで別パターンのデザインを比べてみると、デザインって面白さや不思議さを感じることができます。
余白がないデザイン
極端な例ですがスーパーのチラシを例にあげてみます。
余白がないデザインは窮屈で息苦しい印象を見る人にあたえます。
ただスーパーのチラシのように商品を一つでも多くPRしたいという目的の場合、商品をできる限り多く掲載しなければなりません。
デザイナー泣かせですが、小売業では雑多なレイアウトになるのは仕方ない部分があります。
逆に伝える情報が少ないのに、無駄に余白を詰めたデザインは素人感があり、センスを疑われてしまうこともあるのでご注意を。
余白を多くとったデザイン
ポスター
次にこちらのカレーイベントのポスター。
右上のタイトルから始まり、白皿→黒皿→左下のテキストへの導線設計がされています。
2つのお皿の間の余白は狭く、文字周りの余白を広くとることで、項目毎の区切りがはっきりします。
イベント名、日付、カレーのビジュアルの3点をはっきり打ち出し、それ以外の説明は控えめに記載しているので、パッと見た時に情報が抵抗なく入り込んできます。
このように情報の区切りの役割で余白をとることで、囲いなどの装飾がなくても洗練された伝わるデザインに仕上がります。
パッケージ
最近はこのようなスタイリッシュなロゴやパッケージデザインをよく見かけます。
こちらの例もみそ店らしからぬ、おしゃれなデザイン。
ジャケ買いしそうですねw
白の余白を十分にとり、店名、シンボルが一目で飛び込んできます。
ごちゃごちゃしそうだけど、フォントや文字の太さをかえることで、重くないデザインに仕上がっています。
最後に
余白の使い方次第で、デザインに素人ぽっさが出たり、逆に洗練された印象をあたえることもできます。
また、今日ご紹介したように、余計な装飾をしなくてもデザインにおける区切りも表現できたりします。
これまで余白を意識してこなかった人はぜひ今日から余白を意識したデザインにとりくんでみてくださいね。
でわ。
コメント