磨いて光らせるUI/UX

UI/UXの背景や用語の解説です

Transcript

1. ຏ͍ͯޫΒͤΔ
   69ೖ໳
   ʙϢʔβࢹ఺Ͱ69Λվળ͠Α͏ʂʙ
   

   View Slide

2. ࣗݾ঺հ
   69%.1.
   J04%FW
   "EWJTPS
   

   View Slide

3. ࠓճͷ69ͷ͓࿩͸
   Photo by: ioannis kounadeas
   

   View Slide

4. ΞδΣϯμ
   69ͱ͸
   69ͷඞཁੑ
   69ͷվળख๏
   ·ͱΊ
   

   View Slide

5. 69ͱ͸
   

   View Slide

6. 69ͷҙຯͬͯ
   ஌ͬͯ·͔͢ʁ
   

   View Slide

7. ͪΌΜͱఆٛ͸͋Δͷʁ
   

   View Slide

8. 69ఏএऀʹΑΔࢲతఆٛ
   CZχʔϧηϯɾϊʔϚϯɾάϧʔϓ
   IUUQXXXOOHSPVQDPN
   

   View Slide

9. %"ϊʔϚϯത࢜
   

   View Slide

10. Ϡίϒɾχʔϧηϯത࢜
    

    View Slide

11. IUUQXXXOOHSPVQDPNBSUJDMFTEFpOJUJPOVTFSFYQFSJFODF
    

    View Slide

12. ސ٬ͷχʔζΛػೳతͳຬ଍ͷΈʹཹ·Βͣ
    Ϣʔβͷମݧʹ͓͚ΔتͼΛ΋ͨΒͨ͢Ίʹ
    ϓϩμΫτʹؔΘΔෳ਺ͷઐ໳෼໺͕
    ༥߹ͯ͠ఏڙ͢Δ
    1IPUPCZ+TPO8IJUUBLFS
    ʻཁ໿ʼ
    

    View Slide

13. ϓϩμΫτͷ࢖༻ɾॴ༗ͳͲΛ௨ͯ͡
    ਓ͕ؒೝ஌͢Δ༗ҙٛͳମݧͷ͜ͱ
    ϓϩμΫτΛར༻͢Δաఔͷ඼࣭Λॏࢹ͠
    Ϣʔβʔͷਅʹ΍Γ͍ͨ͜ͱΛ
    ʮָ͘͠ʯʮ໘ന͘ʯʮ৺஍Α͘ʯ
    ʹߦ͑Δ఺ΛlఏڙՁ஋zͱͯ͠
    ߟ͑Δίϯηϓτ
    ʻ69ఆ֦ٛେղऍʼ
    

    View Slide

14. *40
    &SHPOPNJDTPGIVNBOTZTUFNJOUFSBDUJPO
    1BSU)VNBODFOUSFEEFTJHOGPS
    JOUFSBDUJWFTZTUFNT
    

    View Slide

15. 
    ϓϩμΫτʹର͢Δ࢖༻͓Αͼ
    ࢖༻Λ༧૝ͨ࣌͠ͷ
    ਓͷ஌֮ͱ൓Ԡ
    ൈਮ*40ʢ*53ʹΑΔ࿨༁ʣ
    ࢖༻લɺ࢖༻தɺ࢖༻ޙʹൃੜ͢ΔɺϢʔβʔͷײ৘ɺ৴པΛؚΉ

    ϒϥϯυΠϝʔδɺݟͨ໨ɺػೳɺγεςϜɾύϑΥʔϚϯεͷ݁Ռ
    

    View Slide

16. Apple͸։෧ͷମݧ͑͞΋
    UXͱͯ͠ߴΊ͍ͯΔ
    

    View Slide

17. ͷ69Λத৺ʹ
    ࠓ೔͸
    

    View Slide

18. σβΠϯʢઃܭʣͷแׅؔ܎
    8IP0XOT:PVS691IJMPTPQIZ
    ਓؒ޻ֶσβΠϯ
    69σβΠϯ
    ϢʔβϏϦςΟ
    6*
    σβΠϯ
    *"
    σβΠϯ
    ίϛϡχέʔγϣϯ
    σβΠϯ
    Ұ෦վม
    

    View Slide

19. 69ͷཁૉΛ·ͱΊͨ
    ϋχΧϜߏ଄ਤ
    IUUQTFNBOUJDTUVEJPTDPNQVCMJDBUJPOTTFNBOUJDTQIQ
    

    View Slide

20. ͳͥ69Λॏࢹ͢Δͷʁ
    

    View Slide

21. QIPUPCZWJDUPSJBGVOFSBMTDPNBV
    ແ਺ͷϓϩμΫτ͕ϦϦʔε͞ΕΔ࣌୅
    

    ؀ڥมԽ

    ϓϩμΫτͱϢʔβͷ࣭ͷఈ্͛ʹΑΔՁ஋ͷมԽ
    ࠩผԽ
    ɹಠࣗੑͷߴ͍Ձ஋ఏڙͷඞཁੑ
    όΠϥϧੑ
    ɹײ৘ओମͷՁ஋ධՁʹΑΔߴ͍ݪಈྗ
    

    View Slide

22. Ϣʔβ͕҉໧తʹ
    ٻΊ͍ͯΔՁ஋
    ؀ڥมԽ
    

    View Slide

23. ࠩผԽ
    Ϣʔβͱڞʹ
    ங͖͋͛ΔಠࣗͷՁ஋
    QIPUPCZ$IJO-BX'JSNc3VTTFMM$IJO "UUPSOFZ
    

    View Slide

24. QIPUPCZ5XJUUFS #JSE 8BMMQBQFST
    ੒௕ઓུͷཁ
    όΠϥϧੑ
    

    View Slide

25. 69ͷվળख๏
    

    View Slide

26. Ͳ͏΍ͬͯ69Λ
    ߴΊΔͷʁ
    

    View Slide

27. ਓؒத৺ઃܭ )$%
    
    

    View Slide

28. *40
    )VNBODFOUSFEEFTJHOJTBOBQQSPBDIUPJOUFSBDUJWF
    TZTUFNTEFWFMPQNFOUUIBUBJNTUPNBLFTZTUFNT
    VTBCMFBOEVTFGVMCZGPDVTJOHPOUIFVTFST UIFJSOFFET
    BOESFRVJSFNFOUT BOECZBQQMZJOHIVNBOGBDUPST
    FSHPOPNJDT BOEVTBCJMJUZLOPXMFEHFBOEUFDIOJRVFT
    

    View Slide

29. ਓؒத৺ઃܭ͸ɺγεςϜΛ࢖͍΍͘͢࢖͍উखͷྑ
    ͍΋ͷʹ͢Δ͜ͱΛاਤͨ͠ΠϯλϥΫςΟϒγες
    Ϝ։ൃͷҰͭͷΞϓϩʔνͰ͋ΓɺϢʔβ΍ͦͷχʔ
    ζɺඞཁ৚݅ʹয఺Λ͋ͯɺਓؒ޻ֶ࿑ಇՊֶ΍Ϣʔ
    βϏϦςΟͷ஌ࣝ΍ٕ๏Λద༻͢Δ΋ͷͰ͋Δɻ
    ੿༁
    

    View Slide

30. IUUQIDEXPSLTDPNBQQSPBDI
    ᶃϢʔβΛ஌Δ
    ཁٻ೺Ѳ
    ᶄϢʔβͷ͜ͱΛߟ͑Δ
    ཁٻ෼ੳ
    ᶅղܾࡦΛߟ͑Δ
    ཁٻઃܭ
    ᶆ࣮ࢪɾݕূ͢Δ
    ཁٻධՁ
    ਓؒத৺ઃܭͷ̐αΠΫϧ
    

    View Slide

31. 1%$"
    IUUQKBXJLJQFEJBPSHXJLJ1%$"αΠΫϧ
    ඼࣭Ϛωδϝϯτ*40
    

    View Slide

32. খ͞ͳ੒ޭମݧΛੵΈॏͶͯ
    େ͖ͳ໨ඪͷୡ੒ʹͭͳ͍͛ͯ͘
    IUUQXXXQUDBQEDBDPNQEDBIUN
    

    View Slide

33. HCDϓϩηε
    IUUQXXXIDEOFUPSHIDEDPMVNOIDE@QIQ
    ਓؒத৺ઃܭਪਐػߏ
    

    View Slide

34. ೺ѲΠϯλϏϡʔ
    

    View Slide

35. ෼ੳϖϧιφγφϦΦ
    QIPUPCZOJTTBO
    

    View Slide

36. ઃܭϓϩτλΠϓϫΠϠϑϨʔϜ
    IUUQXFSLTUBUUTFU[LBTUFO(SVQQF@TDSFFOEFTJHO@IUNM
    

    View Slide

37. ධՁΞφϦςΟΫε
    

    View Slide

38. ར༻Ͱ͖Δ͜ͱ
    ৴པग़དྷΔ͜ͱ
    ڞײͰ͖Δ͜ͱ
    ϋοϐʔͳ͜ͱ
    

    View Slide

39. ·ͱΊ
    νʔϜΈΜͳͰ69ͷຊ࣭Λཧղ͠
    Ϣʔβͷࢹ఺Ͱܧଓతʹ69Λվળ͠Α͏
    Ϣʔβ͸αʔϏεɺϓϩμΫτͷՁ஋Λ
    69ͷྖҬʹ͓͍ͯٻΊ͍ͯΔ
    

    View Slide