MEMOPATCH

WWDC 2013のアプリから考える、iOS 7のユーザーインターフェース

  • このエントリーをはてなブックマークに追加

チケットが過去最速2分で売り切れたというWWDC 2013は、いよいよ来週6月11日午前2時頃(日本時間)から基調講演が行われます。WWDCで恐らく発表されるであろうiOS7のUIデザインは、これまでと違ったフラットなデザインになるのではないかとの噂が飛び交い、多くのデザイナーがiOS 7のデザイン予想を作っています。そしてあと1週間を切ったところでAppleはiOSアプリ「WWDC」をリリースしました。果たしてiOS 7のユーザーインターフェースは一体どんなものになるのか、過去のWWDCのアプリやデザイナーの予想イメージなどを見ながら考えてみましょう。

iOS 7 : Welcome to the future of the iPhone

http://youtu.be/ESivYZXYqYE

少し前に話題となった、iOS7のデザインを予想したコンセプト動画。なんと6月5日の時点で150万回以上も再生されています。Windows 8のようなフラットデザインになることを期待している人や、Appleがこんなフラットにするわけがないと呆れる人など反応は人それぞれですが、これだけ再生回数を集めるということは、それだけ人々のiOS 7への期待や不安が大きいからなのかもしれません。

DribbbleにもiOS 7予想として、フラットなアイコンをアップしているデザイナーが多くいました。

iOS 7 – Flat

Dámaso Benítez 
iOS 7 – Flat

iPhone Flat UI Concept

Anton Kovalev 
iPhone Flat UI Concept

このようなフラットなデザインのアイコンをiOS 7予想として多くのデザイナーがアップロードしていました。そして6月4日にリリースされたWWDCのアプリ。bjangoのMarcがツイートしていましたが、アイコンは完全なフラットではなく、淡くグラデーションが掛かっています。


現在のアイコンと比較してみると…

言われていたほどフラットではないですが、現在の標準アプリと並べてみるとその違いがはっきりとわかりますね。光沢や斜線などはなく、これまでと比べてかなり装飾的な要素は排除されています。恐らくiOS7ではアイコンのデザインがこのように平面的で、質感を抑えたものになるのではないでしょうか。

最近はFacebookやGoogle、Vine、Dropboxのような、光沢のないアイコンが主要となりつつあり、WWDCのアイコンもCamera NoirやSoundCloudのアイコンに近いです。が、上部に1pxのハイライトをいれていないので、黒い背景の上に置くとかなりのっぺりとした印象に。iOS 7ではこれまでのグラスっぽい光沢のあるデザインから、今回のアプリのようなしっとりとしたマットなデザインになる可能性が非常に高そうですね。

過去のWWDCアプリ

過去のWWDCのアプリのデザインと、その後に出た新iOSのデザインを見比べてみましょう。左がWWDC、右がミュージックのアプリです。全く同じデザインではないですが、ほとんど似たようなデザインになっていることがわかります。

WWDC 2011 & iOS 5

WWDC 2012 & iOS 6

WWDC 2013

そして今回発表されたWWDC 2013のアプリがこちら。iOS 6で下部のメニュー部分は選択時はへこんだような影がついていましたが、今回はアイコンが青く光るだけとなっていて、背景には変化がありません。またグラデーションもこれまでのものより淡くなっていて、マットな質感となっています。もちろん過去のデザインよりは”フラット”なデザインですが、これまで言われてきたようなのっぺりとした単色のフラットデザインになることはなさそうです。iOS 7では流行りのフラットデザインを目指しているというよりも、これまでより質感を抑えたデザインにしようとしているのではないでしょうか。

WWDCの開催はいよいよ来週。世界中の多くのAppleファンが見守る中で一体どんなデザインを出してくるのか、今から非常に楽しみですね!MEMOPATCHではリリースされたらiOS 6と7の比較記事を書く予定なので、そちらもお楽しみに!

  • このエントリーをはてなブックマークに追加

RECRUIT

Goodpatchで一緒に働きませんか?

弊社ではエンジニア、ディレクター、デザイナーを随時募集しています。インターネットが大好きで、UIデザインを愛し、新しいことにチャレンジしたい、という方なら大歓迎!皆様からのご応募をお待ちしております!

Goodpatchに今すぐエントリー


RELATED ENTRY

Twitter and RSS

ブログの更新情報はTwitterやRSSで流します。UIに関する記事を投稿します。