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

Transcript

1. ϑϩϯτΤϯυ͔Βͷൃ૝ ҏݪ ྗ໵ / BA 2016.07.04 @ Yahoo!
2. @magi1125 • BAʢϏδωεɾΞʔΩςΫπʣ • γχΞɾΠϯϑΥϝʔγϣϯΞʔΩςΫτ • HCD-Netೝఆ ਓؒத৺ઃܭઐ໳Ո • ΢ΣϒΞΫηγϏϦςΟج൫ҕһձ WG1ҕһ • ڞஶʮσβΠχϯάWebΞΫηγϏϦςΟʯ
 ؂༁ʮίʔσΟϯάWebΞΫηγϏϦςΟʯ • Y!͞Μͱͷڞ࠵ΠϕϯτΛاըӡӦ
4. Y!͞Μͱͷڞ࠵Πϕϯτ • ΞΫηγϏϦςΟ΍ΔͧʂࡇΓ • ϚϧνσόΠε࣌୅ͷWebΞΫηγϏϦςΟ • ΞΫηγϏϦςΟ΍ΔͧʂՆࡇΓ • ো֐ऀࠩผղফ๏ࢪߦ໨લʂΞΫηγϏϦςΟରԠ
 ͳͥ࢝ΊΔʁͲ͏ਐΊΔʁ • ࣍ճ΋اըਐߦதʢ2016೥9݄ࠒ։࠵༧ఆʣ
5. ΞΫηγϏϦςΟࠇଳ
6. HTML5ࠇଳ ʮϑϩϯτΤϯυํ໘͔ΒܹࢗΛʯ
7. ܹࢗ is Կ • ஻Εͦ͏ͳωλͰࣾ಺Ξϯέʔτͯ͠Έͨ • ΞΫηγϏϦςΟʗHTMLʗWAI-ARIA • IAʗϓϩτλΠϐϯάπʔϧʗϢʔβʔௐࠪ • ΩϟϦΞύε • ݁ՌɺΩϟϦΞύε͕Ұ൪ਓؾͰͨ͠ • ԿΒ͔ܹࢗʹͳΔͱ͍͍ͷͰ͕͢
8. ࢲͷ͜Ε·ͰͷาΈ
9. 1999ʙ2016 Frontend IA/UI UX 2007 2011 2009 2014
10. Frontendܥ 1999ɿΞϧόΠτͰWeb੍࡞ʢϑϧCSSʣ 2004ɿ͍ΘΏΔͻͱͭͷHTMLίʔμʔ 2006ɿελΠϧΨΠυઃܭɾΨΠυϥΠϯࣥච 2008ɿҊ݅ن໛֦େˍάϩʔόϧԽ 2011ɿεϚϗαΠτରԠ 2014ɿཁ݅ఆٛɺQAʢύϑΥʔϚϯεɾΞΫηγϏϦςΟʣ
12. IA/UIܥ 1999ɿ͍ΘΏΔʮϗʔϜϖʔδͷ্ཱͪ͛ʯ 2002ɿΨϥέʔͷ઎͍ɾ଴डαΠτ 2007ɿ੡඼ϓϩϞʔγϣϯαΠτ 2009ɿاۀ৘ใܥɺެڞܥɺECαΠτ 2010ɿΠϯτϥɺγϛϡϨʔλɺϙΠϯτγεςϜ 2011ɿάϩʔόϧɺSNSɺϚϧνσόΠεʢRWDʣ 2014ɿεϚϗΞϓϦʢϋΠϒϦουʣ
14. ϢʔβϏϦςΟ/UXܥ 1999ɿώϡʔϦεςΟοΫධՁ 2005ɿΞΫηεϩά෼ੳ 2009ɿϓϩτλΠϐϯάʗϢʔβϏϦςΟςετ 2010ɿΞϯέʔτ 2011ɿϢʔβʔΠϯλϏϡʔ 2012ɿϖϧιφʗγφϦΦ 2014ɿϫʔΫγϣοϓ
16. ϑϩϯτΤϯυ͔Βͷൃ૝Ͱ৐Γ੾Δ 1. ࠓͬΆ͍ωλ΍େ͖ͦ͏ͳωλΛ࡯஌͢Δ 2. ͱΓ͋͑ͣʮ΍Γ·͢ʯͱݴͬͯΈΔ 3. ؔ܎ͦ͠͏ͳຊΛಡΜͰΈΔ 4. ͋ͱ͸࡞Γͳ͕Βߟ͑Δ
17. ʮ࡞ΕΔʯͱ৐Γ͖ΕΔཧ༝
18. ࡞ΕΔ
 ʹઃܭҙਤ͕ݟ͑ͯ͘Δ
19. ࡞ΕΔʹઃܭҙਤ͕ݟ͑ͯ͘Δ • ελΠϧΨΠυɺ೔ʑ࡞ͬͯ·͢ΑͶɺ͖ͬͱ • ͭ·ΓUIύʔπͷछྨɺ࣮͸ͦΕͳΓʹ஌ͬͯΔ͸ͣ • ͜ΕΒΛύʔπ୯ମͰͳ͘
 ΠσΟΦϜͷύλʔϯʢ׳༻දݱʣͰݟͯΈΔ • ύλʔϯ͕ཧղͰ͖Δͱจ຺͕ݟ͑ͯ͘Δ • จ຺ͷཧղʹΑͬͯIA/UIͷҙਤ͕Θ͔Δ
20. 1BSUT *EJPN $POUFYU $PODFQU
24. ࡞ΕΔ
 ʹ ҙਤʹରͯ͠ʮͳͥʁʯ͕ੜ·ΕΔ
25. ࡞ΕΔʹҙਤʹରͯ͠ʮͳͥʁʯ͕ੜ·ΕΔ • จ຺͕ཧղͰ͖Δͱཁ݅΍ίϯηϓτ͕ݟ͑ͯ͘Δ • ʢσβΠφʔʗσΟϨΫλʔʗͦͷଞͷਓʑ͕ʣ
 ͳΜͰ͜͏ͨ͠ʁͲ͏ͯ͜͠͏ͳͬͯΔʁ • ͍͕͍ͨʮ5ͭͷʰͳͥʱʯʹ౴͖͑Εͳ͍ • ࣗ෼Ͱௐ΂ͨ͘ͳͬͯ͘Δ • Α͏ͦ͜ɺUXͷੈք΁ʂ
28. ࡞ΕΔ
 ʹ ઃܭͨ͠Βฉ͚ΔɾࢼͤΔ
29. ࡞ΕΔʹઃܭͨ͠Βฉ͚ΔɾࢼͤΔ • ୭͔ʹཔ·ͣͱ΋ϓϩτλΠϐϯάͰ͖Δ • ϓϩτλΠϐϯάπʔϧ΋ۦ࢖Ͱ͖Δ • ࡞ΕΔͱྲྀΕ΍࣮ݱੑΛݕ౼Ͱ͖Δ • ࡞ΕΔͱςετ͕Ͱ͖Δ
33. ࡞ΕΔ
 ʹઃܭ࣌ʹࡉ෦Λݟಀ͞ͳ͍
34. ࡞ΕΔʹઃܭ࣌ʹࡉ෦Λݟಀ͞ͳ͍ • ࣮૷ऀ͸ʢποίΉͨΊʹʣUIͷࡉ෦Λ஌͍ͬͯΔ • ϚΠΫϩΠϯλϥΫγϣϯ͕ମݧΛࠨӈ͢Δ • ྫɿεΫϩʔϧλϒ
 ԡͨ͠ΒͲ͏ͳΔͷʁఀࢭҐஔ͸ʁϧʔϓ͢Δͷʁ • ྫɿΞίʔσΟΦϯ
 ഉଞʹ͢ΔͷʁεΫϩʔϧҐஔ͸ʁ಺෦ϦϯΫ͸ʁ • ྫɿϑΥʔϜ
 Τϥʔ৚݅͸ʁϝοηʔδ͸ʁͲ͜·Ͱϑϩϯτʁ
35. ྫɿεΫϩʔϧλϒ
36. ྫɿΞίʔσΟΦϯ
37. ྫɿϑΥʔϜ
39. ʮ࡞ΕΔʯਓ͕ઃܭ͠Α͏
40. ࡞ΕΔʹઃܭΛਪਐͰ͖Δ • ࡞ΕΔͱϓϨθϯͰ͖Δ • ࡞ΕΔͱओಋݖ͕ѲΕΔ • ࡞ΕΔͱ݁ՌʹίϛοτͰ͖Δ • ࡞ΕΔͱ޻਺͕ಡΊΔ ← ΦϚέ
41. ʮ࡞ΕΔʯ͔Βͦ͜ࢥ͍ͭ͘ • ʮߟ͑Δˠ࡞ͬͯΈΔʯ͔Β
 ʮ࡞ͬͯΈΔ → ߟ͑Δʯ΁ͷస׵ • ʮཔ·Ε͖ͯͪΜͱ࡞Δʯ͔Β
 ʮࣗ෼ͰͱΓ͋͑ͣ࡞ͬͯΈͨʯ΁ͷస׵
42. Ͳ͔͜Β΍Δͷʁ • ͱΓ͋͑ͣ୭ΑΓઌʹ۩ݱԽ͢Δ • ͱΓ͋͑ͣଞࣾࣄྫΛϞϊϚωͯ͠ΈΔ • IA/UIઃܭͷجຊ͸ʮ׳ྫʹԊ͏͜ͱʯ
45. ෭࡞༻ɿগͣͭ͠࡞Εͳ͘ͳΔ
46. ෭࡞༻ɿগͣͭ͠࡞Εͳ͘ͳΔ • ࣮ײͱͯ͠2014೥͙Β͍Ͱ͕࣌ࢭ·ͬͯΔ • CSSͷϒϥ΢β࣮૷ঢ়گΛͪΌΜͱ௥͑ͯΔͷʁ • JQuery͚ͩʁReact͍͡Εͳ͍͍ͯ͘ͷʁ • XCode / Android Studio͍͡Εͳ͍͍ͯ͘ͷʁ • WebGL͍͡Εͳ͍͍ͯ͘ͷʁʢ⇠ࠓ೔௥Ճͨ͠ʣ • ϓϩτλΠϐϯάπʔϧͰࡁ·͍͍ͯͯ͠ͷʁ • ΋͏ΠϚυΩͷʮ࡞ΕΔਓʯͰ͸ͳ͍ɻ࠶ೖ໳͕ඞཁ
47. Frontend ✕ IA/UX
 = σβΠϯ
48. ܹࢗɺ͋Γ·͔ͨ͠ʁ • Ͳ͜ʹεςʔλεΛৼΔ͔ɺͷΠνྫͰͨ͠ • 9݄͙Β͍ʹ·ͨY!͞ΜͱΠϕϯτ΍Γ·͢ • ·ͨͦͷͱ͖ʹ
49. ͋Γ͕ͱ͏͍͟͝·ͨ͠ @magi1125