Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドからの発想
Search
Rikiya Ihara / magi
July 04, 2016
0
13
フロントエンドからの発想
Rikiya Ihara / magi
July 04, 2016
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
最速[要出典]アクセシビリティチェック
magi1125
2
210
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
6.8k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
380
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
6
2.5k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
21k
アクセシビリティの効果測定
magi1125
1
8.2k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
15k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
6.8k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
6.9k
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
Building an army of robots
kneath
303
45k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Six Lessons from altMBA
skipperchong
27
3.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
A better future with KSS
kneath
238
17k
For a Future-Friendly Web
brad_frost
176
9.5k
Why Our Code Smells
bkeepers
PRO
336
57k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Transcript
ϑϩϯτΤϯυ͔Βͷൃ ҏݪ ྗ / BA 2016.07.04 @ Yahoo!
@magi1125 • BAʢϏδωεɾΞʔΩςΫπʣ • γχΞɾΠϯϑΥϝʔγϣϯΞʔΩςΫτ • HCD-Netೝఆ ਓؒத৺ઃܭઐՈ • ΣϒΞΫηγϏϦςΟج൫ҕһձ
WG1ҕһ • ڞஶʮσβΠχϯάWebΞΫηγϏϦςΟʯ ༁ʮίʔσΟϯάWebΞΫηγϏϦςΟʯ • Y!͞Μͱͷڞ࠵ΠϕϯτΛاըӡӦ
None
Y!͞Μͱͷڞ࠵Πϕϯτ • ΞΫηγϏϦςΟΔͧʂࡇΓ • ϚϧνσόΠε࣌ͷWebΞΫηγϏϦςΟ • ΞΫηγϏϦςΟΔͧʂՆࡇΓ • োऀࠩผղফ๏ࢪߦલʂΞΫηγϏϦςΟରԠ ͳͥ࢝ΊΔʁͲ͏ਐΊΔʁ
• ࣍ճاըਐߦதʢ20169݄ࠒ։࠵༧ఆʣ
ΞΫηγϏϦςΟࠇଳ
HTML5ࠇଳ ʮϑϩϯτΤϯυํ໘͔ΒܹΛʯ
ܹ is Կ • Εͦ͏ͳωλͰࣾΞϯέʔτͯ͠Έͨ • ΞΫηγϏϦςΟʗHTMLʗWAI-ARIA • IAʗϓϩτλΠϐϯάπʔϧʗϢʔβʔௐࠪ •
ΩϟϦΞύε • ݁ՌɺΩϟϦΞύε͕Ұ൪ਓؾͰͨ͠ • ԿΒ͔ܹʹͳΔͱ͍͍ͷͰ͕͢
ࢲͷ͜Ε·ͰͷาΈ
1999ʙ2016 Frontend IA/UI UX 2007 2011 2009 2014
Frontendܥ 1999ɿΞϧόΠτͰWeb੍࡞ʢϑϧCSSʣ 2004ɿ͍ΘΏΔͻͱͭͷHTMLίʔμʔ 2006ɿελΠϧΨΠυઃܭɾΨΠυϥΠϯࣥච 2008ɿҊ݅ن֦େˍάϩʔόϧԽ 2011ɿεϚϗαΠτରԠ 2014ɿཁ݅ఆٛɺQAʢύϑΥʔϚϯεɾΞΫηγϏϦςΟʣ
None
IA/UIܥ 1999ɿ͍ΘΏΔʮϗʔϜϖʔδͷ্ཱͪ͛ʯ 2002ɿΨϥέʔͷ͍ɾडαΠτ 2007ɿϓϩϞʔγϣϯαΠτ 2009ɿاۀใܥɺެڞܥɺECαΠτ 2010ɿΠϯτϥɺγϛϡϨʔλɺϙΠϯτγεςϜ 2011ɿάϩʔόϧɺSNSɺϚϧνσόΠεʢRWDʣ 2014ɿεϚϗΞϓϦʢϋΠϒϦουʣ
None
ϢʔβϏϦςΟ/UXܥ 1999ɿώϡʔϦεςΟοΫධՁ 2005ɿΞΫηεϩάੳ 2009ɿϓϩτλΠϐϯάʗϢʔβϏϦςΟςετ 2010ɿΞϯέʔτ 2011ɿϢʔβʔΠϯλϏϡʔ 2012ɿϖϧιφʗγφϦΦ 2014ɿϫʔΫγϣοϓ
None
ϑϩϯτΤϯυ͔ΒͷൃͰΓΔ 1. ࠓͬΆ͍ωλେ͖ͦ͏ͳωλΛ͢Δ 2. ͱΓ͋͑ͣʮΓ·͢ʯͱݴͬͯΈΔ 3. ؔͦ͠͏ͳຊΛಡΜͰΈΔ 4. ͋ͱ࡞Γͳ͕Βߟ͑Δ
ʮ࡞ΕΔʯͱΓ͖ΕΔཧ༝
࡞ΕΔ ʹઃܭҙਤ͕ݟ͑ͯ͘Δ
࡞ΕΔʹઃܭҙਤ͕ݟ͑ͯ͘Δ • ελΠϧΨΠυɺʑ࡞ͬͯ·͢ΑͶɺ͖ͬͱ • ͭ·ΓUIύʔπͷछྨɺ࣮ͦΕͳΓʹͬͯΔͣ • ͜ΕΒΛύʔπ୯ମͰͳ͘ ΠσΟΦϜͷύλʔϯʢ׳༻දݱʣͰݟͯΈΔ • ύλʔϯ͕ཧղͰ͖Δͱจ຺͕ݟ͑ͯ͘Δ
• จ຺ͷཧղʹΑͬͯIA/UIͷҙਤ͕Θ͔Δ
1BSUT *EJPN $POUFYU $PODFQU
None
None
None
࡞ΕΔ ʹ ҙਤʹରͯ͠ʮͳͥʁʯ͕ੜ·ΕΔ
࡞ΕΔʹҙਤʹରͯ͠ʮͳͥʁʯ͕ੜ·ΕΔ • จ຺͕ཧղͰ͖Δͱཁ݅ίϯηϓτ͕ݟ͑ͯ͘Δ • ʢσβΠφʔʗσΟϨΫλʔʗͦͷଞͷਓʑ͕ʣ ͳΜͰ͜͏ͨ͠ʁͲ͏ͯ͜͠͏ͳͬͯΔʁ • ͍͕͍ͨʮ5ͭͷʰͳͥʱʯʹ͖͑Εͳ͍ • ࣗͰௐͨ͘ͳͬͯ͘Δ
• Α͏ͦ͜ɺUXͷੈքʂ
None
None
࡞ΕΔ ʹ ઃܭͨ͠Βฉ͚ΔɾࢼͤΔ
࡞ΕΔʹઃܭͨ͠Βฉ͚ΔɾࢼͤΔ • ୭͔ʹཔ·ͣͱϓϩτλΠϐϯάͰ͖Δ • ϓϩτλΠϐϯάπʔϧۦͰ͖Δ • ࡞ΕΔͱྲྀΕ࣮ݱੑΛݕ౼Ͱ͖Δ • ࡞ΕΔͱςετ͕Ͱ͖Δ
None
None
None
࡞ΕΔ ʹઃܭ࣌ʹࡉ෦Λݟಀ͞ͳ͍
࡞ΕΔʹઃܭ࣌ʹࡉ෦Λݟಀ͞ͳ͍ • ࣮ऀʢποίΉͨΊʹʣUIͷࡉ෦Λ͍ͬͯΔ • ϚΠΫϩΠϯλϥΫγϣϯ͕ମݧΛࠨӈ͢Δ • ྫɿεΫϩʔϧλϒ ԡͨ͠ΒͲ͏ͳΔͷʁఀࢭҐஔʁϧʔϓ͢Δͷʁ • ྫɿΞίʔσΟΦϯ
ഉଞʹ͢ΔͷʁεΫϩʔϧҐஔʁ෦ϦϯΫʁ • ྫɿϑΥʔϜ Τϥʔ݅ʁϝοηʔδʁͲ͜·Ͱϑϩϯτʁ
ྫɿεΫϩʔϧλϒ
ྫɿΞίʔσΟΦϯ
ྫɿϑΥʔϜ
None
ʮ࡞ΕΔʯਓ͕ઃܭ͠Α͏
࡞ΕΔʹઃܭΛਪਐͰ͖Δ • ࡞ΕΔͱϓϨθϯͰ͖Δ • ࡞ΕΔͱओಋݖ͕ѲΕΔ • ࡞ΕΔͱ݁ՌʹίϛοτͰ͖Δ • ࡞ΕΔͱ͕ಡΊΔ ←
ΦϚέ
ʮ࡞ΕΔʯ͔Βͦ͜ࢥ͍ͭ͘ • ʮߟ͑Δˠ࡞ͬͯΈΔʯ͔Β ʮ࡞ͬͯΈΔ → ߟ͑Δʯͷస • ʮཔ·Ε͖ͯͪΜͱ࡞Δʯ͔Β ʮࣗͰͱΓ͋͑ͣ࡞ͬͯΈͨʯͷస
Ͳ͔͜ΒΔͷʁ • ͱΓ͋͑ͣ୭ΑΓઌʹ۩ݱԽ͢Δ • ͱΓ͋͑ͣଞࣾࣄྫΛϞϊϚωͯ͠ΈΔ • IA/UIઃܭͷجຊʮ׳ྫʹԊ͏͜ͱʯ
None
None
෭࡞༻ɿগͣͭ͠࡞Εͳ͘ͳΔ
෭࡞༻ɿগͣͭ͠࡞Εͳ͘ͳΔ • ࣮ײͱͯ͠2014͙Β͍Ͱ͕࣌ࢭ·ͬͯΔ • CSSͷϒϥβ࣮ঢ়گΛͪΌΜͱ͑ͯΔͷʁ • JQuery͚ͩʁReact͍͡Εͳ͍͍ͯ͘ͷʁ • XCode /
Android Studio͍͡Εͳ͍͍ͯ͘ͷʁ • WebGL͍͡Εͳ͍͍ͯ͘ͷʁʢ⇠ࠓՃͨ͠ʣ • ϓϩτλΠϐϯάπʔϧͰࡁ·͍͍ͯͯ͠ͷʁ • ͏ΠϚυΩͷʮ࡞ΕΔਓʯͰͳ͍ɻ࠶ೖ͕ඞཁ
Frontend ✕ IA/UX = σβΠϯ
ܹɺ͋Γ·͔ͨ͠ʁ • Ͳ͜ʹεςʔλεΛৼΔ͔ɺͷΠνྫͰͨ͠ • 9݄͙Β͍ʹ·ͨY!͞ΜͱΠϕϯτΓ·͢ • ·ͨͦͷͱ͖ʹ
͋Γ͕ͱ͏͍͟͝·ͨ͠ @magi1125