LottieFiles

Become a
certified expert

with

LottieFiles for Webflow
certification

Become a
certified expert

with

LottieFiles for Webflow
certification

Background
LottieFiles
LottieFiles

+

Webflow
Webflow

Webflowウェブサイト向けの軽量でインタラクティブなアニメーション

Webflowウェブサイト向けの軽量でインタラクティブなアニメーション

ウェブサイトをカスタマイズ可能なロッティアニメーションで強化し、エンゲージメントとコンバージョンを増やしましょう。

Install on Webflow

Webflow内で世界最大のLottieアニメーションライブラリにアクセスし、すべてのWebflowサイトに簡単にモーションマジックを追加できます。

ユーザーを引き込み、より良いストーリーを伝え、成長を促進する

始めるための100,000以上の無料の使用準備ができたLottieアニメーション

Add interactive Lottie animations with a built-in State Machines into your Webflow project

Learn more

Learn more

始めるための100,000以上の無料の使用準備ができたLottieアニメーション
チームのプライベートアニメーションにアクセスし、それらを直接Webflowに挿入します
ウェブフローでのネイティブ最適化されたdotLottieサポートにより、ページの読み込み速度が向上しました
ブランドカラーに合わせてアニメーションを簡単にパーソナライズ
Webflowの相互作用機能とシームレスに連携します

Install on Webflow

トリガーベースのアニメーションでユーザーを魅了します

Page load

Parallax

Reveal

Page load

Parallax

Reveal

Lottie で作成、Webflow で製作。

これらの見事なWebflowサイトを発見してインスピレーションを受けましょう。これらはLottieアニメーションを使用して構築されました。

  • Sleep by Headspace
  • The Legend of Santar
  • F'in sweet Lottie Animations
  • Lottie Buttons
  • Let Your Brand stand out from the crowd
  • CRE-ATE
  • OSOS | Creative Studio
  • Jack Jaeschke — Motion Design Portfolio
  • Plink Webflow Rebuild
  • Sleep by Headspace
  • The Legend of Santar
  • F'in sweet Lottie Animations
  • Lottie Buttons
  • Let Your Brand stand out from the crowd
  • CRE-ATE
  • OSOS | Creative Studio
  • Jack Jaeschke — Motion Design Portfolio
  • Plink Webflow Rebuild

3つの簡単なステップで始めましょう

Step 1
アプリをインストールする

LottieFiles for Webflow アプリをインストールし、プロジェクトで認証してください。

Install on Webflow

Step 2
アニメーションを検索

「Discover」または「Workspaces」タブを使用して、Lottieアニメーションを検索します。

Step 3
アニメーションを挿入します

Webflow サイトにアニメーションを挿入します。アニメーションの色をカスタマイズしたり、相互作用を追加したりできます。

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

Get certified today

追加のリソース

LottieFiles for Webflowを始めるためのいくつかのインスピレーションを提供します。

How to Add Lottie Animations to Webflow

4 分読む

How to Add Lottie Animations to Webflow

4 分読む

10 Stunning Webflow Websites that uses Lottie Animations

6 分読む

10 Stunning Webflow Websites that uses Lottie Animations

6 分読む

10 Design Trends Revolutionized the Web Landscape

7分間の読書

10 Design Trends Revolutionized the Web Landscape

7分間の読書

7 Best Practices for Optimizing Animated Video for Search Engines

8 分読む

7 Best Practices for Optimizing Animated Video for Search Engines

8 分読む

Design teams love LottieFiles

Airbnb

"Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can."

Salih Abdul-Karim, Lead Motion Designer at Airbnb

Salih Abdul-Karim

Lead Motion Designer

Webflow

"Our customers can add Lottie animations to their site in seconds, without even thinking about code. The creative control this unlocks is huge."

Barrett Johnson, Product Marketing at Webflow

Barrett Johnson

Product Marketing

Swiggy

"LottieFiles is a one-stop destination for all your Lottie needs ever."

Saptarshi Prakash, Product Design Manager at Swiggy

Saptarshi Prakash

Product Design Manager

Design teams love LottieFiles

Airbnb

"Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can."

Salih Abdul-Karim, Lead Motion Designer at Airbnb

Salih Abdul-Karim

Lead Motion Designer

Webflow

"Our customers can add Lottie animations to their site in seconds, without even thinking about code. The creative control this unlocks is huge."

Barrett Johnson, Product Marketing at Webflow

Barrett Johnson

Product Marketing

Swiggy

"LottieFiles is a one-stop destination for all your Lottie needs ever."

Saptarshi Prakash, Product Design Manager at Swiggy

Saptarshi Prakash

Product Design Manager

FAQs

Webflow向けのLottieFilesとは何ですか？

LottieFiles for Webflow is an official Webflow app that lets you easily add lightweight, scalable Lottie animations to your website without writing code. It gives you access to over 100,000 free animations plus your private LottieFiles workspace, all directly inside Webflow. Perfect for creating engaging, high-performance visuals in JSON or dotLottie format.

Webflow向けのLottieFilesとは何ですか？

LottieFiles for Webflow is an official Webflow app that lets you easily add lightweight, scalable Lottie animations to your website without writing code. It gives you access to over 100,000 free animations plus your private LottieFiles workspace, all directly inside Webflow. Perfect for creating engaging, high-performance visuals in JSON or dotLottie format.

LottieFiles for Webflowをインストールする方法は？

LottieFiles for Webflowをインストールする方法は？

WebflowサイトにLottieアニメーションを見つけることができる場所はどこですか？

WebflowサイトにLottieアニメーションを見つけることができる場所はどこですか？

WebflowでLottieアニメーションがサポートされていますか？

WebflowでLottieアニメーションがサポートされていますか？

WebflowサイトでLottieアニメーションをカスタマイズできますか？

WebflowサイトでLottieアニメーションをカスタマイズできますか？

Webflow用のLottieFilesのLottieアニメーションは無料ですか？

Webflow用のLottieFilesのLottieアニメーションは無料ですか？

私の商用プロジェクトでWebflow用のLottieFilesを使用してもいいですか？

私の商用プロジェクトでWebflow用のLottieFilesを使用してもいいですか？

LottieFiles for Webflowには定期的に新しいアニメーションが追加されていますか？

LottieFiles for Webflowには定期的に新しいアニメーションが追加されていますか？

WebflowでLottieFilesを使用する際に利用できるLottieアニメーションの数には制限がありますか？

WebflowでLottieFilesを使用する際に利用できるLottieアニメーションの数には制限がありますか？

私はWebflowアプリを通じて私のプライベートアニメーションにアクセスできますか？

私はWebflowアプリを通じて私のプライベートアニメーションにアクセスできますか？

What are trigger-based animations in LottieFiles for Webflow?

What are trigger-based animations in LottieFiles for Webflow?

Do Lottie animations affect my site speed in Webflow?

Do Lottie animations affect my site speed in Webflow?

Webflow に動きを追加する準備はできていますか？

LottieFiles for Webflowを使用すると、Webflowサイトに簡単かつ迅速にモーションを追加できます。

Install on Webflow