Upgrade to Pro — share decks privately, control downloads, hide ads and more …

磨いて光らせるUI/UX

 磨いて光らせるUI/UX

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

yohei sugigami

March 24, 2014
Tweet

More Decks by yohei sugigami

Other Decks in Technology

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ϓϩηε
    [email protected]
    ਓؒத৺ઃܭਪਐػߏ

    View Slide

  34. ೺ѲΠϯλϏϡʔ

    View Slide

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

    View Slide

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

    View Slide

  37. ධՁΞφϦςΟΫε

    View Slide

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

    View Slide

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

    View Slide