余白の印象と活用法
こんにちは、フリーランスデザイナーのちふねこです。
今日は、余白を使ったわかりやすさの作り方というテーマでお話ししていきます。
これを聞いているあなたは、余白と聞いてどういう印象を受けるでしょうか?
デザインにおいて、余白って結構難しい印象ってあるんじゃないかなと思います。
でも、結構意外と、余白ってもちろん奥が深いのは確かにあるんですよ。
でも、簡単に使う方法もいくつかあって、今日はそれをご紹介したいんですけど、
例えば、余白でわかりやすくするってどういうことかというと、意外と身近で皆さん経験していると思うんですよ。
例えば、デザインじゃなくて、別の分野で文章だったり話し方とかで、
例えば、文章なら、開業が全然ない漢字だらけの文章って、もうパッと見で、わ、わ、わかりづらいってか、読むの大変そうみたいな、そういう印象ってあるじゃないですか。
逆に文章の場合は、ちゃんと適度な開業でスペースとか余白を作ってあげたり、
あとは段落分けをしっかりして、その情報がしっかり整理されてる、みたいな文章ってすごくわかりやすいじゃないですか。
あとはライティングの手法として、漢字を開くってあると思うんですけど、
要は、その漢字をひらがなにするみたいなところがコツとしてあって、それも余白を作るためのコツだったりするんですよね。
漢字よりひらがなの方が、見た目の印象として余白が多くなるじゃないですか。画数も少ないので。
なのでそういった意味で、文章にもそういう余白を取り入れることで見やすいとか、情報としてわかりやすいみたいなことが生まれていたり、
あとは話し方でも、ずっと全然間がない、マシンガントークとかされちゃうと聞いてる側も疲れちゃったり、
あと情報の整理が追いつかないとかあるじゃないですか。
なので話す時も適度な間があった方がわかりやすいっていうのもあると思うんですけど、
それと同じで、デザインも適度な余白、余白を使うことでよりわかりやすくなるっていうのがあるんですよね。
なので今日は余白を使ってわかりやすさを作るっていう方向で、デザインのコツを一つご紹介したいと思います。
情報の整理方法
余白を使ったわかりやすさの作り方として、今日は3ステップでご紹介していきます。
まずステップ1、情報をグルーピングする。
ステップ2、まとめる。
ステップ3、余白で区切る。
この3ステップになります。
まず1つ目のグルーピングがどういうことかというと、
バナーだったりがイメージしやすいと思うんですけど、
そのバナーに入れたい情報の関連するものとかをなるべくひとまとめにする。
どれがどれに関連するんだろうっていうのを分類していくみたいな感じですね。
だいたいそういうバナーとかに載せる情報って大きくタイトル、コピー、日時とかの情報、その他みたいな、
そんな感じのグルーピングになるのかなと思うんですけど、
そういう細々した情報をばらつかせるんじゃなくて、
日付と時間はセットでまとめた方がわかりやすいかなとか、
イベントの補足情報は全部下の方に小さめにまとめようみたいな、
そういう情報の種類をグルーピングしていくみたいなイメージですね。
それがまずステップ1。
その次にステップ2でまとめるっていう作業をするんですけど、
それがさっきグルーピングしたものをちゃんとまとまりとして見えるようにまとめる。
具体的にどうするかっていうと、
揃えるとか近づけるっていうことをすると、ひとまとまりとして見やすくなります。
デザインの4原則でいうところの近接整列がこれに当たるんですけど、
左右の端を揃えるとか、あとは近づけるですね。
よくあるのがメニュー表とかで、料理の写真と商品名と金額っていうのがワンセットだと思うんですけど、
そこの距離感が離れちゃうと、離れてかつ別の写真と金額が近づいちゃうとか、
そういうことが起こると別のまとまりに見えてしまう。
っていうので、ちゃんと関連するひとまとまりを、固まりを適切な距離で近づけて、
ちゃんとまとまりとして見せるっていうのがこの近接とか整列、揃える、近づけるみたいなところがこのステップ2のまとめるっていう段階です。
で、最後にようやくステップ3の余白で区切るっていうところに行き着くんですけど、
ステップ1、2でまとめた情報っていうのを、それぞれしっかり余白で区切るっていう感覚で余白を使うと、
全体的にまとまる、整理された分かりやすい情報になるんですよ。
余白の役割と効果
さっき言ったステップ2とほとんど通じるものだったりするんですけど、
それぞれまとめた、ひとまとめにした情報を、それぞれ別のものってわかるように区切るみたいな、区切り線として余白を使うんですよね。
なので余白って、実は何もないみたいな、そういうスペース、余った部分みたいな印象があると思うんですけど、
そうじゃなくて、余白自体に区切りっていう、ある種線の役割があるみたいな認識を持つと、
無理に余白埋めなきゃって思わなくなったり、余白をうまく使える?
近接とかまとまりをよりわかりやすくするために余白を使うんだって意識するだけで結構使いやすいですし、
余白に対してハードルも低くなるんじゃないかなと思います。
なのでさっきステップ2で、たとえでお伝えしたようなメニュー表で、
それぞれの塊、料理ごとの塊をしっかり余白で区切るっていうことをすれば、
本来違う情報が間違って近づいちゃって、別の情報同士を関連づけちゃうみたいな誤解が生まれなくなるんですよね。
なのでそのステップ1でしっかり情報をそれぞれグルーピング、まとめ、
これはこの情報についてって関連する情報同士をしっかりまとめて、
ステップ2でそれを近づけたり揃えるっていうので塊を作って、
ステップ3でそれぞれ余白、余白で区切るっていう認識で、
それぞれの塊をちゃんと独立させるというか、別物ですよって。
関連するものは近づけるし、そうじゃないものは話す。
っていうこの話す役割を余白で区切るっていう考え方で整えていくと、すごく情報としてわかりやすいものができます。
というのが今日のお話でした。
デザインにおける余白っていうと結構感覚的なもので難しいイメージあるかなと思うんですけど、
実はそれだけじゃなくて、シンプルに情報を整えるとかよりわかりやすくする道具、
手法としてこの余白、余白で区切るっていう考え方を取り入れていただければ、
よりわかりやすいものが作れるんじゃないかなと思います。
ということで今日は、余白を使ったわかりやすさの作り方として3ステップご紹介しました。
ステップ1が情報をグルーピングする。
ステップ2がまとめる。近づけたり揃えたりっていうことで情報をまとめる。
ステップ3が余白で区切る。
それまでに作ったまとまりっていうのを余白で区切っていくっていう考え方ですね。
以上となります。
キクダケフリーランス講座の毎週火曜日はこんな感じでサクッと学べるデザインのお話をお届けしています。
デザインをやってる方もそうじゃない方もスキルアップのヒントとして参考になれば幸いです。
今日も最後まで聞いてくださりありがとうございます。
