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

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

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

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

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

Transcript

1. エンジニア向けのマイクロインタラクション⼊⾨
   株式会社ICS 池⽥ 泰延
   平成30年11⽉30⽇ @ DIST.
   

   View Slide

2. ⾃⼰紹介
   池⽥ 泰延 (Yasunobu Ikeda)
   株式会社 ICS 代表 / 筑波⼤学 ⾮常勤講師
   @clockmaker
   

   View Slide

3. ICS MEDIA - Webデザイナー/フロントエンジニアのメディア
   https://ics.media/
   

   View Slide

4. エンジニアがインタラクションを作る⽅法
   

   View Slide

5. エンジニアがインタラクションを作る⽅法
   1. デザイナーが作ったモーションを組み込む
   2. プログラムでモーションを実装する
   

   View Slide

6. デザイナーが作ったモーションを組み込む
   

   View Slide

7. アニメーションデータをエンジニアに
   どうやって渡すか？
   

   View Slide

8. デザイナーとエンジニアの分業も可能
   イラストやアニメ

   だけ制作
   インタラクションの

   実装なら任せな
   

   View Slide

9. アニメーションのフ
   ォーマッ
   ト
   ソフ
   ト内でアニメーションを定義
   動画として書き出す
   スクリプトとして書き出す
   

   View Slide

10. アニメーションのフ
    ォーマッ
    ト
    ソフ
    ト内でアニメーションを定義
    動画として書き出す
    スクリプトとして書き出す
    ファイルから実装者が読み解くしかない
    表現が忠実。
    データ容量が巨⼤になりがち
    動的なデータに対して、
    組み込める。
    軽量
    

    View Slide

11. ツールの使い分け
    スクリプト書き出し
    XD できない
    After Effects
    プラグインで

    利⽤可能
    Animate 利⽤可能
    

    View Slide

12. アニメーションのスクリプト化
    • データ容量が少なくなる
    • 再⽣コン
    トロールが容易
    • インタラクション開発も可能
    

    View Slide

13. Animate + HTML Canvas
    CreateJS
    (再⽣エンジン)
    標準機能で
    書き出し
    

    View Slide

14. After Effects + Bodymovin + Lottie
    Web
    iOS
    Android
    React Native
    Bodymovin
    (プラグイン)
    Lottie
    (再⽣エンジン)
    

    View Slide

15. • 映画やTV、
    ビデオ、
    ウ
    ェブ
    • モーショングラフ
    ィ
    ッ
    クスやビ
    ジュアルエフ
    ェク
    トの制作
    After Effects
    

    View Slide

16. Bodymovin
    https://www.adobeexchange.com/creativecloud.details. .html
    

    View Slide

17. After Effects + Bodymovinのアニメーション
    

    View Slide

18. After Effects + Bodymovinのアニメーション
    

    View Slide

19. View Slide

20. Micro-Interaction Toolkit
    https://www.lottiefiles.com/collections/micro-interaction-toolkit
    

    View Slide

21. • 元Flash Professionalというアニメーション制作ツール
    • ゲーム制作
    • 広告コンテンツ
    • キャラクターアニメーション
    Animate
    

    View Slide

22. Animateのアニメーション
    精密なアニメーション制作が可能
    ベクターツールが充実
    

    View Slide

23. 実演
    

    View Slide

24. Animate + SVG
    

    View Slide

25. • カスタムプラ
    ッ
    トフ
    ォームSDK
    • Animate CCのタイムラインは拡張機能によって、
    様々な媒
    体に出⼒できるようになる
    • PixiJS / GAF / OpenFL / AwayJS / SnapSVG
    Animate CC
    

    View Slide

26. ⽇本全国花粉⾶散マップ Pollen Map in Japan | ICS
    http://ics-web.jp/projects/pollenmap/
    

    View Slide

27. HTML 製のデザインツール Particle Develop - ICS

    https://ics-creative.github.io/project-particle-develop/
    

    View Slide

28. スクリプト書き出しの⽐較
    表現の制約 媒体
    After Effects + Bodymovin ベクターのみ HTML + SVG
    iOS / Android
    Animate + HTML Canvas 無し HTML Canvas
    Animate + SnapSVG 無し HTML + SVG
    Animate + Pixi.js 無し WebGL
    

    View Slide

29. プログラムでモーションを実装する
    

    View Slide

30. デザイナーとエンジニアの分業も可能
    インタラクションの

    実装は俺がすべてやる
    

    View Slide

31. Creative Icons
    

    View Slide

32. View Slide

33. • DOMとWebGLの⼆段構え
    • DOMはVue.jsで実装
    • WebGLはThree.jsで実装
    技術
    

    View Slide

34. • WebGLでは3D空間を描画
    • DOMではアイコンを配置
    アーキテクチ
    ャー
    WebGL DOM(Vue.js) 重ねる
    

    View Slide

35. Three.js側で
    プロジェクション座標を計算
    座標をDOMに割り当てる
    x
    y
    left
    top
    

    View Slide

36. Three.js側のコード
    

    View Slide

37. Vue.js側のコード
    

    View Slide

38. • CSS Transitionが楽すぎる
    • 座標が切り替わったら⾃動的にトラジションしてくれる
    なぜDOMを使うか
    

    View Slide

39. View Slide

40. • Vue.jsのタグで出現
    ・
    消去のモーションが楽
    • CSSクラスを割り振ってくれる
    なぜDOMを使うか
    

    View Slide

41. • nth-child()にtransition-delayを

    仕込む
    •ふわっふわっ〜☁という

    出現モーションができあがる
    順番に出す
    

    View Slide

42. View Slide

43. • Vue.jsはDOMの管理に便利だが、
    

    毎フレームの更新が苦⼿
    • 性能観点で別のフレームワークへ切り替えるか
    今後の展望
    

    View Slide

44. Angular vs Vue.js vs React
    

    View Slide

45. パフ
    ォーマンス⽐較
    React
    Angular
    Vue MB
    MB
    MB React
    Angular
    Vue fps
    fps
    fps
    React v
    Angular
    Vue .
    React v
    Angular
    Vue .
    メモリ使⽤量 描画性能
    ⼩さいほど省メモリ
    ⼤きいほど⾼速
    

    View Slide

46. マイクロインタラクションの世界では

    接続型アニメーションが今後増えていく
    トレンドのマイクロインタラクション
    

    View Slide

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/
    

    View Slide

48. ご清聴ありがとうございました
    ご質問等はTwitterまでお気軽に連絡ください
    池⽥ 泰延
    @clockmaker
    Copyright ICS INC. All rights reserved.
    

    View Slide