マイクロインタラクションの話を聞きにいったら、どんなツールが使えるか分かってためになった

マイクロインタラクションとは

状態が切り替わるときにちょっとしたアニメーションをかけること。

みたいな説明をされていました。

没入型コンテンツ（ブランドサイトなど）と情報提供型コンテンツではマイクロインタラクションの役割が違って、前者は「世界観の構築に役立つもの」後者は「UIの理解に役立てるもの」がそれぞれ求められるといった説明もあって良かったです。サイトの性格を理解したうえで意味のあるアニメーションを実装したいですね。

Adobeの、と前置きがあって3つのツールが紹介されました。

XDの自動アニメーションは、アートボード間の遷移に使えばサッとうごくプロトタイプが作れます。ブランドサイトを作ると全体的にアニメーションを入れたりするので、そういった動きをXDで作って、デザイナからエンジニアに伝えやすくなりそうです。

After Effects は映像制作向けだと思っていたので意外でした。 bodymovin というプラグインで json を書き出して、 Lottie というライブラリでWeb上に実装できます。

どちらかというと Animate のほうが Web 向きかなとい感じがありますが、やはり書き出し方法に幅があるので、いろんな用途で使えそうです。

svg用の面白いライブラリが紹介されていました。

線画を用意するだけで、線を書くようなアニメーションを作れるというもの。

ほか、トゥイーン制御するライブラリが沢山出ているので使うべしというようなざっくりとした紹介でした。

エンジニア向けには、主に CSS のテクニックや SVG 、アニメ画像ファイルの話が中心でした。

デザイナー向けにはわりと派手に動くものを作るためのツールが紹介されていたのでギャップがありましたが、実務ではCSSでちょっとしたものを実装したりするのがやっぱり中心になります。

派手な動きの実装も技術としてしっかり抑えつつ、小さなテクニックを磨いていきたいなぁと思いました。