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
"いい感じ"にするためのイージング
Search
448jp | OKI Yoshiya
July 27, 2018
Technology
1
1.5k
"いい感じ"にするためのイージング
Meguro.css #2 LT発表資料
448jp | OKI Yoshiya
July 27, 2018
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
人はなぜコミュニティとつながると幸せを感じるのか
448jp
3
320
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
4k
合意形成のためのFigma活用術
448jp
0
140
書く・即・DONEな仕組みをNuxtで作る
448jp
0
400
神速でワイヤーフレームを作るためのライブラリ
448jp
1
880
Figmaで神速ドキュメント作成術
448jp
3
2.6k
今から始めるFigma超入門
448jp
0
1.7k
零細Web制作会社のリモートワーク事情
448jp
0
440
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
770
Other Decks in Technology
See All in Technology
Digitization部 紹介資料
sansan33
PRO
1
5.7k
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
9.4k
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
2k
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
410
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
300
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
280
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.4k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
知覚とデザイン
rinchoku
1
280
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Designing for Performance
lara
610
69k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
What's in a price? How to price your products and services
michaelherold
246
12k
Rails Girls Zürich Keynote
gr2m
95
14k
Building an army of robots
kneath
305
46k
It's Worth the Effort
3n
187
28k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Transcript
2018.7.27 (Fri) Meguro.css #2 @ oRo "いい感じ" にするための イージング 世路庵
沖 良矢
沖 良矢 ◉ 世路庵 ◉ フリーランス10年目 ◉ インタラクションデザイナー @448jp おき
よしや
アニメーションの 実装における指示例
アニメーションツール? コンテ? 参考サイト? Webサービス?
個人的に一番多いのは……
"いい感じ"に してください
"いい感じ"is 何
美しさを備える メンテナンス性が高い "いい感じ"のアニメーションとは 好さ ユーザー/ビジネス課題を解決する あるべき姿を表す 善さ 参考:「FLASHerがこの先生きのこるには」https://qiita.com/alumican_net/items/f21170d68a686e59eab2 +
作ってみたけど、"いい感じ"にならない……
原因の90%は イージング です (個人の感想)
「なんか違う」ときは、 イージング>時間>対象 の順で調整するとうまくいく (個人の感想)
CSS Transitionsにおけるイージング指定 .box { opacity: 1; transition: 0.4s ease-out; &:hover
{ opacity: 0.4; } }
transition-timing-functionの値 • ease • linear • ease-in • ease-out •
ease-in-out • cubic-bezier() ハッキリ言って少なすぎ
デモ (イージングの違い)
Robert Pennerのイージング関数
cubic-bezier() によるイージングの拡張 .box { opacity: 1; transition: 0.4s cubic-bezier(0.645, 0.045,
0.355, 1); &:hover { opacity: 0.4; } }
Sassの変数で使い回し $easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1); .box { opacity: 1;
transition: 0.4s $easeInOutCubic; &:hover { opacity: 0.4; } }
cubic-bezier.comで独自イージング
まとめ Conclusion
CSSのイージングは cubic-bezier()で 初めて真価を発揮する
目先の好さだけに囚われず その先の善さと両立する アニメーションを意識しよう
ありがとうございました 沖 良矢 @448jp