空白スペースは、上手に扱うことができれば、それだけで「オシャレ」な印象を与えることができます。
ですが、役割をきちんと理解していなければ、手抜き感を与えてしまう「諸刃の剣（もろはのつるぎ）」でもあります。
今回はそんな空白スペースの役割、立ち位置を解説していきたいと思います。
空白スペースの価値って？
空白スペースは主役を引き立たせる、いわば脇役のようなものです。
もし、上手に空白スペースを使えていないと、いろいろな情報が主張しあっている状態になっていると思います。
それではサイトを訪れたユーザは、どこを見ればいいのか分からなくなってしまいます。
そこで有効な空白スペースは美しさだけでなく、以下のような3つの機能をもっています。
関係性を明確にする
デザインの法則のひとつに「近接の法則」というものがあります。
下の画像を見てください。
35個の緑色の四角の集まりというよりも、2つの大きな四角のグループが見えるかと思います。
これを分けているのは、真ん中に入っているスペースだけです。
これはUIデザインの中でも入力フォームを作る際に、とても有効な手段です。
上の画像では、すべての入力欄が等間隔で並んでいます。しかし、これでは入力する項目が多くなった場合に見直そうとしても、どこにどの情報が入力されているのか一目見ただけではとてもわかりにくいですよね。
では、下のフォームはどうでしょう。
名前と所在地に関係する項目の間にスペースを空けて、各項目に関連するもの同士のスペースを詰めてみました。
これで先ほどのフォームよりもだいぶ見やすくなったかと思います。
このように、関連するものは近く、グループごとに少しスペースを入れることで、ユーザにやさしいフォームを作ることができます。
注意を引きつける
冒頭でも言いましたが、空白スペースは脇役のようなものです。
Tunnel Vision and Selective Attention
こちらのサイトが良い例です。検索窓の周りにスペースを多く空けることで、カテゴリのアイコンがずっと目立つようになり、さらに縦方向にまとまって見えます。
これにより、ユーザーの視線がバナー広告に目が行かないのと同時に、ユーザーの目が自然とコンテンツへ向くようになっています。また、コンテンツ同士のスペースを狭くすることで、より一層まとまっているように見えるように工夫されています。
さらに、空白スペースの効果は、注意力と記憶力の限界によって発揮されます。
GoogleとYahoo!のサイトを思い出してみましょう。両サイトとも「何かを検索したい」と思っているユーザが訪れます。
Googleは、ユーザがすぐに検索機能を見つけられやすいように、画面中央にロゴと検索窓しか置いていないですよね。右上にGoogleメニューがありますが、画面中央を注視してしまうのであまり気にならないと思います。
一方のYahoo!では、ユーザがいろいろなアクションを取れるように、さまざまなコンテンツで埋めつくされています。これではGoogleと比べて、どこから検索すればよいか分からないですよね。「ユーザに検索してもらう」という点では、Googleのほうが優れたデザインである、といえます。
ユーザーを”ゴール”へ導く
サイトを訪れるユーザは、常になにかしらの目的を持っています。それはユーザによって三者三様です。
しかし、情報が整理されていないと、当初の目的とは違うコンテンツも気になってしまい、サイトを訪れた目的を忘れてしまったり、サイト上で迷子になったり、結果としてゴールに辿りつかないままサイトから離れてしまいます。
それを防止するためにも、「サイトへ来たユーザに、何をして欲しいか」をハッキリさせて、その情報を見やすいようなサイト設計をする必要があります。そうすることで、直帰率の割合も減らすことができるでしょう。
まとめ
いろいろ説明してきましたが、まとめると以下のようになります。
1.空白スペースは、主役（コンテンツ）を引き立てる脇役のようなもの。
2.適切なスペースを入れることで、コンテンツの関係性をわかりやすく伝えられる。
3.ユーザの視線を誘導することができる。
空白スペースは上手に使うことで、ユーザへ伝えたいことをダイレクトに届けることが出来ます。
そのためにも、Webサイトを通してユーザに何を伝えたいのかをハッキリさせ、載せるべき情報をあらためて考えてみましょう。
