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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

デモ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

事例紹介 Case study 2

Slide 10

Slide 10 text

旧奈良監獄（2018）

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

転倒ます型雨量計の例

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

さいごに

Slide 29

Slide 29 text

フェナキスティスコープ（和名：驚き盤）

Slide 30

Slide 30 text