ホワイトスペース（または「ネガティブスペース」）は、ページの要素と要素の間や、その周りの空いたスペースのことです。多くの人は画面の貴重な部分を無駄にしていると思うかもしれませんが、ホワイトスペースはデザインにおいて不可欠な要素なのです。
「ホワイトスペースは受動的な背景ではなく、能動的な要素とみなされる」 ―Jan Tschichold
今日は、あなたのデザインにあるホワイトスペースを使って、きれいで整頓された印象を与える方法について説明します。
ホワイトスペースとネガティブスペース
「ネガティブスペース」という用語は、元は芸術の世界で物体の形状をより正確にとらえる技法として使われてきました。スペースは白く塗る必要はありません。焦点を当てたいコンテンツと競合しない空いたスペースは、「ホワイトスペース」として分類することができます。実際の白い色と実質的には結びついていないので、「ホワイトスペース」と「ネガティブスペース 」はどちらを使っても変わりはありません。
Kasimir Malevichによる 「Suprematist Composition：飛んでいる飛行機」「ネガティブスペース」は、コンポジション内の要素の間のスペースです。
グラフィカルユーザーインターフェイスのホワイトスペース
伝統的な芸術と同じように、グラフィカルユーザーインターフェイスの対象物にも、ネガティブスペースが必要です。テキスト、ボタン、ロゴなどの対象物にも余裕が必要でしょう。良いユーザーインターフェイスはすべて、適切なホワイトスペースを、上から下まですべてのページ内の要素に組み込んでいます。GUIにおけるホワイトスペースの要素は次のとおりです。
- マージン、パディング、ガター（グリッドのカラム間にある余白）
- グラフィックや画像の周りのスペース
- テキストコンテンツ内の行間隔と文字間隔、列間のスペース
ページ上にある余白は、どんなに小さくてもUI要素が占めるスペースと同じくらい重要です。なぜなら、空いたスペースでさえも目的を果たし、レイアウトの視覚的な完全性を補完するからです。
ホワイトスペースは以下の４つの不可欠な効果を提供します。
１. 理解度の向上
余白は、コンテンツを流し読みする場合と読み込む場合の両方をより簡単に、そして予測可能にします。
読みやすさと可読性の優先順位付け
ページコンテンツ自体を明確にしやすくするため、テキスト間のスペースは重要です。可読性（文字と単語をどの程度うまく識別できるか）と読みやすさ（コンテンツの流し読みしやすさ）の両面でコンテンツを最適化する必要があります。
ウィチタ州立大学による研究では、ホワイトスペースが増えると読解力が改善することが確認されています。しかしその代わり、読む速度は低下する可能性があります。Dmitry Fadeyevは以下のように指摘しています。
段落の間と左右のマージンでホワイトスペースを適切に使用すると、理解力が最大20％アップするでしょう。
テキストコンテンツを最適化する際に注意すべき２つの重要な点は、段落のマージンと行間（各行の間隔）です。行間隔は、テキスト本文の可読性を大幅に向上させることができます。一般的に、スペースが大きくなるほど、読んでいる間のユーザーの満足度は増します。しかしあまりにもスペースが多いと、統一感が損なわれてデザインがまとまりのないものになる可能性があります。ここでもまた、完璧なバランスを見つけることが重要なのです。
左：すべてがかなり窮屈です。ホワイトスペースが足りないと読者の目に負担がかかります。右：程よい間隔は読みやすくさせます。イメージクレジット：アップル
２. 関係の明確化
全体のレイアウトは、それぞれのパーツが集合することで成り立ちます。コンテンツの関係は、周囲のホワイトスペースによって明確になります。ホワイトスペースは視覚的なヒントとして機能するのです。
関連する要素をグループ化する
人々がどのように視覚情報を整理するかを観察するとき、心理学者のゲシュタルトは、互いに近くにある物体は類似しているように見えるという「近接の法則」を確立しました。
ゲシュタルトの法則は、近接した対象物が１つの「単位」として見えることを指摘し、そのためホワイトスペースが視覚的なヒントとして働くとしています。
GUIのコンテキストでは、これは近接した物体が１つの「単位」として見えることを意味します。たとえばWebフォームでいうと、関連するフィールドの近くにラベルを配置して１つにまとめたほうが良いでしょう。
関連するフィールドの近くにラベルを配置すると、情報がより明確に伝えられます。
３. 注意を引く
ほとんどのアプリやWebサイトでは、十分な余裕を作らずに要素や情報を詰め込んでしまうことに悩まされています。
インターフェイスが煩雑になると、ユーザーに過度の情報を与えることになってしまいます。煩雑なページは魅力的ではなく、特にビジュアルヒエラルキーがない場合には、ユーザーがコンテンツを読みたくなくなります。
インターフェイスが雑然としていて、ユーザーに過度な情報を与えてしまう場合は、煩雑さを減らすことで理解力が向上するでしょう。邪魔なものを排除することによって、ユーザーはすぐに見えるものだけに集中できるようになります。
適切なコンテンツへユーザーの視線を誘導する
距離と注意力との間には関係性があります。距離が遠いほど注意を引くのです。要素を減らすことで、既存の要素をさらに目立たせることができます。
ホワイトスペースを利用して、ユーザーの視線を特定の要素に引き付けましょう。特定のコンテンツ領域の周りに、余分にパディングを追加します。すると、画面上からほかに注意を引くものがなくなるので、コンテンツ領域にユーザーの注意を集めることができます。
対象物の周りのホワイトスペースが多くなればなるほど、ユーザーの目はそこに引き寄せられます。
ご覧の通り、Mailchimpはデザインにおいてホワイトスペースを大きく主張しています。 Mailchimpのホームページを流し読みしてみると、「サインアップ無料」のボタンが即座に注目を集めることは明らかです。
ビジュアルヒエラルキーの作成
ホワイトスペースが適切に使用されると、ページに一般的なフローとバランスが生まれるため、デザインの意図を伝えやすくなります。
デザイナーとして、有効なコミュニケーション手段を生み出すことは私たちの責任です。
ホワイトスペースはヒエラルキー全体を支えることができます。対称性または非対称性のいずれかを生成します。対称性は記憶と調和を生み、一方非対称性は注意を引きます。非対称性は、ページ上の特定の領域またはページ内の特定の要素への注意を喚起するのに最適です。要素が非対称なスペースを使用する場合、周囲のほかの要素から目立たせることができます。
要素が非対称なスペースを使用する場合、周囲のほかの要素から目立たせることができます。
４. 高級感の創造
ホワイトスペースはよくユーザー体験を向上させるための技術であると考えられますが、純粋に美的な目的で使用することもあります。デザイナーは、高級ブランドに優雅な印象を生み出すためにホワイトスペースを使用します。タイポグラフィーと写真が繊細に組み入れられ、豊富な余白が高級品市場全体で見受けられます。
ホワイトスペースは洗練さと高級感などをフィーリングを演出することができます。
Whitespace can add a feeling of sophistication and luxury into a generic page by creating the feeling that the product is more important than the real estate it lives in.
製品自体に発言させましょう。
ファッションはマーケティング資料に広範囲のホワイトスペースを使用して、洗練されていて高品質、かつ一般的に高価なものであることを読者に伝えます。
結論
ホワイトスペースは空っぽなキャンバスではなく、強力なデザインツールです。ホワイトスペースを適用させることは芸術であり科学なので、習得することは難しいかもしれません。どのくらいのホワイトスペースが良いレイアウトを作成するために必要かを理解するには、たくさんの練習が必要です。デザインすればするほど、より多くを学ぶことができるでしょう。
