デザイナーの皆さんをびっくりさせるような、非常に大事なツールを紹介しようと思います。そのツールは、音符と音符の間の静けさと同じくらい過小評価されています。ところが、そのツールにはユーザーをページ上にとどめる力があります。
多くの要素によって、インタラクティブデザインのレイアウトと構造は形づくられます。そして無視されがちですが、もっとも不可欠な要素の１つにホワイトスペース（またはネガティブスペース）があります。ホワイトスペースは、ほかのデザイン要素の中やその周りにあります。
Webサイトやアプリの場合、さまざまなビジュアル要素がレイアウトを構成します。ビジュアル要素には、タイポグラフィや境界線、アイコン、画像などが含まれます。絵を想像してみてください。これらのパーツはペイントされた小さな欠片なのです。では、絵を描くには何が必要ですか？ キャンバスが必要でしょう。ホワイトスペースとはキャンバスのようなものです。デザインにおいてホワイトスペースは、要素を保持する背景であり、また要素を目立たせてくれます。
では、ホワイトスペースのデザインがなぜ重要かを見てみましょう。
ホワイトスペースとは何か
ホワイトスペースとはデザイン要素間の領域のことです。これは、文字の間のスペースを含む、個々のデザイン要素の中にあるスペースでもあります。
ホワイトスペースはそのような名前であるにもかかわらず、白色である必要はありません。ホワイトスペースはどのような色、テクスチャー、パターン、または背景画像であっても問題ないのです。
ホワイトスペースはデザイナーとクライアントの間で、問題を引き起こす可能性があります。デザイン理論においては、正確さと品質の高いユーザー体験を保証するためにホワイトスペースの使用を促進します。しかし悲しいことに、多くのクライアントやマネージャーは、ホワイトスペースはスペースを無駄にしてしまっていると思っています。彼らは、ホワイトスペースがより多くの情報やほかのビジュアル要素を組み込むのに使うことができると考えているのです。
しかしながら、ホワイトスペースはデザイン要素のバランスをとり、ビジュアルコミュニケーション体験を改善するためにコンテンツを整理しやすくする優れたツールです。たとえばあなたがキッチン家電会社のマニュアルを何百と作成するようなテクニカルライターであれば、文字と画像の絶妙なバランスを把握し、集中をとぎれることなく読み進めることができるでしょう。
ですが、喜んで取扱説明書を読む人はめったにいませんから、読者の注目をうまく集めることが重要です。ホワイトスペースは文字と画像の間で真価を発揮し、ページが乱雑に見えてしまうことを防ぎます。そうすれば読者は、電話でお問い合わせするよりも先に、まずはFAQなどから情報を得ることができるのです。
ユーザーは、情報攻めに合うと不満に思います。私たちは人間であり、機械ではありません。ホワイトスペースは私たちを落ち着かせ「呼吸」をさせます。
ほかのUI要素と同様に、デザイナーとしてホワイトスペースが果たす役割を理解し、その要素と残りの要素との間における適切なバランスを見つけるために実験する必要があります。
マイクロ 対 マクロ
ホワイトスペースは一般的に、その密度と関係性に基づいて分類されます。では、ホワイトスペースの比率と割合について話していきましょう。
マイクロホワイトスペース
デザイナーは、デザイン要素間の小さなスペースをマイクロホワイトスペースと呼びます。行や段落の間のスペースのことです。マイクロホワイトスペースにはメニューリンクを区切るために使用されるグリッド画像の間のスペースも含まれます。
マイクロホワイトスペースは、コンテンツの読みやすさに直接的な影響を与えます。たとえば、段落の周囲にある余白は、ユーザーの読む速度や理解度に影響します。通常のマージン幅と異なるものにテキストが表示されると、人々はそれをよりゆっくりと読みます。ユーザーは、それらをより理解しづらいと感じてしまうのです。
マクロホワイトスペース
マクロホワイトスペースは、主要なレイアウト要素とデザインレイアウトを囲むスペースとの間にある大きなスペースのことです。ほとんどのWebサイトのコンテンツの左右や、Webサイトのコンテンツブロックの間にマクロホワイトスペースがあります。
マイクロホワイトスペースとは異なり、マクロホワイトスペースは全体的なデザインのコンテナとして機能します。それは 、デザイン全体に影響するホワイトスペースで、最も気付きやすいものです。おそらく、マクロホワイトスペースをもっとも効果的に実装している良い例は、Google.comのホームページです。
Googleの象徴的な外観はとてもシンプルですが、ほかにも気付くことはありませんか？ そのシンプルさからは、落ち着きも感じ取ることができます。乱雑さがないため、目や精神的な負担が少なくなります。何かを検索するという、Googleのホームページにいる理由に集中することができるのです。
なぜGoogleがこのようなページにたどり着いたのかについては逸話があります。
Google.comは、ホワイトスペースを広範囲に利用した初期のWebサイトの１つです。Googleが広範囲なホワイトスペースの使用を始めたとき、インターネット接続はかなり遅いものでした。ユーザーテストの参加者は、既にページ上にすべての要素が表示されているにもかかわらず、ページがダウンロードされるのを待っていました。ユーザーは、ホワイトスペースがたくさんあるページに慣れていなかったのです。
これらのユーザーテストから、Googleのデザイナーは、ページが完全に読み込まれたことをユーザーにわかってもらうために、ページ下部に著作権に関する注意を追加することにしました。
マイクロとマクロ、どちらを使うべきか
マイクロホワイトスペースとミクロホワイトスペースの使用に関しては、どちらも以下の要因によって決まります。
コンテンツ - レイアウト内の情報が増えると、マクロホワイトスペースに利用できるスペース量が少なくなります。それに対し、マイクロホワイトスペースのスペース量が増えます。このような妥協は不可欠です。そうでなければ、ページはデータの塊になり、読むのが非常に困難になってしまいます。たとえば、Boulton（2007）は、ニュースサイトがユーザーにとって効果的な読みやすい体験を提供するために、マイクロホワイトスペースに頼る傾向があると説明しています。ユーザーの読みやすさは非常に重要です。
デザイン - ユーザーインターフェイスのデザインは、レイアウトにおけるマイクロホワイトスペースとマクロホワイトスペースの比率に影響を与えます。デザイナーはデザインスタイルを選択します。これにより、レイアウトはどちらかのホワイトスペースのタイプに偏るのです。
ユーザー - ユーザー調査（人口統計情報を含む）を使用して、特定のユーザーにとってのマイクロホワイトスペースとマクロホワイトスペースの適切なバランスを決めることができます。閲覧者間で一貫して適用できる「経験則」はありません。ユーザー体験がつねにそうであるように、製品またはサービスのターゲットユーザーに確認する必要があります。
ブランディングメッセージ - ホワイトスペースの使用は、企業の予算やそれによる製品の品質を示唆することができます。 Apple、Mercedes Benz、IKEAなどの企業ブランドを考えてみましょう。彼らはどのようにこの理論を裏付けているでしょうか？
下の画像は、BBCのニュースサイトの古いページであり、マイクロホワイトスペースとマクロホワイトスペースの両方のホワイトスペースが示してあります。他の紙の新聞やニュースのWebサイトも、ホワイトスペースの使用が十分でない傾向にあります。代わりに、彼らはページ上にある大量のコンテンツを通じて信頼性を示しています。大量のコンテンツによって、私たちの世界で「さまざまなことが起こっている」ということを表現しているのです。
積極的 対 受動的
マイクロホワイトスペースとマクロホワイトスペースという区別のほかに、ホワイトスペースを積極的または受動的な観点で見ることもできます。
積極的なホワイトスペース - ページの構造を強調し、ページのコンテンツを通してユーザーを誘導するために使用されます。
受動的なホワイトスペース - 文章やフロー、コンテンツの順番などを通して、ユーザーを誘導するのではなく、レイアウトの見た目の美しさを向上させるために適用されます。たとえば、フォントグリフと段落の行との間のホワイトスペースは、以下のように機能します（Boulton、2007）。
上記の画像は、左からホワイトスペースが適用されていないテキスト、受動的なホワイトスペースが適用されたテキスト、受動的なホワイトスペースと積極的なホワイトスペースの両方が適用されたものの違いを示しています。
- 一番左側のものでは、文字、行、段落などの間にホワイトスペースがありません。ホワイトスペースがないと、テキストが乱れて圧縮されてしまうため、読むことがとても難しいです。
- 中央の例では、受動的なホワイトスペース（およびマイクロホワイトスペース）を加えました。最初のものに比べてより楽に読むことができます。
- 右側の例に移ってみると、テキストを通して私たちを誘導してくれる積極的なホワイトスペースが加わっています。幸いなことに、私たちが最初に見た難しい「テキストの壁」は、これまで慣れ親しんできた形式でレイアウトされたものになっています。ホワイトスペースはテキストの全体的な読みやすさとフローを強化することができる上、私たちの目や精神的な負担を軽減するためにも必要です。
ホワイトスペースをデザインする際に考慮すべき３つの要素
読みやすさ
すでに見たとおり、インターフェイスのコンテンツを読みやすくするためには、マイクロホワイトスペースが不可欠です。フォントやサイズ、色、スタイル、リーディング、カーニング、トラッキングなどのデザインのタイポグラフィ仕様を選択する際に、ホワイトスペースを考慮する必要があります。
前のページの画像を覚えていますか？ ホワイトスペースのレイアウトを変更すると、読み取りのパフォーマンスと全体的なユーザー体験に影響を及ぼします。ページが読みやすければ、ページにとどまる可能性が非常に高いです。
デザイントーンとブランディング
ホワイトスペースは全体のデザイントーンに貢献します。マクロホワイトスペースが多いWebサイトは、ミニマリズムや贅沢さを示すでしょう。ニュースのWebサイトの場合のように、マクロホワイトスペースが少ないWebサイトは、情報量の多いサイトであるという印象を与えるかもしれません（Kyrnin、2015）。
注：これらのホワイトスペースの表示は、「不変のもの」ではありません。ユーザーに対して、ホワイトスペースの使用についてテストすることはつねに良いことです。ユーザーだけが、あなたのデザインをどのように理解しているかを伝えてくれるのです。
注目と注意
ホワイトスペースは、インタラクティブなコンテンツを通じてユーザーを誘導するのに役立ちます。フォーカスを作り、特定のレイアウトパーツにユーザーの注意を向けるのに役立ちます。
Webサイトの戦略計画の一部は、特定の要素やコンテンツに優先順位を付けることです。多くの視覚的手法を利用して、特定の要素を目立たせることができるのです。視覚的手法の１つは、焦点の周りにあるホワイトスペースの量を調整することです。ブランディングや印刷業界では、ユーザの注意をブランドメッセージに集めるためにこの理論を適用しています。
まとめ
ホワイトスペース（ネガティブスペース）は、デザイン要素間におる領域のことです。デザイナーがユーザー体験を設計するためのもう１つのツールです。ホワイトスペースは必ずしも白でないといけないわけではありません。UIの要素や特定のコンテンツなどがない部分を示す名前にすぎません。
デザイナーとして、次の４つの主な要素に基づいてホワイトスペースを取り入れることができます。
- コンテンツ
- デザイン
- ユーザー
- ブランド
マクロホワイトスペースを使用してレイアウト内のコンテンツを整理し、表示されたコンテンツのブロックまでユーザーを導きます。 テキスト、画像、およびコンテンツのブロックでわかるように、デザイン要素の中にはマイクロホワイトスペースを使用します。
また、ホワイトスペースは受動的あるいは積極的というアプローチをすることもできます。 受動的なホワイトスペースは、ユーザー体験の促進以外に、デザインにおける特定の役割がありません。読みやすさのためだけに使用されます。
積極的なホワイトスペースは、ユーザーの注目と注意を集めます。そのため積極的なホワイトスペースは、どちらかというと目立たせたりはっきりと表現したりする場合に適しています。
