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

Lottieで始めるWebアニメーション入門

 Lottieで始めるWebアニメーション入門

2019年10月18日(金)Web✕Animation Vol.1「ローディング制作のワークフロー」発表資料

448jp | OKI Yoshiya

October 18, 2019
Tweet

More Decks by 448jp | OKI Yoshiya

Other Decks in Programming

Transcript

  1. 世路庵 沖 良矢 | 2019.10.18 (Fri)
    Web×Animation Vol.1「ローディング制作のワークフロー」
    Webアニメーション入門
    Lottieで始める

    View Slide

  2. 沖 良矢
    おき よし や
    ・ インタラクションデザイナー
    ・ 受託制作一筋16年
    ・ 妻1人、子2人
    @448jp

    View Slide

  3. 本日お話しすること
    Lottieによる実装デモ
    事例紹介
    Webアニメーション概論
    1
    2
    3

    View Slide

  4. Lottieによる実装デモ
    Implementation demonstration by Lottie
    1

    View Slide

  5. デザイン アニメーション 実装
    Bodymovin Lottie
    JSON

    View Slide

  6. デモ

    View Slide

  7. Lottieが動作するプラットフォーム
    ⚫ Web
    ⚫ iOS
    ⚫ Android
    ⚫ React Native
    ⚫ Windows
    プラットフォームによって
    サポートされる機能が異なるので要注意
    参考:Supported After Effects Features
    https://airbnb.io/lottie/#/supported-features

    View Slide

  8. LottieのRenderer
    ⚫ SVG
    ⚫ Canvas
    ⚫ HTML(DOM)
    → 基本これでOK
    → SVGでレイアウトの支障があるときに利用
    → ちゃんと動かない?

    View Slide

  9. 事例紹介
    Case study
    2

    View Slide

  10. 旧奈良監獄(2018)

    View Slide

  11. Webアニメーション概論
    Introduction to web animation
    3

    View Slide

  12. デジタルプロダクトのデザインパターン
    機能パターン
    ⚫ 個性を視覚的に表現する
    ⚫ プロダクトのエートス
    (気風、特性、性格)に基づく
    ⚫ 形容詞
    認知パターン
    ⚫ UIの構成要素
    ⚫ プロダクトの領域や
    コアな機能に基づく
    ⚫ 名詞、または動詞

    View Slide

  13. デジタルプロダクトのデザインパターン
    機能パターン
    ⚫ 個性を視覚的に表現する
    ⚫ プロダクトのエートス
    (気風、特性、性格)に基づく
    ⚫ 形容詞
    認知パターン
    ⚫ UIの構成要素
    ⚫ プロダクトの領域や
    コアな機能に基づく
    ⚫ 名詞、または動詞
    アニメーションが
    得意とする領域

    View Slide

  14. デジタルプロダクトのデザインパターン
    機能パターン
    ⚫ 個性を視覚的に表現する
    ⚫ プロダクトのエートス
    (気風、特性、性格)に基づく
    ⚫ 形容詞
    認知パターン
    ⚫ UIの構成要素
    ⚫ プロダクトの領域や
    コアな機能に基づく
    ⚫ 名詞、または動詞
    デザインパターンについては、
    『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』
    がオススメです

    View Slide

  15. Webアニメーションができること
    ⚫ 世界観の演出
    ⚫ ストーリーの伝達
    ⚫ 象徴的瞬間の表現(マイクロインタラクション)

    View Slide

  16. 転倒ます型雨量計の例

    View Slide

  17. 転倒ます型雨量計の例
    引用:http://www.snwm.co.jp/uryou2.html
    画像による説明

    View Slide

  18. 転倒ます型雨量計の例
    ① 受水口(雨が降り込んでくる所)
    ② 漏斗 (降り込んだ雨を集める所)
    ③ 転倒ます(水を計る所)
    「受水口」からの雨が「漏斗」で集められ「転倒ます」へ雨水を貯める。0.5mmに
    達すると「転倒ます」が倒れ、溜まった雨水を排水する。倒れる事により反対側の
    「ます」へ再び雨水が溜まりはじめる。
    「転倒ます」が転倒をするたびに接点パルスを発生する。これを計測することに
    よって降水量がわかります。
    引用:http://www.snwm.co.jp/uryou2.html
    画像+テキストによる説明

    View Slide

  19. 転倒ます型雨量計の例
    アニメーションによる説明
    アニメーションを開く

    View Slide

  20. アニメーションにしか
    伝えられないことがある

    View Slide

  21. Webにおけるアニメーション技術
    ⚫ DOMアニメーション
    ⚫ CSS3アニメーション
    ⚫ Canvas
    ⚫ GIFアニメーション
    ⚫ video

    View Slide

  22. DOMアニメーション
    要素のstyle属性を連続的に変更する

    View Slide

  23. CSS3アニメーション
    CSS3で追加されたCSS TransitionsまたはCSS Animationsを利用する

    View Slide

  24. Canvas
    HTML5で追加されたcanvas要素でContext2dまたはWebGLを利用する

    View Slide

  25. GIFアニメーション/ビデオ
    GIFアニメーション、ビデオを再生する

    View Slide

  26. 各技術のメリット・デメリット

    View Slide

  27. 各技術のメリット・デメリット
    Webアニメーション表現において
    Lottieのバランスは大変貴重です

    View Slide

  28. さいごに

    View Slide

  29. フェナキスティスコープ(和名:驚き盤)

    View Slide

  30. フェナキスティスコープ(和名:驚き盤)

    View Slide

  31. 語源「騙す」(ギリシャ語)

    View Slide

  32. 画は静止していても
    動いているように見える

    View Slide

  33. 私たちはアニメーションによって
    そこには無い
    新たな存在を作り出せる

    View Slide

  34. アニメーション(animation)
    霊魂(anima)

    View Slide

  35. あなたのプロダクトに
    生命の息吹を与えるのは
    アニメーション!

    View Slide

  36. ……かもしれません

    View Slide

  37. 沖 良矢 @448jp
    ありがとうございました

    View Slide