手触りのよいウェブを考える / 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
   

   View Slide

2. 
   
   Gatsby, Gridsome, Next.js, etc
   …
   
   ͓࢓ࣄ
   Watching
   mottox2
   @
   ؿٔ٦ٓٝأ8FCؒٝآص،
   ࣗݾ঺հ
   ͻͱ͜ͱ
   Web 5
   iOS/Android
   SaaS UI / 1.5
   

   View Slide

3. #pwanight
   ͳͥPWA։ൃͰʰUI/UXʱʹண໨͢Δͷ͔ʁ
   ‣ PWA
   
   
   ‣
   
   
   ‣ UI
   ػೳཁ݅ ඇػೳཁ݅
   
   
   
   

   View Slide

4. #pwanight
   ࢝ΊͯͷεϚʔτϑΥϯ
   ‣
   
   
   ‣
   
   
   ‣
   
   
   ‣
   UI
   

   View Slide

5. #pwanight
   εϚϗͷಓ۩తͳੑ࣭
   

   View Slide

6. #pwanight
   PCͱεϚϗ
   

   View Slide

7. #pwanight
   ಓ۩ͱεϚϗ
   

   View Slide

8. #pwanight
   εϚϗͷಓ۩ੑ
   ‣ PC
   
   
   ‣ PC
   
   
   ‣
   

   View Slide

9. #pwanight
   ࢖͍΍͍͢ಓ۩ͱ͸Կ͔ʁ
   

   View Slide

10. #pwanight
    εϚϗͷಓ۩ੑ
    ‣
    
    
    ‣
    
    
    ‣
    
    
    ‣ 1.
    
    
    ‣ 2.
    
    
    ‣ 3.
    
    
    ‣ 4.
    

    View Slide

11. #pwanight
    ࢖͍ʹ͍͘UIΛ࡞͖ͬͯ·ͨ͠
    ‣ https://bad-ui.netlify.com
    
    
    ‣ GitHub: mottox
    2
    /bad-ui
    
    
    ‣ iOS Safari
    

    View Slide

12. #pwanight
    1. ஗Ԇͳ͘ҧ࿨ײͷͳ͍ಈ͖
    ‣
    
    
    ‣
    
    
    ‣
    
    
    ‣ 0=>1
    
    
    ‣ iOS bounce Scroll
    
    
    ‣
    
    
    ‣
    
    
    ‣
    
    
    ‣
    

    View Slide

13. #pwanight
    2. ࣗ෼ͷૢ࡞ͷϑΟʔυόοΫ͕ೝ஌Ͱ͖Δ
    ‣
    
    
    ‣
    
    
    ‣
    
    
    ‣
    
    
    ‣
    
    
    ‣
    

    View Slide

14. #pwanight
    3. ׳Ε΍ྨਪ͔Βಈ͔ͤΔ
    ‣
    
    
    ‣ OS
    
    
    ‣
    
    
    ‣
    
    
    ‣ Web
    

    View Slide

15. #pwanight
    4. ϝλϑΝʔΛར༻͢Δ
    ‣
    
    
    ‣ Tinder
    
    
    ‣
    
    
    ‣
    

    View Slide

16. #pwanight
    ๻ΒʹͰ͖Δ͜ͱ
    

    View Slide

17. #pwanight
    ࣮ػͰ͔֬ΊΔ
    ‣
    
    
    ‣
    
    
    ‣
    
    
    ‣ iOS/Android
    
    
    ‣ Android iOS
    

    View Slide

18. #pwanight
    දݱྗΛ্͛Δ
    ‣
    
    
    ‣ iOS CSS
    
    
    ‣ Ionic
    

    View Slide

19. #pwanight
    ΨΠυϥΠϯΛ஌Δ
    ‣
    
    
    ‣ Human Interface Guidelines Material Design
    
    
    ‣ Material Design
    

    View Slide

20. #pwanight
    ΨΠυϥΠϯΛ஌Δ
    ‣ iOS Design Principles
    
    
    ‣ Direct Manipulation
    
    
    ‣ Feedback
    
    
    ‣ Metaphors
    
    
    ‣ User Control
    Human Interface Guidelines
    

    View Slide

21. #pwanight
    ΨΠυϥΠϯΛ஌Δ
    ‣ Web Component
    
    
    ‣
    
    
    ‣ Motion, Gesture, Sound
    Material Design
    

    View Slide

22. #pwanight
    ΨΠυϥΠϯΛ஌Δ
    ‣
    
    
    ‣ PWA UI Web Web
    

    View Slide

23. #pwanight
    ·ͱΊ
    

    View Slide

24. #pwanight
    ·ͱΊ
    ‣ Web
    
    
    ‣
    
    
    ‣
    
    
    ‣
    

    View Slide

25. #pwanight
    ࢀߟॻ੶ɾαΠτ
    ‣ (2015)
    
    
    ‣ Apple Human Interface Guidelines
    
    
    ‣ https://developer.apple.com/design/human-interface-guidelines/
    
    
    ‣ Google Material Design
    
    
    ‣ https://material.io/
    

    View Slide

26. #pwanight
    Thank you!
    mottox2
    @
    ؿٔ٦ٓٝأ8FCؒٝآص،
    

    View Slide