フラットデザインとユーザビリティ

• 公開日 : 2014年9月22日
• カテゴリー : ユーザビリティ / アクセシビリティ

ここ数年、多くのウェブサイトで「フラットデザイン (flat design)」が採用されるようになりました。立体的な/写実的なあしらいを極力排除することで、ユーザーインターフェース (UI) をすっきりと洗練されたデザインに見せることができる、という表現手法です。

かつては「スキューモーフィックデザイン (skeuomorphic design)」との対比で様々な議論を呼んだフラットデザインですが、実質的に広く定着したと言える現在、フラットデザインの是非を問うよりも、ユーザビリティの高いフラットデザインを実現することが大切だと考えます。実際、色々なウェブサイトやアプリケーションを見ていると、あしらいをフラットに (平坦に) することが目的化してしまっているのでしょうか、使いにくい (あるいは機能に気づきにくく使いこなせない) ものが少なくないように感じます。

この記事では、フラットデザインにおけるユーザビリティの配慮について、考えてみたいと思います。

操作可能な箇所はその旨を明示する

フラットデザインのユーザビリティ問題としてよくあるのが、デザインをミニマルにしようとするあまり、操作上必要なはずの視覚的な手がかりまでも省いてしまうことです。操作可能な箇所 (クリック/タップできる箇所) は、その旨が明示的であることが大切です。

たとえば以下のようなデザイン上の工夫によって、ユーザーの認知を後押ししたいものです。

• わかりやすい (ユーザーに誤解なく意味が伝わる) アイコン
• 操作すると何ができるか (その先に何があるか) を的確に伝えるラべリング
• 操作可能箇所を視覚的に識別できる囲み線や背景色
• 操作可能な要素を配置するうえでの工夫 (チャンキングやレイアウトパターンなど)

なおフラットデザインにおいては、基本的に「メタファ」(見た目などを手がかりにユーザーが直感的に理解してくれることを頼りとする方法) を利用することができず、UI の意味は「イディオム」(いわば慣用句としてユーザーが学習して理解してくれることを頼りにする方法) としてユーザーに伝えることになります。

フラットデザインの UI が「イディオム」として成り立つには、各々の UI 部品の意味や機能が「ユーザーのこれまでの学習によって形成されたメンタルモデルと合致していること」が条件になります。このため (特にアイコンなどは) 他サイトでも広く採用されているお馴染みのマナー (かつアンチパターンではないもの) を採り入れるのがよいでしょう。そうすることで、ユーザーが UI を直感的に認知できることが期待できます。

それでも、ユーザーによって抱くメンタルモデルが多少なりとも異なるということは往々にしてあるので、「イディオム」としての共通理解をより一層促すための支援も併せてしたいところです。各 UI 部品に平易で簡潔なラべリングを付ける、同種の UI 部品に対して一貫性のあるフィードバック (インタラクション) を提供する、といったことを通じて、ユーザーの学習を後押ししましょう。

脇役でも「使える」ことを示す

フラットデザインでは、付加的な装飾が排除される分、コンテンツそのものが大きくフィーチャーされます。それ自体はよいことですが、逆にメインとなるコンテンツ以外は、視覚的なヒエラルキー表現において、極度に存在感が落とされてしまうことがあります。たとえば、操作可能であるという視覚的な手がかりが無くなったり、文字が小さくなったり薄くなったり、控え目なあしらいのアイコンの中に機能が折りたたまれてしまったり...といった具合です。

ウェブサイトの中には、コンテンツ以外の「脇役」にも、たとえばナビゲーションメニューやサイト内検索など、重要な機能があります。これらは「主役」であるコンテンツを阻害してはいけませんが、その一方で、使いたいときにはすぐに使える必要があります。主張はしなくても、機能が存在することは (ちょっと意識して画面を一瞥すれば) 伝わる...というバランスを意識したいところです。

アクセシビリティに配慮した配色をする

フラットデザインでは、立体的な/写実的なあしらいが極力排除される分、情報を識別させる手がかりとして配色に依存するケースが多いと言えます。その際、特に視覚的なヒエラルキーを色の違いによって表現する場合など、文字色と背景色のコントラスト比が不十分になってしまうことが往々にしてあります。

色のコントラスト比が不十分だと、ロービジョンや色覚に特異性を持つ人、屋外でサイトを閲覧する人など、多くのユーザーに影響するので、アクセシブルなコントラスト比を維持したカラースキームにする必要があります。できれば、[Tab] キー操作によってフォーカスが当たったときのスタイリングも含めて、アクセシビリティに配慮した配色をしたいところです。

間接操作でも使えるようにする

フラットデザインが生まれた背景のひとつとして、タッチインターフェース (スマートフォンやタブレットなど) によるコンテンツの直接操作が可能になったことがあります。操作したい対象物に直接指で触れて、スワイプして動かしたり、ピンチ＆ズームで拡大したり、といったことができるようになったので、ボタンなど従来の UI 部品を無くすことが可能になった、というわけです。

たとえば、もともと iOS アプリとして提供された (現在では Mac OS X 版もある) To Do 管理アプリ「Clear」などは、直接操作を活かしたフラットデザインの好例と言えるでしょう。

このように、直接操作が可能なタッチインターフェースがフラットデザインの普及を後押ししているという要素はありますが、その一方で、ウェブサイトの場合、マウスクリックやキーボード操作という間接操作もまだまだ少なくありません。そういった間接操作でも問題なく使えること (ドラッグなどの特殊なマウスジェスチャーをユーザーに強要することなく、クリック操作および [Enter] キーの押下で利用できること) を意識したいところです。

ユーザビリティテストで検証する

以上、フラットデザインで特に意識したいユーザビリティ上の配慮について挙げてみました。フラットデザインは比較的新しい表現手法ということもあり、上記以外にも、ユーザビリティを阻害する要因は大小様々あるかもしれません。簡易的に身近な人に協力してもらう形でもよいので、ユーザビリティテストを実施してデザインの妥当性を検証することをおすすめしたいと思います。