デザインにおける 「アニメーション」を作るヒント

2017/11/29開催の【cloudpack デ部会】初心者歓迎! 第7回 UI改善に効果的！webアニメーション入門　で発表した登壇資料になります。

Transcript

1. σβΠϯʹ͓͚Δ
   ʮΞχϝʔγϣϯʯΛ࡞Δώϯτ XFE
   .BTBNJ
   ,BOFNPUP
2. DMPVEQBDL
   σβΠϯηΫγϣϯ ۚຊ
   ਖ਼ඒʢѪݘɿ·Δʣ σβΠφʔ΍ͬͯ·͢
   άϧʔϓϦʔμʔ΋΍ͬͯ·͢
   ͳΜͪΌͬͯσΟϨΫγϣϯ΋΍ͬͯ·͢ ʲΞχϝʔγϣϯวྺʳ
   %X৮Δલʹ'MBTIʴ"4ΛֶͿ
   $44͸ͪ·ͪ·͞ΘΔ͚ͩ
   +4ʁͳʹͦΕඒຯ͍͠ͷʁ
3. ͸͡Ίʹ 1
4. Ξχϝʔγϣϯɺ
   ࡞Γͨ͘ͳ͖ͬͯ·͔ͨ͠ʁ
5. ͳ͖ͬͯ·ͨ͠ΑͶʂʂ
6. ΞχϝʔγϣϯͷσβΠϯ 2
7. ΞχϝʔγϣϯΛσβΠϯ͢Δʁ
8. σβΠϯ͢Δʹ͸ɺϢʔβͷ͜ͱΛߟ͑ͳ͍ͱ͍͚ͳ͍ αΠτͷ
   τϯϚφΛ
   ଛͳΘͳ͍ ཉ͍͠৘ใʹ
   ͖ͪΜͱ
   ಋ͍ͯ͘ΕΔ ϢʔβΛ
   ෆշʹͤ͞ͳ͍
   ৭΍ಈ͖ Ϣʔβʔ͕շదͱײ͡ɺը໘্Ͱ࠷దͳ69ΛಘΒΕΔɻ
9. ಘ΋ݴΘΕ͵ؾ࣋ͪΑ͞ʂ
10. ؾ࣋ͪͷΑ͍Ξχϝʔγϣϯ 3
11. ؾ࣋ͪྑ͍
    
    ࣗવͰ͋Δ͜ͱ 3-1
12. FBTJOH
    UJNJOH w FBTFPVU
    w FBTFJO
    w FBTFJOPVU
    w MJOFBS ɹ
13. ҧ࿨ײΛײͤ͡͞ͳ͍͜ͱ
14. IUUQFBTJOHTOFUKB
15. IUUQTHPPHMT'DP6G
16. ؾ࣋ͪྑ͍
    
    ৺͕͜΋͍ͬͯΔ 3-2
17. EVSBUJPO Ξχϝʔγϣϯͷ࢝·Γ͔Β
    ऴΘΓΛOඵ TFDPOE Ͱઃఆ
 ྫʣT
    
    ඵ ɹ
18. Ϣʔβʔ͸ΠϥνͰ͋Δɻ ˞Πϥνʹ͔ͤͬͪͳͲͷؔ੢ห
19. Ϣʔβʔ΋ਓؒͰ͋Δɻ
20. Ϣʔβʔͷૢ࡞ ɹ ։࢝ ऴྃ τϦΨʔ Τϥʔ࣌ ɹ ɹ ૉૣ͍ Ώͬ͘Γ Ώͬ͘Γ ૉૣ͍ FY ϝχϡʔΛ։͘ FY Ϟʔμϧ͕։͘ FY ϝχϡʔΛด͡Δ FY ϞʔμϧΛด͡Δ Cheat Sheet ɹ
21. Ϣʔβʔͷ
    ૢ࡞ ɹ ։࢝ ऴྃ τϦΨʔ Τϥʔ࣌ ɹ ɹ ૉૣ͘ Ώͬ͘Γ Ώͬ͘Γ ૉૣ͘ FY ϝχϡʔΛ
    ։͘ FY Ϟʔμϧ͕
    ։͘ FY ϝχϡʔΛ
    ด͡Δ FY ϞʔμϧΛ
    ด͡Δ ਓ෇͖߹͍ʹྫ͑Δͱ ɹ Ϩεϙϯεૣ͘
    ࢓ࣄͷग़དྷΔਓ ༏͘͠ࢦఠ͠
    ࣍ͷߦಈΛଅ͢
    ྑ͍ਓ ༩͑Δҹ৅
22. Ϣʔβʔͷ
    ૢ࡞ ɹ ։࢝ ऴྃ τϦΨʔ Τϥʔ࣌ ɹ ɹ Ώͬ͘Γ ૉૣ͘ ૉૣ͘ Ώͬ͘Γ FY ϝχϡʔΛ
    ։͘ FY Ϟʔμϧ͕
    ։͘ FY ϝχϡʔΛ
    ด͡Δ FY ϞʔμϧΛ
    ด͡Δ ٯʹ͢Δͱʜ ɹ ͙͏ͨΒͰ
    Ѫ૝ͳ͠ ͓͜ΓͬΆ͍
    ࠜʹ࣋ͭλΠϓ ༩͑Δҹ৅
23. Ϣʔβʔ΋ਓؒͰ͋Δɻ
24. Ξχϝʔγϣϯ͸ίϛϡχέʔγϣϯ Ϣʔβʔ΋ਓؒͰ͋Δɻ
25. ·ͱΊ 4
26. ؾ࣋ͪྑ͍
    
    ৺͕͜΋͍ͬͯΔ ؾ࣋ͪྑ͍
    
    ࣗવͰ͋Δ͜ͱ ฏୱʹݟ͑ͳ͍ɺϦΞϧͳಈ͖Ͱ
    Ϣʔβʹҧ࿨ײΛײͤ͡͞ͳ͍ ΞχϝʔγϣϯΛ௨ͯ͡Ϣʔβͱ
    ίϛϡχέʔγϣϯΛऔΔͱ͍͏ؾ࣋ͪ
29. ಘ΋ݴΘΕ͵ؾ࣋ͪΑ͞ʂ