UIデザインで大切な空白スペースの効果的な使い方
Post on:2015年7月1日
sponsors
空白スペースは単なる美ではありません、ユーザインターフェイスの成功への鍵です。空白スペースがWebデザインやUXデザインにおいてどのように使うと効果的に機能するかを紹介します。
Why White Space Is Crucial To UX Design
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
はじめに -UXデザインにおける空白スペースの価値
メインとなるオブジェクトを強調し、ユーザーの注目を引きつけるネガティブスペース・空白スペースの重要性をすべてのビジュアルアーティストが理解しているでしょう。
ネガティブスペース（デザイナー的には空白スペース）の役割は、それ自身は目立たないで主役を目立たせる脇役のようなものです。もしあなたがデザインで意図的に空白スペースを使用していないのであれば、多くのオブジェクトが目立とうと競争している状態でしょう。インタラクションデザインにおいて、空白スペースは美しさだけでなく、3つの重要な機能を提供します。
1. 空白スペースでコンテンツを理解しやすくする
もしあなたのインターフェイスがあまりにも多くの情報を詰め込みすぎてユーザーに負担をかけているようであれば、その散らかった情報を減らすことでユーザーの理解を改善することができます。実際にパラグラフ間に空白スペースを適切に使ったり、左右にマージンを使うことで、ユーザーの理解を20%引き上げることがUsauraのクリエイターDmitry Fadeyev氏の研究で証明されました。空白スペースを使うスキルは、ユーザーに理解しやすいコンテンツの量を提供することができます。
空白スペースは4つの要素に分解することができます。
- ビジュアルの空白スペース
- グラフィックやアイコンや画像の周りにあるスペース
- レイアウトの空白スペース
- マージン、パディング、ガター（溝）
- テキストの空白スペース
- 行間、文字間
- コンテンツの空白スペース
- テキストのカラムを分けているスペース
Mediumはこの空白スペースの4つの要素すべてを適切なバランスで使用した素晴らしい例です。最初にインタラクションの面からユーザーのゴールについて見てみましょう。ユーザーは可能な限り素早く面白いコンテンツにアクセスすることを望みます。トップページでは両側にたくさんの空白スペースを使用してコンテンツを強調をして配置し、そのゴールを促進しています。ビジュアルとコピーの間には十分なスペースがあり、画像の周りも同様です。それぞれの画像の左のスペースは下のスペースと矛盾がないようにデザインされています。
空白スペースはメンタルマップを作成するのに役立ちます
空白スペースは理解を改善するだけでなく、メンタルマップの作成にも役立ちます。例えば上部のナビゲーションとコンテンツの間に使うミニマルな空白スペースは、ユーザーがコンテンツを認識することを助けます。ナビゲーションに正しくフォーカスがあてられることで、結果的にそれがコンテンツを救うことになります。より多くの空白スペースをコンテンツのフローから分離させることができます。この空白スペースの使い方は、異なる機能性をインターフェイスの異なる部分に割り当てています。テキストに十分な行間を与えることも読みやすさが改善されます。
空白スペースについてさらに多くを学ぶためには、下記の記事も参考になります。
2. 空白スペースで関係を明確にする
ビジュアルインフォーメーションを整理するとき、ゲシュタルト心理学者たちはお互いに近くのイメージが類似であるように見えるという「近接の法則」を見つけました。例えば、下の画像を見てください。
28個の点の集まりというより、点のグループが2つあると感じる人が多いでしょう。点は全て同じで、それらを区別している唯一のものは分離する空白スペースです。このことはインタラクションデザイン、特にフォームなどの入力において、非常に重要なポイントです。
参考：Form Design Quick Fix
ここで覚えておくべき2つのポイントがあります。
ラベルは適切なフィールドに近くに配置
ラベルは関連したフィールドにより近く配置されることで、よりはっきりと情報を伝えることができます。また、それぞれのフィールド間に適度なスペースを与えることで、フォームに入力することに対してユーザーの信頼を増やすことになります。
参考：Web UI Design Best Practices
関連した項目はグループ化
長いフォームに入力する作業は、ユーザーはフォームを見ただけで圧倒してしまいます。しかし、入力項目を適切にグループ化することで、これなら入力できるかもと思わせる助けになります。例えば15個の項目を3つのグループに分けることで、そのプロセスは楽に感じるでしょう。量は同じです、しかしユーザーの印象は異なります。フォームのフィールドは通常ユーザーに多くの軋轢を与えますが、同じ原則はナビゲーションとサイトのコンテンツも同じです。ナビゲーションに20個のアイテムを同時に見せるのではなく、ドロップダウンでまずは4-7個表示させ、残りはサブメニューに分類させることができます。
3. 空白スペースで注意を引きつける
上で説明したように他の要素の欠如は、既存の要素を目立たせることを意味します。下記のebookで紹介しているYelpの変更は好事例です。プロトタイプで検索機能から分離するために多くの空白スペースを加えました。そうすることでカテゴリアイコンはずっと目立つようになり、しかも縦方向のフォーマットほど散らかっていません。ホバーをトリガーにしたカラーを満たすアニメーションは、ユーザーにカテゴリのセクションが分かりやすく多くの注意を引きつけています。ユーザーの視線がバナー広告にあまり目がいかないのと同じように視野の狭さを選択的な注意に導きます。また、コンテンツ間のスペースが少なくなっていて異なる時は同様に知っておく必要があります。
空白スペースの力は人間の注意力と記憶力の限界からきます
最終的に、あなたは空白スペースの力が人間の注意力と記憶力の限界からくることを理解する必要があります。Yahoo!とGoogleのインターフェイスを比較してみてください。Yahoo!はユーザーに多くの行動がすぐとれるようにデザインされており、Googleはユーザーが一番求めている検索エンジンを見つけることができるようデザインされています。ユーザーのゴールを考えると、Googleのデザインの方がより効果的なインタラクションを提供していると言ってよいでしょう。
たいていのデザイナーは「ユーザーに考えさせない」というのを支持します。これはユーザーが怠け者であるということではありません、ユーザーは多くのことを心がけており、そこに余分なインフォメーションをたくさん与えてタスクが完了をするのを邪魔しないという意味です。インターフェイスデザインで「認知負荷」と呼ばれるものです。
ここ数年の間、デザイナーは認知負荷を最小にする戦略を展開してきました。人間の脳は複雑ですが、その欠点は驚くほど予測可能です。1956年に科学者George Millerは、私たちの短期記憶は忘れてしまう前に通常5と9の間のアイテム、平均7つのアイテムを記憶に維持できると調査結果を発表しました。その数はいろいろ議論され、現在では3から6の間が理想であると言われています。
「認知負荷」を減らすことはUIをより有用にするだけでなく、より楽しくします。そしてユーザエクスペリエンスを通じて、調和と変移の意味を作り出すことができるのが空白スペースです。
空白スペースの効果的な使い方やたくさんの事例は、下記のebookに掲載されています。
ebookは無料でダウンロードできます。
sponsors
