デザインについてあまり明るくないWEB担当者にとって、ホワイトスペース(余白)は、無駄なスペースだと考えられることがあります。
昔、とある会社の役員が「ファーストビューは一等地なのだから、できるだけ余白を無くして、ユーザーに伝えたい情報を敷き詰めよう」というような内容のことを発言し、実際にそのプロジェクトでは、彼の意見が採用され、ファーストビューにホワイトスペースがほとんどない、情報に埋め尽くされたTOPページが作られました。
残念ながらそのプロジェクト(TOPページの一部リニューアル)は、直帰率を増やしてしまうといった結果となってしまったわけですが、なぜ、そのような結果となったか想像できますでしょうか。
一般的に、一等地と呼ばれるような住宅地には、公園がバランスよく様々な場所に設置され、家と家の間隔は広めに設定され、また、道幅も広めにデザインされています。それらの空間(余白)は、1つ1つの住宅のすばらしさを引き立たせ、街全体に高級感やゆとりを持たせ、訪れる人に落ち着いた印象を与えます。
多くの人が憧れる一等地には、かならず、計算された余白があるのです。先ほどの会社の役員の方は、一等地の活かし方を知らなかったために、プロジェクトは失敗に終わったのです(もちろん、役員に意見できなかった会社の体制や、役員の意見を変えさせる説得力のある提案が他になかったなどの、根本的な問題があるかとは思いますが)。
前置きが長くなってしまいましたが、こういった失敗を繰り返さないためにも、今回は、ホワイトスペースの活かし方についてお話ししたいと思います。
そもそも、余白とは何なのか
余白とは、「要素が何も設置されていない空間」のことを言います。そのため、デザインにおける余白は、背景が白でも黒でも余白(ホワイトスペース)なのです。
コメディアンは、この余白(間)を使って笑いを巧みに操り、WEBデザイナーは、キービジュアルを目立たせるために、余白を使います。
書道家の武田双雲さんは、余白をゆとりであると解釈しています。余白が少ない書は、ゆとりの少ない書であるということです。1つ1つの文字の特性から、どれくらいのゆとりを与えれば、その文字が際立つのかを計算し、デザインしているのでしょう。
余白をゆとりと捉える点に関しては、冒頭の一等地の話ともつながる部分がありますね。
これらの例からも、余白はビジュアルデザインの世界だけでなく、ありとあらゆる分野で重要な要素として存在していることがわかっていただけたかと思います。
余白がもたらす様々な効果
余白は、それを見る人にどんな効果を与えるのでしょうか。ここでは、ビジュアルデザインの分野における余白の代表的な効果について紹介いたします。
視線を集める効果
80.90階建てのビルが群がる街に、100階建てのビルが建っていても目立ちませんが、8.9階建てのビルが立ち並ぶ街に、100階建てのビルがそびえていれば、多くの人の視線が集まります。これも、(空という)余白の効果です。
どうしても目立たせたいバナーがあるのなら、同じようなバナーを4個も5個も並べるのではなく、大胆に余白を使って、1つのバナーに視線を集めることを考えてみてください。
情報をグルーピングする効果
1つのページに「メニュー表と、アクセスマップと、シェフの経歴」などのように、別々のカテゴリーの情報を掲載しようとした場合、これらの3つのカテゴリーの間に余白が用意されていれば、人は「別々の情報が書かれている」と、自然と認識してくれます。
これに関しては、後ほど紹介する「余白の作り方・コントロール」についても、読んでみてください。
文章を読みやすくする効果
文字間が極端にせまかったり、行間にほとんどスペースがない文章は、それだけで読むのが困難になります。文字と文字の間、行と行の間の余白を適切に取ることができれば、文章を読みやすくできます。 ユーザーはできるだけ早く、苦労なく コンテンツを読みたいと思っています。そのため、この文字と文字、行と行の間の余白は重要になります。
ページに様々な印象を与える効果
余白は、その面積だけで、様々な印象を見る人に与えます。例えば、余白がほとんどないディスカウントショップのチラシを思い浮かべてみてください。そのチラシのデザインから「安さ」という印象を受けませんか？ 逆に余白がふんだんに使われた腕時計のパンフレットを思い浮かべてみてください。「高級」という印象を受けませんか？
この例からも、余白が無駄なスペースではないことがわかっていただけたかと思います。余白は何もないスペースであるにもかかわらず、様々な印象を与える力を持っているのです。
余白の作り方・コントロール
余白のコントロールは実はそんなに難しいわけではありません。ビジュアルデザインで余白をコントロールするのに、最も意識するべきポイントは、近接と整列の2つです。
近接
関連する項目を近づけると、人はそれを「関連するグループである」と認識します。関連する項目を近づけ、グルーピングしていけば、自然と余白が生まれ、視覚的に理解しやすいデザインになるのです。
整列
ページ上の項目を整列させると、デザインに統一感が生まれ、近接と同様に組織化されたデザインを実現できます。要素をきちんと整列させると、自然と目に見えない線と規則正しい余白が作られ、視覚的に理解しやすいデザインになります。
これらのポイントに関しては、過去記事の「ビジュアルデザインの基本、「4大原則」を活用して、伝わるデザインにする」をご確認ください。
この記事では、「すべてのデザインには理由（思考）がある」と話していますが、それは余白(ホワイトスペース)も同じです。意図せずに生まれた余白はデザインではないのです。それはまさに、デザインについて明るくないWEB担当者が恐れる「無駄なスペース」だと言えるでしょう。
余白は、ほとんどのビジュアルデザインでもっとも多くの面積を占める要素です。この余白を恐れず正しく活用するためにも、余白がもたらす効果を正しく理解し、余白に意味を与えることが大切です。
