モバイルアプリUXに必須！画面遷移におけるアニメーションの魅力と重要性

アニメーションは、UXにおける重要な要素のひとつです。モバイルアプリ内での画面遷移時には、アニメーションを取り入れることで、非常に微細な部分に至るまでコミュニケーションが可能です。メッセージを送る、設定画面を開く、ボックスにチェックマークをつける、他の画面に切り替えるなどは、全て画面移行の瞬間です。画面遷移時にアニメーションを使用するのは、ユーザーのアクションを強化するのに最適な方法といえるでしょう。

この記事では、機能的なアニメーションが、ビジュアルデザインを補強しユーザーのインタラクションをサポートするのに役立つ事例をご紹介します。

システム・ステータスを提示する

あるアクションを行う際、ユーザーはそれに対して視覚上のレスポンスを期待するものです。ユーザーのリクエストを受けてアクションに対応をしているということを、システムは明確に示すと良いでしょう。以下、アニメーション化されたフィードバックがUXに寄与する事例を紹介します。

• ユーザーのアクションの承認：システム側があるアクションを受け取ったということを、ユーザーが確認できます。視覚的なフィードバックを受けることで、ユーザーがもう一度そのエレメントをタップすることを避けられます。

Clin Garven / Dribbble

• プルダウンでフィードをリフレッシュする機能を使い、ページコンテンツのアップデートを行う：ローディングしていることを視覚的に見せることで、ユーザーはシステムがリクエストに応えているのを確認できます。

Ramotion

• コンテンツがロードするのを待つ：ロード中はつまらないものである必要はありません。ユーザーがアプリから離れてしまうのを防ぐために、どのアプリでもちょっとしたアニメーションをコンテンツのロード中に使用しましょう。ロード中にアニメーションを目にすることで、ユーザーは待ち時間が少ないように錯覚します。

UIB | Dribbble

フローの中で複数のステップを繋げる

あるアクションを遂行するのに、ユーザーが複数のステップを踏まなければならないことも時にはあります。その際、それらのステップが繋がっていることを明確に提示するのが良いでしょう。アニメーションは、全てのステップを繋げ全体の流れをつくるのに役立ちます。

以下の事例は、複数のステップを直線的に繋げるためにアニメーションを使用した素晴らしい事例です。

Jakub Antalík | Dribbble

アニメーションは、デザイナーがプログレッシブディスクロージャー（段階的開示）を構築する際に役立ちます。プログレッシブディスクロージャーは、一度に表示される情報量を削減することでアプリのインターフェースを学びやすくするものです。

以下は、このプログレッシブディスクロージャー（段階的開示）をうまく利用し、情報をよりわかりやすく表示している2つの事例です。

Ramotion

Anton Skvortsov | Dribbble

新しいエレメントの紹介

新しい要素をページに表示する際。ユーザーの注目をそのオブジェクトに集め、なぜそれが表示されているのかをユーザーにとって明確にするよう、デザイナーは努めています。アニメーションは、新しいオブジェクトを紹介する際に、その関係性とヒエラルキーを定義するのを手伝ってくれます。

Virgil Pana

空間的方向感をユーザーに与える

アニメーションは、ユーザーが空間的情報のメンタルモデルを確立するのをサポートします。特に、モバイルデバイスを使用しているユーザーにとってこれは重要です。なぜなら、画面へ注意が向けられる時間の少なさと画面サイズの小ささによって、ユーザーはスクリーンの迷路の中で迷子になってしまうことがしばしばあるからです。

ユーザーの道案内には、アニメーションが役立ちます。アニメーションは、移動する情報同士がお互いに繋がっていることを伝えることが得意です。その時々のユーザー情報を表示することで、ユーザーが迷ってしまうのを防げます。

Jae-seong, Jeong | Dribbble

以下の事例では、フローティングアクションボタン（FAB）がヘッダーに変化し、この２つのオブジェクトがお互いに関連し合っていることを示しています。

Anish Chandran | Dribbble

コグニティブロードを最小化する

コグニティブロードとは、あるプロダクトを使用する際に要する精神的な努力量のことです。これは、ユーザーがあなたのアプリとどれほど簡単に関われるかどうかに、直接的に影響しています。一般的に、プロダクトを使用する際の努力が大きければ大きいほど、望ましくないとされます。

デザイナーのゴールは、使いやすいインターフェースをつくること。アニメーションをうまく使えば、タスクを完了するのに要する努力を減らせます。

ほぼ全てのアプリにおいて、ユーザーは何かしらのフォームを記入する必要があります。多くのフォームは、フィールドにラベル付けをするためにテキストの記入欄を持っています。ユーザーがそのようなフィールドをタップすると、ラベルは消えます。その結果、そのフィールドが何であったか、ユーザーにとって分かりににくくなってしまいます。

そこで、記入欄のラベルを浮かばせることで、ユーザーに文脈を与えつつ、長いフォームをより快適に記入できるのです。

MDS | Dribbble

ファンクションの変更をユーザーに理解させる

ファンクションの変更は、インタラクション後にエレメントがファンクションを変更した際に起こります。例えば、ユーザーがボタンをタップした際、そのボタンは異なる意味を持つようになります。アニメーションは、「このエレメントは今度は何だろう？」というユーザーの質問に答えるのに役に立ちます。

モバイルインターフェースで見られるファンクション変更の一般的な事例は”トグル”です。アニメーションを使用することで、エレメントの状態をユーザーが確認できます。

Jurre Houtkamp | Dribbble

いくつかの事例では、ひとつのエレメントのファンクション変更によって全体の見た目が変わることもあります。例えば「X」の文字が全体の新しい見た目をアクティベートさせる、以下のような事例があります。

Tamas Kojo | Dribbble

結論

洗練された使い方をすると、アニメーションは非常に強力です。インターフェース上の多くの機能的な課題を解決し、ユーザーにとって生き生きとレスポンシブなデザインを提供してくれます。どのようなアプリをデザインしても、あなたはユーザーにストーリーを語らなければなりません。アニメーションは、そのストーリーをより効果的に語ってくれるのです。

（翻訳：Mariko Sugita）