誰も教えてくれなかったWebデザインにおける「余白」のこと

Webデザイナーにとって最も重要なミッションのひとつは、ユーザーが使いたいと思うデザインを行うことです。
その目的を達成するために欠かせないのが「余白」(ホワイトスペース)です。
余白を適切に取ることで、美しく、読みやすいホームページになるからです。

Webデザイナーが考えなければならないことは「足し算」よりも「引き算」です。
私たちの周りには印刷物からデジタルメディアまで、外にある大きなビルボード看板からオンライン広告まで、あらゆる種類の情報が詰まっています。
Webサイトやモバイルアプリにも、たっぷりと情報が詰まっています。

そうした情報量の多いホームページやアプリケーションを、パッと見て理解しやすく、読みやすくするためには、「余白」と上手に付き合うのが不可欠です。
しかし、実は「余白」を適切に取ることは、可読性以上の意味もたくさんあるのです。

今回は、Webデザインにおける「余白」について解説します。

実際、どのように段組をすればいいか、どのように並べればいいのか、配置やレイアウトに関しては語られることが多いですが、「余白」はそのおまけのように扱われてしまい、これまでそれほどフォーカスが当たっていなかったのではないでしょうか。
ここで改めて「余白」とは何か、なぜ重要なのか、どうすれば上手に活用できるのかを確認しましょう。

「余白」とは何か？

「余白」とは「ホワイトスペース」(white space)あるいは「ネガティブスペース」(negative)とも呼び、「ホームページにおける空白のスペース部分」を指します。

一般的には何も描かれていない、あるいは何も配置されていないような部分を指しますが、例えば下のホームページのように「空間的に何もない部分」と捉えることもできます。

Meet The Greek

「余白」という概念の歴史

「余白」の重要性は今でこそ当たり前に思えるかもしれませんが、「余白」を十分に活用してエレガントに魅せる手法を具現化したのは、1920年代にまで遡ります。
ドイツのタイポグラファー・カリグラファーのヤン・ヒチョルト(Jan Tschichold)による「新タイポグラフィ運動」(Die neue Typographie)です。

エディトリアルデザインにおけるモダニズムの始まりとも言えるこの運動で推進された原則には、例えば次のようなものがあります。

・中央揃え以外のアンバランスなデザインへの挑戦
・ヒエラルキーによるコンテンツデザイン
・意図的に余白を活用する
・サンセリフフォント(ドイツ語では「グロテスク」と言います)だけを使う

この頃から「余白」を操作するという考え方が生まれたようです。

また、1930年代にはアメリカのタイポグラファービートリス・ヴァルデ(Beatrice Warde)が、「クリスタルゴブレット」(ゴブレットとは足つきのワイングラスのこと)というエッセイの中で「余白」に関する初期の概念について書いています。

あなたの前に、2つのゴブレットが置かれています。
ひとつは非常に素晴らしい模様で鋳造した金で出来ています。
そしてもう一つはクリスタル製の透明なグラスで、泡のように薄く、透明です。
注いで飲んでみてください。
あなたがどちらのゴブレットを選ぶかによって、あなたがワイン通であるかが分かってしまいます。

ヴェルデはクリスタルのゴブレットを選べば、ワインのことをよく分かっていると述べています。
美しいものは隠さないであらわにしておくことが重要だと考えているからです。

もちろんこれはエディトリアルデザインやタイポグラフィにおける「余白」についての隠喩です。
余白の美しさについて理解しているのであれば、あえて余白を埋める必要はない、ということを示唆しています。

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

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

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

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

2. 可読性を改善する

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

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

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

「余白」の種類

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

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

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

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

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

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

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

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

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

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

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

FELLISSIMO 500色の色えんぴつ

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

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

A-net Inc.

http://www.a-net.com

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

Cedrick Lachot

http://cedricklachot.com

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

まとめ

以上、Webデザインにおける「余白」に関するあらゆることをまとめてみました。

もしかしたら余白を大きく取ることに慣れていないと、最初は空白部分に違和感を覚えるかもしれません。
しかし、思い切って余白をとってみると、読みやすくなるだけでなく、全体的にすっきりとしたデザインになるでしょう。