WordPress で Lottie アニメーションを使用する方法

アニメーションを WordPress Web サイトに組み込むことは、疲れた Web ページを活気づけ、サイト滞在中ずっと訪問者の関心を維持するのに最適な方法です。これを簡単かつ効率的に行う方法は、高品質で軽量なアニメーションである Lottie アニメーションを使用することです。

Lottie アニメーションはさまざまな理由から人気が高まっており、時流に乗って Web サイトをリニューアルする準備ができている場合は、まさにぴったりかもしれません。

これらのアニメーションを作成し、WordPress サイトにスムーズに追加するには、いくつかの方法があります。

ロッティアニメーションとは何ですか？

Lottie は Android、iOS、Web、および Windows 用のライブラリで、After Effects アニメーションをレンダリングし、アニメーションデータを一般的な画像ファイルタイプではなく JSON ファイルとしてエクスポートできるようにします。つまり、静的な資産を楽しくて魅力的なものに簡単に置き換えることができます。

このオープンソースソリューションは、AirBnB のチームによって最初に導入されましたが、さまざまな市場のデザイナーやアニメーターの間で急速に人気が高まっています。 WordPress Web サイトで Lottie アニメーションを使用する大きな利点の 1 つは、GIF アニメーションや mp4 ファイルと比較してファイルサイズが非常に小さいことです。さらに、柔軟なアニメーション形式により、ブラウザでレンダリングを処理できます。

Lottie アニメーションを使用できるさまざまな可能性が、Lotty アニメーションが人気がある理由の 1 つです。 Lottie アニメーションは、アニメーション化されたヘッダー、ボタン、目を引くグラフィック要素などとして使用できます。訪問者が Web ページをスクロール、ホバー、またはクリックしたときにトリガーされるアニメーションを設定することもできます。 B2C と B2B の両方の Web サイトにその汎用性と実装が容易なため、Web デザインの品質と全体的な外観を向上させる革新的な方法になります。

ロッティアニメーションの作成

サイトにくじアニメーションを追加するかどうかを検討するときは、まずストックアプローチを行うかカスタムアプローチを行うかを決める必要があります。それぞれに長所と短所があるため、決定する前に両方のオプションを検討することが賢明です。

どのようなタイプのアニメーションでも、常に少ない方が良いのです。 Web サイトの再設計にアニメーション要素を組み込む場合は、そのアニメーションがカスタマージャーニーの中でどのような役割を果たしているかを考慮してください。

カスタムロッティアニメーション

Web サイト用のカスタムロッティアニメーションを探している場合は、Adobe After Effects を専門とし、このタイプのアニメーションに精通しているアニメーターまたはデザイナーと協力する必要があります。

Lottie アニメーションの多くはイラストスタイルを使用しているため、作業を進める前に、これが Web サイトのブランディングやスタイルに適合するかどうかを判断する必要があります。グラフィック要素とアニメーション効果を決定したら、アニメーターは Adobe After Effects でカスタムアニメーションを作成し、After Effects 拡張機能を使用してロットアニメーションとしてエクスポートする必要があります。これにより、サイトに簡単に実装できる高品質のアニメーションがレンダリングされます。

Lottie アニメーションが高品質である理由の 1 つは、作成プロセスにおいて、開発者やエンジニアがデザイナーのアニメーションを Web 形式で再作成する必要がないことです。アニメーションの実装をこれまでより簡単にする、すぐに使えるソリューションを提供します。

ストックロッティアニメーション

新しいデザインを迅速に作成したい場合は、ストックロッティアニメーションが最適なオプションです。既存のストックのロティアニメーションを探し、必要に応じてブランドに合わせてカスタマイズできます。

Lottie Files は、無料および有料のロッティアニメーションを多数見つけることができるストックウェブサイトです。このサイトでは、ダウンロードする前にアニメーションの色を編集できる編集ツールも提供しています。アニメーションで多数の色を変更する必要がある場合、熟練したアニメーターやデザイナーは Adobe After Effects を使用して、より効率的に変更を加え、アニメーションをエクスポートすることもできます。

サイトに多数のアニメーションを実装しようとしている場合、または非常に特殊なサイトの美学を持っている場合、適切なスタイルで複数のストックオプションを見つけるのは難しい場合があります。この場合、サイトに適合し、すでに選択したストックオプションに一致するアニメーションをさらに作成するためにアニメーターを雇うことを検討できます。

どのようなタイプのストックアニメーションやグラフィックでも、ストックアニメーションのライセンス要件に留意し、必要に応じてアニメーションを元のデザイナーに提供するようにしてください。

WordPress に Lottie アニメーションを追加する

Lottie アニメーションを WordPress Web サイトに追加するのは、非常にスムーズなプロセスです。カスタム HTML ウィジェットを利用してアニメーションコードをサイトに追加することも、WordPress プラグインを利用してアニメーションを追加することもできます。

カスタムHTMLウィジェット

熟練した WordPress 開発者は、小さな JavaScript ライブラリとカスタム HTML ウィジェットを使用して、ロッティアニメーションをサイトに追加できます。まず、lottie.min.js スクリプトをアニメーション .json ファイルおよび画像アセットとともにテーマフォルダーにアップロードします。次に、Lottie スクリプトを開始するためにウィジェットに追加する JS の小さなスニペットがあり、.json アニメーションファイルを目的のコンテナ div にロードします。

この合理化されたアプローチは、追加の WordPress プラグインによるサイトの負担を回避できるため、ほとんどの WordPress サイトに最適です。 Lottie アニメーションを追加するときに、アニメーションをループするかどうか、ループする回数、ページ上のアニメーション要素をトリガーするものを制御することもできます。

開発者の支援なしでロッティアニメーションを追加するプラグインのほとんどは、Elementor ページビルダーを必要とするため、Elementor 以外のテーマまたはページビルダープラグインを使用している場合は、カスタム HTML アプローチがより適切に機能する傾向があります。

プラグインを追加するとサイトに負担がかかるため、プラグインを使用せずに要素をサイトに追加すると、Web サイトの速度とパフォーマンスの面でも優れています。

WordPress プラグインのオプション

カスタムの方法で開発者を使用したくない場合は、サイトに Lottie ウィジェットを追加するもう 1 つのオプションは、WordPress プラグインを使用することです。

Elementor Pro – Lottie ウィジェット

Elementor は、ドラッグアンドドロップ機能を備えた WordPress 用のページビルダーであり、Elementor Pro ライセンスには Lottie ウィジェットが含まれています。このウィジェットを使用すると、コードなしで Lottie アニメーションを追加し、アニメーションの寸法と動作をカスタマイズできます。このプラグインは Lottie Files ストック Web サイトに簡単に接続できるため、サイトからストックアニメーションオプションを直接選択したり、独自の作品をアップロードしたりすることが簡単にできます。

Gutenberg ブロック – 究極のアドオン

サイトで Gutenberg エディターを使用している場合、プラグインを利用してロッティアニメーションを追加するには、Gutenberg 用の Ultimate Addon プラグインが適しています。 Gutenberg エディターは WordPress 5.0 リリース以来 WordPress コアの一部となっていますが、最も人気があるわけではありません。多くのサイトでは、従来のエディターや、Site Origin、Elementor、Beaver Builder などの他のページビルダーを依然として使用しています。

それでも、それは実行可能な選択肢です。 Ultimate Addons for Gutenberg はよくレビューされているプラグインで、ロッティアニメーションを追加したり、アニメーション速度やトリガーなどの高度なオプションを制御したりするオプションなど、多くの優れた機能を提供します。

追加のWordPressプラグイン

WordPress ディレクトリには、lottie アニメーションを追加およびカスタマイズするための追加のプラグインが用意されています。一部のプラグインでは、Elementor のプレミアムアドオンや Elementor の Elementskit アドオンなど、サイトが構築され、Elementor を使用している必要があることに注意してください。 Divi テーマや Gutenberg ブロックなど、他の WordPress テーマやビルダー向けのプラグインもあります。

アニメーションを始める時間です

Lottie アニメーションは、WordPress サイトを使用している人なら誰でも非常に簡単にアクセスできます。カスタマイズしたアニメーション、ストックアニメーション、ヒーローアニメーション、スクロールアニメーションなど、リソースはすぐに利用できます。

アニメーションをどのように見せたいか、アニメーションに何をさせたいかについて創造性を発揮できるようになり、ロッティアニメーションの可能性を探求し始めると、ロッティアニメーションが Web サイトの品質にどれほど貢献できるかがわかり始めるでしょう。。