UI animations for digital devices should be between 300-400ms, with a minimum of 150ms. Proper timing of animations removes a little tugging and makes a rough experience smooth, providing a sense of accomplishment for the user. The pacing before and after major movements is also important.

1. σβΠϯͷϦϑΝΫλϦϯά
‫׳‬ΕΛେ੾ʹ
3FGBDUPSJOH%FTJHO
8JUIPVU#FJOH/PUJDFE
:VLJPOEPI҆౻޾ԝ!ZVLJP@BOEPI
%FTJHO4QSJOU.BTUFS69%FTJHOFS698SJUFS
2022.12.10 rev.17

2. େ୾ͳϦχϡʔΞϧͰ
௧͍໨ΛΈͨ
Ϣʔβʔ͕཭Εͨ
୲౰ऀ͕มΘͬͨͷͰ
ํ਑΋มΘͬͯ
͍Ζ͍ΖϦχϡʔΞϧͨ͠
ΞϓϦͷ
৽‫ػ‬ೳ͕૿͑ͯ
ը໘͕ͲΜͲΜ
มΘ͍ͬͯ͘
ϦχϡʔΞϧ
͚ͨ͠Ͳલͷํ
͕ྑ͔ͬͨ
໭ͯ͠΄͍͠
όʔδϣϯΞοϓͰ
มΘΓ͗ͯ͢ɺ͍ͭ΋ͷ‫ػ‬ೳ͕
Ͳ͜ʹ͋Δͷ͔Θ͔Βͳ͍
ϦχϡʔΞϧ

3. Unsplash Colton Sturgeon
ͦͷ··Ͱ͍͍
,FFQJUUIBUXBZ

4. ϦϑΝΫλϦϯά
3FGBDUPSJOH
Unsplash Daryl Baird Unsplash Markus Spiske

5. ϓϩάϥϜͷ֎෦͔Β‫ͨݟ‬ಈ࡞Λม͑ͣʹ
ιʔείʔυͷ಺෦ߏ଄Λ੔ཧ͢Δ͜ͱ
3FGBDUPSJOH ʙ CZ.BSUJO'PXMFS
} }

6. ϦϑΝΫλϦϯά͢Δཧ༝ʁˠෛͷࢿ࢈Λະདྷʹ࢒͞ͳ͍
อकͷͨΊɺ֦ுͷͨΊɺ҆ఆͷͨΊɺ֦େͷͨΊ
อक
NBJOUFOBODF
֦ு
FYQBOTJPO
҆ఆ
TUBCJMJUZ
֦େ
TDBMBCJMJUZ

7. ϦϑΝΫλϦϯάͷྑ͍ͱ͜ΖΛɺ
6*σβΠϯɺ69σβΠϯͷੈքͰ΋औΓೖΕ͍ͨʂ
6*%FTJHO69%FTJHO

8. ਓͷ‫ه‬Ա͸ɺ৔ॴ΍Ґஔͱີ઀ʹؔΘ͍ͬͯΔˠ৔ॴ΍Ґஔ͕มΘΔͱ໎͏
1FPQMFTNFNPSJFTBSFDMPTFMZSFMBUFEUPMPDBUJPOBOEQPTJUJPO
Unsplash NMG Network

9. ਓ͸‫׳‬ΕΔɺश‫׳‬Խ͢Δ·Ͱʹ೔͔͔͔Δʢॾઆ͋Γʣ
1FPQMFUBLFEBZTUPHFUVTFEUPJU UPNBLFJUBIBCJU
Unsplash Diana Polekhina

10. ਓྨͷ೴͸ɺੜ໋Λҡ࣋͢ΔͨΊɺ‫ͳܹٸ‬มԽΛ‫͏ݏ‬
5IFIVNBOCSBJOEPFTOPUMJLFSBQJEDIBOHFJOPSEFSUPTVTUBJOMJGF
MarchofProgressComplete-ϫγϯτϯେֶΞʔΧΠϒΑΓ

11. ਐԽ͍ͯ͠Δͱࢥ͍ͬͯͯ΋ɺҙ֎ͱຊ࣭͸มΘΒͳ͍
:PVNBZUIJOLZPVBSFFWPMWJOH CVUTVSQSJTJOHMZUIFFTTFODFSFNBJOTUIFTBNF
via. https://www.iphonelife.com/content/evolution-iphone-every-model-2007-2016

12. ଟ਺͕ར༻͍ͯ͠Δ‫ػ‬ೳɺ‫׳‬Ε͍ͯΔ‫ػ‬ೳ͸গͮͭ͠ߋ৽
6QEBUFGFBUVSFTUIBUNBOZQFPQMFVTFBOEBSFGBNJMJBSXJUIBMJUUMFCJUBUBUJNF
1995 2022

13. ʙ

14. 2005

15. 2006

16. 2007

17. 2008

18. 2009

19. 2010

20. 2011

21. 2012

22. 2013

23. 2014

24. 2015

25. 2016

26. 2017

27. 2018

28. 2019

29. 2020

30. 2021

31. 2022

32. ʙ

33. ʙ

34. 1995

35. 1997

36. 1998

37. 1999

38. 2000

39. 2001

40. 2004

41. 2006

42. 2008

43. 2010

44. 2012

45. 2014

46. 2015

47. 2016

48. 2019

49. 2022

50. ʙ

51. ‫׳‬Ε΍शख़Λܰࢹͯ͠ɺେ‫ن‬໛ϦχϡʔΞϧΛ͢Δͷʁ
%PZPVEPNBKPSSFOFXBMTXJUIBEJTSFHBSEGPSGBNJMJBSJUZBOEQSPpDJFODZ
Unsplash Angela Baker

52. ϓϩάϥϜͷ֎෦͔Β‫ͨݟ‬ಈ࡞Λม͑ͣʹ
ιʔείʔυͷ಺෦ߏ଄Λ੔ཧ͢Δ͜ͱ
ϦϑΝΫλϦϯά
3FGBDUPSJOH
} }

53. 4QFFEZ
εϐʔυʢλΠϛϯάྑ͘ಈ͘ɾ଎͍ͱ‫ͤ͞͡ײ‬Δʣ
ɹɹ.JDSP*OUFSBDUJPOT
ɹɹɹɹɹɹϚΠΫϩΠϯλϥΫγϣϯʢద੾ͳ൓ԠɾҾ͔͔ͬΓΛऔΓআ͘ʣ
ɹɹɹ$PNNVOJDBUJPOT
ɹɹɹɹίϛϡχέʔγϣϯʢ69ϥΠςΟϯάɾ఻͑ํΛେ੾ʹ͢Δʣ

54. 4QFFEZ
εϐʔυʢλΠϛϯάྑ͘ಈ͘ɾ଎͍ͱ‫ͤ͞͡ײ‬Δʣ
଎͍͸ਖ਼ٛ
଎͞͸ଟ͘ͷ՝୊ΛӅͯ͘͠ΕΔ
ͨͩ͠ɺ଎͞͸͙͢‫׳‬ΕΔ
஗͞͸ɺͦ͏‫෉޻͍ͳͤ͞͡ײ‬Λ
'BTUJTSJHIUFPVT'BTUIJEFTNBOZTIPSUDPNJOHT
)PXFWFS ZPVHFUVTFEUPUIFTQFFE5IFTMPXPOFT IPXFWFS BSFOPUTPFBTZUPHFUVTFEUP

55. ද͕ࣔඵ஗ΕΔͱച্͕ˋ‫ݮ‬গ͢Δ
NB[POͷ$ച্
ԯυϧ
೔͋ͨΓ
໿ԯԁͷ‫ݮ‬ऩ
*GUIFEJTQMBZJTEFMBZFECZTFDPOE4BMFTEFDSFBTFCZ

56. υϋςΟͷᮢ஋ɿ%PIFSUZ5ISFTIPME
ඵΛ௒͑ΔͱਓؒͷରԠ଎౓ͦͷ΋ͷ͕஗͘ͳΔ
೥ͷ‫Ͱڀݚ‬͸͋Δ͕ɺ
ਓؒͷຊ࣭ ੑೳ ͸ͦΕ΄ͲมΘΒͳ͍
ΠϥΠϥແ͠Ͱ࢖͑ΔγεςϜͷԠ౴଎౓͸ඵҎ಺
ඵΛ௒͑ΔͱϢʔβʔͷੜ࢈ੑ͕֨ஈʹམͪΔ
5IFSFTQPOTFUJNFPGBTZTUFNUIBUDBOCFVTFE
XJUIPVUGSVTUSBUJPOJTXJUIJOTFDPOET
*GJUFYDFFETTFDPOET VTFSQSPEVDUJWJUZ
ESPQTESBNBUJDBMMZ
via. https://daverupert.com/2015/06/doherty-threshold/

57. ɹɹɹ$PNNVOJDBUJPOT
ɹɹɹɹίϛϡχέʔγϣϯʢ69ϥΠςΟϯάɾ఻͑ํΛେ੾ʹ͢Δʣ
࡞Γखͷ౎߹Ͱ͸ͳ͘
૬खͷ͜ͱΛߟ͑ͨ‫ݴ‬༿‫͍ݣ‬Λ
จ‫ݴ‬ΛϙδςΟϒʹ
จ‫ݴ‬͸ίετରޮՌ͕ͱͯ΋ߴ͍
/PUGPSUIFDSFBUPSTDPOWFOJFODF6TFXPSETXJUIUIFPUIFSQFSTPOJONJOE
.BLFUIFXPSEJOHQPTJUJWF#FUUFSXPSEJOHJTWFSZDPTUFGGFDUJWF

58. ɹɹ.JDSP*OUFSBDUJPOT
ɹɹɹɹɹɹϚΠΫϩΠϯλϥΫγϣϯʢద੾ͳ൓ԠɾҾ͔͔ͬΓΛऔΓআ͘ʣ
ͪΐͬͱͨ͠Ҿ͔͔ͬΓΛআ‫ڈ‬
͟Βͭ͘ମ‫ݧ‬ΛͳΊΒ͔ͳମ‫ʹݧ‬
༧૝λΠϛϯάͷ߹ͬͨ൓Ԡ΍
࢖͏ָ͠͞ɺখ͞ͳୡ੒‫ײ‬Λ
3FNPWFTBMJUUMFUVHHJOH.BLFBSPVHIFYQFSJFODFBTNPPUIFYQFSJFODF
XFMMUJNFESFTQPOTFUIFQMFBTVSFPGVTJOHJU BOEUIFTNBMMTFOTFPGBDDPNQMJTINFOU

59. デジタルデバイスのUIアニメーションは 300ms〜400ms（最少で150ms）
ૢ࡞͔ͯ͠Β൓Ԡ͢Δͷ͕ૉૣ͗͢Δͱɺ
ࣗ෼͕ૢ࡞ͯ͠ಈ͔࣮ͨ͠‫͍ͳ͕͠ײ‬
ࢭ·ͬͨͱೝࣝ͢Δʹ͸ɺ
͕͔͔࣌ؒΔɻඵͰ͸ແ͍
主要な動きの前後も重要
ʙNT ʙNT
NTʙNT

60. 4QFFEZ
εϐʔυʢλΠϛϯάྑ͘ಈ͘ɾ଎͍ͱ‫ͤ͞͡ײ‬Δʣ
ɹɹ.JDSP*OUFSBDUJPOT
ɹɹɹɹɹɹϚΠΫϩΠϯλϥΫγϣϯʢద੾ͳ൓ԠɾҾ͔͔ͬΓΛऔΓআ͘ʣ
ɹɹɹ$PNNVOJDBUJPOT
ɹɹɹɹίϛϡχέʔγϣϯʢ69ϥΠςΟϯάɾ఻͑ํΛେ੾ʹ͢Δʣ

61. ϦϦʔε΍ϦχϡʔΞϧΛ
ಛผͳग़དྷࣄʹͤͣ೔ৗʹ
օ͕࣋ͭʮ‫׳‬ΕʯΛେ੾ʹ
‫͔ͮؾ‬Εͳ͍มԽΛଓ͚Δ
%POUNBLFSFOFXBMT/PUBTQFDJBMFWFOU
$IFSJTIUIFIBCJUVBUJPOUIBUXFBMMIBWF
$POUJOVFUPNBLFDIBOHFTUIBUHPVOOPUJDFE

62. ͦͷ··Ͱ͍͍
,FFQJUUIBUXBZ
Unsplash Christophe Hautier

63. Ͱ΋ த਎͸ຏ͜͏
ࡉ͔͍ͱ͜ΖΛ
վળ͍ͯ͜͠͏
#VU MFUTQPMJTI
UIFJOTJEF
-FUTJNQSPWF
UIFEFUBJMT
Unsplash Vorsen Furniture
Unsplash Zoltan Tasi

64. গͭͮ͠ྑ͍ํ޲ʹվળΛੵΈॏͶΔ͜ͱͰɺେ͖ͳมԽΛ
-FUTNBLFBCJHDIBOHFCZBDDVNVMBUJOHJNQSPWFNFOUTJOUIFSJHIUEJSFDUJPOMJUUMFCZMJUUMF
Unsplash Chris Lawton

65. Thank you. @yukio_andoh
→ Let's continue AMA Session.

66. Thank you. @yukio_andoh
→ Let's continue AMA Session.

67. 5IBOLZPV
!ZVLJP@BOEPI
ˠ-FUTDPOUJOVF.4FTTJPO
EFTJHOTQSJOUTVCTUBDLDPN

68. օ͞Μʹͱͬͯͷ
ʮͦͷ··Ͱ͍͍ࣄʯͱ͸ʁ
ʮม͍͖͍͑ͯͨࣄʯͱ͸ʁ
ˠ-FUTDPOUJOVF.4FTTJPO
EFTJHOTQSJOUTVCTUBDLDPN