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 が向上します。
すでに完成したホームページがある場合は、いずれかの プラグイン を加えて少しだけ動きを加えてみるのはいかがでしょうか。

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