SPA/PWA時代のWebデザインのお作法 / Stateful Web Design

DIST.31 「DIST 6周年記念イベント」

Transcript

1. 2020.02.15 DIST.31 HIROKI TANI
   18"儗➿ך8FCرؠ؎ٝךֶ⡲岀
   41"
   

   View Slide

2. View Slide

3. Web App
   

   View Slide

4. ͑͜ͷϒϩά
   

   View Slide

5. CyberAgent, Inc.
   UX Engineer / Developer Experts
   Hiroki Tani
   

   View Slide

6. PWA
   Progressive Web Apps
   

   View Slide

7. Progressive Web Apps | Google Developers
   Reliable
   ⥋걾䚍
   Fast
   鸞ׁ
   Engaging
   ؒٝ؜٦آ
   

   View Slide

8. App ؔؿٓ؎ٝ
   فحءُ鸐濼
   杝甧׃׋6*
   ؙٔٝ〳腉
   涪鋅䚍
   ؎ٝأز٦ٕ♶銲
   ˟أز،ַ׵ךتؐٝٗ٦سה؎ٝأز٦ٕ
   ˟
   Web
   +
   

   View Slide

9. SPA
   Single Page Application
   

   View Slide

10. HTML
    ϦΫΤετ Ϩεϙϯε
    

    View Slide

11. JSON
    ex.
    ϦΫΤετ Ϩεϙϯε
    

    View Slide

12. SPA
    PWA
    

    View Slide

13. ꨇ׃ְֿהְ׏׋׿כ䘌׸ת׃׳ֲ
    

    View Slide

14. 朐䡾׾䭯א8FC׾رؠ؎ׅٝ׷
    Design for “Stateful Web”
    

    View Slide

15. How to fix a bad user interface
    

    View Slide

16. UIσβΠϯͷόάΛݮΒͨ͢Ίͷࢪࡦ : could
    

    View Slide

17. UI Stack 瑞涯
    铣׫鴥׫
    鿇ⴓ涸
    ؒٓ٦
    椚䟝
    

    View Slide

18. UI Stack 瑞涯
    铣׫鴥׫
    鿇ⴓ涸
    ؒٓ٦
    椚䟝
    ֿֿח鸐濼ָ
    邌爙ׁ׸תׅ
    !
    

    View Slide

19. UI Stack 瑞涯
    铣׫鴥׫
    鿇ⴓ涸
    ؒٓ٦
    椚䟝
    鸐濼כ֮׶תׇ׿
    "
    

    View Slide

20. UI Stack 瑞涯
    铣׫鴥׫
    鿇ⴓ涸
    ؒٓ٦
    椚䟝
    

    View Slide

21. 瑞涯
    铣׫鴥׫
    鿇ⴓ涸
    ؒٓ٦
    椚䟝
    UI Stack
    

    View Slide

22. 瑞涯
    铣׫鴥׫
    鿇ⴓ涸
    ؒٓ٦
    椚䟝
    UI Stack
    

    View Slide

23. 瑞涯
    铣׫鴥׫
    鿇ⴓ涸
    ؒٓ٦
    椚䟝
    UI Stack
    ل٦آָ
    鋅אַ׶תׇ׿
    #
    

    View Slide

24. 瑞涯
    铣׫鴥׫
    鿇ⴓ涸
    ؒٓ٦
    椚䟝
    UI Stack
    铣׫鴥׫㣟侁
    $
    

    View Slide

25. 瑞涯
    铣׫鴥׫
    鿇ⴓ涸
    ؒٓ٦
    椚䟝
    UI Stack
    

    View Slide

26. չ㛇劤涸ח⦐ד㣐♱㣗דׅպ
    㣐♱㣗ׄׯזְ
    

    View Slide

27. View Slide

28. ☠ Layout shift & Fixed
    Ξϝϒϩ2016 ~ React/ReduxͰͭ͘ΔIsomorphic web app ~
    

    View Slide

29. UI Stack 瑞涯
    铣׫鴥׫
    鿇ⴓ涸
    ؒٓ٦
    椚䟝
    

    View Slide

30. Google χϡʔε
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. ٗ٦ر؍ؚٝ׾رؠ؎ׅٝ׷
    וֲ䖉׋ׇ׷ַ
    

    View Slide

35. View Slide

36. View Slide

37. 䞔㜠ך《䖤ח儗꟦ַַָ׏גְתׅ˘
    

    View Slide

38. Loading cat by domaso on Dribbble
    

    View Slide

39. Progress indicators - Material Design
    

    View Slide

40. Loading – Carbon Design System
    

    View Slide

41. View Slide

42. View Slide

43. WinTicket(΢Οϯνέοτ)
    

    View Slide

44. window.addEventListener(
    “offline",
    function(e){console.log("offline");}
    );
    window.addEventListener(
    “online",
    function(e){console.log("online");}
    );
    

    View Slide

45. Network ؔؿٓ؎ٝ
    ⡚鸞橆㞮
    鸞䏝ⵖꣲ
    ر٦ةإ٦ـ
    %
    

    View Slide

46. Technology Feature
    

    View Slide

47. View Slide

48. ύʔϛογϣϯͷ UX | Web Fundamentals | Google Developers
    

    View Slide

49. رؠ؎ش٦ך罋ִ׷ֿה㢳ֻזְ
    رؠ؎ٝה׃ג
    

    View Slide

50. Design Engineering
    

    View Slide

51. Design System
    

    View Slide

52. Jesse James Garrett
    劤䔲ך؝ٓنٖ٦ءّٝהכ
    رؠ؎ٝ׾㠖馉׃ח䫎־׷ֿהדכ֮׶תׇ׿կ
    ׉׸כرؠ؎ش٦ծؒٝآص،ծ
    ׉ך➭ךث٦يًٝغ٦ד
    넝ㅷ颵ךفٗتؙز׾
    圓眠ׅ׷顑⟣׾Ⱏ剣ׅ׷ֿהדׅɻ
    How to empower designers to code
    ― Diana Mounter, GitHub
    

    View Slide

53. Thank you
    @hiloki
    Special thanks: @shiba_mamehiko
    

    View Slide