海外デザインブログ Yalantis で公開された「7 Types of Animations for Your Mobile App」より許可をもらい、日本語抄訳しています。
「良いデザインは明きらかで、偉大なデザインは目に見えない。（英: Good design is obvious and great design is invisible.）」ということばを聞いたことがあるかもしれませんが、モバイルアプリの開発にアニメーションを利用するときも、同じ基本原則が適用できます。
うまく適用されたアニメーションは、ユーザーフレンドリーで魅力的にアプリを仕上げるだけでなく、ユーザーの邪魔になることもありません。どんなアニメーションにおいても重要となるタスクは、ユーザーにアプリの論理、ロジックを説明することです。
今回は、これまでのアプリ開発から学んだ、実践的なデザイン制作で役立つ、美しいアニメーションのテクニックをまとめてご紹介します。
詳細は以下から。
アニメーションの種類について
アニメーションの使い方を最適化するためには、モバイルにおける配置や機能をきちんと理解しておく必要があります。では、どんな種類のアニメーションがあるのか見ていきましょう。
アニメーションの種類について
アニメーションの基本原則について
01. ビジュアル・フィードバック
ユーザーインターフェースにおいて、ビジュアル・フィードバック（英: Visual Feedback）はとても重要な要素です。日常生活で考えると、物体になにか働きかけることで反応します。ユーザーは、モバイルアプリのデザイン要素にも、同じような反応を予想しています。聞いたり、触れたりすることと同じように視覚（英: Visual）は、アプリによるフィードバックを指します。
ビジュアル・フィードバックは、よりシンプルな機能にも利用でき、アプリがきちんと動作しているか示します。ボタンのサイズが大きくなったり、ある方向に写真をスワイプで移動させたり、という動作は、アプリが「なにか行っている」ことを、ユーザー操作にうまく反映しています。
たとえば以下のサンプル例では、完了したタスクをクリックすると、ボックスサイズが縮み、みどり色に変化しているのが分かります。
マッチングサイト Tinder などでもよく知られる、左スワイプで好き、右スワイプで嫌いといった意思表示も、ビジュアル・フィードバック・アニメーションを参考にしていると言えます。
02. 機能の変更
この種類のアニメーションは、ユーザーの操作によって、要素がどのように変化するかを示し、特に機能の変化を説明したいときに便利なテクニックです。通常、ボタンやアイコン、その他の小さなデザイン要素に適用されることが多いのもポイント。
以下のサンプル例では、「ハンバーガーメニュー」から「Xマーク」に見た目が切り替わることで、ボタンの機能が変更されたことをうまく示しています。
以下のサンプルでは、コンテンツのレイアウトに応じて、アイコンが変更されているのが分かります。
03. 方位空間の利用
多くのモバイルアプリは複雑な構造をしており、可能な限りナビゲーションメニューをシンプルにすることは、デザイナーにとっての課題です。アニメーションはこのむずかしい課題を実現するために、とても役立つアイテムとなります。デザイン要素がどこに隠れているのか、アニメーションを使って、はじめに見せておくことで、ユーザーは次回から探しやすくなるでしょう。
以下のサンプル例では、ユーザーがナビゲーション・ボタンをクリックすることで、ひっくり返るようにメニューが表示されています。
以下のサンプル例では、より意思決定を行いやすいように、スクリーン画面の右下から追加オプションが、アニメーション付きで表示されています。
04. デザイン要素と操作における階層
アニメーションテクニックは、インターフェースの一部を表現したり、それぞれの要素がどのように作用するか説明するのにも最適です。各要素にはそれぞれ目的と、アニメーションを利用する配置場所を検討しましょう。
たとえば、ボタンをクリックすることで、ポップアップメニューが表示されるとき、画面スクリーンの横から単純にスライドするのではなく、ボタンそのものから現れるとなお良いでしょう。こうすることで、ボタンを押したときのリアクションを表現し、この2つの要素（ボタンとポップアップ画面）がどのように関連付けられているのか、ユーザーはうまく理解することができるでしょう。
すべてのアニメーションは、デザイン要素がどのように関連しているのか、きちんと説明する必要があります。この階層と動きは、直感的なインターフェースに必要不可欠な要素と言えるでしょう。
以下のサンプル例では、アイコンをクリックするとメニューバーが表示され、ユーザーにとって拡大されたときだけ、メニューが欠くことができない重要な要素であることが、瞬時に分かるようになっています。
以下のサンプル例では、情報の表示されたカード要素を、ユーザーがクリックすることで背景をぼかし、表示サイズが異なるだけで、ユーザーに同じ要素であることを伝えています。
05. てきぱき、機敏なビジュアル
アニメーションは、どのようにデザイン要素が機能するかのヒントとなり、特にアプリであまり見かけない動作を利用するときには、ビジュアル・キューとして重要になってきます。
以下のサンプル例では、ユーザーがブログページを開くと、記事コンテンツがスクリーンの右方向に表示され、ユーザーは水平方向にスワイプすることで、カードを読み進めることができます。
以下のサンプル例でも似たテクニックが利用されており、ソーシャル・ネットワーク・アイコンを水平方向スワイプで表示しています。
06. システムの状態
サーバーからダウンロードされたデータを計算するなど、モバイルアプリの裏側では、数多くのプロセスが行われています。そのためユーザーにアプリが固まってしまったり、クラッシュしていないことを知らせ、プロセスが処理中であることを伝えることが課題になるでしょう。
処理中であることをビジュアルで伝えることで、アプリ自体をユーザーが操作、コントロールしているような感覚にさせます。理想としては、各プロセスごとに、異なるアニメーションを同時に、一緒に利用できると良いでしょう。
以下のサンプル例では、録音中の音声トラックを表示し、リアルタイムに反応する波型アニメーションが、どれくらいの音量ボリュームで録音されているか、ユーザーにうまく伝えています。
このテクニックでもっとも有名なサンプル例のひとつは、下方向に引っぱることで、コンテンツを再読み込みする（英: pull-to-refresh）アニメーションでしょう。
07. 楽しいアニメーション
ユニークな動きのアニメーションは、扱うのにコツが必要なテクニックです。むだに使われていることも多く、アプリ開発を複雑、ごちゃごちゃにする原因とも言えますが、本当にユニークなアニメーションは、ユーザーに対してアプリを、とても魅力的に目立たせることができます。ユーザーが商品やサービスを好きになるきっかけをつくる、デザイナーの隠しテクニックとも言え、ブランドを認知しやすくします。
以下のサンプル例では、あまり見かけない方法でサークル型シェイプを移動させ、ユーザーの視線を誘導します。またスクリーン画面上で、これらのサークル円を自由に移動させることで、楽しさやゲームのような要素（英: Gamefication）を盛りこむこともできます。
コンテンツの読み込みアニメーションに、料理鍋がグツグツ煮える様子を表現し、ユーザーを飽きさせませない工夫がされています。
楽しいアニメーションをデザインに検討するときは、1) 影をつけず、他のアプリ機能を隠さないようにし、 2) 読み込みなど無駄に時間を消費しないようにしましょう。
アニメーションの基本原則について
これまで、アニメーションの主な種類や機能について見てきました。よりアニメーションをうまく利用するには、ディズニー社の現場で長年培われた、アニメーションの基本原則12個（英: 12 Principles of Animation）を念頭に入れておくことで、UIデザインにより効果的に適用することができるでしょう。
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！では、実際の動きをデモファイルで確認することもできます、こちらも参考にどうぞ。
小技１ マテリアル、材料
要素がなにからできているか伝えましょう。軽いですか、それとも重いですか。固定それともフレキシブル、平面それとも立体デザインですか。どのように他の要素に作用するのか、ユーザーにヒントとして伝えましょう。
小技２ 曲線的な動きの軌跡
まず自然な動きを実現することが大切です。通常、機械などは直線的な軌跡を描きますが、日常生活ではよりフレキシブルで、曲線的な軌跡となります。
小技３ タイミング
動作が完了するまでの時間を表す、タイミング（英: Timing）は、アニメーションを作成するときにもっとも重要な要素のひとつです。わたしたちの実生活において物体は、減速や加速など、直線的な動きではありません。よりナチュラルな動きを実現するために、曲線的な動きを取り入れるようにしましょう。
小技４ 着目させる動き
スクリーン画面の特定のエリアに注目を集めてみましょう。たとえば、点滅するアイコンを使うことで、通知があることをうまく知らせ、ユーザーにクリックさせます。この種類のアニメーションは、たくさんの細かいパーツでできたインターフェースや、特定の要素を区別する方法がないときにも活用されています。
小技５ 継続する動きと後追いの動き
継続する動き（英： Follow-Through）は、動作が完了することを伝えることができます。動きは同じタイミングではじまることはありません。車が突然止まったとき、タイヤから煙が出しながら、運転手は車が止まるまで前に進む動作が、継続して行われます。
後追いの動き（英: Overlapping Action）は、はじめの要素が終わる前に、次のアクションがはじまることを意味しています。動きを組み合わせることで、ユーザーにきちんと変化しているのを理解する時間を与えます。
小技６ 副次アクション
副次アクション（英: Secondary Action）は、メイン動作が起こるときに分かりやすく強調する手助けをします。これは人が手を振りながら歩いたり、首をかしげたりする動作と同じです。またはボールを蹴りあげたときに舞い上がるホコリも同様です。
小技７ スローインとスローアウト
スローインとスローアウト（英: Ease In and Out）は、デザイン基本原則のひとつで、モバイル向けUIデザインのアニメーションでも、同じように重要な要素ですが、見落とされがちでもあります。
物が止まった状態から最高速度まですぐに到達することはあまりありません。加速しはじめはゆっくり、速度がついてからはすばやく、減速するときは再びゆっくりな動きとなるように調整しましょう。加速と減速を加えないと、機会的な動きとなってしまいます。
小技８ 予備動作
このアニメーション・テクニックは、モノを素早く動かすときによく適用されます。動作はいきなりはじまらないものです。実際の生活でも、動きはなにかしらのことが起こることで、連鎖的に引き起こされます。たとえば、ボールがテーブルから落ちる前に転がりはじめ、人がジャンプするためにひざを曲げます。
このテクニックは、変化（英: Transition）やアニメーション（英: Animation）をより日常生活のような動きに魅せるときに利用できます。予備動作（英: Anticipation）は少しだけ跳ねるだけでも、ユーザーが何が変化し、スクリーン上でどの要素を追うのか理解させることができます。
小技９ リズム
アニメーションにおけるリズム（英: Rhythm）機能は、音楽やダンスと同じと言え、動きを組み立てます。より自然な動きを実現したいときに、検討したいアニメーションテクニック。
小技 強調
アニメ漫画などでよく使われるテクニッく誇張（英: Exaggeration）は注目をあつめるだけでなく、ドラマチックや動きを演出します。ウェブページでは、デザイン要素を拡大、縮小することで強調でき、注目を集めることができます。
たとえばフォームを入力するときに、記入している要素が光り、不要な部分を縮ませたり、フェードアウトで非表示にしたりしてみましょう。
この記事では、アニメーションの種類と、アニメーション・デザインの基本原則について見てきました。今回紹介したテクニックを、今後のモバイルアプリ作成に役立てて見ましょう。
さいごに覚えておきたい、重要なポイントまとめ
1. ターゲット・オーディエンスが誰か考え、問題解決にプロトタイプをデザインしてみましょう。
2. すべてのアニメーション要素に、論理的根拠があるか確認しましょう。
3. 商品やサービスを目立たせるために、よりナチュラルな動きのアニメーション・パターンを実現しましょう。
4. プロジェクトの各工程ごとに、デベロッパーと打ち合わせして、アイデアを共有しましょう。
サムネイル@ : Lonely Mountain Weather Concept – Dribbble
参照元リンク : 7 Types of Animations for Your Mobile App – Yalantis
