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