iOS/AndroidのUIデザインがどのように変化していったのかまとめ
スマートフォンのUIデザインの変遷
はじめに
2008年に日本でソフトバンクからiPhone3Gが発売されて以来、iOS/Android共にスマートフォンの普及が大幅に進みました。
そして、そのスマートフォンにおけるUIデザインのトレンドも変わり、大きなものから細かいものまでその変化は続いています。
そこで、これまでどのようなUIの変化があったのデザインの変遷を辿っていきたいと思います。
解説
プラットフォームが掲げるUIデザインガイドライン
スキュモーフィズム
スマートフォンが日本でかなり普及されてきた2010年頃には、iOS/Androidともに「スキュモーフィズム」というデザインが定番でした。
スキューモーフィズムとは造語で、ギリシア語の「skeuos（入れ物）」と「morphê（形）」という単語から作られた言葉です。
デザインで意味するところは、現実世界のルールを取り入れたデザイン様式のことです。
Androidは当初から特にスキュモーフィズムを語ってはいないのですが、普及し始めたスマートフォンのUIに慣れてもらうため、現実のモノに合わせた見た目に分かりやすいデザインにしたかったことと、開発する上でiOSと共通のデザインが望ましかったことがあり、両者ともスキュモーフィズムデザインを採用するという潮流がありました。
アプリの中で、部品を「押す」「ずらす」「はじく」「回す」、スマートフォンそのものを「傾ける」など直感的な操作ができるからこそのデザインでもあります。
なお、現在プラットフォームが掲げるガイドラインはそれぞれ以下のとおりです。
iOS：Human Interface Guidelines
Android：Androidデザインガイドライン「MATERIAL DESIGN」
フラットデザイン
2013年に発表されたiOS7では、スキュモーフィズムからフラットデザインに一新されました。
ユーザーはスマートフォンの操作に慣れてきたため、実際のモノに見た目を合わせたスキュモーフィズムでなくても操作・機能を理解できるようになりました。
逆に物理的なものに合わせたグラフィックやエフェクトがパフォーマンス低下につながることや、陰影が激しくて屋外での光が当たった画面では見づらいというデメリットもありました。
そこで、平面的で装飾が少なく、情報の整理に特化した「フラットデザイン」が主流になりました。
このときには、小売店などの企業がこぞって、「とりあえずアプリを出そう」という空気の時代でもあったため、開発に関わる特にデザイン会社は、少ない労力で稼げるいい時代だったのではないかと思います。
なお、1年前の2012年に、マイクロソフトがWindows8からメトロUIというフラットデザインに転換したことも要因のひとつと見られます。
マテリアルデザイン
2014年にGoogleが「マテリアルデザイン」というデザインを発表しました。
マテリアルという言葉だけ聞くと、材料・素材・材質という意味から、スキュモーフィズムと近いのではと感じる人もいると思いますが、発表にあった例を見ると、逆にフラットデザインそのものではないかという印象を受けると思います。
しかしながら実際にはフラットデザインとは異なります。
フラットデザインのようにシンプルでパフォーマンスを落とさない開発に優しいデザインであることは意識しつつ、物体がそこにあるということがわかり、触れることができるデザインのイメージです。
横から見たときにはっきりわかるモノの重なりが、正面でも光や影により奥行きが分かりやすいようになっているデザインです。
まさに、スキュモーフィズムとフラットデザインのよいとこどりをしているようなデザインです。
実はこの頃、フラットデザインではボタンの押せる範囲がわかりにくいなどの問題があり、「やりすぎた」感のあるアプリが増えていました。
そこでiOSの方も「フラットデザイン2.0」というかたちでフラットデザインに陰影をつけてわかりやすくするように変化しています。
これによりiOSもAndroidも、シンプルでかつ分かりやすいということを追求した結果、かなり近いデザインに落ち着いたといえます。
モバイルアプリのUIデザインの今後
では、以降のデザインはどう変わっていくのでしょう。
ニューモーフィズム
実は2020年には、「ニューモーフィズム」という新しいデザインのブームがくるといわれています。
「ニューモーフィズム」とは、新しいスキュモーフィズムを意味する造語です。
特徴としては、１枚の紙に凹凸ができていて、それを奥行きと表現するような構造になっていることです。
ちょうど最近、嵐がコラボした企画「HELLO NEW DREAM. PROJECT」の「A・NA・TA for DREAM」というサイトがニューモーフィズムを取り入れたUIになっています。
それよりも前にUXデザインが大事
ニューモーフィズムは、確かに魅力があるものの、今までのスキュモーフィズムやフラットデザイン、マテリアルデザインと同じ位置づけになるものではないようです。
流行りのデザインとはなり得ますが、プラットフォームの基礎となるデザインとはいえなさそうです。
では、次のデザインはどうなるのかというと、しばらく変わらないのではないかと予想します。
iOS/Androidともに、落ち着いてきたデザインをベースに、より使いやすさ、順応しやすさに力を入れる、改良フェーズになるのではないかと考えられます。
つまり、UIデザインを一新する前に、UXデザインでまだまだやることがあるという状態です。
UXの改善のひとつに、ダークモードがあります。
目の負担軽減や、バッテリー消費を抑えるなどの効果があるということで注目されはじめ、2019年に浸透してきました。
システムのダークモード設定に合わせて、どの部分が白黒逆転変わるのかということをアプリ開発側は気にしなければなりません。
近年ではデバイスのサイズが大きくなってきています。
スマホで動画を見る機会が増えたせいか、新しい機種ではどんどん大型化・大画面化していく傾向があります。
すると、画面の左上に配置されることの多い「戻るボタン」がどんどん押しづらくなるという問題があります。
これを解決するために、iOSでは「Fluid Interface」というなめらかな動作をするインターフェースのデザインが提唱されました。
下の「連絡先」アプリの新規連絡先を追加する画面において、iOS12では全面固定されていた画面が、iOS13では下から引き出されたカードのような表現に変わっていることがわかります。
画面上部には、後ろに元の画面があるような表現になっており、今の画面が、前の画面から一時的に表示された画面であることが伝わる表現になっています。
そしてこの画面のよいところは、左上の「キャンセル」を押さなくても、画面を下方向にスライドすれば、画面を閉じて「キャンセル」と同じ動作ができるということです。
引き出されたカードをしまうような直感的な動作になり、指を左上に持っていかなくても、前の画面に戻ることができ、ユーザー体験がよくなります。
ミュージックアプリも同様のインターフェースが見られます。
また、Androidの方でも、2018年にGoogle/IOにて発表されたデザインスタイル「Material Theming」において、先程のiOS同様の「Backdrop」というインターフェースが出現しました。
まとめ
ちなみに、スキュモーフィズム、フラットデザインなどのデザインはアプリのアイコンにも見ることができます。
歴代の「Smart News」アプリのアイコンを並べてみると、その時代に合わせた変遷をたどっていることがわかります。
今後も流行りとしてのデザインはどんどん出てくるとは思いますが、プラットフォームが掲げるベースとなるデザインというのは一旦落ち着いたのではないでしょうか。
その上でライフスタイルにあったUXデザインが重視され、人にも社会にも優しいデザインを追求していくことになるのかなと思います。
ポチップ
