Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

4b7124f2f5989173c8ce3b0934817a32?s=47 Yasunobu Ikeda
November 30, 2018

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

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

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

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

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

4b7124f2f5989173c8ce3b0934817a32?s=128

Yasunobu Ikeda

November 30, 2018
Tweet

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のアニメーション

  19. None
  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

  32. None
  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を使うか

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

  41. • nth-child()にtransition-delayを
 仕込む •ふわっふわっ〜☁という
 出現モーションができあがる 順番に出す

  42. None
  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.