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

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

Rikiya Ihara
July 04, 2016
6

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

Rikiya Ihara

July 04, 2016
Tweet

More Decks by Rikiya Ihara

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