デザイン技術の中で、最も軽視されている要素が何か考えたことはありますか? その答えは、他でもないユーザインターフェースです。良くも悪くも、ユーザインターフェースは至る所にあります。例えばウェブサイトや携帯電話、テレビ、腕時計、飛行機や洗濯機にも存在しています。

Photograph: zastavki

ユーザがいれば、そこには必ずインターフェースがあります。つまり、イライラしているユーザがいれば、そこには大抵ひどいユーザインターフェースがあるということです。

グラフィックデザイナーやウェブデザイナーの仕事は、見栄えの良いものを作ることだけではありません。実際に使いやすく、ユーザインターフェースから受けるストレスを最小限に抑えたデザインを考案する仕事です。言い換えれば、ユーザがウェブサイトやアプリをどのように使うかを考え、人々の暮らしを快適にするために最善を尽くす必要があるのです。

ユーザインターフェースは適切に数個のボタンやリンクを並べたものだと、いまだに思っているのなら、考えを改めましょう。99designsでトップレベルの収益を上げているプロジェクトの中には、ウェブやモバイルアプリ向けのユーザインターフェースデザインだけで成り立っているものもあります。ユーザインターフェースは芸術であり科学でもあり、この分野で成功を収めている企業はごくわずかです(Appleは、そのうちの1社です)。

では、ユーザインターフェースデザインの最新トレンドを紹介していきましょう。

1. ミニマリズム

ユーザインターフェースは何年もの間、ゴテゴテしたデザインでしたが、ここにきて原点に戻る傾向があります。少なくともGoogleやMicrosoftといった一部の有名企業はそうです。光沢のあるアイコンは1色またはテキストベースのボタンに変わり、凝ったグラデーションはシンプルなソリッドカラーの配色に置き換えられています。

Websites: Windows 8 (top), Pinterest (bottom)

大半のユーザは、このようなスッキリとしたデザインを大歓迎しています。こうすることでインターフェースは分かりやすく、ユーザの意図する操作の妨げになりません。

使用時のポイント: ミニマルデザインが最も効果的なのは、ユーザが作成したコンテンツがメインになるウェブアプリです。うまくデザインすれば、ユーザクレームが来ることはまずないでしょう。ただし、「この手法はシンプル過ぎる」と感じるクライアントも多くいることを知っておいてください。プロジェクトの開始前には、クライアントの好みを確認しておくと良いでしょう。

2. スキュアモーフィズム

スキュアモーフィックデザインのユーザインターフェースを最初に世に広めたのはAppleです。そして、その後を追うように他の企業も次々とこのスタイルを採用しました。このデザインの手法では基本的に、昔ながらの慣れ親しんだ物の外観や機能を再現し、インターフェースをより直感的に理解できるものにしています。デジタルコンテンツを木製の本棚やブックカバーで表現したデザインは、スキューモーフィズムの典型的な使用例です。

Website: iBooks

このようなスキュアモーフィック性の高いデザインを良しとするか否かについては、ユーザインターフェースのコミュニティ内で意見が割れています。中には、「現実世界の物を再現すれば、それに伴う限界も必然的に再現されるので、ユーザエクスペリエンスに悪影響を及ぼす」と言う人もいます。一方、「スキュアモーフィックデザインには短所もあるが、親しみやすさや親近感などの長所もある」という意見もあります。

使用時のポイント: モバイルアプリのデザインにおいて、スキュアモーフィックデザインは人気が高く、コミュニティでも広く受け入れられています。タッチスクリーンというデバイスの性質上、現実世界の物に触れているような感覚を得られることが理由の1つでしょう。一方、ウェブ上のアプリやプロジェクトにおいては、一般的にスキュアモーフィックデザインはあまり良い選択肢とは言えません。ただし、インターフェースを部分的に改良するために、このタイプの要素を使うことはあります。

3. レーザーフォーカス

レーザーフォーカスタイプのユーザインターフェースでは、ウェブアプリを起動すると、必ず1つのタスクに視線がいきます。重要度が同じくらいのタスクが、複数表示されることはありません。この手法の一番の利点はシンプルさで、ユーザは瞬時にアプリの目的と、何をすべきかを理解できます。

03-Laser-focus1

Websites: Google homepage (top), Air B’n’B (bottom)

使用時のポイント: レーザーフォーカスの手法は、前面に出したい主要機能が1つあるウェブアプリやウェブプロジェクトにおいて特に有効です。この手法は、主に検索機能やブラウズ機能に使われますが、使用する際はクライアントに相談しておいた方が良いでしょう。

4. コンテクスト・センシティブ・ナビゲーション

コンテクスト・センシティブ・ナビゲーションは、動的なユーザインターフェースと共に人気が出たもので、スッキリとしたデザインを実現するには最適の手法です。基本的に考慮すべき点は、画面に常時表示するナビゲーション要素と、特定の状態(アクション)時だけ表示する要素をどれにするか決めることだけです。

Website: Pinterest

例えばPinterestでは、ピンにカーソルを当てた時のみ、画像の上にアクションボタンが表示されます。Gmailでも同様に、ユーザがメッセージを選択した時のみ、アクションボタンが表示されます。こうすることで、アプリを実際よりもずっとシンプルに見せています。

使用時のポイント: コンテクスト・センシティブ・ナビゲーションは、ほぼすべてのプロジェクトに使用できます。ただし、リンクにマウスをかざしたり、アイテムを選択したり、ユーザが特定のアクションをするまで隠しておくボタンやガジェットは慎重に選びましょう。

5. 折りたたみ式コンテンツ

こちらもユーザインターフェースをスッキリ見せるには最適な方法です。優先度の低いオプションやウィジェットを非表示にして、ユーザがあるリンクを選択した際に、それらを展開表示するようにします。

Websites: Google plus (top), 99designs (bottom)

この手法はシンプルなウェブサイトにも適用できます。ヘッダにリンクをたくさん表示する代わりに、「その他」ボタンを使用して、ユーザにとって優先度の低いページのリンクをドロップダウンメニューで表示します。

使用時のポイント: この手法もコンテクスト・センシティブ・ナビゲーションと同じく、ほぼすべてのプロジェクトに利用できます。特に、設定やオプションなどのインターフェース要素が多いページに使うと効果的です。項目が大量に表示されているとユーザに圧迫感を与えてしまうので、不要な要素は隠して見た目をシンプルしましょう。

6. コンテンツチャンキング

コンテンツチャンキングとは、大量のコンテンツを小さな塊に分けて表示する手法です。そうすることで、コンテンツが読みやすくなり、内容が頭に入りやすくなります。例えば、この記事は見出しの付いた複数のセクションに分かれていて、画像も載っています。この方が、単調なテキストが長々と続くよりも、はるかに読みやすいはずです。

Website: Apple

ここで注目すべきは、コンテンツチャンキングは以前からあったわけではなく、インターネットの時代に生まれた手法だという点です。人々が大量の情報を消費するようになった結果、より楽に情報を把握できる方法が必要になったのです。見方によっては、自然と生まれた手法とも言えます。

使用時のポイント: この手法を採用するかどうかは、最終的にはクライアントの判断に委ねられます。ただ、提案デザインの中に含めて、ウェブサイト上でのコンテンツの見せ方を示したり、この表示方法を採用する利点を説明したりすることは可能でしょう。

7. ロングページ

かつてはクライアントもデザイナーも、ひたすらスクロールが必要なロングページに抵抗を持っていました。ところが今、このタイプのページはウェブ上にあふれています。その理由の1つに、ユーザが(マウスによる)縦スクロールに十分慣れたことが挙げられます。複数ページに分割されたコンテンツの方が、目的の内容を探して表示するまでに手間がかかるので、敬遠されるのです。

 

Website: Crazy Egg

この手法は、先ほどのコンテンツチャンキングと一緒に使うと非常に効果的です。ユーザはコンテンツにザッと目を通し、興味のあるパートを見つけることができます。Appleのような功績のある有名企業は、製品の紹介に非常に長いページを使って、素晴らしい成果を出しています。

使用時のポイント: ロングページが特に有効なのは、製品の機能や特長、それに類似したコンテンツを表示する場合です。コンテンツに直接の関連性がない場合は(レシピのリストなど)、複数ページに分けましょう。

結論

ウェブページやモバイルページ、アプリのデザインにおいて、優れたユーザインターフェースは何よりも重要です。場合によっては、それがプロジェクトの結果を決めると言ってもいいでしょう。

この記事では7つのトレンドを紹介しましたが、ぜひ時間を見つけてUX MovementUX Magazineなど、ユーザインターフェースに関する素晴らしいブログも読んでみてください。優秀なユーザインターフェースデザイナーになれば、一流のデザイン会社で活躍できるでしょう。才能あふれるユーザインターフェースデザイナーは、とても貴重な存在です。

デザイントレンドについてもっと知りたい方は、「今話題の6つのウェブデザイントレンド」という記事もご覧ください。

ユーザインターフェースのデザインについてアドバイスがあれば、ぜひコメントをして教えてください。