Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

297a42b94a1bda236982ec1cd81089b6?s=47 mottox2
March 18, 2020

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

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

297a42b94a1bda236982ec1cd81089b6?s=128

mottox2

March 18, 2020
Tweet

More Decks by mottox2

Other Decks in Technology

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ؒٝآص،