WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます
※本サイトはプロモーションが含まれています

【Elementorの新機能】Lottiefiles アニメーションの使い方

【Elementorの新機能】Lottiefiles アニメーションの使い方

Elementorプラグインの有料のPro版に、Lottie(ロッティー) アニメーション機能が追加されました。

当サイトでも、メニューや記事内に使用しています。

Elementor有料のPro版で使用できます。

LottieFiles」と連携され簡単に設定が可能です。

 

 

 Lottieアニメーションについて

Lottieはbodymovinと呼ばれるAfter Effects拡張機能を使用して、作成したアニメーションを「JSONファイル」としてエクスポートされたアニメーションデータです。

Lottieは、Airbnb社が開発したアニメーション形式で、ベクターアニメーションを実現するためのJSON形式ファイルです。Lottieは、Adobe After Effectsなどのアニメーション制作ツールで作成したアニメーションを、Webサイトやモバイルアプリなどのアプリケーション上で再生することができます。

「Lottie」は、Android、iOS、Web、Windows用アニメーションライブラリで、

これまでWEBサイトにアニメーションを載せることは面倒でしたが、そのアニメーションの実装を簡単に行うことができます。

通常は、動画などのmov、mp4ファイルやGIFアニメーショに比べてもファイルサイズが格段に軽いので、今までのホームページの作り方、見せ方も大きく変わります。
小さな画像を拡大すると画像が荒くなりますが、LottieのアニメーションファイルはSVGをつかっているので解像度を気にせずアニメーション画像の拡大縮小が自由自在です。

※ SVGとは「Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)」の略で「解像度を気にせず大きさを変えられるベクター画像」です。

LottieFilesでは、世界中のクリエイターが作成したLottieアニメーションファイルを共有しており、誰でもダウンロードして利用することができます。また、LottieFiles上でアニメーションファイルを編集したり、アニメーションのライブラリを作成したりすることもできます。

 

LottieFilesは、WordPressやWebサイトやモバイルアプリのデザインにおいて、アニメーションやイラストレーションを実現するために、広く利用されています。また、UIやUXの改善にも役立ち、ユーザー体験を向上させることができます。

Lottie(ロッティー)アニメーションの見本

ElementorプラグインでのLottieの使い方

Elementorプラグインの有料のPro版のみLottie(ロッティー)アニメーション機能を使うことができます。

「Lottie」で検索をします。

ちなみに、このキャプチャーで2つ「Lottie」項目が表示されているのは、Elementorプラグイン本体のウィジェットと、Elementorプラグインのアドオンでの項目ですので、皆さんの画面には表示されている方と表示されていない方もいます。

 

こちらがサンプルの「Lottieファイル」です。

「Lottie」編集画面

lottiefiles.comにアクセスします

https://lottiefiles.com/ にアクセスします。

こちらに無料アカウント登録をして、「Lottieファイル」を探します。

「Lottieファイル」は、無料と有料がありますので、今回は無料のものを利用します。

Christmasで検索しました。

「Lottieファイル」は、無料と有料がありますので、「Free」でソート検索をします。

「Lottieファイル」の詳細画面です。

このページの下の方にある「Elementorプラグイン」のマークをクリックします。

 

「Lottieファイル」のダウンロード画面です。

 

 

ダウンロードボタンをクリックします。

 

 

 


このページの下にもLottie(ロッティー)アニメーションのElementorでの手順が記載されています。

 

 

「Lottieファイル」の拡張子は、「.json」です。

 
補足:(JSON)ジェイソンファイルについて

 

JavaScript Object Notation(JSON)は、ジェイソンと読みます。
JSONは、JavaScriptのオブジェクト記法を用いたデータ交換フォーマットでファイルが軽量で、コーディングも少なくて済み、処理が高速なため様々な部分で利用されています。

アップロードボタンをクリックしてJSONファイルをアップロードします。

 

 

 

「設定」をクリックします。

 

 

こちらが「Lottie」の設定画面です。

 

 

「Lottie」の設定画面で、動きのスピードを変更できます

 

 

今回使用した「Lottie」ファイルはクリスマスのオーナメントがただ動いているだけのシンプルなものなのでこの設定は使いませんが、もっと複雑な動きのアニメーションの場合は、開始と終わりの位置を指定することができます。

 

 

アニメーションをループで再生する場合は、「Loop」の「はい」にチェックを入れます。

 

 

「Lottie」の設定画面の、「スタイル」の幅を変更して、大きさを変更します。

 

 

透明度を変更することもできます。

 

 

 

ホバーという項目がElementorプラグインではほぼすべてのウィジェット(パーツ)についています。

ホバーは、マウスのカーソルをのせた際に、色を変えたり、動いたり等の変更をする項目ですので、必須の項目ではありませんが、少しおしゃれに、凝ったデザインにすることができます。
(※ホバーは、スマホやタブレットではホバーの状態がないため(指を乗せたらタップすることになるため)使わず、パソコンのみの設定です。)

Elementorプラグインに慣れてきたら、ホバーも活用していきましょう!

 

トリガー設定

トリガーを設定することができます。

トリガーとは、どういうきっかけでLottie(ロッティー)アニメーションを動かすのかの設定です。

 

Trigger設定の「vewpoint」について

vewpointは、普通に表示された場合です。ただ「Lottieアニメーション」ファイルを表示させる場合にはこちらを選択します。

 

Trigger設定の「on Click」について

on Clickは、「Lottieアニメーション」ファイルをクリックした場合にアニメーションの再生がスタートされます。

 

Trigger設定の「on Hover」について

on Hoverは、「Lottieアニメーション」ファイルの上にマウスカーソルが乗った場合にアニメーションの再生がスタートされます。

 

Trigger設定の「Scroll」について

Scrollは、ページをスクロールした際に、「Lottieアニメーション」ファイルの再生がスタートされます。

 

これらを活用していくと、面白い動きを作ることができますね。

Lottie(ロッティー)アニメーション機能を紹介しました。

 

 集客&新規ビジネスに!はっちゃんの新サービス

WordPressで会員動画サイトが作れる!

\動画コンテンツで新しい収益を!/

オンライン講座機能付き
WordPressテンプレート新発売

本を出すだけで終わらない、新しい出版サービス

・ 専用のウェブサイト
・ 大手サイトへのプレス配信
・国会図書館への寄贈
・多言語で海外での出版 
ほか

多言語化によるお悩みを解決します

\導入費用のみ!月額費用は不要/

管理画面からカンタン更新!
AI翻訳+人力翻訳の使い分けも可能

Elementorテンプレート販売中!

\Elementor無料版対応/

サイトがまるごとインストールできる
Webサイトテンプレート
LPも追加しました!

 開催中のWordPress講座・セミナー

 WordPress・サイト運営のお悩みを解決します

女性講師によるマンツーマンレッスン開催中!
・オンラインレッスンだから全国どこでも参加可能
・2011年から150回を超える研修実績あり
・受講後も安心!メールサポート付き
・受講中の録画動画をお渡しします

 はっちゃんセミナー公式SNS

 はっちゃんYouTubeチャンネル

無料セミナー・お役立ち情報を配信中!

公式メールマガジンもあります!

新着情報

  新サービス開始しました

ノーコードでWordPressサイトが作れる!
WordPressテンプレート新発売!→詳しくはこちら

WordPressで会員動画サイトが作れる!
オンライン講座機能付きWordPressテンプレート新発売!→詳しくはこちら

多言語化によるお悩みを解決します!
管理画面からカンタン更新!AI翻訳+人力翻訳の使い分けも可能→詳しくはこちら

  ピックアップ講座

最新のAIコンテンツ生成とSEO対策がしっかり学べるコンテンツマーケティング講座(オンライン開催)

 

WordPressに限らず、Canvaの画像編集やサイト運営に関係する内容と、受講生さんからのご質問等で共通な内容も掲載していきます。

  ピックアップ記事

 カテゴリー
公式Facebook
公式LINEアカウント

友だち追加

こちらのURLからお友だち登録できます。
https://lin.ee/CbqqEEI

公式メールマガジン

こちらのURLからメルマガに登録できます。https://www.8seminar.com/mailmagazine-form

PAGE TOP