ウェブアニメーションの現在

Contact Price

UI・UXエクスペリエンスUIUXとアニメーション

Animation - 2018.9.30 - Three Philosophers

このページでは、UX(ユーザーエクスペリエンス)の向上へ必要なアニメーション技術を確認してみましょう。JsやCSS3アニメーションも時間の経過と共に定着し、ライブラリの数もずいぶんと増えてきているようです。表現の敷居が高くなると、認識レベルの相違が生まれ、問題点が生じます。UIUXデザイナーとして、アニメーション技術に関しても幅広い知識を身につけ、ディレクターさんとフロントエンドのギャップを埋めるなど、ワークフローの円滑化に一役買っていきましょう。

CSSとJsでどこまで出来る?

その昔、ウェブにおけるアニメーションといえば、ほぼFlashかGifアニメーションの二択だったのですが、現在ではCSS3アニメーションJava Scriptでどこまで表現出来るかが鍵となっています。

一般的には、UI要素の状態の切り替えなど、単純かつ一回限りの遷移にはCSSアニメーションを使用し、バウンス、停止、一時停止、巻き戻し、スローダウンなどの高度な効果を実現したい場合はJavaScriptで制御を行います。さらに高度な表現が可能なWEB Animations APIrequestAnimationFrameも有名ですが、対応ブラウザの問題などもあり本ページでは割愛します。

グラフィックスソフトの仕様

コーディング技術に加え、SVGを取り入れるなどマルチデバイス向けの最適化も必要になります。直近でもイレギュラーなSVG画像作成の業務が発生しましたが、チーム体制では自分では考えられないようなフローでの作成を迫られることもあります。ソフト間の競争も激しく、同じソフトウェアでもバージョンが違えば仕様も変化しますので、今まではソフト任せにしてきた部分でも、どういったアルゴリズムにより描画されているのかなど、プログラム部分を一度確認しておきましょう。詳細ダイアログを開かなければ解決しないようなことや、バグのような状態からのオブジェクトの整形の仕方など、不具合発生時のアクションが早まります。

アニメーションライブラリの現在

Jqueryのtoggleアニメーションに安っぽさを感じたことはないでしょうか。製品の質を向上させていくには以下のようなライブラリ群の選択も考慮に入れるべきでしょう。機能差に合わせ、その用途にも注目してみましょう。

ライブラリ名 主な効果
Animate.css ライトなエフェクト
Bounce.js ボックス要素がバウンスする
Transit(with jQuery) 超スムーズと冠しているだけあって、とてもなめらかで良い動き。
AnimeJS TweenMaxなどを提供している「GSAPより機能は限定的ですが、動作が軽いのが特徴。
Velocity.js AnimeJSの対抗馬。
TweenMax(GSAP) Googleの記事でも紹介される、複雑なエフェクトを実現する本命馬。

AnimeJS以下のライブラリが強力系で、その中でもGreenSockのTweenMaxは最高峰のライブラリです。

AfterEffectsとSVG、Gifアニメーション

AfterEffectsからも、昔なじみのGifアニメーションのみならず、どのような端末でも綺麗に再生されるSVGアニメーションへも展開が可能です。上記ライブラリのもつ無印のjQueryでは実現できないような滑らかな動きも、グラフなどで視覚的に調整・実現が可能です。しかしプログラムとの連動面や、ソフト自体の敷居の高さ、Gifアニメの書き出しだけでも以下のような工程を踏まなけれなならず面倒な印象を受けるのも事実です。

アニメーションを作成し、チャンネルRGB+アルファ カラー:ストレート(マットなし)でQuickTimeで書き出し。.movファイルをPhotoshopで開きWeb用に保存でGifアニメーション化

AfterEffectsの経験者から見れば、Jsなどで表現されるエフェクトはあまり魅力のないものに感じるかもしれませんし、ワンクリックで実現されるエフェクトを長いコードを書いて実現しなければならない点には苛立ちを感じることでしょうが、その機動性においてCSS3やJsには劣る部分があります。

まとめ

このように表現方法は様々ですが、たとえ軽いアニメーションでも、ユーザーのアクションに導線をおくものは全てがプログラムで表現されますので工数はかさみます。設計時には、別ページで紹介するマイクロインタラクションの仕様(フロー)を参考に、実現したいことと、それを可能にする技術を整理することが大切です。そして、人間はどうしても固定概念が拭えませんから、設計時には遊び心も大切になってくるような気がします。新鮮なアイディアも湧きますし、それがそのままUXの向上に繋がっていくのではないでしょうか。