フロントエンドからの発想

Transcript

1. ϑϩϯτΤϯυ͔Βͷൃ૝
   ҏݪ ྗ໵ / BA
   2016.07.04 @ Yahoo!
   

   View Slide

2. @magi1125
   • BAʢϏδωεɾΞʔΩςΫπʣ
   • γχΞɾΠϯϑΥϝʔγϣϯΞʔΩςΫτ
   • HCD-Netೝఆ ਓؒத৺ઃܭઐ໳Ո
   • ΢ΣϒΞΫηγϏϦςΟج൫ҕһձ WG1ҕһ
   • ڞஶʮσβΠχϯάWebΞΫηγϏϦςΟʯ

   ؂༁ʮίʔσΟϯάWebΞΫηγϏϦςΟʯ
   • Y!͞Μͱͷڞ࠵ΠϕϯτΛاըӡӦ
   

   View Slide

3. View Slide

4. Y!͞Μͱͷڞ࠵Πϕϯτ
   • ΞΫηγϏϦςΟ΍ΔͧʂࡇΓ
   • ϚϧνσόΠε࣌୅ͷWebΞΫηγϏϦςΟ
   • ΞΫηγϏϦςΟ΍ΔͧʂՆࡇΓ
   • ো֐ऀࠩผղফ๏ࢪߦ໨લʂΞΫηγϏϦςΟରԠ

   ͳͥ࢝ΊΔʁͲ͏ਐΊΔʁ
   • ࣍ճ΋اըਐߦதʢ2016೥9݄ࠒ։࠵༧ఆʣ
   

   View Slide

5. ΞΫηγϏϦςΟࠇଳ
   

   View Slide

6. HTML5ࠇଳ
   ʮϑϩϯτΤϯυํ໘͔ΒܹࢗΛʯ
   

   View Slide

7. ܹࢗ is Կ
   • ஻Εͦ͏ͳωλͰࣾ಺Ξϯέʔτͯ͠Έͨ
   • ΞΫηγϏϦςΟʗHTMLʗWAI-ARIA
   • IAʗϓϩτλΠϐϯάπʔϧʗϢʔβʔௐࠪ
   • ΩϟϦΞύε
   • ݁ՌɺΩϟϦΞύε͕Ұ൪ਓؾͰͨ͠
   • ԿΒ͔ܹࢗʹͳΔͱ͍͍ͷͰ͕͢
   

   View Slide

8. ࢲͷ͜Ε·ͰͷาΈ
   

   View Slide

9. 1999ʙ2016
   Frontend
   IA/UI
   UX
   2007 2011
   2009 2014
   

   View Slide

10. Frontendܥ
    1999ɿΞϧόΠτͰWeb੍࡞ʢϑϧCSSʣ
    2004ɿ͍ΘΏΔͻͱͭͷHTMLίʔμʔ
    2006ɿελΠϧΨΠυઃܭɾΨΠυϥΠϯࣥච
    2008ɿҊ݅ن໛֦େˍάϩʔόϧԽ
    2011ɿεϚϗαΠτରԠ
    2014ɿཁ݅ఆٛɺQAʢύϑΥʔϚϯεɾΞΫηγϏϦςΟʣ
    

    View Slide

11. View Slide

12. IA/UIܥ
    1999ɿ͍ΘΏΔʮϗʔϜϖʔδͷ্ཱͪ͛ʯ
    2002ɿΨϥέʔͷ઎͍ɾ଴डαΠτ
    2007ɿ੡඼ϓϩϞʔγϣϯαΠτ
    2009ɿاۀ৘ใܥɺެڞܥɺECαΠτ
    2010ɿΠϯτϥɺγϛϡϨʔλɺϙΠϯτγεςϜ
    2011ɿάϩʔόϧɺSNSɺϚϧνσόΠεʢRWDʣ
    2014ɿεϚϗΞϓϦʢϋΠϒϦουʣ
    

    View Slide

13. View Slide

14. ϢʔβϏϦςΟ/UXܥ
    1999ɿώϡʔϦεςΟοΫධՁ
    2005ɿΞΫηεϩά෼ੳ
    2009ɿϓϩτλΠϐϯάʗϢʔβϏϦςΟςετ
    2010ɿΞϯέʔτ
    2011ɿϢʔβʔΠϯλϏϡʔ
    2012ɿϖϧιφʗγφϦΦ
    2014ɿϫʔΫγϣοϓ
    

    View Slide

15. View Slide

16. ϑϩϯτΤϯυ͔Βͷൃ૝Ͱ৐Γ੾Δ
    1. ࠓͬΆ͍ωλ΍େ͖ͦ͏ͳωλΛ࡯஌͢Δ
    2. ͱΓ͋͑ͣʮ΍Γ·͢ʯͱݴͬͯΈΔ
    3. ؔ܎ͦ͠͏ͳຊΛಡΜͰΈΔ
    4. ͋ͱ͸࡞Γͳ͕Βߟ͑Δ
    

    View Slide

17. ʮ࡞ΕΔʯͱ৐Γ͖ΕΔཧ༝
    

    View Slide

18. ࡞ΕΔ

    ʹઃܭҙਤ͕ݟ͑ͯ͘Δ
    

    View Slide

19. ࡞ΕΔʹઃܭҙਤ͕ݟ͑ͯ͘Δ
    • ελΠϧΨΠυɺ೔ʑ࡞ͬͯ·͢ΑͶɺ͖ͬͱ
    • ͭ·ΓUIύʔπͷछྨɺ࣮͸ͦΕͳΓʹ஌ͬͯΔ͸ͣ
    • ͜ΕΒΛύʔπ୯ମͰͳ͘

    ΠσΟΦϜͷύλʔϯʢ׳༻දݱʣͰݟͯΈΔ
    • ύλʔϯ͕ཧղͰ͖Δͱจ຺͕ݟ͑ͯ͘Δ
    • จ຺ͷཧղʹΑͬͯIA/UIͷҙਤ͕Θ͔Δ
    

    View Slide

20. 1BSUT
    *EJPN
    $POUFYU
    $PODFQU
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. ࡞ΕΔ

    ʹ ҙਤʹରͯ͠ʮͳͥʁʯ͕ੜ·ΕΔ
    

    View Slide

25. ࡞ΕΔʹҙਤʹରͯ͠ʮͳͥʁʯ͕ੜ·ΕΔ
    • จ຺͕ཧղͰ͖Δͱཁ݅΍ίϯηϓτ͕ݟ͑ͯ͘Δ
    • ʢσβΠφʔʗσΟϨΫλʔʗͦͷଞͷਓʑ͕ʣ

    ͳΜͰ͜͏ͨ͠ʁͲ͏ͯ͜͠͏ͳͬͯΔʁ
    • ͍͕͍ͨʮ5ͭͷʰͳͥʱʯʹ౴͖͑Εͳ͍
    • ࣗ෼Ͱௐ΂ͨ͘ͳͬͯ͘Δ
    • Α͏ͦ͜ɺUXͷੈք΁ʂ
    

    View Slide

26. View Slide

27. View Slide

28. ࡞ΕΔ

    ʹ ઃܭͨ͠Βฉ͚ΔɾࢼͤΔ
    

    View Slide

29. ࡞ΕΔʹઃܭͨ͠Βฉ͚ΔɾࢼͤΔ
    • ୭͔ʹཔ·ͣͱ΋ϓϩτλΠϐϯάͰ͖Δ
    • ϓϩτλΠϐϯάπʔϧ΋ۦ࢖Ͱ͖Δ
    • ࡞ΕΔͱྲྀΕ΍࣮ݱੑΛݕ౼Ͱ͖Δ
    • ࡞ΕΔͱςετ͕Ͱ͖Δ
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. ࡞ΕΔ

    ʹઃܭ࣌ʹࡉ෦Λݟಀ͞ͳ͍
    

    View Slide

34. ࡞ΕΔʹઃܭ࣌ʹࡉ෦Λݟಀ͞ͳ͍
    • ࣮૷ऀ͸ʢποίΉͨΊʹʣUIͷࡉ෦Λ஌͍ͬͯΔ
    • ϚΠΫϩΠϯλϥΫγϣϯ͕ମݧΛࠨӈ͢Δ
    • ྫɿεΫϩʔϧλϒ

    ԡͨ͠ΒͲ͏ͳΔͷʁఀࢭҐஔ͸ʁϧʔϓ͢Δͷʁ
    • ྫɿΞίʔσΟΦϯ

    ഉଞʹ͢ΔͷʁεΫϩʔϧҐஔ͸ʁ಺෦ϦϯΫ͸ʁ
    • ྫɿϑΥʔϜ

    Τϥʔ৚݅͸ʁϝοηʔδ͸ʁͲ͜·Ͱϑϩϯτʁ
    

    View Slide

35. ྫɿεΫϩʔϧλϒ
    

    View Slide

36. ྫɿΞίʔσΟΦϯ
    

    View Slide

37. ྫɿϑΥʔϜ
    

    View Slide

38. View Slide

39. ʮ࡞ΕΔʯਓ͕ઃܭ͠Α͏
    

    View Slide

40. ࡞ΕΔʹઃܭΛਪਐͰ͖Δ
    • ࡞ΕΔͱϓϨθϯͰ͖Δ
    • ࡞ΕΔͱओಋݖ͕ѲΕΔ
    • ࡞ΕΔͱ݁ՌʹίϛοτͰ͖Δ
    • ࡞ΕΔͱ޻਺͕ಡΊΔ ← ΦϚέ
    

    View Slide

41. ʮ࡞ΕΔʯ͔Βͦ͜ࢥ͍ͭ͘
    • ʮߟ͑Δˠ࡞ͬͯΈΔʯ͔Β

    ʮ࡞ͬͯΈΔ → ߟ͑Δʯ΁ͷస׵
    • ʮཔ·Ε͖ͯͪΜͱ࡞Δʯ͔Β

    ʮࣗ෼ͰͱΓ͋͑ͣ࡞ͬͯΈͨʯ΁ͷస׵
    

    View Slide

42. Ͳ͔͜Β΍Δͷʁ
    • ͱΓ͋͑ͣ୭ΑΓઌʹ۩ݱԽ͢Δ
    • ͱΓ͋͑ͣଞࣾࣄྫΛϞϊϚωͯ͠ΈΔ
    • IA/UIઃܭͷجຊ͸ʮ׳ྫʹԊ͏͜ͱʯ
    

    View Slide

43. View Slide

44. View Slide

45. ෭࡞༻ɿগͣͭ͠࡞Εͳ͘ͳΔ
    

    View Slide

46. ෭࡞༻ɿগͣͭ͠࡞Εͳ͘ͳΔ
    • ࣮ײͱͯ͠2014೥͙Β͍Ͱ͕࣌ࢭ·ͬͯΔ
    • CSSͷϒϥ΢β࣮૷ঢ়گΛͪΌΜͱ௥͑ͯΔͷʁ
    • JQuery͚ͩʁReact͍͡Εͳ͍͍ͯ͘ͷʁ
    • XCode / Android Studio͍͡Εͳ͍͍ͯ͘ͷʁ
    • WebGL͍͡Εͳ͍͍ͯ͘ͷʁʢ⇠ࠓ೔௥Ճͨ͠ʣ
    • ϓϩτλΠϐϯάπʔϧͰࡁ·͍͍ͯͯ͠ͷʁ
    • ΋͏ΠϚυΩͷʮ࡞ΕΔਓʯͰ͸ͳ͍ɻ࠶ೖ໳͕ඞཁ
    

    View Slide

47. Frontend ✕ IA/UX

    = σβΠϯ
    

    View Slide

48. ܹࢗɺ͋Γ·͔ͨ͠ʁ
    • Ͳ͜ʹεςʔλεΛৼΔ͔ɺͷΠνྫͰͨ͠
    • 9݄͙Β͍ʹ·ͨY!͞ΜͱΠϕϯτ΍Γ·͢
    • ·ͨͦͷͱ͖ʹ
    

    View Slide

49. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    @magi1125
    

    View Slide