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

by mottox2

Slide 1

Slide 1 text

2020.03.18 PWA Night vol.14 / @mottox2

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

#pwanight PCͱεϚϗ

Slide 7

Slide 7 text

#pwanight ಓ۩ͱεϚϗ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

#pwanight ๻ΒʹͰ͖Δ͜ͱ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

#pwanight ·ͱΊ

Slide 24

Slide 24 text

#pwanight ·ͱΊ ‣ Web ‣ ‣ ‣

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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