UX向上の鍵！マイクロインタラクションにも使えるアニメーションプラグイン15選

モバイルアプリケーションはもちろん、Webサイトにおいてもアニメーションはエンゲージメントを高めるうえで強力なツールです。
jQueryが流行していたころはjQueryに標準で搭載されているアニメーションを使ったりjQueryプラグインを導入するのが一般的でしたが、現在ではjQueryをベースとしたものに限らず、さまざまなアニメーションプラグインが公開されています。

フルスクリーンで背景が動くアニメーションから小さなホバーエフェクトまで、アニメーションはいたるところで使われています。
今回は、フロントエンドエンジニアやWebデザイナーが知っておきたい、マイクロインタラクションにも使えるアニメーションプラグインをご紹介していきます。

プラグインのメリットは、簡潔に読み込みコードと設定を書き込むだけで、だれもが簡単に導入できる点です。
ぜひ、お気に入りのプラグインをピックアップしていきましょう。

マイクロインタラクションにも使えるアニメーションプラグイン15選

1. Anime.js

Anime.jsはフレキシブルで軽量なJavaScriptのアニメーションライブラリです。
CSSやSVGだけでなく、DOM操作やJavaScriptオブジェクトの操作も行うことができます。
ドキュメンテーションでは詳しいアニメーション設定方法とチュートリアルを確認することができます。

2. Granim.js

Granim.jsは流動的でインタラクティブなグラデーションを実装することのできるJavaScriptライブラリです。
単なるグラデーション背景だけでなく、画像にグラデーションエフェクトをかけたり、イメージマスクを適用したテキストにも活用することができるほど汎用性は高いです。

3. Interaction Plus

Interaction Plusはさまざまなアニメーションを含んだポップアップやモーダルウィンドウのコレクションプラグインです。
ページロード時、スクロール時、クリック時などにイベントハンドラを設定し、ポップアップウィンドウを表示することが可能です。

4. Mo.js

Mo.jsは非常に簡単にすばやくRetinaディスプレイにも対応した高解像度のアニメーションを実装することのできるJavaScriptライブラリです。
Tutorialsでは円や三角形などの形を再現するチュートリアルを確認することができます。

参考：
ホームページにダイナミックな動きを！JavaScriptフレームワーク「mo.js」の特徴と使い方

5. Kute.js

Kute.jsはハイパフォーマンスでサクサク動くJavaScriptのアニメーションエンジンです。
コアエンジンを導入するだけでもユニークなアニメーションを実装できますが、このほかにも「CSSプラグイン」「SVGプラグイン」「テキストプラグイン」やJavaScriptでの制御を柔軟に行う「アトリビュートプラグイン」を導入することで、さまざまな環境でアニメーションを開発することができます。

6. Ember Burger Menu

Ember Burger Menuは、CSSトランジションを使って表示することができるハンバーガーメニュー用のアニメーションプラグインです。
右上あるいは左上に表示されたハンバーガーメニューをクリックすると、ぬるっとスムーズなアニメーションを使ってハンバーガーメニューが表示されます。

7. Animated Letters

Animated LettersはSVGを利用したアニメーション付きのフォントを実装することができるアニメーションプラグインです。
利用するためにはSegmentプラグインも必要です。

8. CountUp.js

CountUp.jsは他のライブラリに依存しないJavaScriptクラスで、数字をカウントアップアニメーションで表示することができます。
名前から分かるように「カウントアップ」ができるのはもちろん、設定を変えれば「カウントダウン」をしたり、小数点や接頭辞・接尾辞をつけることもできます。

9. Choreographer.js

Choreographer.jsはマウススクロールやマウスカーソルの位置をイベントハンドラとして設定することができるアニメーションプラグインです。
スマートフォンでは縦長のホームページになることも多いので、スマートフォンサイトでも大活躍しそうなプラグインです。

10. Ramjet

RamjetはDOM要素をさまざまな形に変形しながらアニメーションを加えて表示することができるユニークなJavaScriptプラグインです。
設定によってはスムーズなモーダルウィンドウを設計することも可能です。

11. Sonic

Sonicはさまざまな図形で実装することができる無限ループのプレローダーを作成できるJavaScriptのプラグインです。
Gifアニメーションのように画像割れしてしまうこともないので、高解像度のディスプレイでも綺麗にアニメーション表示することができます。

12. AOS

AOSはAnimate On Scroll Libraryの略で、スクロールするごとにふわりとさまざまな要素を表示することができるJavaScriptライブラリです。
スクロールアップすれば巻き戻しをすることもでき、スクロールするたびにまた要素が表示されます。

13. JustGage

JustGageはお手軽にクールなダッシュボードゲージを生成し、アニメーションで動かすことができるプラグインです。
ベクターデータで表示しているので、拡大しても美しく表示されます。

14. SVG.js

SVG.jsはSVGアニメーションを操作するための軽量なライブラリです。
他のライブラリに依存せず、強豪のSnap.svgやRaphaëlよりも軽量でサクサク動きます。

15. iTyped.js

iTyped.jsはまるでタイプライターで打ち込んでいるかのようなテキストアニメーションを実装することができるプラグインです。
たった2.3KBと超軽量で、現在のカーソルの位置を示すブリンクカーソルをアニメーションに加えることもできます。

まとめ

無味乾燥で動きのないホームページよりも、人間味あふれるちょっとしたアニメーションを加えた方が、使い心地もよくなり、全体的なUXが向上します。
すでに完成したホームページがある場合は、いずれかのプラグインを加えて少しだけ動きを加えてみるのはいかがでしょうか。

使いすぎるとくどくなってしまいますが、ワンポイントで使ってあげるだけでも、他のホームページとの差別化を図ることができます。
さまざまなエフェクトが用意されているので、とっておきのアニメーションを見つけてみてください。