Lottieエレメント

2024/10/5 2:052024/10/10 3:14

（2024/10/05）

こちらのエレメントは、Freeプランからご利用いただけます。

エレメントに、Lottie埋め込み機能を追加しました。これにより、アニメーションを使ったノーコードのアプリ作成が可能になり、デザインの幅が大きく広がります。

また、ボタンなどのUI要素と組み合わせることで、インタラクティブなアプリを簡単に作成できます。

サンプルアプリはこちら

‣

Lottieアニメーションを使ったアプリ例

Lottieアニメーションとは

Lottieは、JSONベースのアニメーションファイル形式です。ファイルサイズが小さく、アプリの読み込み時間に影響を与えません。

軽量なファイルサイズは、特にモバイルアプリにとって重要な要素です。Lottieはベクター形式のアニメーションを使用するため、高解像度で滑らかなアニメーションを提供できます。ベクター形式は、画像を拡大縮小しても品質が低下しません。

※無料からご利用いただけます。ご利用の仕方によりましては、Lottie Filesの有料プランへご自身で登録いただく必要がある場合がございます。

LottieFilesのサイトにアクセスして、画面右上のSign upボタンを選択します。Googleアカウントなどを利用して簡単にLottieFilesアカウントを作成できます。

アカウントを作成すると「ワークスペース」がユーザーに割り当てられます。ワークスペースには、気に入ったアニメーションなどを追加することが出来ます。

ワークスペースにお気に入りの画像をアップしてください。ダウンロードとハンドオフ＞渡す＞アセットリンクを有効にする＞アセットリンク形式URL＞無料の範囲内で一番軽いドットロティを選択してください。

Asset Link（資産リンク）をコピーしてください。

エレメント内のレイアウト＞アクションから、Lottieエレメントをページに設置してください。

右側のエレメント詳細には先にURLが入っていますので、先程コピーしたAsset Link（資産リンク）を上書きしてください。

埋め込みが成功しました。