Advertisement

7mobile-animation-top (1)

 

海外デザインブログ Yalantis で公開された「7 Types of Animations for Your Mobile App」より許可をもらい、日本語抄訳しています。

 

「良いデザインは明きらかで、偉大なデザインは目に見えない。(英: Good design is obvious and great design is invisible.)」ということばを聞いたことがあるかもしれませんが、モバイルアプリの開発にアニメーションを利用するときも、同じ基本原則が適用できます。

 

 

うまく適用されたアニメーションは、ユーザーフレンドリーで魅力的にアプリを仕上げるだけでなく、ユーザーの邪魔になることもありません。どんなアニメーションにおいても重要となるタスクは、ユーザーにアプリの論理、ロジックを説明することです。

 

 

今回は、これまでのアプリ開発から学んだ、実践的なデザイン制作で役立つ、美しいアニメーションのテクニックをまとめてご紹介します。

 

 

 

詳細は以下から。

 

 

 

アニメーションの種類について

 

アニメーションの使い方を最適化するためには、モバイルにおける配置や機能をきちんと理解しておく必要があります。では、どんな種類のアニメーションがあるのか見ていきましょう。

 

アニメーションの種類について

  1. ビジュアル・フィードバック
  2. 機能の変更
  3. 方位空間の利用
  4. デザイン要素と操作における階層
  5. てきぱき、機敏なビジュアル
  6. システムの状態
  7. 楽しいアニメーション

 

アニメーションの基本原則について

  1. マテリアル、材料
  2. 曲線的な動きの軌跡
  3. タイミング
  4. 着目させる動き
  5. 継続する動きと後追いの動き
  6. 副次アクション
  7. スローインとスローアウト
  8. 予備動作
  9. リズム
  10. 強調

 

 

01. ビジュアル・フィードバック

 

ユーザーインターフェースにおいて、ビジュアル・フィードバック(英: Visual Feedback)はとても重要な要素です。日常生活で考えると、物体になにか働きかけることで反応します。ユーザーは、モバイルアプリのデザイン要素にも、同じような反応を予想しています。聞いたり、触れたりすることと同じように視覚(英: Visual)は、アプリによるフィードバックを指します。

 

 

ビジュアル・フィードバックは、よりシンプルな機能にも利用でき、アプリがきちんと動作しているか示します。ボタンのサイズが大きくなったり、ある方向に写真をスワイプで移動させたり、という動作は、アプリが「なにか行っている」ことを、ユーザー操作にうまく反映しています。

 

 

たとえば以下のサンプル例では、完了したタスクをクリックすると、ボックスサイズが縮み、みどり色に変化しているのが分かります。

 

02.fin_15.06

 

 

マッチングサイト Tinder などでもよく知られる、左スワイプで好き、右スワイプで嫌いといった意思表示も、ビジュアル・フィードバック・アニメーションを参考にしていると言えます。

 

content_component__1_

 

 

 

02. 機能の変更

 

この種類のアニメーションは、ユーザーの操作によって、要素がどのように変化するかを示し、特に機能の変化を説明したいときに便利なテクニックです。通常、ボタンやアイコン、その他の小さなデザイン要素に適用されることが多いのもポイント。

 

 

以下のサンプル例では、「ハンバーガーメニュー」から「Xマーク」に見た目が切り替わることで、ボタンの機能が変更されたことをうまく示しています。

 

content_principle

 

 

以下のサンプルでは、コンテンツのレイアウトに応じて、アイコンが変更されているのが分かります。

 

content_open-uri20151005-3-walc59

 

 

 

03. 方位空間の利用

 

多くのモバイルアプリは複雑な構造をしており、可能な限りナビゲーションメニューをシンプルにすることは、デザイナーにとっての課題です。アニメーションはこのむずかしい課題を実現するために、とても役立つアイテムとなります。デザイン要素がどこに隠れているのか、アニメーションを使って、はじめに見せておくことで、ユーザーは次回から探しやすくなるでしょう。

 

 

以下のサンプル例では、ユーザーがナビゲーション・ボタンをクリックすることで、ひっくり返るようにメニューが表示されています。

 

content_draft_06

 

 

以下のサンプル例では、より意思決定を行いやすいように、スクリーン画面の右下から追加オプションが、アニメーション付きで表示されています。

 

content_07

 

 

 

04. デザイン要素と操作における階層

 

アニメーションテクニックは、インターフェースの一部を表現したり、それぞれの要素がどのように作用するか説明するのにも最適です。各要素にはそれぞれ目的と、アニメーションを利用する配置場所を検討しましょう。

 

 

たとえば、ボタンをクリックすることで、ポップアップメニューが表示されるとき、画面スクリーンの横から単純にスライドするのではなく、ボタンそのものから現れるとなお良いでしょう。こうすることで、ボタンを押したときのリアクションを表現し、この2つの要素(ボタンとポップアップ画面)がどのように関連付けられているのか、ユーザーはうまく理解することができるでしょう。

 

 

すべてのアニメーションは、デザイン要素がどのように関連しているのか、きちんと説明する必要があります。この階層と動きは、直感的なインターフェースに必要不可欠な要素と言えるでしょう。

 

 

以下のサンプル例では、アイコンをクリックするとメニューバーが表示され、ユーザーにとって拡大されたときだけ、メニューが欠くことができない重要な要素であることが、瞬時に分かるようになっています。

 

content_draft_02_dark_skin_light_orange

 

 

以下のサンプル例では、情報の表示されたカード要素を、ユーザーがクリックすることで背景をぼかし、表示サイズが異なるだけで、ユーザーに同じ要素であることを伝えています。

 

content_1111

 

 

 

05. てきぱき、機敏なビジュアル

 

アニメーションは、どのようにデザイン要素が機能するかのヒントとなり、特にアプリであまり見かけない動作を利用するときには、ビジュアル・キューとして重要になってきます。

 

 

以下のサンプル例では、ユーザーがブログページを開くと、記事コンテンツがスクリーンの右方向に表示され、ユーザーは水平方向にスワイプすることで、カードを読み進めることができます。

 

content_travelapp_new

 

 

以下のサンプル例でも似たテクニックが利用されており、ソーシャル・ネットワーク・アイコンを水平方向スワイプで表示しています。

 

content_open-uri20150609-11-10hm03q

 

 

 

06. システムの状態

 

サーバーからダウンロードされたデータを計算するなど、モバイルアプリの裏側では、数多くのプロセスが行われています。そのためユーザーにアプリが固まってしまったり、クラッシュしていないことを知らせ、プロセスが処理中であることを伝えることが課題になるでしょう。

 

 

処理中であることをビジュアルで伝えることで、アプリ自体をユーザーが操作、コントロールしているような感覚にさせます。理想としては、各プロセスごとに、異なるアニメーションを同時に、一緒に利用できると良いでしょう。

 

 

以下のサンプル例では、録音中の音声トラックを表示し、リアルタイムに反応する波型アニメーションが、どれくらいの音量ボリュームで録音されているか、ユーザーにうまく伝えています。

 

content_1234

 

 

このテクニックでもっとも有名なサンプル例のひとつは、下方向に引っぱることで、コンテンツを再読み込みする(英: pull-to-refresh)アニメーションでしょう。

 

content_news-app

 

 

 

07. 楽しいアニメーション

 

ユニークな動きのアニメーションは、扱うのにコツが必要なテクニックです。むだに使われていることも多く、アプリ開発を複雑、ごちゃごちゃにする原因とも言えますが、本当にユニークなアニメーションは、ユーザーに対してアプリを、とても魅力的に目立たせることができます。ユーザーが商品やサービスを好きになるきっかけをつくる、デザイナーの隠しテクニックとも言え、ブランドを認知しやすくします。

 

 

以下のサンプル例では、あまり見かけない方法でサークル型シェイプを移動させ、ユーザーの視線を誘導します。またスクリーン画面上で、これらのサークル円を自由に移動させることで、楽しさやゲームのような要素(英: Gamefication)を盛りこむこともできます。

 

content_draft_08

 

 

コンテンツの読み込みアニメーションに、料理鍋がグツグツ煮える様子を表現し、ユーザーを飽きさせませない工夫がされています。

 

content_recipe-finder

 

 

楽しいアニメーションをデザインに検討するときは、1) 影をつけず、他のアプリ機能を隠さないようにし、 2) 読み込みなど無駄に時間を消費しないようにしましょう。

 

 

 

アニメーションの基本原則について

 

これまで、アニメーションの主な種類や機能について見てきました。よりアニメーションをうまく利用するには、ディズニー社の現場で長年培われた、アニメーションの基本原則12個(英: 12 Principles of Animation)を念頭に入れておくことで、UIデザインにより効果的に適用することができるでしょう。

 

 

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現!では、実際の動きをデモファイルで確認することもできます、こちらも参考にどうぞ。

 

 

小技1 マテリアル、材料

 

要素がなにからできているか伝えましょう。軽いですか、それとも重いですか。固定それともフレキシブル、平面それとも立体デザインですか。どのように他の要素に作用するのか、ユーザーにヒントとして伝えましょう。

 

content_Material

 

 

 

小技2 曲線的な動きの軌跡

 

まず自然な動きを実現することが大切です。通常、機械などは直線的な軌跡を描きますが、日常生活ではよりフレキシブルで、曲線的な軌跡となります。

 

content_Trajectory

 

 

 

小技3 タイミング

 

動作が完了するまでの時間を表す、タイミング(英: Timing)は、アニメーションを作成するときにもっとも重要な要素のひとつです。わたしたちの実生活において物体は、減速や加速など、直線的な動きではありません。よりナチュラルな動きを実現するために、曲線的な動きを取り入れるようにしましょう。

 

content_Timing

 

 

 

小技4 着目させる動き

 

スクリーン画面の特定のエリアに注目を集めてみましょう。たとえば、点滅するアイコンを使うことで、通知があることをうまく知らせ、ユーザーにクリックさせます。この種類のアニメーションは、たくさんの細かいパーツでできたインターフェースや、特定の要素を区別する方法がないときにも活用されています。

 

content_Focus

 

 

 

小技5 継続する動きと後追いの動き

 

継続する動き(英: Follow-Through)は、動作が完了することを伝えることができます。動きは同じタイミングではじまることはありません。車が突然止まったとき、タイヤから煙が出しながら、運転手は車が止まるまで前に進む動作が、継続して行われます。

 

 

後追いの動き(英: Overlapping Action)は、はじめの要素が終わる前に、次のアクションがはじまることを意味しています。動きを組み合わせることで、ユーザーにきちんと変化しているのを理解する時間を与えます。

 

content_Follow

 

 

 

小技6 副次アクション

 

副次アクション(英: Secondary Action)は、メイン動作が起こるときに分かりやすく強調する手助けをします。これは人が手を振りながら歩いたり、首をかしげたりする動作と同じです。またはボールを蹴りあげたときに舞い上がるホコリも同様です。

 

content_Second_action

 

 

 

小技7 スローインとスローアウト

 

スローインとスローアウト(英: Ease In and Out)は、デザイン基本原則のひとつで、モバイル向けUIデザインのアニメーションでも、同じように重要な要素ですが、見落とされがちでもあります。

 

 

物が止まった状態から最高速度まですぐに到達することはあまりありません。加速しはじめはゆっくり、速度がついてからはすばやく、減速するときは再びゆっくりな動きとなるように調整しましょう。加速と減速を加えないと、機会的な動きとなってしまいます。

 

content_EasyIn-Out

 

 

 

小技8 予備動作

 

このアニメーション・テクニックは、モノを素早く動かすときによく適用されます。動作はいきなりはじまらないものです。実際の生活でも、動きはなにかしらのことが起こることで、連鎖的に引き起こされます。たとえば、ボールがテーブルから落ちる前に転がりはじめ、人がジャンプするためにひざを曲げます。

 

 

このテクニックは、変化(英: Transition)やアニメーション(英: Animation)をより日常生活のような動きに魅せるときに利用できます。予備動作(英: Anticipation)は少しだけ跳ねるだけでも、ユーザーが何が変化し、スクリーン上でどの要素を追うのか理解させることができます。

 

content_Anticipation

 

 

 

小技9 リズム

 

アニメーションにおけるリズム(英: Rhythm)機能は、音楽やダンスと同じと言え、動きを組み立てます。より自然な動きを実現したいときに、検討したいアニメーションテクニック。

 

content_Rhythm

 

 

 

小技 強調

 

アニメ漫画などでよく使われるテクニッく誇張(英: Exaggeration)は注目をあつめるだけでなく、ドラマチックや動きを演出します。ウェブページでは、デザイン要素を拡大、縮小することで強調でき、注目を集めることができます。

 

 

たとえばフォームを入力するときに、記入している要素が光り、不要な部分を縮ませたり、フェードアウトで非表示にしたりしてみましょう。

 

content_Exaggeration

 

 

この記事では、アニメーションの種類と、アニメーション・デザインの基本原則について見てきました。今回紹介したテクニックを、今後のモバイルアプリ作成に役立てて見ましょう。

 

 

さいごに覚えておきたい、重要なポイントまとめ

 

1. ターゲット・オーディエンスが誰か考え、問題解決にプロトタイプをデザインしてみましょう。

2. すべてのアニメーション要素に、論理的根拠があるか確認しましょう。

3. 商品やサービスを目立たせるために、よりナチュラルな動きのアニメーション・パターンを実現しましょう。

4. プロジェクトの各工程ごとに、デベロッパーと打ち合わせして、アイデアを共有しましょう。

 

 

サムネイル@ : Lonely Mountain Weather Concept – Dribbble

参照元リンク : 7 Types of Animations for Your Mobile App – Yalantis