その他

2023.12.07

アニメーションはデザイナーが作る?

こんにちは。コーダーのぶんちゃんです。

今週のGoodNewsは、アニメーションについてです。

最近見たこちらの記事でLottieアニメーションというものを知りました。お恥ずかしながら今まで触れる機会がなかったのです。

Lottieアニメーションって何?

Lottieは、Airbnbが開発したオープンソースのアニメーションライブラリです。After EffectsやFigmaなどのツールでデザイナーが作成したアニメーションをJSON形式でエクスポートし、それをアプリやウェブページに実装することができます。

SVGアニメーションで表示されるので、得意・不得意はありますが、複雑なアニメーションを、軽量かつ高品質に再現できるのが特徴です。

自分で作らずともLottieアニメーションが無料で配布されているサイトもあるそうです。

LottieFiles

アニメーションはコーダーだけが実装するものではない

従来の私の考えは、アニメーションはコーダーが実装するものでした。

参考サイトを提示してもらったり、あらゆる手段でイメージを伝えてもらい、それを踏まえて私たちコーダーが動きを具現化します。
しかし、Lottieアニメーションを知ってしまった今、これは革命です!

当たり前のことを言います!
デザイナーが、デザインする際に想定したイメージをアニメーションファイルとして作成すれば、自身が作成するわけですから当然思い通りなわけです!

すごい…。

社内のデザイナーもさっそく作って見せてくれました。
コードをペッと貼って埋め込み終了でした。動いてました。驚くほど簡単です。

私の恐れていたコーダーオワコンの声が聞こえる気がする…。

GSAPと相性もいいと情報を得ましたので、これからちょっとずつ触ってみようと思います。

それでは、よいWeb制作を!

この記事をシェアする

関連記事

  • 2024.02.02

    Webデザインにおけるアニメーションについて考えてみた〜目的編〜

    デザイン

    その他

  • 2023.12.25

    ロゴもレスポンシブする時代

    その他

  • 2023.12.22

    文字の動きを考える

    その他

おすすめ記事

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

×