Background
Background
Background

+

Webflow logo

WebflowとLottieで、コードを使わずにインタラクティブなウェブサイトを作成しましょう。

Webflow用Lottieがあれば、コードを使わずにインタラクティブなウェブサイトを作成できます。5万点を超えるLottieアニメーションをドラッグ&ドロップするだけ。コーディングの経験は不要です - LottieFiles

主な特長

Lottieをネイティブにサポート

お気に入りのデザインツールで作成した、またはLottieFilesの膨大なライブラリからダウンロードしたLottieアニメーションを直接使用できます。

Native Lottie Support
Native Lottie Support
Native Lottie Support
Native Lottie Support
Trigger-based animations

トリガーベースのアニメーション

Parallax、Progress、Revealなどアニメーションの再生とユーザーのアクションを同期させて、ユーザーに驚きと感動を提供しましょう。

コードは0行

息をのむようなブログやポートフォリオなどを、コードを1行も書くことなく構築し、モーションで充実させましょう。

Zero lines of code
Zero lines of code
Zero lines of code

なぜLottieアニメーションを使うのですか?

Faster page load speeds
Faster page load speeds
Faster page load speeds
Faster page load speeds

ページを速く読み込む

Lottieは、GIFより600%小さなファイルサイズです。つまり、ウェブサイトを低速化させることなくアニメーションを加えられるのです。

Stays sharp at any resolution
Stays sharp at any resolution
Stays sharp at any resolution
Stays sharp at any resolution

どのような解像度でも鮮明なままです。

Lottieアニメーションはピクセル化を起こさずに拡大縮小できます。どのようなサイズでも、常に鮮明なままです。

Fits your brand’s visual identity
Fits your brand’s visual identity
Fits your brand’s visual identity
Fits your brand’s visual identity

ブランドのビジュアルアイデンティティーに合わせられます。

ブランドのアイデンティティーに合わせて、Lottieアニメーションをカスタマイズしましょう。無料のLottie Editorを使えば素早く簡単にできます。

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

Step 1

Lottieアニメーションを入手する

Adobe After Effectsでアニメーションを作成し、Adobe After Effectsプラグイン用LottieFilesを使用して、Lottieとしてエクスポートします。または、LottieFilesからお気に入りのLottieアニメーションをダウンロードします。

Step 2

Webflowにアップロードします。

ドラッグ&ドロップするか、アップロードボタンをクリックして、ご希望のLottieをWebflowに挿入してください。ウェブページのデザインに最も合うように、アニメーションをグリッド上に配置することができます。

Step 3

トリガーを設定する

アニメーションを再生させるためのトリガーを設定します。クリック、スクロール、カーソルを合わせるなど、どのようなトリガーでデザインに秘められたモーションの魔法を発動させるかを選びます。マイクロインタラクションで、ユーザーの心を掴みましょう。

みなさまのためのLottieアニメーション

すぐにWebflowウェブサイトの構築を始めましょう。