Material DesignとFlat DesignとSkeuomorphic Design
先日のGoogle I/OにてGoogleのデザインを言語化されたMaterial Designが発表された。
なんかニュースサイトとかで個人的に違和感ある感じに紹介されているのでスマートデバイスが世に浸透してから現時点までのデバイスとUIデザインの変遷を個人的な視点で脱線しながら振り返ってみようと思う。
※ 面倒なので画像は無し。
この世で(完成度の高い)タッチパネルというインターフェイスを持ち携帯できるデバイス形態で且つ一般家庭普及したものはおそらくニンテンドーDS(2004年11月)であると思う。
これはゲーム機という特性上インターフェース(UI)という点では世界観を崩さず操作出来れば良かったためUIデザインにおいては考えない。
一方で操作感という点でローンチソフトにてアングリーバードのような慣性を使った表現を持つゲームが既にあった点は見逃せない。
そして日常的に使うスマートデバイス且つタッチ操作を大前提としているもので世界的に広めるきっかけとなったのがiPhone(2007年1月)であったと記憶している。
※ ただし、日本国内に入ったのはiPhone 3G(2008年6月)であった
この時はデバイス特性が一般普及していないからかスキューモーフィックデザインが良しとされていた。
写実性を特徴としているため日常で該当となるデバイスを触ったことがあれば、その操作感を紐付けるのは容易であるなどそれこそ老若男女問わず触れることが出来るものであった。
とはいえ、スキューモーフィックなUIがApple発かといえばそんなことはない。
ゲームではそれこそファミコンから、PCでは私の知っているところでWindows95からあるボタン表現～Winampでのスキン編集など大量にあると思う。
よって昔からある表現ではあったがデバイス特性とその経験において時期がマッチングしていただけである。
一方でリストをスクロールした時に端までいくと慣性表現を用いる点はUIの新しい表現であったと思う。この場合だと、このリストがここで終わることを目で追える直感的な表現である。
アクション/レスポンスという視点より気持ちいい操作感は日常的に使うものにおいて非常に重要である。
※ 話はそれてしまうが、こういったデバイスが若者だけでなく高齢者にも受け入れられたというのは、発売からiOS4(2010年6月)発表時までシングルタスクであった点が重要なのかもしれない。
当時はアプリ連携などを考えなくともよかったというので。
参考までに、マルチタスクという概念はまだIEが世のメインブラウザであった当時においてIE7(2006年10月)でタブブラウジングが始まり、国内フィーチャーフォンでもマルチタスク機能があった。
このスキューモーフィックなUIはつい最近までの間(具体的にはiOS7(2013年9月)になるまで)多くの場所で使われていたわけであるが、それまでも時代の流れとともに2点大きな問題が発生していた。
1. (特にAndroidで)微妙に異なる解像度のデバイスが続々と発表される
2. Retina解像度やAndroidのデバイスピクセル問題
という2点だ。
スキューモーフィックなUIデザインというのは、その写実表現故に1px単位(厳密には0.0?pxというレベルのサブピクセル単位)で調整がなされている。
いわゆるピクセルパーフェクトみたいなのが前提として作られていて、この調整が各画面でのパーツ数、画面数、デバイス数発生し用意していたわけであるがこれはデザイナー、エンジニアにとって、とても憂鬱な作業である。
前述の問題を打破するためのものがフラットデザイン(マテリアルデザイン含む)への移行であった。
これはタイポグラフィ(文字)、グリッド(配置とでも言い直せばいいの？)、色が重要なキーワードとなっていてそれぞれにわかりやすく区別する(大きさや色など)、シンプルなものにしていくというのが要になっている。
なお、近年におけるフラットデザインの駆け出しはMicrosoftのMetro UI(現 Modern UI)の2010年2月からであるといえる。
(Metro UIはWindows Media CenterやZuneのUIの延長イメージだと勝手に思っている)
しかしながら、当時はまだ背景的にその必要に迫られていなかったこともあり時代のメインストリームにはならなかった。
これが時が流れ、上の問題が発生してくるとWebデザインにおいてはレスポンシブデザインというような単語が出てきたりして技術とあわせての解決策が出てくるようになる。
同時にデバイスUIもユーザー経験の一般化においてフラットデザインに変遷するようになった。
って感じがここ数年のざっくりとした流れでこのフラットデザインにおいてもここ1年ぐらいで独自の世界観を出すためやより良いユーザビリティを作り出すために色々試行錯誤されていて各デザイナーの思考のもと若干違ってくる。
静止状態での種類としては
・ロングシャドウ(主にアイコン)
・フラットなまま奥行きを持たせる3D化(主にボタンやアイコンなど)
+αでポリゴン表現
・弱いグラデーション(背景、ボタン、アイコンなど)
・弱いハイライト/影(レイヤーのレベル間を変えたいもの)
・レイヤーを乗せるためのエフェクト(ブラー(ぼかし)や黒のせなど)
となり、これに動き(UIアニメーションや視差効果など)を加えたものが各クリエイティブの世界観となっている。
(タイポグラフィでなくピクトグラムを使うようになった点は時代の流れなので除外)
参考までに
MicrosoftとApple、Googleの世界観は次のようになる
(アニメーション表現は見るほうが速いので割愛)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465424.aspx
> バウハウスの思想に一番近い気がする(Modern UIとか意識してるのかも)
・色味はフラット
・オブジェクトの角は鋭角(だいたい90度)
・弱いグラデーション(参考 : http://ios7colors.com/)
・陰影表現は付けずブラーレイヤーや視差効果による奥行き表現
・オブジェクトの角は基本丸く・有機的に
Google (Material Design)
http://www.google.com/design/spec/material-design/introduction.html
・色味はフラット
・カードを用いた実物的な奥行き表現(奥のものは小さくなる遠近法を用いている)
・影を用いた奥行き
・オブジェクトの角は若干R(角丸)をつける
長々と書いたところで
結論を言うと、デザインに正解はないので
ターゲットユーザーにユーザビリティが最大となるものを提供出来るものを
世に出せばいい。たぶんそれだけ。
(今流行のHCDやUXはこのユーザビリティを最大限にするための方法論とかそのあたり)
※ 最後に補足
フラットデザインになったから1pxのこだわりみたいなんがなくなったとかそういう誤解が発生しそうなので先に行っておきますが、むしろ “逆” でサブピクセルでの調整が肝になっている気がする。
レイアウトに関しては設定したグリッド上にのっていることが重要なのでそういう点に関しては見る目線が変わったという方が認識的に変わらないような…
