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
200
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
6.6k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
370
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
6
2.5k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
21k
アクセシビリティの効果測定
magi1125
1
8.1k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
15k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
6.8k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
6.9k
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
It's Worth the Effort
3n
184
28k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Being A Developer After 40
akosma
89
590k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
A Tale of Four Properties
chriscoyier
158
23k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Building Applications with DynamoDB
mza
93
6.2k
How STYLIGHT went responsive
nonsquared
98
5.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
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