2013年11月15日金曜日

UIの潮流

UXデザインユニットの西森です。

今更ながらですが、UIのトレンドについて書きたいと思います。(本当にいまさらですが....)


2006年に発売された、Windows Vistaには、Windows AeroというUIの表示方法を搭載していました。Windows Vsitaは、半透明のガラスをモチーフにリアルな質感を追い求めたUIでした。それは、それで美しく、Windows XP時代よりも格段にグラフィックの質は向上したと言えるでしょう。しかし、残念ながらOS自体の評価はいまいちでした。

そして、2007年にAppleが「iPhone」を発表しました。この時のUIは2012年発表のiOS6まで踏襲されまさした。
一度は見たことがあるのではないでしょうか?
このUIを一度は見たことがあるのではないでしょうか。
こちらもWindows Vista同様、本物の質感を追求して、ツヤツヤしていてかっこいいUIです。
このようなUIをスキューモーフィックデザインといいます。ディスプレイの表示技術が向上するとともに、よりリアルな質感をPC上で再現することが行われていました。例えば、ボタンならば、光沢があって、影があって、本物のボタンのようなものになっていました。



さて、2012年にMicrosoftがWindows 8を発売します。これは従来のスキューモーフィックデザインとは異なるUIで登場しました。

▲引用元 『Windows 8 の新デザイン「Modern UI(モダンUI)」とは』 http://www.724685.com/word/wd130130.htm



Modern UIと呼ばれるタイル上のUIです。このアイコンをよく見ると、今までの質感を重視したアイコンとは異なり、立体感がなく、シンプルなアイコンと文字で構成されています。このModern UIは、タッチデバイスに最適化されているので、タッチしやすいスタート画面になっています。

驚くことに、なんと、AppleのiOSもスキューモーフィックUIから大きな転換を図ります。




今までのツヤツヤのボタンではなく、シンプルアイコンや文字のナビゲーション、ボタンを見るととグラーデーションがありません。

このようなUIのことをフラットデザインと呼びます。
気がついたら、AndoroidのGoogleもこのデザインに変わっていました。

このように、昨今では、スキューモーフィックデザインから、フラットデザインが主流に取って代わりました。

さて、なぜこの変化が起きたのでしょうか。単に目新しくかっこいいということだけでは無いと思います。完全な憶測で書くことにはなりますが、理由はいくつかあります。
まずは、マルチデバイスの時代ということではないでしょうか。
インターネットを使ったサービスを作るとなると、PC用、iOSアプリ、Androidアプリ、Windows8アプリなどを作らなければなりません。画面の解像度などの違いから、ひとつのパーツを使いまわすのは難しく、お金と手間がかかってしまいます。ツヤツヤのボタンをPhotoshopで作っていては....非常に大変です。一方で、フラットデザインならば、アイコンがシンプルな曲線で描かれることや、文字やコンテンツが主なボタンの要素となりますので、作るのが非常に簡単であり、かっこいいUIを作ることが可能です。


▲画面いっぱいに写真を使っています。アイコンもシンプル。




また、こんな意見もあります。

世の中に溢れている情報量が多すぎるので、不要な要素を削っていった、と。
テカテカなUIも情報の一つであって、コンテンツとしてもたくさん情報があるのに、UIまでも豪華だと画面がうるさくなって、メインコンテツが埋もれてしまいます。せめてコンテンツを引き立たせるためにUIはシンプルな方向へ向かったのではないかということです。

さて、フラットデザインの欠点も少し述べておきましょう。
それは、見出しや本文とボタンの区別がつきにくいことです。ボタンはグラデーションや影がなく、文字だけで作られる場合もあるので、表示領域なのかボタンなのかの区別がつきにくいのです。ITに慣れている人だと見分けがつくのですが、不慣れな人では混乱するのではないでしょうか。

そこで最近では、フラットデザインをベースにしつつも、ボタンに影をつけるUIが登場してきました。

Yahoo!路線
Yahoo!路線アプリ


SUMO
http://suumo.jp/

などです。


技術的に考えると、これだけ高詳細のディスっプレイが登場しているのにもかかわらず、高詳細を必要としないシンプルなUIが主流になるとは....そう考えると、おもしろいですね。