Design JP vol2 (Motion Design & Animation)

1. インタラクションデザインの
調整のコツと、
それにまつわる
コミュニケーションの仕⽅
Design-JP #2
2017.5.10 @yukio_andoh
1

2. 2
安藤幸央（あんどうゆきお）@yukio_andoh

3. 本⽇のインタラクションデザイン
3
＋
≒モーション、アニメーション
≠ 相互作用 (Inter + Action)

4. 本⽇のインタラクションデザイン
4
＋
Motionディレクション／テスト／コツ
Communicationと対話／⾔葉／コツ

5. Motion &
Animation
5

7. アニメーションとは？
7
Norman McLaren
アニメーションは動くものを
描くのではなく
描かれたものを動かす芸術です

8. アニメーションは装飾ではなく機能である
Pasquale DʼSilva（アニメーター）
“
8

9. なぜアニメーションさせるのか？
9
●画⾯や要素が切り替わったことを知らせる
●変化をより把握しやすいものにする
●⼩さなものにも注意を促す注⽬してもらう
●動きによって楽しみを感じてもらう
●正しい情報構造の理解を⼿助けする

10. フリクション = 意図的違和感
10
Bad Friction / フローがスタックしてしまうこと
Unseen Friction / フローをジャンプすること
Boundary Friction / タッチポイント間を継ぐこと
Intentional Friction / あらかじめ事前に防ぐこと
Learning Friction / 学んでわかりやすくなること
External Friction / 条件や規制をふまえること

11. なぜアニメーションさせるのか？
11

12. アニメーションとは？
12
＋
時間 と 位置や形の変化
時間 と ⾊や透明度の変化
※透明処理は、処理負荷が⾼く、不⾃然に遅くなりがち

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

14. 14

15. 15

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

17. 17
次に起こることが予想
できるのが良い。
反応が速すぎるのも
良くない。不安になる

18. 18240fps ハイスピードカメラでの分解して確認！

19. 19
RemoteTestKit がオススメ
15fps

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

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

22. 22
https://vimeo.com/93206523

23. 23

24. 24

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

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

27. 27
動き過ぎ、酔ってしまうような UI Motion ?!
VS.

28. 28

29. 29

30. 30

31. Communication
Design x Tech.
31

32. ×
32

33. ×
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
33

34. ×
34

35. var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
○
35

36. ○
36

37. ○
37

38. ○
38

39. ×○
39

40. ×
40

41. ○
41

42. ○
Futura42

43. ○
Futura43

44. 44

45. コミュニケーションとは、お互いの別々の体験がひ
とつの共有財産となるまで、その体験を貸し借りす
るプロセスのことを⾔う。
ジョン・デューイ（哲学者）
“
45

46. 46

47. 47

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

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

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

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

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

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

54. 54

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

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

57. アニメーションとは？
57
John Lasseter (Pixar)
アートは技術に挑戦し
技術はアートに
インスピレーション与える

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

59. ツールの将来？
59
React+Sketch.app via. AirBnB

60. 60

61. 61

62. 62

63. Google I/O 2017
63May
17
May
18
May
19

64. Thank You
@yukio_andoh
64

65. Break Time
0 Minutes
65