今からで大丈夫!Webデザインに余白を正しく活用しよう

今からで大丈夫!Webデザインに余白を正しく活用しよう

Webデザインに余白の役割

とある要素を目立とうとするなら、そのやり方の一つは、その要素の周りに余白を設けることです。

ミニマムが流行ってから、シンプルでLess Is Moreという概念は改めて認識されるようになりました。デザインに使う色の数や、ビジュアル的な要素の使用を制限し、それぞれを決められた等級にバランスよく整理することによって、洗練されるデザインになります。

特にシンプルなデザインには余白はとても重要

余白は決して白色を使わなければならないことではなく、白以外の色を使っても全然問題ないです。余白を設けることは、よく簡単にできそうに見えますが、実際に既存の複数のデザインルールを設けている場合に、簡単にできないのは事実です。既存の複数のデザインルールとのバランスをうまく取りながら、余白を設けることが難しいからです。逆にそれができると、良いデザインになっているとのことは言えます。

全てのデザインに大きめの余白を設ける必要はありません、相手に伝えたい情報などの様々の要因により、余白の使用をバランスよく決められます。

余白を正しく使うことで、デザインのバランスをうまく整えることができます。
特に情報を伝える主役のテキストの余白はもっとも大事です。テキストはの読みやすさは、テキストの間に小さな余白のコントロール次第で激しく変わります。

今からで大丈夫!余白を活用する方法をご紹介

全体のレイアウトに余白

全体のレイアウト

去年か一昨年から、流行り始めた二分割ファストビューを採用したこちらのサイトですが、写真と余白の組み合わせることによって、バランスの良いコントラストも出来ており、情報とイメージを同時に魅力的に魅せられています。

写真や画像に余白

写真や画像など

カラフルな本が全体画面の3分の1ぐらいに配置して、周りに余白たっぷり設けたモノトンのゴロを全体画面の3分の2ぐらいに配置することで、余白や配色によるコントラスが絶妙で、ブランディング効果が狙えます。

Webデザインにおける「部品」

Webデザインにおける「部品」

一見でものすごくシンプルでミニマムデザインを使用したサイトですが、各部デザインの「部品」が余白を設けることにより、わかりやすく配置されています。

テキストや段落などに余白

テキストや段落など

様々な記号やテキストなどの情報をユーザーに見てもらい順番で見てもらうには、各情報の重要階層をしっかり分けた上で、同じ階層と異なる階層の要素を余白をそれぞれ設けて配置することによって、複雑な情報が分かりやすく整理され、全体的なデザイン性もグッとアップするでしょう。

「余白」についてのまとめ

『余白を制する者はデザインを制する』ということの通りです。
余白は全体のデザインを整えてくれます。
余白は情報をグルーピングして、その関連性を示してくれます。
余白は特定の要素を目立たせたり、コンバージョン率などの目的を達成してくれます。