「余白」の役割について考えてみよう

歴史を紐解いてみると、余白に関する考え方がよく理解できるかと思います。
さらに話を進めて、「余白」が持つ役割について考えてみることにしましょう。

1. Webサイトがスキャニングしやすくなる

空白のスペースをバランスよく配置することで、Webサイト全体をスキャニングしやすくなります。
ユーザーは欲しい情報だけを最短の時間で求めているので、ざっと全体に目を通して、必要なコンテンツを探します。
余白によって必要なコンテンツのかたまりを見つけやすくなれば、余白は十分に機能していると言えます。

2. 可読性を改善する

文字と文字の間、行と行の間の距離を適切に取ることができれば、読みやすさは改善されます。
ユーザーはできるだけ早く、できるだけ苦労なくコンテンツを読みたがっているので、読みやすさは非常に重要です。

3. 全体がシンプルにまとまる

余白を十分に取ると、印象もすっかり変わってしまいます。
さらに余白をとって、不要な要素は取り除くことで、全体がすっきりとシンプルにまとまった印象を与えることができます。
もしホームページにポップアップやバナー、不必要なアニメーションがあれば、思い切って取り除いてみるのも一つの方法です。

「余白」の種類

一口に「余白」と言っても、余白にもいくつかの種類があります。
余白を活用したデザインを実践しやすいように、「余白」の種類についても触れてみることにしましょう。

1. マクロスペース (Macro space)

マクロスペースとは、2つ以上の要素間をとりまく、大きなスペースのことを言います。
マクロスペースを操作することで、ヒエラルキー(要素間の重要度の順番)が生まれ、ホームページのデザインに流れが生まれます。

2. マイクロスペース (Micro space)

マイクロスペースとは要素間における小さな余白で、主に文字間や行間、マージンやパディングなどを指します。
マイクロスペースを上手に取ることで、デザインにリズムが生まれ、ユーザーが情報に目を通す時に息継ぎがしやすくなります。

3. アクティブスペース (Active space)

余白を取ることでオブジェクトに注目を集める、そんな余白のことです。
アクティブスペースを活用すると、目立たせたいオブジェクトの認知性を高めることができます。

4. パッシブスペース (Passive Space)

パッシブスペースは要素間の小さなスペースのことで、発見しやすいナビゲーションを設計したり、可読性をあげるために用いられます。

「余白」を活用してデザインしよう

最後に、いくつかのホームページを覗きながら、「余白」の効果的な使い方を見ていきましょう。

FELLISSIMO 500色の色えんぴつ

A.jpg
http://www.felissimo.co.jp/500/

メイドインジャパン、職人の手で作られた500色の色えんぴつを紹介、購入できるホームページです。
色鉛筆同士の空間によって非常にバランスが整っているように見え、若干グレーがかかっている背景に鉛筆が浮いているようにも見えます。

A-net Inc.

B.jpg
http://www.a-net.com

ZuccaやNe-netなどを展開しているA-netのトップページでは、左右非対称にモデルの写真を並べて、ブランドごとのファッションをアピールしています。

Cedrick Lachot

C.jpg
http://cedricklachot.com

パリのモーションデザイナーCedrick Lachotさんのポートフォリオサイトです。
「余白」というと白を想像しがちですが、このように「黒い部分」が余白の役割をしています。