アニメーションに最適なWordPressプラグイン10選

WordPressにアニメーションを追加したいですか？

アニメーションは、魅力的なオリジナルストーリーを作り、競合他社に差をつけ、バウンス率を下げるのに効果的だからです。そして、一番の魅力は？コードやデザインの知識を必要としません。WordPressには、あなたのサイトに簡単にモーションを追加するためのプラグインがたくさんあります。

ここでは、今すぐダウンロードできるアニメーションプラグインのベスト10をご紹介します：

1.LottieFiles – Lottie block for Gutenberg

宣伝するわけではありませんが、LottieFiles for WordPressプラグインは、あなたのサイトにモーションデザイン要素を追加する最も簡単な方法の1つです。
このプラグインを使えば、無料で使える何千ものLottieアニメーションを検索することができ、しかも超軽量なファイルフォーマットです。これは、ウェブサイトの読み込み時間が速くなることを意味します。そして、数クリックでWordPressにアニメーションを追加することができます。Hover, Click, scroll などのカスタムイベントを設定して、再生を簡単にトリガーすることができます。独自のCSSでLottieのルック＆フィールをカスタマイズすることも可能です。詳細については、WordPressでLottieアニメーションを追加・カスタマイズするためのガイドを参照してください。

アニメーションの種類：アニメーションアイコン、イラスト、ローディングアニメーションなど、あらゆるユースケースや業種に対応した数千種類の無料アニメーションを用意しています。

使用例：軽いアニメーションやクリック、ホバー、スクロールに反応するアニメーションを追加する必要がある場合。背景としてアニメーションを追加する場合にも使用可能です。

価格：無料

2. SVG Support

SVG（Scalable Vector Graphics）アニメーションは、WordPressでは難しい場合がありますが、SVG Supportプラグインは、それを解消することを目的としています。SVGファイルをメディアライブラリに画像としてアップロードし、CSSとJavaScriptでスタイルやアニメーションを設定することができます。

SVGやLottieアニメーションを使うタイミングに迷ったら、こちらのファイルタイプに関するガイドを参照してください。

アニメーションの種類：アップロードして使用したいSVGアニメーションがある場合。

使用例： SVGファイルを埋め込むための簡単な方法が必要な場合。

価格：無料

3. Slides Hero

Slider Heroプラグインは、あなたのサイトを“映画のような“仕上がりにして、テキストや静的ページに全く新しい側面を付加することが可能な80以上の背景アニメーション・エフェクトとオーディオを提供します。

アニメーションの種類： スライダー、テキストカルーセル、ビデオ背景、テキストアニメーション。

使用例： ウェブサイトのヘッダーや、魅力的なバナー広告をアニメーションで作成したい場合。

価格：無料版と、29ドル、59ドル、79ドルの3つのアップグレードがあります。

4. Superfly

Superflyは簡単にアニメーションのナビゲーションメニューを作成することができ、しかもさまざまなスタイルのものを提供します。従来、アニメーションメニューの作成にはCSSやJavaScriptの知識が必要でしたが、このプラグインを利用することで、時間と労力を大幅に節約することができます。

アニメーションの種類： フルスクリーン、ミニマリスト、常時表示など、さまざまなスタイルのナビゲーションメニューをアニメーションで表示します。

使用例： 静的なメニューをアニメーションで置き換えたり、補完したりしたい場合。

価格：29ドル

5. Transition Slider

あなたのサイトには画像や動画のスライドがありますか？ Transition Sliderプラグインは、これらのスライダー用にカスタマイズ可能なトランジションエフェクトを備えた47種類のテンプレートを提供しています。スライダーは、画像や動画の出来に左右されるものですが、これらのエフェクトを使えば、これまでのスライダーに魅力的な新たな一面をプラスすることができます。

アニメーションの種類： エフェクトには、ワープ、ズーム、フェード、ストレッチ、クロスフェード、ブラーなどがあります。

使用例：画像や動画のスライダーにアニメーションのトランジションを追加したい場合。

価格：無料版とアップグレード版（35ドル）

6. Animate It!

Animate It！プラグインは、サイトのページ、投稿、ウィジェットに50以上のCSSアニメーションを利用することができます。

アニメーションの種類： 静的な要素に動的な動きを付加するための、小さくて鮮明なアニメーション。

使用例： アイコンやテキストなど、静的な要素に動きも加えたい場合。

価格 ：無料

7. Image Hover Effects Ultimate

Image Hover Effects Ultimateプラグインを使用すると、ユーザーがサイト上の画像にカーソルを合わせたときに、魅力的なアニメーションを組み込むことができます。

アニメーションの種類： ボックスの反転、スパイラルイン/アウト、キャプションの表示、スライド式の画像比較など、それぞれのバリエーションに応じた8種類のHover Effectが含まれています。

使用例： ポートフォリオやギャラリーの画像を際立たせたい場合に最適なプラグイン。

価格：19.99ドル、49.99ドル、199.99ドル

8. Blocks Animation: CSS For Gutenberg Blocks

ご存知のように、Gutenberg blocksはWordPressのコンテンツレイアウトを作成するために使用さています。Blocks Animationプラグインを使用すると、サイト上のそれらのブロックのいずれかにCSSアニメーションを追加することができます。しかし、このプラグインには数クリックで追加できるさまざまなオプションが用意されているため、ゼロからCSSを書く必要はありません。

アニメーションの種類： bounce, wobble, flash, fade in, rubber bandなど、さまざまなアニメーションスタイルから選択可能。

使用例： Gutenbergのブロックにシンプルなアニメーションを追加したい場合。

価格： 無料

9. Advanced Typing

このAdvanced Typingプラグインができることは1つで、とてもよくできています。アニメーションの中でミスやバックスペースをすることで「人間味」を出すこともできますし、好きなフォント、好きなサイズを使うことができます。

使用例： 非常に特殊なこのアニメーションは、あなたのWebサイトのヒーローセクションにあるキャッチフレーズに最適。

価格：12ドル

10. WebP Converter for Media

WebP Converter for Mediaプラグインは、実際にあなたのサイトにアニメーションを追加するわけではありません。その代わり、画像をAVIFやWebP形式に変換することで、サイトを高速化します。これらのファイル形式は、GIFのような標準的なアニメーション形式よりも大幅に軽量化されています。

もちろん、あなたのWebサイトが多くのアニメーションを使用している場合は、Lottieへの切り替えを検討してください。Lottieアニメーションは超軽量で、GIFに比べて平均600%も小さくなります！

使用例：あなたのサイトがJPEG、PNG、GIFを使用していて、高速な読み込みのためにそれらを最適化したい場合。

価格：無料版と、5ドルから1500ドルまでの複数のアップグレード版があります。

WordPressにモーションマジックを追加。

今回のリストで、WordPressサイトをどうアニメーションさせるかについて、いくつかのアイデアが得られたと思います。これらのプラグインを使えば、コーディングやデザインができなくても、簡単に動きをつけることができます。さらにインスピレーションを求めるなら、Lottieのアニメーションを使った印象的なWordPressサイトをいくつか紹介しましょう。

さあ、次のサイトのアイデアは浮かびましたか？ WordPressの制作に取りかかりましょう！

引用元