先日、サンフランシスコで行われたUX Survival Guidesに行ってきました。10年以上シリコンバレーでUXデザイナーをしているJoe Prestonから最近のUXトレンド、プリンシパルに関するショートトークを聞くことが出来たので紹介します。(次回はプリンシパルについて書きます)

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

1. Less is more

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

ミニマリゼーションとも呼びます。私たちがデザインを始めた90年代と比べて、非常に変化してきている流れの一つです。

背景、グラデーションや影、線、ラベル、、すべてのものを取り去ることが美しいデザインと考えられるようになっています。例えばグラフはこのようになります。

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

まず、背景をとって、色彩を取り除き、影を取り、線を薄く細くします。

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

ラベルも余白ではなくオブジェクトに乗せてしまいます。

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

これで出来上がりです。見比べるとその違いが面白いですね。出来る限り取り除く、これがLess is moreです。

2. Vertical menus

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

Vertical menusはどこでも見かけるようになりました。なぜだか私には分かりませんが、仮説として、スケールさせやすく、マルチデバイス対応しやすいからだと思っています。ウェブでもタブレットでもモバイルでも使えるデザインです。

3. Mobile first

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

エンタプライズでは、まだなりきれていませんが、コンシューマサイドでは常識になりつつあります。常にモバイルで表現したものを、それをどうウェブで表示させるかという思考になってきています。

4. Platform agnostic

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

かつてはある製品ではiOSやAndroidライクにつくったりしていましたが、今ではどのプラットフォームでも同等のユーザー体験を実現することが求められるようになってきています。どこでも同じインタラクションで、同じブランド体験を可能にさせるようになっていきています。

5. UI component libraries

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

この会場にBootstrapを知っている人は何人いますか?いまではものすごい数のBootstrapがあります。何かをつくるとき、最初にどのライブラリを使うか、そこから考えるようになってきています。そのくらい普及しています。Sketchにデフォルトで入っているコンポーネントも素晴らしい出来になっています。

6. Animations that help

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

かつてあったような、激しい動きをして爆発したりするようなアニメーションをさせていたFlashバナーはなくなっていくでしょう。稀にそのようなアニメーションもいくつかのサイトで見ることもありますが。しかし、新時代におけるアニメーションの役割は変わってきています。アニメーションは、ユーザー体験を”助ける”目的で使われるようになってきているのです。ある場所では、ユーザービリティを向上させたり、ブランドイメージを沸き立たせたりといった意味合いで使われています。

(この辺りのアニメーションについての話は、こちらの記事をご覧ください。伝説のディズニーアニメーターから学ぶ、UXを向上させる5つのアニメーション/ SXSW 2015 UXレポート)

7. Hamburger menus

Hamburger menuが好きな人は居ますか?私は好きではありません。確かに便利です。ただし、インタラクションやレイアウトをあまり良く考えずに、とりあえずHamburger menuを置くことになっていませんか。そのような状況はあまり良くないでしょう。誰かが、もっとクールなメニューを見つけてくれることを期待しています。

8. Context hiding

スクロール時にメインナビゲーションを消して、どこにも見えないところに隠してしまうという挙動です。

9. Useful feedback

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

これは非常に良いトレンドだと思います。長いフォームを用意して一度に入力させるのではなく、必要なときに表示してかつ、入力させる価値をユーザーに説明した上で、少しずつ入力させています。生命保険のようにサインアップするときに全ての情報をいれさせる必要はないのです。

10. Fixed top navigation

https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4R

これは面白いトレンドです。ここで紹介しているのはTruliaの例です。スクロールにするにつれて、レイヤーが重なるようにナビゲーションが変化し、それによって重要なファンクションがナビゲーションとしてスクリーン中に留まります。長いコンテンツをスクロールで表示するには有効な方法です。(これを私が初めてみたのは数年前のInstagram だった気がします)

いかがだったでしょうか。どれもよく見かけるトレンドだったと思います。いままであまり意識せずに使っていたものも多かったのではないでしょうか。これらのトレンドが一過性のものかは分かりませんが、常になぜ使うかを意識して採用していきたいですね。次回は、UXのプリンシパルについて書く予定です。

--

--

Shingo Hagiwara

サンフランシスコと東京でエンジニアをしています。SFまわりの話題について書いています。 @AppSocially / @ChatCenteriO