さくっと実装するアニメーション表現いろいろ

この記事はDigital Identity Creative Div. Advent Calendar 2021の6日目の記事です。

こんにちは！デザイナーの滝口です。
デザインツールAdobe XDが少し前にアップデートし、動画の埋め込みができるようになったことが大きな話題になりました。
サイト制作時もトップページやメッセージを伝えたい箇所に動画を使った提案をすることが増えてきましたが、
手軽にさくっと動画を組み込みたい！というときに便利なツールをご紹介したいと思います。

Lottie

https://lottiefiles.com/featured

Lottie（ロッティ）はAirbnbが開発したアニメーションライブラリです。Webサイトはもちろん、iOSやAndroidのアプリなどでも気軽に使用でき、XDやAfterEffextsと連携して作成することができ、サイトに簡単に埋め込むことができます。
自分で動画を作成しなくても無料で使えるアニメーションがざくざくあり、コードもたいして書かずに埋め込みできる、というデザイナーには嬉しいサービス。最近Lottie使っているサイト多い印象です。いくつからいくつかピックアップしてみました。

クリスマス特集・プレゼントやキャンペーンに

ビジネス向けLPのMVに良さそう

satisfied-bear

storyset

https://storyset.com/

freepikが提供するフリーのストックイラストサイト。
このサイト、なんとサイト上でテーマカラーを変更したり、背景の表示・非表示を切り替えたりしてダウンロードできてものすごく便利です！サイト上でアニメーションを設定してGIFやMP4データ、SVGアニメーションとして出力することができちゃいます。
ただし、著作権表記が必要なのが難点ですが、ライセンス表記OKでちょっとした遊び心を加えたいときによさそうです。

リロードしてみてください！

SVG ARISTA

https://svgartista.net/

SVG ARISTAは、illustratorやXDなどで作成したベクターデータをアップロードするだけで、SVGアニメーションが簡単に作成できるWサービスです。フェードインのSVGアニメーションを簡単に作成したり、ストロークと面のSVGコードを組み合わせて手描き風のアニメーションも簡単に作成することができます。

サイトロゴやメッセージを印象付ける演出に使ったり、
ローディング中の画面に標示させる用のアニメーションが手軽に作成できます。

動画を使って演出の幅をどんどん広げていきたいな〜と思う今日この頃です！
明日の担当はデザイナーの森久保さんです。お楽しみに★