WordPressウェブサイトにアニメーションを作成する方法

ウェブサイトのアニメーションは読み込み時間が遅く、再生が途切れ途切れになることを意味し、見栄えの悪い圧縮されたGIFか、訪問者を慌てさせるほどの巨大なビデオファイルのどちらかを選択することを余儀なくされました。 Lottieはその状況を一変させました。これらの小さなJSONベースのモーショングラフィックスは、画質を損なうことなくあらゆる画面サイズに拡大縮小でき、GIFよりもスムーズに再生されます。唯一の問題は、WordPressがまだ追いついていないため、追加にいくつかの追加手順が必要になることです。 WordPressサイトでLottieファイルを動作させる方法を詳しく説明し、Divi 5が提供するショートカットについて説明します。

Lottieファイルとは何ですか?

Lottieファイルは、モーショングラフィックスをピクセルではなくコードとして保存するJSONベースのアニメーションです。Airbnbのエンジニアによって2017年に導入され、Webアニメーションの最大の課題であるファイルサイズを解決しました。動画だと5MBになる複雑なアニメーションも、Lottieだとわずか50KBになります。 After Effectsで作成し、BodymovinまたはLottieFilesプラグインを使ってエクスポートできます。プラグインはレイヤーとキーフレームをテキストベースの指示に変換します。ブラウザがこのJSONファイルを読み込むと、計算結果を読み取り、リアルタイムでアニメーションを描画します。 ピクセルではなくベクトル計算なので、同じファイルを携帯電話の画面から4Kディスプレイに、品質を損なうことなく完璧に拡大縮小できます。 ロッティファイルの仕組み Lottieファイルは、レイヤー、シェイプ、キーフレームを記述するJSONドキュメントです。Lottie JSONファイルは、アニメーションのレシピのようなものです。先頭には、フレームレート、継続時間、幅、高さといった基本情報が記述されています。その下にはレイヤーの配列が配置されています。各レイヤーには、位置、回転、スケール、不透明度が設定されており、キーフレームによって、いつ、どのように変更するかが指示されます。 Lottieファイルは、画像ではなく数学的に動きを記述します。プレーヤーは中間フレームをリアルタイムで計算するため、デバイスのフレームレートに関係なく、動きは滑らかに保たれます。シェイプレイヤーには、パス、塗り、ストローク、トランスフォームのグループを含めることができます。色（RGBA配列）、ストローク幅、不透明度などの属性は数値として保存されます。 ロッティーはいつもGIFに勝つ GIFのような従来のフォーマットは、すべてのフレームのすべてのピクセルを保存します。30fpsで30秒間のアニメーションには、数千ピクセルの画像が900枚含まれます。GIFは256色パレットでフレームごとにラスター画像を保存するため、すぐにサイズが大きくなってしまいます。 シンプルなバウンスアニメーションでも3MBになることがあります。GIFは256色しかサポートしていないため、グラデーションが縞模様に見えます。透明度は完全に透明か完全に不透明かのどちらかなので、エッジが粗く見えます。 Lottieはベクターを使用しています。ブラウザは値を読み取り、そこから各フレームを描画します。動く円は500枚の画像ではなく、座標が変化する1つの円です。これによりファイルサイズが小さくなり、無限のスケーリングが可能になります。ファイルは読みやすく、編集も簡単です。 ベクター画像なら、どんなサイズでも高画質を維持できます。GIF画像を拡大するとラスター画像なのでブロック状になりますが、Lottie画像を拡大するとベクター画像なのでエッジがシャープに保たれます。モバイルで同じ小さなファイルを4K画面でそのまま表示できます。最小限のテキストデータ以外に圧縮する必要がないため、ファイル圧縮はそれほど重要ではなくなります。 Lottieは、プレーヤーを介してフルカラーグラデーションとアルファ透明度を持つベクターシェイプをレンダリングします。微妙な影は、0%から100%の不透明度まで滑らかにフェードしながらレンダリングされます。 グラデーションは色の帯にならず、滑らかなままです。ソフトなグロー効果から複雑な色の変化まで、あらゆるシェードと色調がAfter Effectsでデザインされた通りに書き出されます。

WordPressサイトにLottieファイルが必要な理由

WordPressサイトは既に問題なく機能していますが、訪問者はテキストや画像以上のものを期待しています。コンテンツ内を案内する視覚的なヒントや、ブラウジングの応答性を高める細かな工夫も求められています。Lottieファイルは、技術的な負担をかけずにこれらを実現します。 Lottieファイルはカスタマイズが可能で、サービスカードにホバー効果を加えたり、ボタンの代わりにクリック可能なアニメーションアイコンを作成したり、お客様の声にアニメーションを追加したりできます。これにより、訪問者のエンゲージメントを維持するマイクロインタラクションが生まれます。こうした小さな瞬間が積み重なって、丁寧に作られたサイトへと昇華されます。 予算も重要です。プロのアニメーション制作は、通常、1つのカスタム作品につき200～500ドルかかります。Lottieのライブラリでは、数千種類のカスタマイズ可能なオプションを無料で、あるいはその数分の1の費用で提供しています。通常は代理店の予算が必要となるような、放送品質のモーショングラフィックスを実現できます。 ロッティファイルの入手先 ちなみに、Adobe After Effectsを使って独自のLottieファイルを作成することもできますが、市販の既成のオプションを使う方がはるかに現実的です。なぜなら、便利で、さらに重要なのは、それほど技術的なスキルを必要としないからです。Lottieファイルの入手先として、一般的に利用できるオプションをいくつかご紹介します。 ロッティファイルズ オリジナルのLottieマーケットプレイスには、数千人のデザイナーによる80万点以上の無料アニメーションが揃っています。ダウンロードにはアカウントが必要ですが、ライブラリには読み込みスピナーから複雑なキャラクターアニメーションまで、あらゆるものが揃っています。内蔵エディタを使えば、ダウンロード前に色や速度を調整できます。 また、ブラウザ上でモーションを作成できるLottie Creatorも提供しています。AI Motion Copilotはテキスト記述からキーフレームを生成します。After Effectsの知識がなくても、SVGをインポートしてモーションを追加できます。 アイコンスカウト 70万以上のLottieファイルを擁するIconScoutは、無料コンテンツと有料コンテンツの橋渡し役として機能します。このプラットフォームは、FigmaとWordPressに直接プラグインできる点が優れています。2,167種類のアニメーションがクレジット表記なしで無料で利用できます。また、複数のフォーマット間での一括処理が可能なコンバーターツールを備えているため、複数のクライアントプロジェクトを管理する代理店にとって実用的です。 クリティー Creattieは量よりも一貫性を重視しています。各アニメーションは厳格な品質基準を満たし、コレクションはすべて同じビジュアルスタイルを共有しています。無料プランでは、クレジットカード情報の入力なしで数百種類のデザインを利用できます。彼らの強みは、業界特化型のパックです。 ローディコン Lordiconは、アニメーションアイコンに特化したプラットフォームで、様々なスタイルで37,200種類のオプションを提供しています。チェックボックス、トグル、ナビゲーション矢印、ソーシャルメディアアイコンといったUI要素の作成に特化しており、無料ユーザーは1,490種類のアイコンにアクセスできます。エディターは、基本的な色の変更とストロークの調整をサポートしています。

WordPressにLottieを追加する方法

サイトにLottieアニメーションが必要な理由がわかったので、WordPressウェブサイトにLottieアニメーションを追加する方法を見ていきましょう。WordPressはLottieファイルをネイティブでサポートしていないため、いくつかの方法があります。 HTMLコードの使用 HTMLを使用してLottieファイルを追加するとオーバーヘッドは最小限に抑えられますが、より多くの技術的スキルが必要になります。 手順はプロバイダーによって多少異なりますが、ほぼ同じです。LottieFilesの場合：アニメーションを選択し、ライブラリに保存し、「埋め込み」に移動して、「埋め込みHTML」タブからコードをコピーします。 WordPressでは、GutenbergでカスタムHTMLブロックを追加し、コードを貼り付けます。コード属性でサイズ、速度、ループを変更できます。 この方法は、カスタムHTMLを受け入れる任意のページビルダーで機能します。 Lottieプラグインの使用 Lottieプラグインは、ブロックまたはモジュールを介してWordPressにLottieの機能を追加します。公式のLottieFilesプラグインもあります。 他にもAM LottiePlayerやLottie Player などがあります。 一部のGutenbergアドオンプラグインにはLottieブロックが含まれています。Spectra （旧Ultimate Addons for Gutenberg）には、30以上のブロックの中にLottieアニメーションブロックが含まれています。Otter Blocksは、20以上のブロックライブラリにLottieを含んでいます。これらは標準のWordPressエディターで動作します。 プラグインはどれも手順が似ています。プラグインをインストールし、ブロック挿入ツールで「Lottie」を検索します。オプションによっては、検索、ファイルのアップロード、URLの貼り付けのみ、あるいはすべてを実行できるものもあります。 ほとんどのプラグインは、背景、サイズ、トリガー、色などの基本的なコントロールを提供します。 これらの方法が不十分な理由 ただし、どちらの方法にもいくつかの欠点があります。 HTML方式の欠点 Gutenbergではエディタにアニメーションが表示されないため、ページをプレビューし、設定を微調整し、見た目が適切になるまで何度も繰り返す必要があります。さらに、アニメーションはサイト内の別々のHTMLブロックに配置されているため、管理が煩雑になり、更新するたびに適切なブロックを探す必要が生じます。 さらに、外部サービスに依存しているため、ダウンタイムが発生すると、すべてのサービスが一度に機能しなくなる可能性があります。その結果、背景色などの小さな変更でさえ、生のHTMLを編集する必要があり、技術に詳しくないチームメンバーによるエラーのリスクが高まります。 多くのアニメーションは、適切に最適化されていない場合、Lottieスクリプトを複数回読み込み、ページサイズを増加させます。さらに、モバイルでは追加のCSSなしではサイズやアニメーションなどを調整できません。 Lottieプラグインの使用も理想的ではない理由 プラグイン方式はHTMLブロックよりも使いやすいですが、追加の問題が発生する可能性があります。 ほとんどのプラグインは、優れた機能を有料で提供しています。これは、Lottieのプレミアムファイルを使用する場合に既に支払っている料金に加えて発生する追加料金です。また、プラグインは不要なコードを追加することでWordPressの速度を低下させます。アニメーションが存在しない場合でも、すべてのページで余分なファイルを読み込みます。 LottieFilesプラグインには、重大なエラーや管理パフォーマンスの問題を指摘する最近のレビューが多数あります。まずはステージングで慎重に評価してください。 このプラグインは、WordPress管理画面に大量のCSSコードを読み込み、外部サーバーからファイルを取得します。インストール後にウェブサイト全体がクラッシュしたという報告が多数あります。 さらに重要なのは、どのプラグインを選んでも、Gutenbergではアニメーショングラフィックの使用が難しくなることです。簡単な変更でも遅くなり、煩わしくなり、操作全体がぎこちなく、途切れ途切れに感じられるかもしれません。 そのため、専用のページビルダーにLottieモジュールを組み込む方がはるかに優れた選択肢です。ページビルダーはLottieファイルを他のデザイン要素と同様に扱います。ファイルをページビルダーにドロップし、画面上で設定を調整するだけで、次の作業に移ることができます。アニメーションコントロールは、タイポグラフィやレイアウトオプションのすぐ隣に配置されています。 サイトを壊したり、異なるインターフェース間を行き来したりするプラグインを別途購入するのではなく、ページビルダーのみの料金でご利用いただけます。Divi5は、ビジュアルビルダー内にLottieをファーストクラスモジュールとして統合しているため、アニメーションコントロールはレイアウトやタイポグラフィと連動して機能します。

Divi 5でLottieファイル（とWordPressデザイン）がシンプルに

Diviは、テーマとしてではなく、完全なデザインシステムとして、数百万ものWordPressサイトで動作しています。コードを触ることなくプロフェッショナルなウェブサイトを作成したい方のために開発されました。 編集中は、訪問者が見ているのと全く同じページが表示されます。テキストを選択したり、色を入れ替えたり、セクション全体を並べ替えたりするだけで、変更がすぐに反映されます。編集画面とプレビューモードを行き来する必要はありません。 このプラットフォームには、すぐに使える200以上のコンテンツモジュールが搭載されています。基本的なテキストブロックや画像ギャラリーに加え、高度な価格表、お客様の声、お問い合わせフォームなども含まれています。 Divi 5はWordPressの未来のために作られました 2年半の開発期間を経て、Divi 5アルファ版が完全に新しいコードでリリースされました。元のフレームワークでは、私たちが次に構築したいものをサポートできなかったため、すべてのモジュールとインタラクションが書き直されました。 この新しい基盤は、最新のWordPress機能と直接連携します。その効果は至る所で実感できます。レスポンシブデザイン、より高速に連携するレイアウト、そして旧アーキテクチャでは対応できなかったスタイルオプションなどです。私たちは既存のものをパッチで修正するのではなく、より本質的なものをゼロから構築しました。 Divi 5では多くの変更がありました LottieモジュールはJSONアニメーションファイルを読み込み、再生速度、トリガー、色調整をコーディングなしでコントロールできます。その他の新機能としては、あらゆるコンテンツタイプからスライダーを作成できるグループカルーセルと、カスタム箇条書きデザインを作成できるアイコンリストがあります。 デザイン変数を使用すると、色、フォント、間隔の値を一度定義するだけで、変更した内容がウェブサイト全体に自動的に反映されます。 HSLカラーコントロールは色の関係を数学的に計算するため、基本色を変更するとパレット全体が比例してシフトします。 レスポンシブエディターでは、さまざまな画面サイズ、ホバー状態、固定位置でのアニメーションと設定の動作が表示されます。 Flexboxは古いレイアウトシステムに取って代わり、必要に応じて任意のレベルの深さで行を他の行内にネストできるようになりました。 組み込みのインタラクションにより、追加のプラグインを必要とせずに、ポップアップ、マウスホバー効果、スクロールベースのアニメーション、トグルスイッチが処理されます。 視覚的なコントロールを使用すると、コードを記述せずに、clamp()、calc()、REM、ビューポート幅などの高度なCSS単位を使用できます。 新しいコードベースでは、WordPressのブロック形式のショートコードが廃止され、特定のページで使用されるモジュールのみが読み込まれます。 インターフェースには、どこにでもドッキングできるパネル、タブ付き設定構成、パンくずナビゲーション、キーボードショートカット、ダークモードオプションが含まれます。 オプショングループプリセットを使用すると、タイポグラフィ、境界線、影、背景の組み合わせを保存し、複数の要素に適用できます。 ループビルダーには、カスタム投稿タイプ、ACFフィールド、WooCommerce製品、リピーターフィールドからの動的コンテンツが表示されます。

3ステップでLottieをDiviに追加

Divi 5にLottieアニメーションを追加するには、たった3つのステップで完了です。コードスニペットを貼り付ける必要も、プラグインの互換性問題をデバッグする必要も、外部スクリプトを読み込む必要もありません。Visual Builderがすべてを内部で処理し、アニメーションをページにドロップする他のモジュールと同じように扱います。操作方法、ワークフロー、プレビューはすべて同じです。設定方法を以下に詳しく説明します。 1. JSONアップロードを有効にしてLottie JSONを追加する まず、JSONファイルを入手します。LottieFiles、IconScout、または前述のいずれかのソースにアクセスして、好きなアニメーションを見つけます。ダウンロードをクリックし、Lottie Web PlayerではなくJSON形式を選択します。 ほとんどのサイトでは、ダウンロード前に色とサイズを選択できます。Divi内で色を変更することはできないので、ダウンロード前に色とサイズを選択してください。 WordPressはJSONファイルをセキュリティリスクと見なし、デフォルトでブロックします。File Upload Typesなどのプラグインを使えば、2分で修正できます。ただし、JSONファイルは信頼できるサイトから取得するようにしてください。 これでLottieファイルを追加できます。DiviのVisual Builderで任意のページを開きます。動きを追加したい場所のグレーのプラスアイコンをクリックします。リストからLottieモジュールを見つけて、ページに追加します。 次に、Lottieアニメーションタブで、アップロードをクリックして、画像と同じようにJSONファイルをアップロードします。以前にアップロードしたファイルを選択することもできます。ファイルはドキュメントアイコンで表示されます。それを選択します。 これで、LottieファイルがDivi 5ページに追加されました。 2. アニメーションとスタイルを調整する アニメーションが読み込まれると、設定パネルにコントロールオプションが表示されます。トリガーアニメーションは、動きがいつ始まるかを決定します。On Loadはすぐに再生します。Viewは、セクションがビューポートに入るまで待機します。Hoverはマウスの動きに反応します。Clickはタップでアクティブ化されます。 Scroll to Animateは、アニメーションフレームをスクロール位置に結び付けるため、ユーザーはスクロールして再生を制御できます。最後のオプションは最も魅力的な効果を生み出します：下にスクロールするとアニメーションが前進し、上にスクロールすると逆再生されます。 ループアニメーショントグルは、アニメーションを永久に実行し続けます。一度だけ再生して停止するエントランスアニメーションの場合は、オフにします。 アニメーション速度は、通常の再生ではデフォルトで1です。半分の速度にするには0.5に設定し、2倍の速度にするには2に設定します。方向は前進または後退で実行します。再生モードは、NormalまたはBounceを提供します。Bounceは前進してから、開始位置に逆再生します。 デザインタブは、Divi 5の真の力を発揮します。基本的なスライダーの代わりに、高度な単位フィールドが提供されます。100vwと入力すると、アニメーションがパディングを除いて画面全体を埋めます。 clamp(25px, 3vw, 50px)を使用すると、モバイルとデスクトップの間でスムーズにスケールします。これらのCSS関数は入力フィールドで直接機能するため、カスタムコードは必要ありません。作成したNumber Design Variablesを引き込むこともできます。これにより、Lottieファイルが必要に応じて一貫した値を使用できます。 さらに、システムに接続されたままなので、Lottieサイズのデザイン変数を更新すると、このNumber変数を参照するすべてのLottieファイルが自動的に更新されます。 異なる画面サイズの設定を調整する 大きなアニメーションはデスクトップで機能しますが、モバイルユーザーを圧倒する可能性があります。DiviのVisual Builderで、レスポンシブエディターを使用してモバイルビューを開き、アニメーションサイズを最適な見た目に調整します。 clamp()や同様の単位を使用して、ブレークポイントごとの調整の必要性を減らすこともできます。 大きな画面での詳細なアニメーションは、小さな画面では複雑に見えます。動きを簡素化するか、モバイルで1から0.5に速度を遅くします。ホバー効果はタッチスクリーンでは機能しないため、これらのトリガーを「View」に変更して、セクションがスクロールして表示されたときにアニメーションが開始されるようにします。 Divi 5では、3つだけでなく、最大7つのレスポンシブブレークポイントを使用できます。ブレークポイント間を切り替えて、アニメーションをテストし、すばやく調整できます。 3. ウェブサイト全体で再利用するためのプリセットを作成する Lottieアニメーションを希望どおりに設定したら、サイト全体で再利用するためにこれらの設定を保存します。Divi 5はこれを2つのプリセットタイプに分割します。 オプショングループプリセットを使用すると、特定のスタイルグループを保存できます。例えば、サイズの値を保存したり、レイアウトに適した設定を保存したりできます。設定グループの横にあるプリセットアイコンから保存できます。 「Lottie Size」など、分かりやすい名前を付けてください。これらのプリセットはどのモジュールタイプでも使えます。Lottieアニメーション用に作成した間隔は、画像、テキストブロック、ボタンなど、あらゆるものに適用されます。これらの設定が再度必要な場合は、任意のモジュールでプリセットアイコンをクリックして、保存したプリセットを選択してください。 要素プリセットは設定全体を保存します。トリガー設定、アニメーション速度、ループステータス、サイズを含むすべてのデザインプロパティがパッケージ化されます。 設定パネルの左上にあるプリセットアイコンをクリックすると、Lottieモジュール全体を要素プリセットとして保存できます。ワンクリックで、そのアニメーションをサイトのどこにでも配置できます。 プリセットを更新する際、プリセット内のアニメーション速度を1から0.5に変更すると、サイト全体でそのアニメーションのすべてのインスタンスが自動的に遅くなります。一度編集するだけで、そのプリセットが表示されるすべての場所に変更が反映されます。

Divi 5でLottieアニメーションを今すぐ試してみましょう

Lottieファイルの追加に、プラグインの賭けやHTMLの格闘は必要ありません。Divi ５ビジュアルビルダーにはLottieサポートが含まれており、デザイン変数と並んで統一感のある色彩、機能的なFlexboxレイアウト、ホバー効果のための組み込みインタラクションを備えています。 JSONファイルは、画像を追加するのと同じ方法でアップロードできます。レスポンシブエディターでは、デスクトップで編集しながら、スマートフォンでアニメーションがどのように表示されるかを確認できます。 すべてが5つの異なるプラグインではなく1つのシステムを介して接続されると、サイトは高速のままになり、健全な状態が維持されます。