実際のアプリから学ぶ！UX向上のためのアニメーションの使い方
実際のアプリで使用されているアニメーションを事例にUXを向上させるアニメーションの使い方について紹介しています。アニメーションを使う目的は、ユーザーがアプリの動作や使い方を最も効率的に理解するのを助けることです。ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェア・デベロッパーのNick Babich氏によって投稿されました。
アニメーションはストーリーを伝えることができます。
ただし、伝えるのは長くて複雑なストーリーではなく、シンプルなストーリーです。例えば、「このコンテンツを見て！」、「操作は正常に完了しました。」などのメッセージの伴う、短いストーリーです。
アニメーションを使う目的は、単にユーザーを楽しませることではなく、ユーザーがアプリの動作や使い方を最も効率的に理解するのを助けることです。次に引用するように、ZURB社もこの考え方を表明しています。
「ZURB社では、静的な画面だけをデザインする時代は終わりました。ユーザーが画面からコンテンツを実質的に見ることができるようなデザインを実践しています。」（同社のブログ記事より）
アニメーションは美しさと機能を兼ね備えたデザインを、幅広いコンテキストにおいて実現できます。：プログラムの振る舞い（処理や動作）に影響を与えたり、コンピュータのステータス（動作状態）や動作結果をユーザーに知らせたり、ユーザーの注意を引いてを上手く誘導することも可能です。
この記事では、UX向上のためのアニメーションの例をいくつか紹介していきます。
読み込み（ローディング）の待ち時間が、退屈でなくなる
もしプログラムのソースコードの行数を減らすことが難しければ、データ読み込み中の待ち時間が、ユーザーにとってなるべく楽しいものとなるよう工夫するべきです。ユーザーを退屈させる、クルクルと回るローディングアイコン（このアイコンは、ユーザーにデータ読み込み中という事実を伝えるだけです。）の代替として、アニメーションを活用できます。
アニメーションとスケルトンスクリーン（Skeleton screen）を組み合わせて活用すれば、ユーザーの関心をコンテンツに集中させ続ける効果もあります。この組み合わせは、ほとんど全てのWebサイトやアプリにおいて利用できます。
スケルトンスクリーンは、コンテンツのデータ読み込みが完了するまでに、UIを段階的に表示する手法です。（画像左側）
自然なトランジション（画面遷移）をデザインする
アニメーションは、トランジション（画面遷移）をよりクリアに表現できるため、操作の過程を明確に示すことができます。ユーザーも意識をどこに向けたらいいのかを理解しやすくなります。
Adrian Zumbrunnen氏による次のデザイン例では、スクロール画面とアニメーションを組み合わせています（スクロールエフェクト）。ユーザーがリンクをクリックした後も、コンテキストの状態を維持する助けとなります。
これと比較して、処理の最初と最後の2つの静的な画面だけでトランジションをデザインした場合、途中経過が欠けているような印象を与えます。
トランジションを2つの静的な画面だけでデザインした場合
画面が急に変わることは不自然であり、ユーザーにとってはインターフェースの操作を理解する妨げとなります。
トランジションをアニメーションでデザインした場合
アニメーションとは、静的な画面に「息を吹き込む」ことです。
自然なトランジションにより、ユーザーはインターフェース上でのフロー（流れ）や進行速度を理解しやすくなります。また、インタラクションの次のステップで何が起こるかを予測しやすくなります。
[PR] UI/UXデザインで挫折しない学習方法を動画で公開中
要素間の関係を明らかにする
アニメーションは、直接操作しているような感覚を高めることもできます。
次の例では、スムーズなトランジションが実現されています。メニューアイコンをプレイバックコントロール（コンテンツ再生時のボタン操作の機能）に変化させ、また元のメニューアイコンに戻しています。ユーザーにボタンの機能を示すとともに、インタラクションに「感動や驚き」の要素を加える効果があります。
「再生ボタン」から「停止ボタン」に変化するデザインは、これら2つの機能が関連していること、また同時に成立しえないことを上手く示しています。
ユーザーの視線を画面中央にあるプレイバックコントロールに集めるために、アニメーションを使っています。
（GoogleのMaterial Design（マテリアルデザイン））その他の例―― フローティングアクションボタン（Floating Action Button）をタップすると、プラス記号から鉛筆のアイコンに変化します。鉛筆のアイコンが、最初に生成されるメソッドだと分かります。
このような細部の設計があるかどうかが、ユーザーが次に何が起こるかを予測しなければならないデザインとなるか、またはユーザーがアイコンの意味を直感的に理解できるデザインとなるかの分岐点です。
GoogleのMaterial Design（マテリアルデザイン）
操作の誤りを伝えるフィードバック（応答）として活用する
例えば、フォームの入力画面にもアニメーションを活用できます。
もし正しいデータが入力されたら、「頷く」ようなアニメーションで肯定の意味、間違ったデータが入力されたら「首を横に振る」ようなアニメーションで否定の意味を伝えることができます。こうしたアニメーションは、ユーザーにとってその意味を瞬時に理解しやすいといえます。
間違ったデータが入力されたら、「首を横に振る」ようなアニメーションで操作に誤りがあると伝えます。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
操作完了を知らせるフィードバック（応答）として活用する
アニメーションは、ユーザーに操作の結果を視覚的に示すことができます。「Show, don’t tell（言葉で説明するよりも、見せる）」という原則に従うなら、アニメーションを操作への応答として使うことができます。
例として、Michaël Villar社の提供するオンライン決済ツール「Stripe」では、ユーザーが「決済する」のボタンをクリックすると、決済完了前に、データ処理中を示すスピナー（Spinner：ローディングアイコン）が現われます。
Michaël Villar社
結論
アニメーションは、使い方によっては大きな効果を発揮できます。アニメーションを使った方がいい場面、使わない方がいい場面について時間をかけてよく考えることが大切です。
アニメーションは、デザインを構成する要素の1つとして、設計プロセスの始まりから考慮に入れるべきです。なぜならデザインは、ビジュアル・プレゼンテーション（Visual presentation：プレゼンテーション、店舗のウィンドウディスプレイなど、視覚的に訴えるデザイン）以上のものだからです。
スティーブ・ジョブズ氏の言葉を引用すると「デザインとは、見た目や使い心地だけではない。デザインとは、それがいかに機能するかだ。」
[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
