
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と超軽量で、現在のカーソルの位置を示すブリンクカーソルをアニメーションに加えることもできます。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- エンゲージメント
- エンゲージメントとは、企業や商品、ブランドなどに対してユーザーが「愛着を持っている」状態を指します。わかりやすく言えば、企業とユーザーの「つながりの強さ」を表す用語です。 以前は、人事や組織開発の分野で用いられることが多くありましたが、現在ではソーシャルメディアなどにおける「交流度を図る指標」として改めて注目されています。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- ポップアップ
- ホームページにおいてポップアップとは、現在見ているホームページの上に、重なるような状態で、新たな画面が開き、その最前面面に表示されることを言います。より目立つ、注目を集めることが出来る反面、見ている画面を遮るように表示されるので、不快に受け取られる傾向があります。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ポップアップ
- ホームページにおいてポップアップとは、現在見ているホームページの上に、重なるような状態で、新たな画面が開き、その最前面面に表示されることを言います。より目立つ、注目を集めることが出来る反面、見ている画面を遮るように表示されるので、不快に受け取られる傾向があります。
- ディスプレイ
- ディスプレイ(display)とは、文字や図形を表示する装置のことを言います。 テレビと同じ原理のCRTディスプレイや、設置面積が小さく消費電力の少ない液晶ディスプレイや、ガス放電を利用したプラズマディスプレイなど、種類も多くあります。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- ディスプレイ
- ディスプレイ(display)とは、文字や図形を表示する装置のことを言います。 テレビと同じ原理のCRTディスプレイや、設置面積が小さく消費電力の少ない液晶ディスプレイや、ガス放電を利用したプラズマディスプレイなど、種類も多くあります。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
関連ツール・サービス
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング