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