• saygo

読まれる紙面の創り方~余白~

最終更新: 2019年8月2日


こんにちは。HS広告スタジオの日置です。

今回も僕たちのHS BLOGに来て頂き、ありがとうございます。



余白。


多くのところで目にする広告デザインには必ず余白があります。


Web系も、グラフィックも、紙媒体も、余白はあります。その名前に「余」とかついているから、余計なものだと思われている方も時々いるのですが、そうではありません。

結果から言うと、創っています。余白も創ってこその広告デザインとなります。


「なんとなく空いている」のと「意味があって空けている」のとでは大きな差があります。見やすいデザインを作るために「余白」ってヤツの存在は非常に大きいんです。


ところが、「訴求領域が小さくなるー」とか「空いているのはもったいない」とか言われることがあります。


今回は、「余白を入れるととても見やすくなる」ということや、「使いこなせば色々な効果がうまれる」ということをご紹介したいと思います。




情報の整理整頓

次の2つのサンプル画像を見て下さい。



左の方が断然、見やすいと思います。


確かに余白を少なくして情報を多くいれることは出来ますが、右のような感じで余白を少なくしてしまうと窮屈で見にくくなります。


余白がないと、情報同士が主張し合うことになり、お互い干渉して見にくくなります。


区切り線や囲みで区別すれば?と聞こえてきそうですが、そうすると、より余計に線や囲みの分までスペースを使うことになるのでより窮屈になりがちです。




目には優しく

また、文字を一目見だけでは内容を把握することはなかなか難しいと想います。ぱっと見ると、同じ様なサイズのものの塊、に見えると想います。

紙面の見やすさは「文字のブロックのあり方」で判断されます。


上の例でも解ると想いますが、余白が無いと、目が休まる場所が無く「見にくく疲れやすい」印象になります。読み進めるうえで、目を休ませるためにも余白を使うことは必要です。


また余白が無いと、目が休まらないだけでなく、情報認識の妨げにもなってしまいます。


しっかりと余白を使って、伝えたいことの情報の整理をすることが大切です。余白があると、「さっきのブロックとは違う」と読者に無意識にです認識させることが出来ます。余白の広さで区切りのレベルも変わります。広ければ広いほど、別物感が出ます。情報設計に合わせて、区切り具合に変化をつけてくださいね。




余白で雰囲気創り

「余白が多いと高級感が出る」という話はよく聞くと想います。それ、本当です。


実際、余白が少ないと「ぎっしり、賑やか、庶民的」な印象に。


余白をとると、「すっきり、余裕がある、高級そう」な印象になります。


「情報がたくさんあるよ!」といった訴求効果をしっかりと狙った雰囲気のものは余白を最低限にとどめることが多いです。スーパーのチラシとか、ニュースサイトとかが解りやすい例になると想います。


逆に余白をたっぷり、しっかりととっているのはシンプルで質がいい雰囲気になります。






導線で訴求力アップ

さらに余白には視線誘導の役割もあります。


文字の配置や色、アイコンやキャッチなどで創ることが多いと想いますが、上のように余白のとり方1つで導線を操作することができます。上図のように左上から右下へと誘導したいときには、上下の空きを広くとり、左右の空きを少なめに取ることです。


ポイントは次に見てもらいたい方向の余白を少なくすることです。見て欲しいところにしっかりとユーザーを導くことも出来るのも、余白の役割の大きなポイントとなります。

想ったようにユーザー目線を誘導できれば、訴求力アップに繋がります!




デザインが上手くなる?!

余白は「あった方がいいのは解ったけど、やっぱりスカスカになるんじゃ、、、」とか想って中途半端にすると、あまり効果がありません。余白が変わる部分で少ししか差を付けなかった場合、ズレてるように見えることにあります。



余白をデザイン要素のひとつとして紙面に組み込むことで、情報の一つ一つを効果的に見せることができ、視線誘導の流れも創りだせることが解って頂けたかと想います。



デザイン苦手なんだけど見やすいものを作りたいなーという方は、今回の「余白」をちょっと意識すると断然違ってきますので是非、チャレンジしてみてください。


#ワークショップ #デザイン #仕事ホームページ #Webサイト #グラフィックス #余白 #ホワイトスペース

©HS広告スタジオ All right Reserved. 2015-2020

HS広告スタジオ シンボルマーク
HS広告スタジオ ロゴマーク
america.jpg
japan.jpg
  • Facebookの - ブラックサークル
  • Instagramの - ブラックサークル
  • Twitterの - ブラックサークル