2011年 UI / UX トレンド

2011年の1月。まだ年が始まったばかりでしたが、今年の Web デザイントレンドという記事が発表されたりしていました。その後、数々のトレンド記事が国内外で数多く紹介されていますが、ルック＆フィールに関する話題、又は技術的な側面から見た話題が多くを占めています。こうしたトレンドを知ることは重要ですが、トレンドの全体像として捉えるには多少偏っていると思います。そこで今記事では、UI / UX デザインの側面からみた 2011 年のトレンドを幾つか紹介していきます。

To Do アプリ Flow は、まるでデスクトップ向けの Mac アプリを使っているかのような UI デザインを Web 上で再現しています。

この記事で挙げる幾つかのトレンドが現れるキッカケを作ったのは、テクノロジーと Web が今まで以上に強い連携が可能になったからです。デスクトップ（又はオフライン）アプリケーションと同等の能力を Web で実現出来るようになったことで、UI デザインの考え方も大きくシフトしました。Ajax が大きな注目を浴びた 2005 年頃も同じようなことは言われていましたが、第二波が HTML5 / CSS3 / 豊富な JavaScript ライブラリを中心とした Web 技術によって再びやって来たといえるでしょう。UI デザインは今まで以上に自由な表現ができるようになりましたし、デスクトップアプリケーションで出来ることは Web アプリケーション上でも可能になりました。

Webテクノロジーが UI デザインに新たな側面を築き上げたからこそ、以下の4つのトレンドが見えてきたといっても過言ではありません。

1. モバイルが生み出したデザインサイクル

スクリーンサイズによって柔軟にレイアウトを変える Responsive Design の事例をたくさん見たい方は MediaQueri.es がオススメ。

スマートフォンの普及により表現豊かなモバイル Web デザインが本格化したのは今年。限られたスペースでどのように情報を配置したら良いのか、インタラクションをどのように実現したら良いのかを考える機会が増えました。パソコン向けに Web サイトを構築していた時から、スクリーンサイズ（ブラウザのウィンドウサイズ）は重要な考慮項目でしたが、当時にはなかった制限が今はあります。またタブレットの登場により、想定しなければならないスクリーンサイズを特定することはいよいよ不可能といってもいい状態になりました。

限られたスクリーンサイズは UI デザインの再考に繋がりました。簡単に実行出来るように大きくて分かりやすい UI が随所に見られるようになりましたし、選択肢が多い場合はファーストインプレッションでは隠れた状態になっている場合もあります。また、コンテンツを引き立てるためにメニューはスクロールしているときや利用者が呼び出したとき以外には表れないというタイプも出てきました。

こうしたスモールスクリーン / モバイルで培われた UI デザインのノウハウは、今度はデスクトップ上の UI デザインにも影響を及ぼしています。選択がしやすいメニューも多くなってだけでなく、コンテンツサイトでも無駄な要素を極力割ける傾向がでてきています。今年の夏に発売される Mac OSX Lion には、モバイルの UI / UX デザインをデスクトップへ還元している例をたくさん見つけることが出来ます。

2. コンテキストによる補助

多言語サイトでは、言語選択をしなくても自動的に母国語が表示されます。Twitter では、場所登録をしなくても近辺で熱いトピックを表示しています。

文脈・コンテキストという言葉は、今年だけでも何度か取り上げている重要なキーワード。利用者の場所だけでなく、利用しているデバイスの状態によって UI は柔軟に適応するようになりました。設定画面を用意して、利用者のインプットを待たなくても、文脈という自動的に取得出来るデータを活用することで、深みのある体験を提供することが可能になりました。

文脈はボタンのラベルといった UI デザインの細かい部分にも影響を与えるようになりました。電話番号をクリックすれば電話がすぐにかけたり、ボタンに「YouTubeに投稿する」といった具体的なアクションが表記されるようになったのも、利用者の文脈からズレないようにゴールに導くための最適化の手法です。

3. ダイナミックで感覚に響く動き

WordPress.com に標準実装されている iPad 向けテーマ On Swipe には、ダイナミックな動きの重要性をに気付かされる要素が数多く含まれています。

Ajax を活用した非同期情報通信を皮切りに、ページのなかの様々な情報要素をダイナミックに変化させることが可能になりました。その変化にもアニメーションを付けたり、利用者に注目してもらいたい場所をハイライトするなど、無意識に利用者を誘導させるための手法が今まで以上に出てきました。

また、タッチインターフェイスの普及によりアニメーションがより一層重要な存在になってきています。スクリーン上にあるデジタルオブジェクトに『触れる』という行為を行うわけですから、利用者が本当に触れているかのような感覚を与える必要がでてきました。指を左に動かせば、その指に合わせるかのように UI も左へスムーズに移動する・・・タッチインターフェイス以前は、なくても悪影響はなかったアニメーションですが、タッチという感覚を再現させるために不可欠な存在になりました。

繊細な動きに合わせるかのように見た目もより精密な UI が増えてきました。特に iPhone アプリが本物のオブジェクトをモチーフにしていることが多く、そのためにディテールが細かい UI 要素を頻繁に見かけるようになりました。Windows Phone 7 のようにフラットな見た目のものが出てきましたが、明確なアイコンデザインやジェスチャーに密接に関わり合う動きを見ても、ディテールが細かい UI であることには変わりありません。

4. フォーカスがすべて

複数の写真を組み合わせる PhotoShake! は、写真の組み合わせのフローの設計に徹底的にフォーカスされているアプリ。それ以上でもそれ以下でもない。

モバイル向けのアプリケーションがシングルタスクが多いのは、単にスクリーンサイズが小さいという理由だけでなく、利用者の時間や環境に制限があるからです。人は家にいても仕事場にいてもダイナミックに変わり続けています。彼等の時間の隙間に入り込んで、彼等のタスクや欲求を満たすためのものを作るとするのであれば、必然的にフォーカスされたプロダクトになります。

フォーカスされているということは、利用者がどのような道筋でアプリケーションやサイトを利用するのかが想定しやすくなりますし、その道筋を中心にデザインをするという傾向が強まります。ページで考えるのではなく、全体のフロー（流れ）を利用者の文脈と掛け合わせて考えて徐々に細部の設計を行うという考え方になりました。機能の取捨選択も、核となるフローに必要とされているかどうかを基準にして絞っていきます。シンプルかどうかではなく、スムーズ / 明確かどうかが鍵です。

フォーカスとは、UI デザインに影響するだけでなく、デザインやビジネスの決定へのフォーカスも必要であることを示しています。利用者の目的がフォーカスしているのと同じように情報提供側である私たちもフォーカスが必要ですし、そのためには捨てる（あえて実装しない）という勇気も欠かせません。