$30 off During Our Annual Pro Sale. View Details »

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

mottox2
March 18, 2020

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

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

mottox2

March 18, 2020
Tweet

More Decks by mottox2

Other Decks in Technology

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