js書けないwebデザイナーが、サイトにダイナミックアニメーションを入れる！

2019年は、仕事がうまく運べなくてボツになったり、フィニッシュしなかったりと奮闘中のアラフォーデザイナーつくみ＊tsukumiです。

そんな前年からずっとフィニッシュしない「採用サイト」を未だ作っているのですが、トップにダイナミックなアニメーションを想定していてエンジニアさんの手を借りるつもりでした。。。。。ところが

ダイナミックアニメーションサイトが好きだー！

エンジニアさんの手を借りるのが無理そう

採用サイトは、デザインコンセプトは、

◆写真を一切使わないイラストのwebサイト
◆ビビット色3つでポップに
◆楽しい社風を思わせる動くイラスト

もちろんイラストは自分で書き下ろし。ところが。。。色々な事情があり、エンジニアさんに作ってもらえそうにありません。なので自分でアニメーションを作ることにしたのです。頭の中に動きの構想はありますから、絵コンテも書くことはできます！しかし、、

js全くなんですよ。何も書けません。調べるとMo.jsとか、Kute.jsとかすっごく魅力的なんだけど、無理かなぁ〜って思っていたところ、「Lottie」なるものを発見したのです。

デザイナーがWeb上でアニメーションを表示するなら「Lottie」がおすすめ！

実は大学時代〜社会人２年間は動画（短編）を作っていたんですが、色々あって映像が無理になってしまって会社では内緒にしています。

大学時代にPremiere、Mayaなど触っていて、ちょうどまたその辺を触りたいなと思っていたところ、「Lottie」はAfter Effectsで動画を作成して、lottie.jsで簡単にWebやアプリでアニメーションを表示することができる優れものなんです。

パフォーマンスにも優れているということで、とにかくやるならこれしかない！と珍しくそうそうやる気が出てきたのです。

これからAfter Effectsに取り掛かる

やる気になったところで、別プロジェクトがすごい勢いで流れてきそうなので当面はそちらをメインにやることになりそう。合間にAfter Effectsの操作を覚えておこうと思います。

私が見た「Lottie」の記事はこちら

Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など

海外ですがコミュニティも充実しているので、上記サイトからアクセスして見てくださいね！