2024.09.30
WEBデザインにおける「グラフィカルさ」とは
- デザイン
こんにちは。コーダーのぶんちゃんです。
今週のGoodNewsは、アニメーションについてです。
最近見たこちらの記事でLottieアニメーションというものを知りました。お恥ずかしながら今まで触れる機会がなかったのです。
Lottieアニメーションの基本から活用事例、作り方などまとめた記事を更新しました🎉
— fuyuna taguchi🌷necco (@fuyuna_design) November 29, 2023
これからLottieを使ってみたい方、リッチなアニメーションを手軽に実装したい方におすすめです。作成時に注意すべきことなどもまとめています。ぜひお役立てください〜!🙌https://t.co/r7BYvmYxqU pic.twitter.com/nmqpPw5JCA
Lottieは、Airbnbが開発したオープンソースのアニメーションライブラリです。After EffectsやFigmaなどのツールでデザイナーが作成したアニメーションをJSON形式でエクスポートし、それをアプリやウェブページに実装することができます。
SVGアニメーションで表示されるので、得意・不得意はありますが、複雑なアニメーションを、軽量かつ高品質に再現できるのが特徴です。
自分で作らずともLottieアニメーションが無料で配布されているサイトもあるそうです。
従来の私の考えは、アニメーションはコーダーが実装するものでした。
参考サイトを提示してもらったり、あらゆる手段でイメージを伝えてもらい、それを踏まえて私たちコーダーが動きを具現化します。
しかし、Lottieアニメーションを知ってしまった今、これは革命です!
当たり前のことを言います!
デザイナーが、デザインする際に想定したイメージをアニメーションファイルとして作成すれば、自身が作成するわけですから当然思い通りなわけです!
すごい…。
社内のデザイナーもさっそく作って見せてくれました。
コードをペッと貼って埋め込み終了でした。動いてました。驚くほど簡単です。
私の恐れていたコーダーオワコンの声が聞こえる気がする…。
GSAPと相性もいいと情報を得ましたので、これからちょっとずつ触ってみようと思います。
それでは、よいWeb制作を!
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design