LottieアニメーションをUIに組み込んだデモを公開しました

LottieはUIの中で幅広く使われています。ローディング画面だけでなく、ボタン周りに動きを加えるなど、ちょっとした演出として取り入れることもできます。

ただ、実際にどんな見え方になるのかは、動画やGIFだけだとイメージしづらいこともあります。

そこで、LottieをUIに組み込んだときの動きを、そのまま体験できるデモを作りました。

実際の動きや表示の流れは、以下から確認できます。

▼デモを見る
https://cafe-haru-demo.vercel.app/

使用しているLottieについて

今回のデモでは、全部で13種類のアニメーションを使用しています。IconScoutやLottieFilesで購入可能です。

13種類のうち2つは無料で配布中です。実際に使ってみたい方はこちらからぜひダウンロードしてみてください。

Lottieを取り入れるとどう変わるか

最近は、AIの活用も進み、アプリやWebサービスを素早く作れるようになってきました。その分、見た目や動きの違いが印象に残りやすくなっていると感じています。 Lottieアニメーションは、そのちょっとした違いをつくるのに向いています。ローディングやボタン周りなどにオリジナルのアニメーションが入るだけで、アプリの雰囲気はぐっと変わります。 LottieはJSON形式で扱えるため、UIにも取り入れやすいのが特徴です。小さいけど目に入る場所に、こうした動きを取り入れてみるのもおすすめです。

イラストからアニメーションまでまとめて承っております。

制作のご相談・お見積りはこちらからお気軽にお問い合わせください！