良いUXのために、意味のあるアニメーションをUIに使う: Adobe MAX セッションレポート #AdobeMAX

by 石川 修一

Posted on 12-05-2019

連載

Adobe MAX 2019

今年11月にロサンゼルスで開催されたAdobe MAX 2019のセッションから、「Animation for UX: Using Motion with Meaning in UI Design」の内容をレポートします。

このセッションでは、UXにおけるアニメーションにはどういう役割があるのか、また、どういうアニメーションが適切といえるのか、といった話題が扱われました。

講師は、アドビのシニアデザインエバンジェリストで、書籍「Designing Interface Animation」の著者でもあるVal Headさんです。普段はAdobe XDを使い、複雑なアニメーションはAfter Effectsで作っているそうです。

なお、このセッションでは「UXアニメーション」という言葉が使われていますが、理想的なUXを実現するために効果的な、UIアニメーションやトランジションの総称のようなもののことかなと思います。

最初の話題は、適切なUXアニメーションの条件についてでした。Valさんによれば、UXアニメーションが適切かどうかは、6つの原則に沿っているか確認するとよいとのことです。

UXアニメーションの6つの原則

1. Continuity 連続性

WebサイトでのUIやインタラクションを通して、ユーザーの頭の中には、Webサイトのどこに何があるかというメンタルマップのようなものが作られていきます。
連続性とは、このマップが頭の中で作られる過程をアニメーションで補助することをいいます。

上のアニメーションを見てみましょう。左にナビゲーションのアイコンパネルがあります。それぞれに、クリックするとスライドして現れ、スライドして消えるアニメーションが使われています。メニューが開かれている間も元のページは見えています。そのため連続性があり、自分がどこにいるか見失うことはありません。

ポイント

2. Visual Persistence 視覚的持続性

視覚的持続性とは、アニメーションの前後で同じようなものが見え続けるようにすることで、ユーザーの認知を支援するものです。画面遷移や要素を移動させる際に、画面から消さずにできるだけ表示し続けるようにします。

上の例では、アイコンをクリックするとウィンドウが開いて詳細が表示されます。アイコンの位置はそのまま、アニメーションによって拡大するため、詳細ビューではクリックしたファイルの情報を見ていることが明確です。

ポイント

3. Directing Attention 注意を向ける

ユーザーに注意を向けさせるには、色やフォントを変えるなど、デザイン的な処理によって強調することが一般的ですが、アニメーションを使えばさりげなく注意を向けさせることもできます。

オンラインのコードエディタCodePenでは、長い間コードを保存していないと、Saveボタンが震えて注意を喚起します。

数字がついたベルのアイコンが鳴っているアニメーションもさまざまなアプリケーションで使われています。

どちらもユーザーの注意を向けようとしていますが、いずれのアニメーションも今すぐ見なさいと邪魔するほどではありません。

ポイント

4. Easing イージングと時間

イージングとは変化の度合いのことです。主に下記のようなものが使われます。

CSSで実装する場合、変化の度合いをカスタマイズしたければ、ベジェ曲線を使ってコントロールすることができます。

アニメーション終了までの時間も重要です。適切なイージングを使っても、メニューが出てくるのに1秒かかったら遅すぎでしょう。0.3秒くらいが目安です。

ポイント

5. Clarity 明瞭さ

ユーザーが認識しやすいようにするには、アニメーションに明瞭さも必要です。たくさんの要素を一度に動かしてしまうと、ユーザーが何が起きているか追いきれなくなり、何に注意を向けたらよいか分からなくなります。

ポイント

6. Feedback フィードバック

フィードバックは、ユーザーの操作に対する状況を分かりやすく伝えるためのアニメーションです。

下のクレジットカード情報を入力するダイアログの例では、入力に誤りがあるとダイアログ全体を左右に揺らしています。

次の支払いボタンの例では、ボタンの中で、ローディングと支払い済みの状態を表示しています。スペースも節約できる適切なフィードバックです。

Mediumの記事の著者に拍手したときのフィードバックは、拍手のアニメーションと拍手した回数を示します。

Googleドライブで、複数ファイルをフォルダに入れるときのアニメーションは、複数ファイルが1つにまとめられたことを明確に表現します。

ポイント

アニメーションの使いどころ

アニメーションに適したインタラクション

次のような場合にアニメーションを使うと効果的です。

やりすぎなアニメーションに注意

アニメーションが使われる場面を考えて、適切なアニメーションを選択しましょう。

上の図は4つの場面に分けて、アニメーションの種類を整理した図です。横軸はイベント/タスクへの積極性で、左がネガティブ右がポジティブです。縦軸は頻度で、下が「たまにしか起きない」、上が「頻繁に起こる」です。

UXアニメーションのプロトタイピング

より良いデザインソリューションを理解するために、早い時期から頻繁にプロトタイプをつくりましょう。

UIアニメーションのプロトタイプをつくると次のようなメリットがあります。

プロトタイピングの例

あるアプリの検索エリアが開くときのアニメーションを考えてみます。

検索エリアが閉じた状態と開いた状態のデザインをエンジニアに渡して、「アニメーションさせてください」と言うだけでは足りません。アニメーションの順序、フェード、動きなど指示すべきものはたくさんあります。今回の例では以下のような項目です。

いろいろ指示する代わりにプロトタイプを仕上げて渡せば仕様書を書かずに済みます。

エンジニアには、プロトタイプに加えて次のような情報を渡すとスムーズに進みます。

プロトタイプで確認をせず、制作工程の最後の最後にアニメーションをつけるのはやめましょう。

まとめ

Topics: クリエイティブ, Adobe MAX

Products: