iOS 7がリリースされてから二ヶ月ほどがたちました。iOS 7はiOS 6のスキューモーフィックデザイン（Skeuomorphic Design）からフラットデザインに変わったと言われていましたが、iOS 7のデザインはメトロUIのようにテクスチャーとシャドウを削ぎ落としたデザインとは異なり、奥行き感が備わったり、動きの演出が見せやすくなっていることから2013年のトレンドであったフラットデザインとは異なると言えます。

ios6 voicememo

スキューモーフィックデザインは、単にボタンなどに立体感を与えて押せる感や触れる感を出すためのものでなく、現実に存在するもののテクスチャーや形状をアプリケーションデザインにも反映させることで、ユーザーがアプリを初めて触る時でも使い方がすんなりわかるように工夫されていました。わかりやすい例がiOS 6以前のボイスメモアプリです。アプリを開くとまず目に入るのがマイクで、その他に音響機器についている音量のメーター、赤い印のついた金属製の録音ボタンです。この画面を見れば「赤いボタンを押せば録音が始まるんだな」と想像がしやすいです。
一方、iOS 7では全体的にシンプルなインターフェースになり、これまでにインターネット以外で見てきた、体験してきた経験から推測できるデザインとは異なるものになりました。しかし、だからといってiOS 7のデザインは使い方が全くわからないデザインではないと思います。そう思わせる仕組みの一つがアニメーションであると思います。

今回の記事ではスキューモーフィックデザインではなくなった、iOS 7のデフォルトアプリケーションやそれ以外のアニメーション例とそれぞれのアニメーションからどんなことがわかるかを紹介していきたいと思います。

ロック解除について

slide-to-unlock

上の画面はiPhoneをスリープ状態から立ち上げて最初に見るものですね。iOS 6以前は立体的なボタン（右向き矢印アイコン付き）とスライダー ＋ 左から右へ光る「ロック解除」のテキストを用意することで、Appleはユーザーに「右に指を滑らせればロック解除できる」ということを伝えていました。
iOS 7ではボタンとスライダーを排除し、「スライドでロック解除」（iOS 7になってテキストが変わった）のテキストが左から右に光るUIパーツのみとなりました。ロック画面から以前あったパーツを削除したのは、Appleがそれらを排除してもユーザーは光っているテキストを見ればロック解除の仕方がわかるという考えだったのでしょう。

Siri

siri

iOS 6では銀色のボタンにマイクのアイコンがあり、何か話しかけるとマイクのアイコンが紫色に光っていました。マイクのアイコンがあることからiOS 6のボイスメモアプリと同じく「話しかければいいんだな」ということが想像しやすかったです。iOS 7では「ご用件は何でしょう？」というテキストと、画面下に波打つ線が動いているのみです。しかしこの線は音に反応して動くため、声に反応するということがわかります。よってシンプルなインターフェースではありますが、従来のSiriと同じく「話しかける」という動作が想像しやすくなっています。

iMessage

siri

iMessageでは二つのおもしろいアニメーションがあります。一点目は吹き出しの中で点々（・・・）です。自分とメッセージのやりとりをしている人がテキストを打ち込んでいる時に自分の画面では吹き出しの中で点々（・・・）が動き、相手が今テキストを入力中であることがわかります。さらに上の動画を見ていただければわかるかと思うのですが、バルーン状の吹き出しも微妙に大きさを変えながら動いています。眺めていると引き寄せられるような有機的な動きをしてるので、相手の文章入力中は待っているのが苦でなさそうです。
二点目はテキスト入力エリアからテキストが吹き出しになって飛んでいくといことです。上の写真のように打ち込んだテキストがその場からバルーン状の吹き出しに変化し、相手との会話タイムラインにふわりと並びます。このアニメーションによりiMessageでの会話がリアルタイムで活発に行われているような印象を受けました。また、スクロールした際に、バルーン状の吹き出しがふわふわと動くことから、浮かんでいるような印象を受けたのでiOS 7の世界観とマッチさせたアプリケーションだなと感じました。

ホーム画面でのズーム

folder

iOS 7では一つのフォルダでたくさんのアプリが管理できるようになって便利になりましたね。初めてiOS 7のフォルダを使った時に驚いたのが、ホーム画面にあるフォルダをタップすると、フォルダが画面に近づいてきてフォルダの中身が拡大されるようなアニメーションでした。アイコンをタップしてアプリケーションを起動した際も同じようにアイコンが近づいてアプリケーションが展開されます。これをよく見てみるとiOS 7ではアイコン、またはフォルダをタップすることでアイコンが並んでいるホーム画面全体が自分に近づき、自分がタップしたものが大きく表示されていることに気がつきました。一方iOS 6ではアイコンをタップすることでアプリケーションが展開すると同時にその他のアイコンが画面外にはけているようなアニメーションが行われていることが確認できます。

このiOS 7のズームされるようなインタラクションによって、ユーザーはiPhoneを操作している際に、自分が今どこにいるかがわかるのではないかと思います。 例えばフォルダをタップした際、そのフォルダが拡大されることで「ホーム画面に並んでいる○○というフォルダの中を見ている」ということが理解できるかと思います。アプリケーションも同様に、ホーム画面に並んでいるアイコンをタップすることでそのアイコンがあった場所から拡大され、ホーム画面に戻る際はアイコンがあった場所に戻るような動きをします。これにより「ホーム画面のここにあった○○というアプリケーションを起動していた」ということがわかるのではないでしょうか。

Notificaition CenterとControl Center

Notification Center and Control Center

iOS 6から存在するがデザインが変わったNotificaition CenterとiOS 7から新たに追加された機能Control Center。これらはそれぞれロック画面やホーム画面、アプリケーション起動時に限らず、画面の上または下からスワイプすることで起動できます。（Control Centerはホーム画面に表示させないことも可能）ロック画面では画面上部下部にそれぞれ角丸の直線アイコンが存在しています。この直線アイコンをスワイプすることでそれぞれの機能が起動するのですが、起動した後、直線アイコンは角丸のV字型アイコンに変化します。V字の山の方向にスワイプすることでNotificaition CenterやControl Centerの機能を閉じることができます。元々存在していたアイコンが変化することで違うアクションをユーザーに暗示しているようです。

以上です！
スキューモーフィックデザインではなくなり、アプリケーションのインターフェースがシンプルになったiOS 7がユーザーに使い方を示唆、想像させるためにグラフィックではなく、アニメーションを使っている例をいくつか紹介しました。単にテクスチャーやシャドウを落としたフラットデザインではユーザーに心地よくアプリケーションを使ってもらうことが難しい場合もあるかと思います。今後フラットデザインのようなデザインをする際は今回の記事のようにアニメーションのことも含めて考えてみてはいかがでしょうか？
もし今回紹介した以外にもアニメーションをうまく利用しているアプリケーションがありましたらぜひ教えてください！

（参考: Inside iOS 7: Animations work with flat graphics to create sense of space）

Share on

Goodpatch
Goodpatch公式アカウントです。