ビジュアルの一貫性は非常に重要で、視覚的に統一感のあるページを構築することは暗黙の了解となっています。この記事では、バランスとビジュアルの一貫性をUIに取り入れようとする際に参考になる情報をまとめてみました。
当サイトの最初のゲスト記事として、OSSMedia Ltd.のデザイナー、Ava GarciaがUIデザインにおけるビジュアル的一貫性の重要性と、その一貫性を達成しやすくするためのいくつかのヒントを書いてくれました。Avaと彼女の仕事についてもっと関心がある方は、このページの一番下の紹介文をご覧ください。それでは、彼女の記事をお楽しみください！
・・・
UIデザインがWeb開発の最も核心的な要素だということに異論を唱える人はいないでしょう。ユーザーは面白くて使い勝手のいいWebサイトやアプリを喜びますし、UIデザインはユーザーが優れた製品との容易で快適なインタラクションを行えるUIを作り出すものです。
優れたUIデザインは、インターフェースに接した時に、ユーザーが何をすべきかがすぐわかることを目指しています。簡単に言うと、優秀なUIデザインとは、どんなタスクでもユーザーが最も効率的にこなせるようにしてくれるものなのです。
Webサイトデザインの見た目と印象は間違いなく大事なことです。しかし、UIがいかにうまく機能するかは、Webページを成功させるために極めて重要なポイントです。
UIデザインが成功するのには様々な要因がありますが、WebデザインのUIに設けられた各要素が、いかにビジュアル的な一貫性を保っているかということが最も重要になります。UIデザインに一貫性が欠けていると、アプリやサイトのデザインが混沌として見え、ユーザーを混乱させてしまうからです。一方で、ビジュアルの一貫性を保つことができれば、ユーザーはシステムを使いやすくなります。
視覚的に一貫性のあるUIパーツ
この記事では、UIデザインにおいてビジュアルの一貫性を保つのに役立つテクニックをいくつかご紹介します。
まずは、UIデザインにビジュアルの一貫性があるとどういったメリットがあるかをざっと見てみましょう。
UIデザインにおけるビジュアル的一貫性のメリット
ユーザビリティの向上
使いやすいWebデザインはトラフィックを増やし、ビジュアルの一貫性はUIデザインのユーザビリティを高めてくれます。コンテンツを体系的にアレンジしたり掲載したりしやすくなるからです。
効率的なコミュニケーション
優れたUIデザインは、ユーザーにとって最も重要なコンテンツに素早く簡単にアクセスさせてくれるものです。そのためには、ユーザーに見せたいコンテンツを特定の方法で優先して見せることが重要になります。Webページ上の各要素にビジュアルの一貫性があれば、サイト上のデータの中で最も重要なところがわかりやすく簡潔に見えるようになります。
強くエモーショナルな反応をかきたてる
完璧にデザインされたUIは、エモーショナルな反応をかきたてる力があります。感情を伝えることのできるUIは、利用者との絆を作りやすく、サイトの滞在時間が長くなります。感情は決断を促してくれますし、ビジュアルの一貫性があることで、UIデザインを通じてエモーショナルなインパクトを生み出すことができます。
ビジュアル的に一貫性のあるUIデザインを作り出すテクニック
ユーザーの行動を理解するためのヒートマップ
Webデザインを決定する時、全員とは言わずともデザイナーのほとんどがGoogleアナリティクスに頼っています。しかし、この種の典型的な方法は、サイトに来訪してくれたユーザーの人数や、ページ内のクリック回数を示してはくれますが、なぜユーザーがそのページにランディングしたかは教えてくれません。
左：複数のエクステンション 右：モバイルサイトのリンクのみ
ユーザビリティにより優れたUIデザインには、当然「どうやって」よりも「なぜ」を知ることが大切です。そこで便利なのが「ヒートマップ」です。サイト来訪者が最大の関心を示したのがデザインのどの部分なのかがわかります。例をあげると、ヒートマップ調査を実施することで、ユーザーがチェックアウトボタンをクリックしているかどうかを知ることができます。Bing広告の場合は、例えば、アイトラッキング調査を実施した結果をヒートマップにしたところ、広告にモバイルのエクステンションがより多く含まれているものほどより注目を集めているということが判明しました。
ユーザーがサイトの情報にアクセスするパターンがわかりさえすれば、確実にビジュアル的一貫性をもってUIデザインに要素を入れることができます。
適当な余白の使用
余白はWebデザインで特に過小評価されているものだと言えるでしょう。ユーザーには空とかスペースの無駄と見られているかもしれません。しかし、これはUIデザインの要素間にビジュアル的一貫性を保つには最も実行しやすい手法の一つなのです。
余白はサイトの異なる要素間に設けるスペースとされています。最も重要なことは、余白はコンテンツを読みやすくしてくれるということです。加えて、Webページに素早く目を通しやすくなります。例えば、あなたがある店舗を訪れたとしましょう。十分なスペースがなければ、快適に店舗内を移動することができないのは明白です。同様に、UIデザインにも適当な余白がなければ、サイトのレイアウトはサイト訪問者にとって理解に苦しむものとなります。
オンライン調査によると、実際に、戦略的に余白が設けられているものは読みやすさが約20％も向上すると結論づけられています。一言で言えば、余白はユーザーエクスペリエンス全体の向上に極めて重要な役割を果たすということです。
Webページ内で見たり操作したりするのにあまりにも必死にならなければいけないようなページは誰も使いたくありません。適当な余白の使用は、サイトをよりすっきりと見せ、コンテンツや他の要素を読みやすくしてくれます。素晴らしい例として、Dropboxの余白の使い方が優秀です。
UIデザインの全要素に適切なコントラストの使用
UIデザインでビジュアルの一貫性を生み出す三つ目のテクニックは、形やサイズ、色などの要素に適切なコントラストを使用することです。例えば、メインのナビゲーションメニューに白などの明るい色を使う場合に、背景の色でまた黄色などの明るい色を使うと、メニューアイテムにビジュアルの一貫性がなく、読み難くなってしまいます。フォントサイズや他のデザイン要素にも同じことが言えます。要素に不適切なコントラストを用いると、サイトにおける視覚的な階層がわかりにくいものになってしまうのです。
ですから、デザイン要素間のコントラストは適切なものを使うようにしてください。CSSを使うと、そうした要素間の一貫性を保持しやすくなります。例えば、Red HatのWebサイトは幾つかの要素が同一のコントラストで表示されており、サイトを通して一貫したコンテンツを提供しています。下のRed Hatのサイト画像を見ればわかるように、主ナビゲーションと二次的ナビゲーションにそれぞれ同一の色のコントラストが使用されているため、見た瞬時にわかるものとなっています。
終わりに
UI要素をどう視覚的に表示するかを優先することは、Webサイトやアプリケーションを構築する際に決して無視すべきではありません。ビジュアル的一貫性のあるUI要素を使うと、混乱を招かずに、よりクリエイティブなデザインを生み出すことができるようになります。
