The art of increasing the resolution of eyes, hands and movement in UX design.

1. UX
UX MILK All Night 2020
2020.9.13 @yukio_andoh
1

2. QR
YouTube
2

3. 3
@yukio_andoh

4. 210
1.0 60pixel /

11. 11

12. 12

13. Retina Display

14. 320x480

15. 1242 x 2688
1125 x 2436

17. Via. Wikimedia

21. Dear Mark
You have to try this Spritz app on your new smart watch.
It helps you read entire emails more quickly than on your phone or the computer.
The best part is the more you read the faster you get.
This is going to be a real time.

22. 1
Via. Spritz

23. 2
Via. Spritz

24. via. Rafa Sánchez

25.
25

31. optical adjustment

40. Via. dropbox.com

44. Evernote

45. 45
( )

47. ( )

49. via. www.amazon.co.jp/dp/B07JW8F82G

52. 35,000 /1

53. 2 1

56. 56

57. 57

58. 58

59. 59

60. 60
x 2 3

61. 2 1

62. 62
SNS

63. 63

65. via. Netflix

66. 66

67. UI
67
"
"
"
"
"

68. Dynamic Stimulation of Visual Cortex Produces Form Vision in Sighted and Blind Humans

69. 瞬間
履歴 同時性
速度
⼀時的
69
持続遷移 変化
繰返し
軌跡 転換 リズム
蓄積
密度
予測

70. 70
実際のUIアニメーションは 300ms〜400ms（最少で150ms）
触ってから動くのが素早すぎると、
⾃分が操作して動かした実感がしない
触った直後は指で隠れているかもしれない
⽌まったと認識するには、
時間がかかる。0秒では無い
50ms 100ms

71. 71
実際のUIアニメーションは 300ms〜400ms（最少で150ms）
触ってから動くのが素早すぎると、
⾃分が操作して動かした実感がしない
触った直後は指で隠れているかもしれない
⽌まったと認識するには、
時間がかかる。0秒では無い
50ms 100ms

72. 72
実際のUIアニメーションは 300ms〜400ms（最少で150ms）
触ってから動くのが素早すぎると、
⾃分が操作して動かした実感がしない
触った直後は指で隠れているかもしれない
⽌まったと認識するには、
時間がかかる。0秒では無い
50ms 100ms

73. 73
実際のUIアニメーションは 300ms〜400ms（最少で150ms）
触ってから動くのが素早すぎると、
⾃分が操作して動かした実感がしない
触った直後は指で隠れているかもしれない
⽌まったと認識するには、
時間がかかる。0秒では無い
50ms 100ms

75. 75

76. 76

77. =

78. via. The Slow Mo Guys

79. 79

85. 85

86. 86

87. 87
ディレクター：
そこもっとス〜っといって
スカっと動かないかな〜
いい具合にやってよ〜
「拡⼤する」「展開する」みたいな
⼀般的すぎ、解釈があいまいな⾔葉
は使わない。必ず数値的な補⾜を加える。

88. ■すいすい
滞ることなく移動したり、物事が進⾏する様⼦。
タッチパネルなど、操作に体する反応が素早く、遅延なく画⾯が変化する様。
■すかっ
じゃまになるものがなく、壮快な様⼦
指やマウスで操作し始めてからの動き始め、⽴ち上がりが素早く、引っかかりが無い様。
■すこん
軽めのもの同⼠が、勢い良く当たったり、はまったりする様⼦ [類語] すぽん
移動後の⾏き先があらかじめ予想でき、その予想先にぴったりと、素早くはまる様。
■すっ
⾳もなく物が移動する様⼦。
反応や抵抗が少ない状態で、移動させることが可能なこと、また移動距離は短め。 88

89. ■ずっしり
⾮常に重たいものの、重さが伝わる様⼦。
⼤きめの部品や、素材を動かす際の反応のし始めや移動などが遅く重たさを感じる様。
■すっぱり
鋭い刃物で、直線的にものを切断する様⼦。転じて、潔く未練無く物事を処理する様⼦。
今まで表⽰されていたものが必要なくなった場合、奇麗に画⾯から消えてなくなったりする
様⼦。
■すっぽり
ものが完全にはまりこむ様⼦。またそれによって完全に覆われる様⼦。
⼤きめの部品に⼩さめの部品がはまり込み、⼤きめの部品で覆われる様⼦。
■すとん
ものが急に落ちる様⼦。
画⾯の上⽅から、下⽅に向かって、勢いづいて部品が移動する様。
89

90. 90
※ツールによって、easing の名前が異なる場合あり

92. ディズニーのアニメーションの法則
92
■ スクオッシュ(潰し)とストレッチ(伸ばし)
■ アンチシペーション(予備動作)
■ ステージング(舞台演出)
■ ストレート・アヘッド・アクション(逐次描き)と
ポーズ・トゥ・ポーズ(原画による設計)
■ フォロースルーとオーバーラッピングアクション
(あと追いの⼯夫)
■ スロー・インとスロー・アウト(両端づめ)
■ アーク(運動曲線)
■ 副次アクション
■ タイミング
■ 誇張
■ 実質感のある絵
■ アピール（訴える⼒）

93. 93
⽐較検討する
単体では判断できないことも⽐べると解る
短い時間で素早く動くもの、ゆったり動くものなど。
作った本⼈は思⼊れが強く⻑くしがち。客観的に！

94. 94

95. 95
+動画
実際に作ってみると、
誤差やもたつきは必ず
有る →何度も調整

96. 96
「動き」の
ひらめき
⼈に伝えられるくらい
⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階
（早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して
実装に進めるくらいの段階
「動き」を実装された
プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション
×

97. 97
「動き」の
ひらめき
⼈に伝えられるくらい
⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階
（早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して
実装に進めるくらいの段階
「動き」を実装された
プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション
×

98. 98
「動き」の
ひらめき
⼈に伝えられるくらい
⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階
（早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して
実装に進めるくらいの段階
「動き」を実装された
プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション
×

99. 99
「動き」の
ひらめき
⼈に伝えられるくらい
⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階
（早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して
実装に進めるくらいの段階
「動き」を実装された
プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション
×

100. 100
「動き」の
ひらめき
⼈に伝えられるくらい
⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階
（早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して
実装に進めるくらいの段階
「動き」を実装された
プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション
×

101. 101
「動き」の
ひらめき
⼈に伝えられるくらい
⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階
（早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して
実装に進めるくらいの段階
「動き」を実装された
プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション
×

102. 102
「動き」の
ひらめき
⼈に伝えられるくらい
⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階
（早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して
実装に進めるくらいの段階
「動き」を実装された
プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション
×

103. 103
「動き」の
ひらめき
⼈に伝えられるくらい
⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階
（早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して
実装に進めるくらいの段階
「動き」を実装された
プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション
×

104. 104
「動き」の
ひらめき
⼈に伝えられるくらい
⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階
（早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して
実装に進めるくらいの段階
「動き」を実装された
プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション
×

105. 105
「動き」の
ひらめき
⼈に伝えられるくらい
⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階
（早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して
実装に進めるくらいの段階
「動き」を実装された
プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション
×

106. 106

107. Thank You
@yukio_andoh
107

111. Q&A
@yukio_andoh
111
https://app.sli.do/event/rwkojp2a

112. 112
https://vimeo.com/93206523

113. 113
ディズニーアニメーション ⽣命を吹き込む魔法
― The Illusion of Life

114. 114

115. 115

116. 116
気に⼊ったアニメーションのサンプルを蓄えておく
https://sparanoid.com/lab/path-menu/# https://uimovement.com

117. 117
複数機種向けに
開発する場合
対応する⼀番古い、
⼀番遅い機種を最初
に調整し、⾼性能に
なるに従いリッチで
滑らかな体験に！

118. オススメのツール紹介
118
Keynote Kite ComposerProcessing

119. Thank You
@yukio_andoh
119