iOS 7の内側：アニメーションはフラットなグラフィックと連携して空間感覚を生み出します

iOS 7 ベータ版のユーザー インターフェイスの全面的な改良は、これまでの美観から大きく逸脱しており、かなりの注目を集めていますが、システム アニメーションの完全な再構築も、ほとんど注目されていないにもかかわらず、同様にインパクトがあります。

ジョナサン・アイブの「フラット」なアイコンや、Helvetica Neue Ultra Thin フォントの多用など、目を引く静的デザインの選択が iOS 7 で人々が最初に気づく点かもしれないが、Apple の最新 OS を美しくしているのは、目に見えない部分である。

アニメーションは、デザイナーが優れたユーザーエクスペリエンスを生み出すために用いる、シンプルながらも欠かせないツールです。例えば、iOSのラバーバンド機能は、AppleとSamsungの特許紛争で最近話題になりましたが、2007年に初代iPhoneが発売されて以来、このOSの重要な資産となっています。

このアニメーションは、スクロール可能なページの末尾に到達した際にわずかに跳ね返るだけの、一見些細な動作のように見えますが、これがなければ、ユーザーはドキュメントをナビゲートする際にシステムからのフィードバックを得ることができません。これはOSの応答性に大きく影響します。

その他のシステム アニメーションはアプリ固有のものであり、ホーム画面からアプリを編集および削除するための「ジグル モード」など、表示されることを想定しています。

iOS 7ベータ版では、アニメーションに数々の新しい興味深い調整が加えられています。中には目立つものもありますが、多くの調整は非常に微妙で、ユーザーには気づかれないかもしれません。以下の例は、このOSが提供する機能のほんの一部です。

ロック画面

ロック画面をはじめ、既に多くの要素が変更されています。例えば、「スライドしてロック解除」バーは廃止されました。iPhoneのロックを解除するには、これまでと同様に「スライド」または右スワイプする必要がありますが、アニメーションは小さなスライダーではなく、画面のレイヤー全体を移動するように変更されました。また、iPhoneが起動するとロック画面が黒からフェードインする仕組みも改善されています。これは素晴らしい工夫です。

iPhone のロックを解除するときに、ロック画面が単一のスライダーではなくパネルとして移動するようになりました。

通知センターは、システム設定オプションとしてロック画面からアクセスできるようになりましたが、iOS 6 と同様に下にスライドします。ただし、画面に飛び出す半透明のパネルには物理的な動きが追加されており、落下から跳ね返ったかのように画面の下部に「ドスン」と落ちます。

この動きは、通常のラバーバンドのような跳ね返りほど「弾力的」ではありませんが、大きさはほぼ同じで、素早くプルダウンすると、ゆっくりとスワイプした場合よりも跳ね返りが大きくなります。このアニメーションは、以前のiOSバージョンとは全く異なる「感触」を提供します。跳ね返りの物理的特性はより硬く、パネルに重量感と構造感を与えています。

画面の反対側から上にスワイプすると、新しいコントロールセンターが表示されます。ウィンドウは時計のすぐ下まで滑るように移動した後、まるでゴムバンドのようにわずかに引っ込みます。このパネルはOS内のどこからでもアクセスでき、動きの大きさに依存しないため、スワイプの速さに関係なく、同じ角度で戻ります。

コントロールセンターの上部と通知センターの下部には、小さなアニメーション線が表示されます。各パネルが静止しているときは、線はV字型になり、ウィンドウが開いているか閉じているかに応じて上向きまたは下向きになります。パネルが動いているときは、線は直線になります。

例えば、ロック画面では、画面の上下に2つのV字型のアイコンが表示され、ユーザーは下に引っ張るか上にスワイプして通知センターまたはコントロールセンターを開くことができます。デバイスのロックが解除されると、V字型のアイコンは画面の端に消えます。

左から: 半透明の通知センター パネル、動いているコントロール センター パネル、アップ状態のコントロール センター パネル。

ホーム画面

ホーム画面に入ると、ユーザーは再びドラマチックなアニメーションに遭遇します。アプリアイコンが画面の上から落ちてくるかのように配置され、ドックは画面下部から滑り上がってきます。iOS 6では、アイコンは画面の端からより平面的な動きで現れます。

クリックするとGIFが表示されます。

2013年のWWDCでiOS 7のデモが行われた際、いわゆる「パララックス」ホーム画面表示について言及されました。このアニメーションは、他の追加機能とは異なり、iPhoneの内部センサーを用いてユーザーがデバイスを持っている位置を検知し、軸外の動きに合わせて背景をシフトさせます。その結果、アイコンが壁紙の上に浮かんでいるように見えるという興味深い効果が得られます。

パララックスビューは全く必要ありませんが、ホーム画面に一定の活気を与えながら、気を散らしすぎることはありません。この効果は、アイコンページ間を移動する際に背景がわずかに移動するGoogleのAndroidに見られる効果に似ています。

Appleは視差表示に加えて、アプリまたはアプリフォルダを開いたときに起動する「ズーム」アニメーションを追加しました。アプリの場合、この機能はシンプルです。ユーザーがアイコンを押すと、OSがズームインアニメーションを表示し、まるでアプリ内に直接ドリルダウンしたかのように表示されます。ここで注目すべきは、選択されたアイコンがページ上の他のすべてのアイコンと共に拡大表示され、最終的にアプリが開いた状態で表示されることです。一方、iOS 6では同じ操作を行うと、アプリウィンドウが画面中央から拡大表示され、アイコンがスライドして邪魔にならないように表示されます。

フォルダの場合は少し複雑です。iOS 7ベータ版では、フォルダを静止状態から拡大してフォーカスを合わせるだけでなく、フォルダとその背後にある壁紙の領域の両方をズームするアニメーションが採用されています。このアニメーションは非常に巧妙で、アプリフォルダは画面全体をほぼ占有しないため、壁紙の大部分が画面に残ります。背景をわずかにズームインすることで、iOSはアイコンが空中に浮かんでいるような錯覚を防いでいます。

クリックするとGIFが表示されます。

新しいマルチタスクビューは、物理法則を多用しています。アプリのプレビューパネルを左右にスワイプすると、動きが遅くなり、鈍くなります。一方、その下のアイコンを同じようにスワイプすると、ユーザーの親指の動きとほぼ1対1の比率で、より速くスクラブします。この視点ではアプリパネルは等距離にありますが、アイコンは大きさに応じて移動するため、軽くフリックするとパネル間のスペースが広がります。

また、ミュージックで見られるスペースを埋めるアニメーションも存在します。これは、画面の上部に向かってスワイプしてアプリを手動で終了したときにアクティブになります。

マルチタスクビュー。アプリのプレビューパネルと比較したアイコンの間隔に注意してください。

ただし、このシステムにはいくつか癖があり、その一つは天気予報などの特定のアプリがマルチタスク表示で動作し続けることです。Appleがこの「機能」を維持する予定があるかどうかは不明ですが、既に貴重なCPU、メモリ、バッテリーリソースにさらなる負担をかけることになります。

アプリ固有のアニメーション

長年の要望を受け、Appleはついに時計アプリに「アクティブ」アイコンを追加しました。iOS 7では、時計アプリのアイコンが正確な時刻を表示するようになり、秒針も動きます。カレンダーアイコンのフォントとスタイルも変更されましたが、日付間の遷移は変わりません。

Apple のアプリ内アニメーションの中で、Weather はおそらく最もよく考えられており、ユーザーが選択した都市の変化する天気パターンを豊富な効果で反映します。

メッセージアプリに細かな調整が加えられました。例えば、友人が入力中であることを示すアニメーション付きの省略記号が表示されます。また、メッセージを送信する際に、テキストをその上の会話に「投げ込む」アクションが追加されました。会話をスクロールすると、吹き出しが浮かび上がり、互いにぶつかり合っているように見えます。これにより、ホーム画面などOSの他の部分と同様に、アプリに躍動感と立体感が生まれています。

左から: アニメーション化された受信メッセージ バブル、テキスト ボックスからの送信メッセージ、スクロールするメッセージ。

ベータ版はiOS 6よりも全体的に軽快で、アプリ内のページやメニューは素早く、そして目的に沿ってスライドします。ポップアップのコンテキストメニューにはアニメーションが適用されない場合もありますが、正式リリース前に変更される可能性があります。

iOS 7のアプリにおけるアセット削除の処理方法については、特筆すべき点が1つあります。例えば、写真アプリでは、写真を削除すると、それ以下の写真が1つ左にスライドし、複数の写真をランダムにゴミ箱に捨てると、削除して埋めるアニメーションが表示されます。

サムネイルの並べ替えに関するもう一つの工夫は、ミュージックアプリにも見られます。刷新された横長表示では、アルバムカバーの順序を維持するためにフェードアウトが使用されています。画面に表示されるサムネイルが8枚から15枚、そして28枚へと変化しても、ミュージックアプリはアルファベット順を維持しています。ただし、28枚表示の最大の画面を地図のようなスナップショットとして単純に拡大縮小するのではなく、カバーは動的に並べ替えられます。

進行中

Apple が iOS 7 の開発を継続していることは明らかで、OS が今秋に一般公開される前に、少なくとも上記のアニメーションの一部は変更される予定です。

全体的には、これらの追加機能や調整によって空間感が生まれており、ベータ版全体に見られる「フラット」なアイコンとは正反対のデザイン言語と言えるでしょう。確かに、ポップアップメニューが場違いに見えるなど、いくつかの点でその通りと言えるかもしれません。しかし、大部分において、フラットデザインはiOS 7の多軸の世界に非常によく合っています。

アイコンや書体自体が奥行きを表現しようとしていたら、UIは雑然として魅力を失っていたでしょう。アニメーションはユーザーエクスペリエンスを左右するのではなく、シンプルながらも力強いグラフィックをシームレスに操作しています。だからこそ、このシステムは透明性が高く、効果的なのです。

iOS 7 のエフェクトを実際に見てみたい人は、Apple の Web サイトでサンプルを見ることができます。

Appleの最新モバイルオペレーティングシステムの詳細については、AppleInsiderの継続中のInside iOS 7シリーズをご覧ください。

Appleの新しいApp Storeはアプリのアップデートと発見を簡素化します

Siriは新しいシステムコントロールでさらに賢くなる

AppleがiTunes RadioでPandoraに警告

Apple、新しい写真アプリで写真整理を自動化