そのアニメーション、本当に必要？Frontend de KANPAI! #4
フロントエンドエンジニアの集い「Frontend de KANPAI!」に参加してきました。デザイナーなのに、モーションデザイナーなのに。
というのも今回のテーマがアニメーションに関することだったので、エンジニア目線のアニメーションを学べると思い職場から急いで向かったのです。(乾杯には遅れた)
「動き」は浪費させてるんやで
特に印象に残っているのはFICC inc.所属、福岡 陽さんのテーマセッション「よいアニメーション」から「良いアニメーション」へ
アニメーションさせる目的意識の大切さを述べられていました。
そもそも「動かす」ということは何かを消費している訳で、僕たち人間が歩くとカロリーを消費するのと同じようにアニメーションもユーザーの時間・描画処理能力・電力・そして制作時間を消費しているのです。
つまり、
アニメーションは消費に見合った結果が得られているか
を考える必要があるということ。
特にUIインタラクションではとても重要で、目的としている体験・感情をユーザーに提供できるようにアニメーションを制作しないと良いアニメーションとは言えないということです。
この内容はモーションデザイナーの僕としてもWeb製作者全体でも意識していかないとな、と改めて思いました。
ちなみに今、人間の持続集中力は8秒まで縮まっているらしい。はっや。
もっと早く、もっと軽く、もっと簡単に
フロントエンドエンジニア向けのイベントなのでもちろん開発関係の内容もたっぷりありました。ここでセッションで登場した技術を覚えてる限り紹介していきます。(詳しく書けないので箇条書きで)
○Anime.js
2016年に登場した比較的新しいライブラリ。
簡素な指定で直感的にアニメーションを指定できるのが特徴。
公式サイトがイカしてる。
○TweenJS
Adobe Animate CCとの連携が可能、そのため複雑なアニメーションが描画できる。
絶対時間だけでなく、フレーム数でも指定ができる。
○Pixi.js
WebGLを使った2D表現ライブラリ。
豊富なエフェクト機能・学習コストの低さが魅力。WebGLを覚えなくてもイケる。
アニメーションのセッションだけあって様々なアニメーションライブラリの話を聞くことが出来ました。僕たちデザイナーが表現したアニメーションをより正確に、より短期間で、より軽量に実装する為の技術が日々進化しているのが感じられました。
動きに意味をもたせて
以上がレポートになります。いやー行ってきてよかった。
アニメーションや映像のカンファレンスは探しても全然ないから、今回は超貴重なイベントでした。こういう内容のイベント増えないかなー。
ところで最近参加するイベント全部が食べ放題飲み放題のイベントが多い気がするのだけど、今日は特に料理の減りが早くてビックリした。余り食べられなくてちょっと残念。(遅れて行ったのが悪いのだけど…)
エンジニアが食欲旺盛なのか他業種が食べなさすぎなのか？
次回はちゃんとKANPAI!に間に合わせたいです！
では、また:)
ゆるりとやっていくので、ゆるりと応援よろしくお願いします:)