Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lottieで始めるWebアニメーション入門
Search
448jp | OKI Yoshiya
October 18, 2019
Programming
1
670
Lottieで始めるWebアニメーション入門
2019年10月18日(金)Web✕Animation Vol.1「ローディング制作のワークフロー」発表資料
448jp | OKI Yoshiya
October 18, 2019
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
人はなぜコミュニティとつながると幸せを感じるのか
448jp
3
290
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.7k
合意形成のためのFigma活用術
448jp
0
120
書く・即・DONEな仕組みをNuxtで作る
448jp
0
380
神速でワイヤーフレームを作るためのライブラリ
448jp
1
860
Figmaで神速ドキュメント作成術
448jp
3
2.4k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
420
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
750
Other Decks in Programming
See All in Programming
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
690
ふつうの技術スタックでアート作品を作ってみる
akira888
1
860
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Porting a visionOS App to Android XR
akkeylab
0
470
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
XP, Testing and ninja testing
m_seki
3
250
PipeCDのプラグイン化で目指すところ
warashi
1
280
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building an army of robots
kneath
306
45k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Gamification - CAS2011
davidbonilla
81
5.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Transcript
世路庵 沖 良矢 | 2019.10.18 (Fri) Web×Animation Vol.1「ローディング制作のワークフロー」 Webアニメーション入門 Lottieで始める
沖 良矢 おき よし や ・ インタラクションデザイナー ・ 受託制作一筋16年 ・
妻1人、子2人 @448jp
本日お話しすること Lottieによる実装デモ 事例紹介 Webアニメーション概論 1 2 3
Lottieによる実装デモ Implementation demonstration by Lottie 1
デザイン アニメーション 実装 Bodymovin Lottie JSON
デモ
Lottieが動作するプラットフォーム ⚫ Web ⚫ iOS ⚫ Android ⚫ React Native
⚫ Windows プラットフォームによって サポートされる機能が異なるので要注意 参考:Supported After Effects Features https://airbnb.io/lottie/#/supported-features
LottieのRenderer ⚫ SVG ⚫ Canvas ⚫ HTML(DOM) → 基本これでOK →
SVGでレイアウトの支障があるときに利用 → ちゃんと動かない?
事例紹介 Case study 2
旧奈良監獄(2018)
Webアニメーション概論 Introduction to web animation 3
デジタルプロダクトのデザインパターン 機能パターン ⚫ 個性を視覚的に表現する ⚫ プロダクトのエートス (気風、特性、性格)に基づく ⚫ 形容詞 認知パターン
⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞
デジタルプロダクトのデザインパターン 機能パターン ⚫ 個性を視覚的に表現する ⚫ プロダクトのエートス (気風、特性、性格)に基づく ⚫ 形容詞 認知パターン
⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞 アニメーションが 得意とする領域
デジタルプロダクトのデザインパターン 機能パターン ⚫ 個性を視覚的に表現する ⚫ プロダクトのエートス (気風、特性、性格)に基づく ⚫ 形容詞 認知パターン
⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞 デザインパターンについては、 『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』 がオススメです
Webアニメーションができること ⚫ 世界観の演出 ⚫ ストーリーの伝達 ⚫ 象徴的瞬間の表現(マイクロインタラクション)
転倒ます型雨量計の例
転倒ます型雨量計の例 引用:http://www.snwm.co.jp/uryou2.html 画像による説明
転倒ます型雨量計の例 ① 受水口(雨が降り込んでくる所) ② 漏斗 (降り込んだ雨を集める所) ③ 転倒ます(水を計る所) 「受水口」からの雨が「漏斗」で集められ「転倒ます」へ雨水を貯める。0.5mmに 達すると「転倒ます」が倒れ、溜まった雨水を排水する。倒れる事により反対側の 「ます」へ再び雨水が溜まりはじめる。 「転倒ます」が転倒をするたびに接点パルスを発生する。これを計測することに よって降水量がわかります。 引用:http://www.snwm.co.jp/uryou2.html
画像+テキストによる説明
転倒ます型雨量計の例 アニメーションによる説明 アニメーションを開く
アニメーションにしか 伝えられないことがある
Webにおけるアニメーション技術 ⚫ DOMアニメーション ⚫ CSS3アニメーション ⚫ Canvas ⚫ GIFアニメーション ⚫
video
DOMアニメーション 要素のstyle属性を連続的に変更する
CSS3アニメーション CSS3で追加されたCSS TransitionsまたはCSS Animationsを利用する
Canvas HTML5で追加されたcanvas要素でContext2dまたはWebGLを利用する
GIFアニメーション/ビデオ GIFアニメーション、ビデオを再生する
各技術のメリット・デメリット
各技術のメリット・デメリット Webアニメーション表現において Lottieのバランスは大変貴重です
さいごに
フェナキスティスコープ(和名:驚き盤)
フェナキスティスコープ(和名:驚き盤)
語源「騙す」(ギリシャ語)
画は静止していても 動いているように見える
私たちはアニメーションによって そこには無い 新たな存在を作り出せる
アニメーション(animation) 霊魂(anima)
あなたのプロダクトに 生命の息吹を与えるのは アニメーション!
……かもしれません
沖 良矢 @448jp ありがとうございました