WordPressでロッティアニメーションを使用する方法
公開: 2022-03-17WordPress Webサイトにアニメーションを組み込むことは、疲れたWebページを活気づけ、訪問者がサイトにいる間ずっとエンゲージメントを維持するための優れた方法です。 これを行う簡単で効率的な方法は、ロッティアニメーション（高品質で軽量のアニメーション）を使用することです。
ロッティアニメーションはさまざまな理由で人気が高まっています。時流に乗ってウェブサイトを整える準備ができているなら、それらはあなたにぴったりかもしれません。
これらのアニメーションを作成し、WordPressサイトにスムーズに追加するには、いくつかの異なる方法があります。
ロッティアニメーションとは何ですか？
Lottieは、Android、iOS、Web、およびWindows用のライブラリであり、After Effectsアニメーションをレンダリングし、アニメーションデータを通常の画像ファイルタイプではなくJSONファイルとしてエクスポートできるようにします。 つまり、静的なアセットを楽しく魅力的なものに簡単に置き換えることができます。
このオープンソースソリューションは、AirBnBのチームによって最初に導入されましたが、さまざまな市場のデザイナーやアニメーターの間で急速に人気が高まっています。 WordPress Webサイトでロッティアニメーションを使用する大きな利点の1つは、GIFアニメーションやmp4ファイルに比べてファイルサイズが非常に小さいことです。 さらに、柔軟なアニメーション形式により、ブラウザでレンダリングを処理できます。
ロッティアニメーションを使用するための多くの可能性は、それらが非常に人気がある理由の1つです。 ロッティアニメーションは、アニメーションヘッダー、ボタン、人目を引くグラフィック要素などとして使用できます。 訪問者がWebページをスクロール、ホバー、またはクリックしたときにトリガーされるようにアニメーションを設定することもできます。 B2CとB2Bの両方のWebサイトでの汎用性と簡単な実装により、Webデザインの品質と全体的な外観を向上させる画期的な方法になっています。
ロッティアニメーションの作成
ロッティアニメーションをサイトに追加するかどうかを検討するときは、最初にストックアプローチとカスタムアプローチのどちらを実行するかを決定する必要があります。 それぞれに長所と短所があるため、決定する前に両方のオプションを検討することをお勧めします。
どのタイプのアニメーションでも、常に少ないほど多くなります。 アニメーション要素をWebサイトの再設計に組み込むときは、そのアニメーションが顧客の旅でどのような役割を果たしているかを考慮してください。
カスタムロッティアニメーション
Webサイト用のカスタムロッティアニメーションを探している場合は、Adobe After Effectsを専門とし、このタイプのアニメーションに精通しているアニメーターまたはデザイナーと協力する必要があります。
多くのロッティアニメーションはイラストスタイルを使用しているため、先に進む前に、これがWebサイトのブランディングとスタイルに適合するかどうかを判断する必要があります。 グラフィック要素とアニメーション効果を決定したら、アニメーターはAdobe After Effectsでカスタムアニメーションを作成し、AfterEffects拡張機能を使用してそれらをlottieアニメーションとしてエクスポートする必要があります。 これにより、サイトに簡単に実装できる高品質のアニメーションがレンダリングされます。
ロッティアニメーションが高品質である理由の1つは、作成プロセスにより、開発者やエンジニアがデザイナーのアニメーションをWeb形式で再作成する必要がなくなるためです。 すぐに使用できるソリューションを提供し、アニメーションの実装をこれまでになく簡単にします。
ストックロッティアニメーション
新しいデザインを促進したい場合は、ストックロッティアニメーションが最適なオプションです。 既存のストックロッティアニメーションを探し、必要に応じて、ブランドに合わせてカスタマイズできます。
Lottie Filesは、無料および有料のロッティアニメーションを多数見つけることができるストックWebサイトです。 このサイトには、ダウンロードする前にアニメーションの色を編集できる編集ツールも用意されています。 アニメーションで多数の色を変更する必要がある場合は、熟練したアニメーターまたはデザイナーがAdobe After Effectsを使用して、これらの変更をより効率的に行い、アニメーションをエクスポートすることもできます。
サイトに多数のアニメーションを実装しようとしている場合、または非常に特殊なサイトの美学を持っている場合、適切なスタイルで複数のストックオプションを見つけるのは難しいかもしれません。 この場合、サイトに適合し、すでに選択したストックオプションに一致するアニメーションをさらに作成するために、アニメーターを雇うことを検討できます。
どのタイプのストックアニメーションまたはグラフィックスでも、ストックアニメーションのライセンス要件を念頭に置き、必要に応じて元のデザイナーにアニメーションを提供するようにしてください。
WordPressにロッティアニメーションを追加する
これは、WordPressWebサイトにロッティアニメーションを追加するための非常にスムーズなプロセスです。 カスタムHTMLウィジェットを使用してアニメーションコードをサイトに追加するか、WordPressプラグインを使用してアニメーションを追加することができます。
カスタムHTMLウィジェット
熟練したWordPress開発者は、小さなJavaScriptライブラリとカスタムHTMLウィジェットを使用して、サイトにロッティアニメーションを追加できます。 まず、lottie.min.jsスクリプトを、アニメーションの.jsonファイルおよび画像アセットとともにテーマフォルダーにアップロードします。 次に、ウィジェットに追加してLottieスクリプトを開始するJSの小さなスニペットがあります。これにより、.jsonアニメーションファイルが目的のコンテナーdivに読み込まれます。
この合理化されたアプローチは、追加のWordPressプラグインでサイトを圧迫することを回避するため、ほとんどのWordPressサイトに最適です。 ロッティアニメーションを追加するときに、アニメーションがループするかどうか、ループする回数、およびページ上のアニメーション要素をトリガーする可能性のあるものを制御することもできます。
開発者の支援なしにロッティアニメーションを追加するためのプラグインのほとんどは、Elementorページビルダーを必要とするため、Elementor以外のテーマまたはページビルダープラグインを使用している場合は、カスタムHTMLアプローチの方がうまく機能する傾向があります。
プラグインを使用せずにサイトに要素を追加すると、プラグインを追加するとサイトが圧迫されるため、Webサイトの速度とパフォーマンスが向上します。
WordPressプラグインオプション
開発者を使用してカスタムの方法でそれを行いたくない場合は、サイトにlottieウィジェットを追加する別のオプションは、WordPressプラグインを使用することです。
Elementor Pro –Lottieウィジェット
Elementorは、ドラッグアンドドロップ機能を備えたWordPressのページビルダーであり、ElementorProライセンスにはLottieウィジェットが含まれています。 このウィジェットを使用すると、コードなしでロッティアニメーションを追加し、アニメーションのサイズと動作をカスタマイズできます。 このプラグインは、Lottie FilesのストックWebサイトに簡単に接続できるため、サイトから直接ストックアニメーションオプションを簡単に選択したり、独自の作品をアップロードしたりできます。
グーテンベルクブロック–究極のアドオン
サイトでGutenbergエディターを使用している場合、Gutenberg用のUltimate Addonプラグインは、プラグインを使用してロッティアニメーションを追加するのに適しています。 GutenbergエディターはWordPress5.0のリリース以来WordPressコアの一部となっていますが、最も人気があるわけではありません。 多くのサイトでは、クラシックエディターや、Site Origin、Elementor、BeaverBuilderなどの他のページビルダーを使用しています。
それにもかかわらず、それは実行可能なオプションです。 グーテンベルクのアルティメットアドオンは、よくレビューされたプラグインであり、ロッティアニメーションを追加したり、アニメーションの速度やトリガーなどの高度なオプションを制御したりするオプションなど、多くの優れた機能を提供します。
追加のWordPressプラグイン
ロッティアニメーションを追加およびカスタマイズするために、WordPressディレクトリで利用可能な追加のプラグインがあります。 Elementor用のPremiumAddonsやElementor用のElementskitAddonなど、一部のプラグインでは、サイトを構築してElementorを使用する必要があることに注意してください。 DiviテーマやGutenbergブロックなど、他のWordPressテーマやビルダー向けのプラグインもあります。
アニメーションを取得する時間
Lottieアニメーションは、WordPressサイトを持っている人なら誰でも非常にアクセスしやすくなっています。 カスタマイズされたアニメーション、ストックアニメーション、ヒーローアニメーション、スクロールアニメーションのいずれが必要な場合でも、リソースはすぐに利用できます。
あなたはあなたのアニメーションをどのように見せたいか、そしてあなたが彼らに何をさせたいかについて創造的になります、そしてあなたがロッティアニメーションの可能性を探求し始めるとき、あなたはそれらがあなたのウェブサイトの品質にどれだけ追加できるかを理解し始めます。