2020/10/22開催の「Adobe MAX 2020」での発表資料です。アプリやWebのデザイナーを対象に、 マイクロインタラクションをプロダクトに実装するテクニックを紹介しました。 After EffectsとLottieを使うと、デザイナーが作ったアニメーションを、表現豊かかつ軽量に、そしてエンジニアの工数もあまりかけずに、プロダクトに実装することができます。 https://www.adobe.com/jp/max/2020/sessions/creating-microinteractions-using-the-lottie-app-an-s9027.html

1. © 2020 Adobe. All Rights Reserved.

2. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.2

3. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.3
§
§
§
§
§

4. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.4
https://airregi.jp/mate/

5. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.5
PO
PM
Dev BE・
FE
App
QA

6. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.6

7. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.7

8. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.8

9. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.9

10. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.10
•
•
•

11. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.11

12. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.12

13. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.13

14. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.14

15. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.15

16. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.16

17. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.17

18. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.18

19. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.19

20. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.20
https://airbnb.io/lottie/#/supported-features

21. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.21

22. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.22
http://aescripts.com/learn/zxp-installer/

23. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.23

24. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.24

25. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.25
https://lottiefiles.com/plugins/after-effects

26. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.26

27. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.27

28. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.28

29. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.29

30. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.30

31. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.31
https://speakerdeck.com/ykoyano/dezainatoenziniafalseju-li-woyorijin-dukerulottieli-yong-shu

32. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.32

33. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.33

34. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.34

35. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.35

36. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.36

37. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.37

38. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.38

39. © 2020 Adobe. All Rights Reserved.© 2020 Adobe. All Rights Reserved.39

40. © 2020 Adobe. All Rights Reserved.