実際のアプリから学ぶ！UX向上のためのアニメーションの使い方
本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェア・デベロッパーのNick Babich氏によって投稿されました。
アニメーションはストーリーを伝えることができます。
ただし、伝えるのは長くて複雑なストーリーではなく、シンプルなストーリーです。例えば、「このコンテンツを見て！」、「操作は正常に完了しました。」などのメッセージの伴う、短いストーリーです。
アニメーションを使う目的は、単にユーザーを楽しませることではなく、ユーザーがアプリの動作や使い方を最も効率的に理解するのを助けることです。次に引用するように、ZURB社もこの考え方を表明しています。
「ZURB社では、静的な画面だけをデザインする時代は終わりました。ユーザーが画面からコンテンツを実質的に見ることができるようなデザインを実践しています。」（同社のブログ記事より）
アニメーションは美しさと機能を兼ね備えたデザインを、幅広いコンテキストにおいて実現できます。：プログラムの振る舞い（処理や動作）に影響を与えたり、コンピュータのステータス（動作状態）や動作結果をユーザーに知らせたり、ユーザーの注意を引いてを上手く誘導することも可能です。
この記事では、UX向上のためのアニメーションの例をいくつか紹介していきます。
読み込み（ローディング）の待ち時間が、退屈でなくなる
もしプログラムのソースコードの行数を減らすことが難しければ、データ読み込み中の待ち時間が、ユーザーにとってなるべく楽しいものとなるよう工夫するべきです。ユーザーを退屈させる、クルクルと回るローディングアイコン（このアイコンは、ユーザーにデータ読み込み中という事実を伝えるだけです。）の代替として、アニメーションを活用できます。
アニメーションとスケルトンスクリーン（Skeleton screen）を組み合わせて活用すれば、ユーザーの関心をコンテンツに集中させ続ける効果もあります。この組み合わせは、ほとんど全てのWebサイトやアプリにおいて利用できます。
スケルトンスクリーンは、コンテンツのデータ読み込みが完了するまでに、UIを段階的に表示する手法です。（画像左側）
自然なトランジション（画面遷移）をデザインする
アニメーションは、トランジション（画面遷移）をよりクリアに表現できるため、操作の過程を明確に示すことができます。ユーザーも意識をどこに向けたらいいのかを理解しやすくなります。
Adrian Zumbrunnen氏による次のデザイン例では、スクロール画面とアニメーションを組み合わせています（スクロールエフェクト）。ユーザーがリンクをクリックした後も、コンテキストの状態を維持する助けとなります。
これと比較して、処理の最初と最後の2つの静的な画面だけでトランジションをデザインした場合、途中経過が欠けているような印象を与えます。
トランジションを2つの静的な画面だけでデザインした場合
画面が急に変わることは不自然であり、ユーザーにとってはインターフェースの操作を理解する妨げとなります。
トランジションをアニメーションでデザインした場合
アニメーションとは、静的な画面に「息を吹き込む」ことです。
自然なトランジションにより、ユーザーはインターフェース上でのフロー（流れ）や進行速度を理解しやすくなります。また、インタラクションの次のステップで何が起こるかを予測しやすくなります。
要素間の関係を明らかにする
アニメーションは、直接操作しているような感覚を高めることもできます。
次の例では、スムーズなトランジションが実現されています。メニューアイコンをプレイバックコントロール（コンテンツ再生時のボタン操作の機能）に変化させ、また元のメニューアイコンに戻しています。ユーザーにボタンの機能を示すとともに、インタラクションに「感動や驚き」の要素を加える効果があります。
「再生ボタン」から「停止ボタン」に変化するデザインは、これら2つの機能が関連していること、また同時に成立しえないことを上手く示しています。
ユーザーの視線を画面中央にあるプレイバックコントロールに集めるために、アニメーションを使っています。
（GoogleのMaterial Design（マテリアルデザイン））その他の例―― フローティングアクションボタン（Floating Action Button）をタップすると、プラス記号から鉛筆のアイコンに変化します。鉛筆のアイコンが、最初に生成されるメソッドだと分かります。
このような細部の設計があるかどうかが、ユーザーが次に何が起こるかを予測しなければならないデザインとなるか、またはユーザーがアイコンの意味を直感的に理解できるデザインとなるかの分岐点です。
GoogleのMaterial Design（マテリアルデザイン）
操作の誤りを伝えるフィードバック（応答）として活用する
例えば、フォームの入力画面にもアニメーションを活用できます。
もし正しいデータが入力されたら、「頷く」ようなアニメーションで肯定の意味、間違ったデータが入力されたら「首を横に振る」ようなアニメーションで否定の意味を伝えることができます。こうしたアニメーションは、ユーザーにとってその意味を瞬時に理解しやすいといえます。
間違ったデータが入力されたら、「首を横に振る」ようなアニメーションで操作に誤りがあると伝えます。
操作完了を知らせるフィードバック（応答）として活用する
アニメーションは、ユーザーに操作の結果を視覚的に示すことができます。「Show, don’t tell（言葉で説明するよりも、見せる）」という原則に従うなら、アニメーションを操作への応答として使うことができます。
例として、Michaël Villar社の提供するオンライン決済ツール「Stripe」では、ユーザーが「決済する」のボタンをクリックすると、決済完了前に、データ処理中を示すスピナー（Spinner：ローディングアイコン）が現われます。
Michaël Villar社
結論
アニメーションは、使い方によっては大きな効果を発揮できます。アニメーションを使った方がいい場面、使わない方がいい場面について時間をかけてよく考えることが大切です。
アニメーションは、デザインを構成する要素の1つとして、設計プロセスの始まりから考慮に入れるべきです。なぜならデザインは、ビジュアル・プレゼンテーション（Visual presentation：プレゼンテーション、店舗のウィンドウディスプレイなど、視覚的に訴えるデザイン）以上のものだからです。
スティーブ・ジョブズ氏の言葉を引用すると「デザインとは、見た目や使い心地だけではない。デザインとは、それがいかに機能するかだ。」
[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
