気になる人
- デザイン４原則を使ったけどいまいちしっくりこない！
- 目立たせたいんだけど、あんまり派手にはしたくないなー
と、思っている方に余白を使って解決する方法をご紹介します。
ある程度デザインの知識はついたけど、何か違和感があるなどそんな時に余白を意識することで、より効果的に伝わるデザインにすることができます
はじめまして、とある企業で企画やWeb/UIデザイン・UXデザインを担当していますモーリーと申します。
余白の知識がつくと、さらにもうひと段階上のデザインを作ることができます。
余白とは「何もない空白の部分」のことです。
レイアウトデザインの場合は「文字や装飾などの入っていない部分」のことです。
ある程度レイアウトが組めるようになり、デザインを始めたばかりの頃は、余白があるとついつい盛りたくなってしまいます。
よくやってしますのが、余白を埋めるために文字を大きくしたり、枠の中でぎゅうぎゅうに情報を詰め込んだりして余白を消そうとしてします。
ですが、それでは読みやすく整理され洗練されたレイアウトにはなりません。
余白を作ることを意識すると、デザインがぐっと良くなります。
目次
余白を使ってデザイン力をあげる３つのポイント
余白を活用することで様々な効果を生み出すことができます。
実際にどのような効果があるのか、説明していきます。
- 余白の効果 ①：情報の干渉緩和
- 余白の効果 ②：情報の区分け
- 余白の効果 ③：視線誘導
余白の効果 ①：情報の干渉緩和
余白を用いることで、数多くある情報同士の主張を緩め和らげることができます。
全ての情報を主張しすぎると何が重要なのか、何を見せたいのか分からなくなってきます。
そこで、情報に優先度をつけタイトルと本文に強弱（コントラスト）と余白を意識します。
この2つを見比べると右の方が圧倒的に見やすいはずです。
ここでは、装飾などはせずに、強弱（コントラスト）と余白だけで表現していますが、余白をしっかりと、とるだけで見違えるほど見やすくなったとは思いませんか。
少し余談になりますが、上記の例にさらに反復を適用することでもう一段階見やすさを増すことができます。
上記で述べた、デザイン４原則の強弱・反復はこちらの記事で詳しく解説しています。
デザイン４原則を使った伝わるデザインの作り方【非デザイナー必見】
ポイント
余白を意識することで、意図的に目が止まる箇所を作り出すことができ、「読みにくさ」を和らげることができる。
余白の効果 ②：情報の区分け
区分けとは1カテゴリーごとに詳細を分けることです。
余白をとることで情報がどちらに所属しているのかがよりわかりやすくなります。
関連する要素を近くに置き、他の要素と余白を置くことで一つの塊として認識することができます。
ポイント
余白をとることで、どちらに属している情報なのかをより明確に伝えることができる。
余白の効果 ③：視線誘導
視線誘導とは、その名の通り、人の視線を誘導したい方向へ導くことをいいます。
左上から右下へと誘導したいときには、上下の空きを広くとり、左右の空きを少なめに取ることことでZ型に視線を誘導することができます。
視線誘導には様々な型があります。
詳しくは、視線誘導を意識するとデザインは劇的に変わる【プレゼンにも使える７つの方法】で解説しています。
余白を使ったチラシとサイト
いくつかのチラシ・WEBサイトを参考に余白の効果を解説していきます。
余白を使ったチラシの例１
情報が整理され余白を十分に取ることで、それぞれの情報が際立ち目に飛び込んでくる。
パンだけに写真を切り抜くことで、写真を大きくできパンそのものに視線を誘導できる。
テキストサイズがそこまで大きくなくても、余白があるため視線をしっかりと誘導でき、かつしっかりと近接・強弱（コントラスト）・整列・反復の４原則が意識されているため、塊を認識でき統一感がある。余白を使ったチラシの例２
メインのマンションを最大限大きく配置することで一目で不動産広告だとわかる
全体を夜景の色味と合わせて、アクセントにゴールドを使用することで、情報の印象を強め同時に高級感の演出もできる。
フォントも細長の明朝体を使用する上品・高級感を強調できる。
マンションを引き立たせつつ、夜空の余白にキャッチコピーを配置することで、視線を誘導できる。
余白を使ったサイトの例１
調理器具の製作・販売を行うvermicularのWEBサイト。 トップビューはテキストと前面に製品の写真を配置しています。
余計な情報がなく、テキストの周りに余白を持たせシンプルにすることで、テキスト・写真をより引き立たせています。
製品単体ではなく実際にキッチンに製品を置いた写真を利用することで、実用的なイメージを持たせることができます。
余白を使ったサイトの例２
伊藤久右衛門という京都にあるお茶屋さんのWEBサイト。 黒を基調にして、フォントも明朝体にすることで高級感を演出しています。
テキストも、和文ならではの縦組みで、日本らしさを演出 しています。
テキストの上下左右に余白を設けることで視線を集中させています。
余白を意識したプレゼン資料の改善
余白を利用することで、より見やすく綺麗なグラフを作ることができる。
グラフの中や近くに書くことで余白が生まれ、利用する色の系統も統一することで情報がスッキリと頭に入ります。
グラフの真ん中をくり抜くことで余白部分が増え、グラフ自体もスタイリッシュに見せることができます。
プレゼン資料改善例２のように写真を使う場合は、しっかりとコントラストをつけることで、グラフに視線を誘導することできます。
まとめ
いかがだったでしょうか。
- 要素ごとのまとまりを意識する
- メインとなる写真は切り抜いて大きめに配置する
- 目立たせたいテキストの周辺に大きく余白を取る
さらに、余白を上手に使ったレイアウトは洗練された印象を与えるため、高級感を与えたいときなどに効果的なので、高級感などを狙った場合は、特に余白を意識することをお勧めします。
世の中には意図的に余白を排除したデザインもありますが、そういったデザインも基礎を身につけた上で表現できるものです。
まずはこの記事を参考に、徹底的に余白を使いこなせるようになりましょう！
余白に関連するおすすめの書籍
具体例を交えつつ、Badデザインと、改善例が数パターン提示されている余白のデザインのみを特集した名著がこちらになります。
余白について勉強するならこの１冊で十分だと思います。
合わせて読みたい
デザイン４原則を使った伝わるデザインの作り方【非デザイナー必見】
視線誘導を意識するとデザインは劇的に変わる【プレゼンにも使える７つの方法】
