エンジニア向けのマイクロインタラクション入門

エンジニアがマイクロインタラクションをガッツリ実装するのは大変。でもデザイナーはプログラムの実装まで立ち入れない。

Adobe Creative Cloudで作成したアニメーション素材であれば良い方法があります。アニメーション素材をウェブで利用する手段を紹介します。エンジニア向けの話です。

■関連資料
デザイナー向けの内容は次のURLで資料を公開しています。

イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA
https://ics.media/entry/19498

Transcript

1. エンジニア向けのマイクロインタラクション⼊⾨ 株式会社ICS 池⽥ 泰延 平成30年11⽉30⽇ @ DIST.
2. ⾃⼰紹介 池⽥ 泰延 (Yasunobu Ikeda) 株式会社 ICS 代表 / 筑波⼤学 ⾮常勤講師 @clockmaker
3. ICS MEDIA - Webデザイナー/フロントエンジニアのメディア https://ics.media/
4. エンジニアがインタラクションを作る⽅法
5. エンジニアがインタラクションを作る⽅法 1. デザイナーが作ったモーションを組み込む 2. プログラムでモーションを実装する
6. デザイナーが作ったモーションを組み込む
7. アニメーションデータをエンジニアに どうやって渡すか？
8. デザイナーとエンジニアの分業も可能 イラストやアニメ
 だけ制作 インタラクションの
 実装なら任せな
9. アニメーションのフ ォーマッ ト ソフ ト内でアニメーションを定義 動画として書き出す スクリプトとして書き出す
10. アニメーションのフ ォーマッ ト ソフ ト内でアニメーションを定義 動画として書き出す スクリプトとして書き出す ファイルから実装者が読み解くしかない 表現が忠実。 データ容量が巨⼤になりがち 動的なデータに対して、 組み込める。 軽量
11. ツールの使い分け スクリプト書き出し XD できない After Effects プラグインで
 利⽤可能 Animate 利⽤可能
12. アニメーションのスクリプト化 • データ容量が少なくなる • 再⽣コン トロールが容易 • インタラクション開発も可能
13. Animate + HTML Canvas CreateJS (再⽣エンジン) 標準機能で 書き出し
14. After Effects + Bodymovin + Lottie Web iOS Android React Native Bodymovin (プラグイン) Lottie (再⽣エンジン)
15. • 映画やTV、 ビデオ、 ウ ェブ • モーショングラフ ィ ッ クスやビ ジュアルエフ ェク トの制作 After Effects
16. Bodymovin https://www.adobeexchange.com/creativecloud.details. .html
17. After Effects + Bodymovinのアニメーション
18. After Effects + Bodymovinのアニメーション
20. Micro-Interaction Toolkit https://www.lottiefiles.com/collections/micro-interaction-toolkit
21. • 元Flash Professionalというアニメーション制作ツール • ゲーム制作 • 広告コンテンツ • キャラクターアニメーション Animate
22. Animateのアニメーション 精密なアニメーション制作が可能 ベクターツールが充実
23. 実演
24. Animate + SVG
25. • カスタムプラ ッ トフ ォームSDK • Animate CCのタイムラインは拡張機能によって、 様々な媒 体に出⼒できるようになる • PixiJS / GAF / OpenFL / AwayJS / SnapSVG Animate CC
26. ⽇本全国花粉⾶散マップ Pollen Map in Japan | ICS http://ics-web.jp/projects/pollenmap/
27. HTML 製のデザインツール Particle Develop - ICS
 https://ics-creative.github.io/project-particle-develop/
28. スクリプト書き出しの⽐較 表現の制約 媒体 After Effects + Bodymovin ベクターのみ HTML + SVG iOS / Android Animate + HTML Canvas 無し HTML Canvas Animate + SnapSVG 無し HTML + SVG Animate + Pixi.js 無し WebGL
29. プログラムでモーションを実装する
30. デザイナーとエンジニアの分業も可能 インタラクションの
 実装は俺がすべてやる
31. Creative Icons
33. • DOMとWebGLの⼆段構え • DOMはVue.jsで実装 • WebGLはThree.jsで実装 技術
34. • WebGLでは3D空間を描画 • DOMではアイコンを配置 アーキテクチ ャー WebGL DOM(Vue.js) 重ねる
35. Three.js側で プロジェクション座標を計算 座標をDOMに割り当てる x y left top
36. Three.js側のコード
37. Vue.js側のコード
38. • CSS Transitionが楽すぎる • 座標が切り替わったら⾃動的にトラジションしてくれる なぜDOMを使うか
40. • Vue.jsの<transition>タグで出現 ・ 消去のモーションが楽 • CSSクラスを割り振ってくれる なぜDOMを使うか
41. • nth-child()にtransition-delayを
 仕込む •ふわっふわっ〜☁という
 出現モーションができあがる 順番に出す
43. • Vue.jsはDOMの管理に便利だが、 
 毎フレームの更新が苦⼿ • 性能観点で別のフレームワークへ切り替えるか 今後の展望
44. Angular vs Vue.js vs React
45. パフ ォーマンス⽐較 React Angular Vue MB MB MB React Angular Vue fps fps fps React v Angular Vue . React v Angular Vue . メモリ使⽤量 描画性能 ⼩さいほど省メモリ ⼤きいほど⾼速
46. マイクロインタラクションの世界では
 接続型アニメーションが今後増えていく トレンドのマイクロインタラクション
47. Native-Like Animations for Page Transitions on the Web | CSS-Tricks
 https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/
48. ご清聴ありがとうございました ご質問等はTwitterまでお気軽に連絡ください 池⽥ 泰延 @clockmaker Copyright ICS INC. All rights reserved.