手触りのよいウェブを考える / better-mobile-web

PWA Night vol.14で発表に使った資料です。
使いにくいWeb: https://bad-ui.netlify.com/
それのソースコード: https://github.com/mottox2/bad-ui

Transcript

1. 2020.03.18 PWA Night vol.14 / @mottox2
2. Gatsby, Gridsome, Next.js, etc … ͓࢓ࣄ Watching mottox2 @ ؿٔ٦ٓٝأ8FCؒٝآص، ࣗݾ঺հ ͻͱ͜ͱ Web 5 iOS/Android SaaS UI / 1.5
3. #pwanight ͳͥPWA։ൃͰʰUI/UXʱʹண໨͢Δͷ͔ʁ ‣ PWA ‣ ‣ UI ػೳཁ݅ ඇػೳཁ݅
4. #pwanight ࢝ΊͯͷεϚʔτϑΥϯ ‣ ‣ ‣ ‣ UI
5. #pwanight εϚϗͷಓ۩తͳੑ࣭
6. #pwanight PCͱεϚϗ
7. #pwanight ಓ۩ͱεϚϗ
8. #pwanight εϚϗͷಓ۩ੑ ‣ PC ‣ PC ‣
9. #pwanight ࢖͍΍͍͢ಓ۩ͱ͸Կ͔ʁ
10. #pwanight εϚϗͷಓ۩ੑ ‣ ‣ ‣ ‣ 1. ‣ 2. ‣ 3. ‣ 4.
11. #pwanight ࢖͍ʹ͍͘UIΛ࡞͖ͬͯ·ͨ͠ ‣ https://bad-ui.netlify.com ‣ GitHub: mottox 2 /bad-ui ‣ iOS Safari
12. #pwanight 1. ஗Ԇͳ͘ҧ࿨ײͷͳ͍ಈ͖ ‣ ‣ ‣ ‣ 0=>1 ‣ iOS bounce Scroll ‣ ‣ ‣ ‣
13. #pwanight 2. ࣗ෼ͷૢ࡞ͷϑΟʔυόοΫ͕ೝ஌Ͱ͖Δ ‣ ‣ ‣ ‣ ‣ ‣
14. #pwanight 3. ׳Ε΍ྨਪ͔Βಈ͔ͤΔ ‣ ‣ OS ‣ ‣ ‣ Web
15. #pwanight 4. ϝλϑΝʔΛར༻͢Δ ‣ ‣ Tinder ‣ ‣
16. #pwanight ๻ΒʹͰ͖Δ͜ͱ
17. #pwanight ࣮ػͰ͔֬ΊΔ ‣ ‣ ‣ ‣ iOS/Android ‣ Android iOS
18. #pwanight දݱྗΛ্͛Δ ‣ ‣ iOS CSS ‣ Ionic
19. #pwanight ΨΠυϥΠϯΛ஌Δ ‣ ‣ Human Interface Guidelines Material Design ‣ Material Design
20. #pwanight ΨΠυϥΠϯΛ஌Δ ‣ iOS Design Principles ‣ Direct Manipulation ‣ Feedback ‣ Metaphors ‣ User Control Human Interface Guidelines
21. #pwanight ΨΠυϥΠϯΛ஌Δ ‣ Web Component ‣ ‣ Motion, Gesture, Sound Material Design
22. #pwanight ΨΠυϥΠϯΛ஌Δ ‣ ‣ PWA UI Web Web
23. #pwanight ·ͱΊ
24. #pwanight ·ͱΊ ‣ Web ‣ ‣ ‣
25. #pwanight ࢀߟॻ੶ɾαΠτ ‣ (2015) ‣ Apple Human Interface Guidelines ‣ https://developer.apple.com/design/human-interface-guidelines/ ‣ Google Material Design ‣ https://material.io/
26. #pwanight Thank you! mottox2 @ ؿٔ٦ٓٝأ8FCؒٝآص،