Lottieアニメーションでもっと自由な表現を!LottieFiles連携機能をリリース
Studio
2023.11.29
Updated:2024.11.21
ノーコードでLottieFilesからアニメーションをStudioのWebサイトに埋め込めるようになりました。

Lottie連携で、表現豊かなアニメーションを用いたWebサイトがノーコードで実現可能に。クリエイティビティを加速させ、デザインの幅が大きく広がる連携機能をリリースしました。
Lottieとは
Lottieは、JSONベースのアニメーションファイル形式です。Lottieを使用することで、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。LottieFilesはLottieの作成、編集、テスト、共同制作、配信を、これ以上なく簡単に行えるようにします。( https://lottiefiles.com/jp/what-is-lottie )
オリジナルのアニメーションをWebサイトに表示
After Effects等で作成したオリジナルのアニメーションを、簡単にアニメーションをSTUDIO Webサイトに配置できます。
また、Lottieのコミュニティでは、クリエイターによる豊富なLottieアニメーションライブラリから、あなたのWebサイトにぴったりなアニメーションを探すこともできます。

Lottieアニメーションの詳細な設定もノーコードで簡単
LottieFilesから、アニメーションのアセットリンクをSTUDIOエディターで貼り付けるだけで、簡単にLottieアニメーションをWebサイトに埋め込むことができます。
設定パネルでサイト上での再生条件やを設定し、ライブプレビューで動作の確認ができます。
STUDIOの条件付きスタイルのような「出現時(Appear)」や「ホバー(Hover)」での再生設定はもちろん、カーソルの動きに合わせたアニメーションや、スクロール操作に反応して動く要素もサイトに配置でき、より表現力豊かなWebデザインに挑戦することができます。
詳しい使い方や仕様はヘルプ記事をご覧ください。
Lottie の埋め込みとカスタマイズ | STUDIO U
STUDIOでは、X(Twitter) のフォローや STUDIO Community Japan にて新機能リリースや使い方を公開しています。是非ご参加ください。