ホワイトスペースの効果的な使い方 5 つの例 | アドビ UX 道場 #UXDojo | アドビ UX 道場 #UXDojo

ホワイトスペースは、目に見える要素が配置されている領域と同じくらい重要です。Web デザインにおけるホワイトスペースの素晴らしいいくつかの例を参考に、効果的な使い方を学びましょう。

どんなデザインも、何も置かれていないキャンバスから始まります。Web サイトやモバイルアプリのデザインであれば、空白のアートボードを新規作成し、そこにテキスト、写真、ボタン、メニューなどの要素を追加するでしょう。その際、画面をコンテンツで埋め尽くしたいと考えるかもしれません。しかしその結果はおそらく、雑然として魅力がないユーザーインターフェースです。

優れたデザインには明瞭さが欠かせません。ユーザーインターフェイスはすべてのユーザーが効果的に操作できるよう、明確に視認できるものであるべきです。これは、ページ内のすべての要素に十分なホワイトスペースを与えることで実現できます。

この記事は、まずホワイトスペースのコンセプトを説明し、次にホワイトスペースの 5 つの実践的な使用例を紹介します。

ホワイトスペースとは何か？

ホワイトスペースとは、ページ内のコンテンツや UI 要素の周囲の何も存在しない領域です。ネガティブスペースとも呼ばれます。ホワイトスペースの基本的な役割は、一度に表示するテキストや機能的な要素の量を減らし、デザインに一息つく間を与えることです。

「ホワイト」と呼ばれてはいますが、このスペースは文字通り白である必要はありません。コンテンツや機能要素の背景として機能するあらゆる種類の領域はホワイトスペースと見なすことができます。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

以下のように、ユーザインターフェイスの要素として使われるホワイトスペースもあります。

• テキストの行間と字間
• 機能的な要素（ボタンなど）のマージンやパディング

ホワイトスペースの 5 つの使用例

ホワイトスペースのコンセプトが理解できたところで、ホワイトスペースの使い方に関する実用的なヒントをいくつか見ていきましょう。

1. テキストを読みやすくする

Web やモバイルアプリから得る情報の大半はテキストとして書かれています。ですから、ユーザーが文字を読みやすいようにデザインすることは非常に大切です。その際、ホワイトスペースを可読性を向上させるために使用できます。

テキストを読みやすくする方法のひとつは、行間の垂直距離の調整です。行間が狭すぎると、各行を判別することが難しくなり、テキストの可読性が下がります。一方、行間が広すぎると、各行が分断されて見えるために、テキストの読み上げフローが中断される可能性がでてきます。

では、最適な行間隔はどのように見つけたらよいでしょうか？一般的には、フォントサイズに比例して行間のスペースを選ぶことが推奨されています。欧文の場合は、本文の最適な行間はフォントサイズの 120%~145% です。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

適切な行間はテキストの可読性を高める　出典: Nick Babich

2. 要素同士の結合を表現する

コンテンツの関係はそれを囲むホワイトスペースによって決定されます。そのためホワイトスペースは、人々の情報の理解の仕方に多大な影響を与えます。ゲシュタルトの法則のひとつである「近接」は、近くに位置しているオブジェクト同士は同じグループに見えることを伝えています。下の画像におけるホワイトスペースは、複数のオブジェクトがひとつのユニットであり、バラバラに存在しているわけではないと脳に知らせる視覚的な合図として機能しています。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

単なる円の集合ではなく円によりつくり出された四角形に見える画像　出典: Nick Babich

Web フォームをデザインするときはこの法則に頼ることができます。ラベルとフィールドを近くに配置すればひとかたまりのユニットをつくり出せます。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

名前、住所、e メール、電話番号のフィールドがホワイトスペースを使って並べられている　出典: Nick Babich

3. 特定のオブジェクトにユーザーの注意を向ける

優れたデザインは、ページ内で行うべき操作や注目すべき情報へとユーザーを導きます。ここでも、ホワイトスペースが大きな役割を果たします。特定のオブジェクトの周囲のホワイトスペースを広く確保することで、そのオブジェクトに対するユーザーの注目度を高めることが可能です。これは、オブジェクトの近くの領域に他に目立つものがない場合も同様です。

ホワイトスペースを利用してユーザーの注目を集める手法は、プロモーション用のランディングページに適しています。ホワイトスペースの使い方次第で、特定のコンテンツや CTA ボタンのような機能要素にユーザーの注意を向けることができます。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

「Save Anything. Read Anywhere」に使われている大きなフォントと周囲の広いホワイトスペースが、スローガンに注目を集める　出典: instapaper

簡単な 5 秒間テストを実施すると、ページのどの要素がより多くのユーザーの注目を集めているかを測定できます。必要な手順は、ページを 5 秒間眺めてから目を閉じて、覚えていることを言葉にするだけです。もしユーザーに見て欲しい要素の名前が出てきたなら、ホワイトスペースが適切に使用されていると言えるでしょう。

4. ページに視覚的な階層を作成する

視覚的な階層は、ユーザーがページ上の情報を簡単に処理できるようにコンテンツを視覚的に整理したものです。新しいページを目にした訪問者は、ページを読むのではなくて流し読みする傾向があります。優れた視覚的な階層は、Web サイトの流し読みのしやすさを大幅に向上させます。

ホワイトスペースを使用して、ユーザーがページを流し読みするときの視線を誘導する大まかなフローを作成できます。要素をページ内に配置するときに利用できる基本的なアプローチには、対称と非対称の 2 種類のレイアウトがあります。

対称的なレイアウトは、より目に優しいアプローチです。対称的なデザインには自然と秩序と安定性が生まれるため、脳が情報を理解しやすくなります。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

一方、非対称なレイアウトには当然ながら対称性が欠けています。デザインにおける非対称性は、視覚的な緊張を生み出すためによく用いられます。ページ上の特定の領域や要素に注意を向ける目的にも非対称なレイアウトは利用できます。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

対称と非対称のどちらのレイアウトを使う場合も、バランスを取る必要があることを覚えておきましょう。バランスをマスターするには、コンポジション内の個々の要素の視覚的な重みを理解する必要があります。視覚的な重みは、要素の大きさやコントラストなどの視覚的な属性によって決まります。基本的には、小さいオブジェクトは大きいオブジェクトよりも軽く、コントラストが強い要素の方が弱い要素より目に付きます。

5. 雰囲気を伝える

ホワイトスペースは、デザインの受け取られ方に大きな影響を与えます。すなわちブランドイメージの伝達においてもホワイトスペースは重要です。くっきりとしたタイポグラフィと力強い写真を組み合わせ、その周囲にたっぷりとホワイトスペースを設ければデザインに高級感を与えられます。ホワイトスペースは、宣伝したい製品がページの最も重要な部分であることをユーザーに明確に伝える役割も持ちます。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

ホワイトスペースは無駄なスペースではない

ホワイトスペースは、デザイナーが利用できる強力なツールです。適切に使用されたホワイトスペースは、ビジュアルデザインの重要な一部としてページ上の要素の関係を表現し、インターフェイスの使いやすさを向上させる機能も持ちます。デザインの最初からホワイトスペースを考慮して、UI がとり得る一連の間隔の値をシステムとして作成することを検討してみましょう。ホワイトスペースがデザインシステムの一部になると、定義済みのスペースから選択することを強制されるため、デザインの一貫性をさらに向上させることができます。

この記事は What’s White Space Design? 5 Real Examples（著者:Nick Babich）の抄訳です