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

更新日: 2018年01月31日

デザイン

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

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

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

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

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

「余白」とは何か？

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

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

Meet The Greek

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

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

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

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

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

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

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

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

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