前回の記事では、サイズとスケールによって、いかにデザインが調和のとれたわかりやすいものになるかを学びました。 今回は、デザインの見えざる力に関する最後の記事となりますが、スペースの巧妙な使い方について学びます。「空白」(white space) や「ネガティブスペース」(negative space) などともよく呼ばれますが、この使い方によって、デザインがいかに効率的に情報を伝達できるかが変わってくるのです。

データインク比

空白を意識的に使えば使うほど、「データインク比」(data/ink ratio) は高くなります。 これは情報デザインの第一人者エドワード・タフテが提案した考え方で、 インク一滴（モバイルやウェブデザインの場合はピクセル一つ）あたりどのくらいの情報が表されているかという関係を示しています。

左のグラフは右のグラフよりもデータインク比がかなり高くなっています。 グラフは本当に「インク」で塗りつぶす必要があるでしょうか？ 点と線だけで情報は十分に伝達できますよね。

では、さらに進めて線も取り除き、点だけにしたらどうでしょうか？

今度は、コミュニケーションが破綻してしまいました。 データポイントはわかりますが、データが時間に沿ってどう変化したかという「ストーリー」が見えなくなってしまっているのです。 さらに、単純な散布図との区別が難しくなります。散布図では、「時間」は変数の一つではなく、データは直線的ではありません。

近くにあるものは関係があるように見える

第一回目の記事では、要素の整列によっていかに要素間の関係が影響を受けるかを学びました。 同じくらい重要なことは、要素がお互いにどのくらい近くに位置しているかです。

これは正方形を単に格子状に並べたものです。床のタイルのようですね。

しかし、縦方向の正方形の列の間を横方向に広げると、とたんに列の集まりのように見えます。

なので、上に挙げたグラフの例では、データに大きな変化があった時に、単に点が密接しているからという理由でデータポイントを間違った順序で繋げて読む人もいるかもしれません。

わかりやすいレイアウトのための空白の使い方

これらの原則は線グラフにとどまらず、 デザインのありとあらゆる所に存在しています。 特に小さな画面向けにデザインをしている場合、ピクセルを無駄にしないよう、データインク比を高くしたいものです。

デザイナーがよく使う方法として、グリッドレイアウトで情報を整理する方法があります。 グリッドは線やテキストといった要素を配置するのに便利で、関連した情報を同じ場所にまとめることができます。

これは基本的なレイアウトで、グリッド上にデザインされています。 左側にナビゲーションがあり、大きなエリアはメインのコンテンツ用です。

レイアウトはこれで悪くないのですが、ナビゲーションとメインコンテンツの間の空白の幅と、メインコンテンツの中のテキスト列の間の空白の幅が同じになっています。

ナビゲーションとメインコンテンツとの間の空白の幅を少し広げた方がいいですね。

これでナビゲーションとメインコンテンツの区別がより明らかになりました。単に空白を少し増やしただけでこれだけの効果が得られるのです。

わかりやすいタイポグラフィーのための空白の使い方

前回の記事では、タイポグラフィーの階層構造 (typographic hierarchy) を作る方法は数多くあるが、サイズを適切に選ぶことがその一つであると学びました。 実は空白もタイポグラフィーを秩序立てるのに有効です。

たとえば、次のようなヘッダー（一番上の行）、メタデータ（二番目の行）、本文テキスト（それ以外の部分）の例を見てみましょう。

それぞれのフォントサイズは調和のとれた関係になっています。これは、各フォントサイズを等比スケールから選んでいるからですが、それにもかかわらず全体的にしっくりと来ません。

問題は要素間のネガティブスペースをきちんと考えていないことです。

メタデータの行はヘッダーとは別であることが十分にわかります。フォントサイズも違いますし、全て大文字で書かれていますし、間隔もいい具合に少し空いています。

こういう時に役に立つ方法が一つあります。メタデータのフォントの高さを使ってヘッダー行との間の間隔のサイズを決めるのです。 つまり、以下のようにするわけです。

一般的に、この空白のサイズは目測で決めることになるでしょう。 数学的にどのくらいの間隔になるかを正確に知る方法はなく、 行の高さ（line-height)、マージン (margin) やパディング (padding) のサイズ、使っているフォントの特徴などの関係に依るからです。

本文テキストはどうするか？

メタデータをヘッダーの近くに配置するのは理にかなっていますが、ヘッダーはあまり本文テキストの近くにある必要はありません。 実際、ヘッダーとメタデータは一つのまとまりと考えることもできます。

ヘッダーの一番上からメタデータの一番下までの距離を基準にして、メタデータと本文の距離をその半分にしてもいいでしょう。

まとめ

どのようにレイアウトするかを考え、どのように空白を使ってコミュニケーションするかを考えることにより、デザインはよりわかりやすくなると同時に、使いやすくなったり、コンバージョンが増えたりします。

とりあえず連載はこれで終わりですが、もしまだ読んでいない場合は、第一回と第二回の記事もぜひ読んでみてください。