Loading...
Loading...
投稿日:2018年03月08日
サイトを新規でリリースしたい、リニュアールをしたいとお考えのWEB担当者の方に向けて、
知っているようで知らない余白が重要な理由や種類や歴史などをまとめさせていただきました。
マージンとは「ホワイトスペース」あるいは「ネガティブスペース」とも呼び、
「Webページにおける余白のスペース部分」を指します。
世間一般的には何も描かれていない、あるいは何も配置されてない部分のことを言いますが、
例えば下記のWebサイトのように『空間的に何もない部分』とも捉えることもできます。
今でこそ『余白』の重要性は当たり前に思えるかも知れませんが、『余白』をおおく利用して、
上品に魅せる手法を実現したのは、1920年代に遡ります。
ドイツのタイポグラフィー・カリグラファーのヤン・ヒチョルトによる『タイポグラフィー運動』です。
エディトリアルデザインにおけるモダニズムのルーツとも言えるこの運動で推奨された原則には、例えば次のような要素があります。
また、1930年代にはアメリカのタイポグラファー・ビートリス・ヴァルデが
『クリスタルゴブレット』（ゴベレットとは足つきのグラス）という
エッセイの中で『余白』に関わる初期の概念について書きしるしています。
透明な(ホワイトスペース)グラスにワインを入れることで、ワインを美しく見えるということを言っているのだと思います。
余白の重要性をわかっているのなら、模様でワインを隠さずに見せる方が良いということを示しています。
歴史を振り返ってみると、余白についての考え方が余白についてよく理解できるかと思います。
ご興味がある方は、ご自身で調べてみてもいいかも知れませんね。
さて、ここからは余白の重要な理由についてお伝えしていきます。
余白のスペースをバランス良い配置を決めることで、Webサイト全体の情報が伝わりやすくなります。
ユーザーは得たい情報だけを短い時間で求めているので、ざっくりとWebサイト全体に目を通して、
自分が得たいコンテンツを探します。
余白のスペースをとったことによって必要なコンテンツのグループを見つけやすくなれば、余白は十分に役立っているといえます。
文字と文字の間、行と行の間に適切なスペースをあけることができれば、読みやすくなります。
ユーザーはできるだけ、短い時間で苦労なくコンテンツを読みたがっているので、読みやすくするために
余白のスペースをとることが、非常に重要です。
※自由区 -ONWARD-から引用
余白のスペースを十分に確保すると、Webサイトの印象もすっかり変わってしまいます。
更に余白のスペースをとって、不要な要素を取り除くことで、Webサイト全体がすっきりとまとまった
印象をユーザに与えることができます。
もしトップページにバナーやポップアップ、不必要なアニメーションがあれば、
思い切って取り除いてみるのも１つの手段かも知れませんね。
『余白』と言っても、余白にもいくつか種類があります。
余白を活用したデザインを取り入れやすいように、『余白』の種類についても触れていきます。
マクロスペーストとは、２つ以上の要素が要素が存在する場合に使う手法。
強調をしたいオブジェクトの周辺に空白を配置した大きなスペースを指します。
優先的に注目して欲しい部分が明確にユーザーに伝わるので、サイトのフローを表現するのには役立ちます。
マクロスペースは要素間のスペースを意味します。
要素間とは、テキストの間や行間、またはパディングやマージンのようなリズムを含んだスペースが該当にあたります。
余白をとることで、ユーザーの関心をオブジェクトに集める、そのような余白のことです。
アクティブスペースを活用すると、ユーザーの認知を集めるだけでなく可視性が高くなります。
パッシブスペースとは、バナーの太さや字間など、小さな余白のことです。
主に、可読性を向上するために利用します。
大胆な余白を使ってデザインにメリハリをつけるアクティブスペースばかりに注力しがちですが、
美しいパッシブスペースこそ見やすさを担保してくれます。
以上がWebデザインにおける『余白』に重要性や歴史や種類などに関してまとめさせていただきました。
余白を大きくとることに、最初は空白のスペースに違和感を感じるかと思います。
ですが、思い切って余白のスペースをとってみると、Webサイト全体の情報がユーザーに伝わりやすくなり、
コンテンツを読みやすくなって全体的にすっきりとしたデザインになるでしょう。
今回もお付き合いいただきありがとうございました。
