After Effectsで作成したアニメーションをネイティブアプリで再生するAirbnb製のライブラリを使ってみた【後編】

前編(https://tondemodesign.com/tried-lottie-1/)では、Airbnb製のライブラリがAfterEffectsアニメーションを読み込めるように、Bodymovinを使ってJSONファイルを書き出すところまでをやりました。

今回は実際にLottieを使って、nanameue社のエンジニアシューちゃん( @wildstarzw )にandroidアプリに組み込んでもらいました。本記事では、Lottieを使ったプロジェクトでデザイナーがなにをすべきかにフォーカスしています。エンジニアがやるべきLottieの実装方法を詳しく説明している記事ではありませんのであしからず。エンジニアの方はシューちゃんに質問してね ( @wildstarzw ) 。

Repeatは何故か無視される

こちらのアニメーションを組み込んでもらおうとしたところ、うまく行きませんでした。実際に実装してもらったときのアニメーションがこちら 

AfterEffectsでは、1つの球の動きをつくり、Repeat機能を使って球を4つ、90度ずつずらして配置する設定にしていました。おそらくこのRepeatの部分が無視されています。Repeat機能を使う場合は、Repeatしたものをそれぞれオブジェクトに置換する必要があるみたいです。

画像を含むAfterEffectsファイルにはまだ未対応

次に実装をお願いしたのが上のアニメーション。こちらのアニメーションはpng画像を2枚使用しています。

このプロジェクトをBodymovinを使って書き出すと、imageフォルダが作られてしまいます。

調べたところ公式アナウンスに、イメージの対応はこれからの予定と書かれていました。

In addition to all of the After Effects features and API additions we’ve worked on so far, we have many ideas for the future. These include mapping views to Lottie animations, controlling view transitions with Lottie, support for Battle Axe’s RubberHose, gradient, type, and image support.

ここまで取り組んできたAfterEffectsの機能やAPIの開発に加えて、このさきやりたいこともたくさんあります。Lottieアニメーションのマッピングビューをつくったり、Lottieでviewのトランジションを制御したり、Battle AxeのRubberHose、グラデーション、文字入力、それからイメージもサポートしていくつもりです。

こちらに関しては、Lottieのアップデートを待つか、自分なりに魔改造するかしか解決方法はなさそうです。

画像が駄目でもベクターならOK

画像が使えないとなると、複雑なイラストをAfterEffectsで描くしかないのかというとそんなこともありません。ベクターを使えば良いのです。

やり方

イラレファイルをAfterEffectsで読み込みます。タイムラインにイラレファイルを置いたら、右クリック>ベクトルレイヤーからシェイプを作成。

ベクターデータとしてAfterEffects上で扱うことが出来るようになりました。画像を含まないデータなので、Bodymovinを使って書き出したデータにもimageフォルダが作成されずに、うまいことandroidアプリで動かすことが出来ました。

まとめ

画像ファイルには対応していませんでしたが、イラストレーターで描いた複雑なイラストもカンタンにアプリに実装できることがわかりました。JSONファイルを渡してから、シューちゃんは15分程でアプリ(android)に組み込んでくれました。エンジニアがすべきことは正確にはわかりませんが、導入コストはさほど高くないのではないでしょうか。

この先、更に便利な機能を実装する予定だとAirbnbの公式アナウンスも宣言してますし、今後に期待です。リッチアニメーションがネイティブアプリのスタンダードになる日も近いかもしれません!


続きを読む

効果的なアニメーションがUXを向上させる Smashing Magazine和訳

Smashing MagazineさんがアニメーションとUXの関係について書かれていたのが興味深かったので和訳したいと思います。なお、プロの翻訳家ではないので、わかりやすさ>正確さ、というスタンスで訳しています。ご了承下さい。

※当記事は、元サイト、SmashMagazine様に許可を得て翻訳しています。

元サイト

https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/

効果的なアニメーションがUXを向上させる

人間は視覚に大きく頼って生きている生き物である。アニメーションによって”見た目”がユーザーに与える影響は大きくなる。動いているものを見ずにはいられない我々の目にとっては、アニメーションというものはまるでキャンディーのように、キャッチーでキラキラしている。それだけでなく、競合サービスとの差別化を図るのにも有用だ。

近年、多くのデザイナーがアニメーションがUXを向上させる重要な要素の一つだと考えている。アニメーションは単に楽しいものというだけにすぎず、インタラクションを成功へと導くツールなのだ

しかしながらデザインにおいてアニメーションは組み込まれている場所はもちろんのこと、適切なタイミングで組み込まれたときにしかユーザー体験を向上させることはない。よいUIアニメーションには目的と意味があり、きちんと機能を果たす。この記事では、UXデザインにおいて機能的なアニメーションが果たす役割について説明し、アニメーションを組み込む適切なタイミングについても見ていきたいと思う。

機能的なアニメーションとは

機能的なアニメーションとは、デザインの機能の一部として絶妙にUIに取り入れられたものである。デザインをより強力なものにし、以下のように明確で論理的な目的を持つ。

  • 認知負荷の軽減
  • 変化の見落としの防止
  • 空間関係を認識する補助
アニメーションはUIに命を吹き込む。人間中心設計の手法では、ユーザーが主要な商店であり、UIは直感的でしっかりとした反応が得られ、そして人間らしいものでなければならない。機能的なアニメーションはそれらを達成するために無くてはならないものである。

UIにおける機能的なアニメーションの役割

考え抜かれテストされ尽くした機能的アニメーションは、複数の機能を果たすことができる。

ユーザーアクションへのフィードバックを視覚的に表現する

よいUIデザインはフィードバックを提供する。フィードバックは、スクリーン上の物質がまるで現実世界のものであるかのように感じさせてくれるうえに、インタラクションの結果(いい場合も悪い場合も)を示してくれる。ボタンやコントローラーなどのUIエレメントは、スクリーンというガラスのレイヤーの向う側にあるけれども、形を持っているようにみえなければならない。ビジュアルと連続した動きは、直ちに入力を認識しユーザーにまるで直接それらを操作しているかのような動きをすることで、このギャップを埋めることができる。

ボタンや他のアクティブコントロールは視覚的フィードバックでユーザーの入力に反応しなければならない (Image credit: Bechance)

Image credit: Ramotion on Behance from Smashing Magazine on Vimeo.

視覚的フィードバックは操作の結果をユーザーに知らせるときに役に立つ 。操作が正常に行われなかった場合、機能的アニメーションはなにが問題なのかを迅速に、簡単な方法で伝えなければならない。たとえばブルっと震えるアニメーションは、間違ったパスワードが入力されたときに使われる。クビを横に振るというジェスチャーが現実世界でも人々が(NOという)フィードバックをお互いに与えるときにつかっていることもあり、ブルッと震えるジェスチャーがNoを意味するのはかなり普遍的なのだというのは理解しやすい。

ユーザーはアニメーションを見て、即座に問題があると判断できる。クレジット: thekineticui

目的

  • ユーザーのアクションをシステムが受け取ったことを認識させる
  • ユーザーのアクションの結果を受け付ける(拒否する)

システムの状態を可視化する

ニールセンのユーザビリティ10原則 の一つによると、システムの状態を見えるようにすることはUIデザインにおいてもっとも重要な原理の1つである。ユーザーは今どういう状況なのか、いついかなるときも知りたいと思っているしアプリはユーザーにそれを推測させるようなことがあってはならない。アプリはユーザーに何が起きているのか、正しい視覚的フィードバックで伝えなければならない。データのアップロードとダウンロードのプロセスは効果的アニメーションが真価を発揮する場面だ。

例えば、ローディング中のアニメーションは、いまどのくらいのスピードで作業が進んでいるのかを示し、あとどのくらいで作業が完了するのか期待を持たせる。

楽しいアニメーションは、スクリーンの後ろで起こっていることからユーザーの注意をそらし、ユーザーの待たされていることへのストレスを軽減することができる。(クレジット: tympanus)

このようなタイプの機能的アニメーションは、電話を受け取った時に代表されるように、なにかアプリ(もしくはシステムでも)の重要な状況変化においてユーザーの注意を引きたいときにも役に立つ。

(Image credit: Material Design)

もしくは新しいメールが届いたときにも

(Image credit: Behance)

目的

リアルタイムなシステムステータスをユーザーに知らせ、ユーザーに今何が起きているのかを理解させる

ビジュアルヒント

はじめてアプリを使うユーザーの多くは、自分一人の力でアプリのインターフェイスの使い方を理解することはできない。(ジェスチャードリブンインターフェイスなどのように)見慣れないユニークなインタラションを持つUIの場合は、特にそうである。

UIをユーザーに教えるとなったときに、インタラクションを使って何ができるのか視覚的ヒントを示してあげなければならない。機能的アニメーションはユーザーの注意を、どんなインタラクションが使用可能なのかという点に向けることができる。

視覚的ヒントはユーザーに今何が起ころうとしているのか見通しを与えることができる。例えば写真を取るという行動をユーザーに準備させていた機能的なアニメーションがiOSのカメラアプリにはあった。

iOS6カメラアプリにおけるシャッターのイメージ

さらにビジュアルヒントはデザインにおける特定の効果がどのように作用するか実証することによって、ユーザーを一歩前進させることができる。

Pudding Monsters for iOS. Image credit: Pudding monsters from Smashing Magazine on Vimeo.

視覚的ヒントはユーザビリティを向上させ、結果的にプロダクトの有用性(desirability)をも向上させる。

目的

  • 必要な予測を創り出し、これから起こることに対する手がかりをユーザーに与える
  • ユーザーがインターフェイスに適応するのを助ける
  • ユーザーがどのようにスクリーン上のエレメントとのやりとりを行い、どのようなやりとりをすべきかをユーザーに教える

ナビゲーション遷移

ナビゲーション遷移は、例えば全貌を映すビューから詳細のビューへの遷移に代表されるように、アプリの状態と状態の間の動きである。なにかしら状態が変化するときは、デフォルトではパチパチとページが移り変わるのでフォローするのが難しい。機能的アニメーションはそのような変化の瞬間にユーザーが楽にページ遷移を認識できるようにする。ユーザーをナビゲーションの状況から状況へとスムーズに移動させ、遷移中のビジュアル的”つなぎ”を作ることによって変化を説明する。ナビゲーション遷移は階層的(親から子へ)、または兄弟遷移からなりたつ階層的な遷移はユーザーがアプリのより深い階層やスクリーンにユーザーが行く場合に使われる。アニメーションは親階層から目的地(子階層)への移動をより一層明確に説明する。

Animated zoom-in transition guides a user’s attention from parent-to-child (detailed view). Image credit: Material Design from Smashing Magazine on Vimeo.

Animated parent-to-child transition clarifies the relationship between parent and child. Image credit: Behance from Smashing Magazine on Vimeo.

兄弟関係の遷移は要素同士がヒエラルキーの同じ階層に存在した場合に起こる。例えば、このアニメーションはユーザーをタブからタブに導いたときに使われる。

The content and surface of each tab stays at the same level and the animation simply guides focus between views. (Image credit: Behance)

コンテンツとタブの表面は同じ階層にあり、アニメーションは単にビューのどこに注目すればよいかを示している。

両方の場合、機能的アニメーションは目がオブジェクトがどこから来て、隠れるオブジェクトがどこにいくのか(それをもう一度見つけるにはどこを探せばいいのか)がわかりやすく示されている。視覚的な手がかりを提供し、インタラクションをカンタンにした上で、何が起きたのかを補足する。

目的

  • スクリーンとエレメントの空間的な関係を定義する
  • ユーザにたった今起こったページレイアウトの変化を理解させることで、パチパチとした遷移によってユーザーを驚かせてしまうのを避ける

ブランディング

ここまでで説明したアニメーションの役割というのはかなり論理的だったが、これは極めて感情的なものだ。よく、全く同じ機能を持ち、同じ課題を解決するためのサービスというのはいくらでも存在する。それらはそれぞれ良いエクスペリエンスを持っている、そのなかでも人々に愛されているプロダクトというものは、良いUX以上のものを提供している。ユーザーとの感情的な関わりの確率である。

ブランディングアニメーションはユーザーとの関わりに一役買っている。マーケティングツールとしても使われ、(会社のブランド価値をサポートしたり、プロダクトの強みを強調する)、同時にUXをほんとうの意味で楽しくて、印象に残るものにする。このアプローチは”ユーザー中心”ではないかもしれないが、機能的な目的を持っている。

いい結果を生むために、ブランディングアニメーションは経験の連続性をサポートする必要がある。例えば、 Lo-Flo Records のウェブサイトにある素敵なアニメーションはユーザーにもっとウェブサイトを見て回ってもらうのに重要な役割を果たしている。人々はウェブサイトが次になにを見せてくれるのかとワクワクしながら見て回るのだ。

Branding animation is able to make design feel unique. Image credits: Lo-Flo-Records from Smashing Magazine on Vimeo.

人々は細部を気にする。アニメーションへの注目は感情を伝達し、エクスペリエンスがよく作り込まれている印象を与えることができる。何かを待っている間に出現するユニークで楽しいインジケーターアニメーションは、本当に楽しいエクスペリエンスを生み出すことができる。

Attention to fine movements can delightfully surprise the user. Image credit: Creativedash from Smashing Magazine on Vimeo.

目的

ユーザーを楽しませ、共感と楽しさをデザインに付与する

プロダクトの特徴をつくる; ユーザーにプロダクトに関わり、ブランドへの理解を高める

落とし所の見つけ方

便利なキャンディーとただのキャンディーのバランスはどこでとればいいのでしょうか?どのタイミングでアニメーションが適切でなのかということに時間を割いて考えることは非常に大切なことである。

目的を伴ったアニメーション

アニメーションは必ず目的を持っていなければならない。自己満足のアニメーションなどあってはならない。機能的な目的にアニメーションがふさわしくない場合、気まずかったり、うざったいものになりかねない。アニメーション無しでもっと迅速に済むはずの作業が、遅らされている場合なんて特にそうだ。例えば、以下にPayPalのメールレシートのコンセプトアニメーションがある。ぱっと見素晴らしいアニメーションだが、アニメーションがあるがゆえに、アニメーションが終わるまでの4秒間待たされるのはやりすぎだし、結果的にアプリのフローをつまらせている。シンプルにレシートがフェードインしてくるアニメーションのほうが、この場合目的に会っている(単純にレシートが現れるまでの時間が短いため)

An example of superfluous animation. Image credits: Vladyslav Tyzun from Smashing Magazine on Vimeo.

ユーザーは常に目的を持ってサイトに来たり、アプリを起動したりするということを覚えて置かなければならない。私たちは短い空間と時間の中でユーザーの目的を彼らに示す必要がある。それゆえ、アニメーションをアプリで使う時、アニメーションが意味を持ち、ユーザーがやりたいことをスムーズにやれることを邪魔しない場所でのみアニメーションを組み込むべきである。

繰り返しを忘れないで

とてもいいアニメーションでさへ、使いすぎると鬱陶しく感じられてしまうアニメーションをデザインするときは自分に聞いてみて欲しい、”100回目にこのアニメーションを見たとしても鬱陶しくないか。またそれは誰が見ても明確で出しゃばりすぎていないか”

アニメーションは鬱陶しいものになってはならない(Image credit: Rachel Nabors) (Large preview)

プロトタイプを作り、アニメーションをテストしよう

UIアニメーションを作品に組み込むときに、インタラクティブなプロトタイピングとテストを実際のユーザーと共に行うのは正しい行動だ。プロトタイピングはあなたがどのようにアニメーションをデザインに使いたかったのか伝えるのに最適である。もしインタラクティブなプロトタイプを使えば、なにがうまくいき、アプリの欠陥がどこに隠れているか明確に知ることができる。アニメーションの見た目と、実際に触ってみての印象とは違うため、よくプロトタイプを行った後で再度作り直すというのは珍しいことではない。だらら何度も迅速に繰り返そう。何度も何度も小さなディテールを見直すだけでも、アニメーションは劇的に良くなるはずだ。

Create interactive prototypes using Adobe XD. Image credits: fastcodesign from Smashing Magazine on Vimeo.

まとめ

どこでアニメーションが有意義なものになるのか定義するだけでは、まだ完全ではない。もしあなたがアニメーションをデザインで使う場合、しっかりと作り込まれていなければならない。アニメーションの作り込みの成功の鍵は、アニメーションがデザインプロセスの1つになっていいるかどうかだ。きちんと行えば、アニメーションはデジタルプロダクトを単なるスクリーンのつながりから、細かなところまで考えられて開発された忘れがたい経験に帰ることができる。 

続きを読む