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

Transcript

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

2. None

3. Web App

4. ͑͜ͷϒϩά

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

6. PWA Progressive Web Apps

7. Progressive Web Apps | Google Developers Reliable ⥋걾䚍 Fast 鸞ׁ

   Engaging ؒٝ؜٦آ

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

   +

9. SPA Single Page Application

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

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

12. SPA PWA

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

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

15. How to fix a bad user interface

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

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

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

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

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

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

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

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

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

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

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

27. None

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

    ~

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

30. Google χϡʔε

31. None
32. None
33. None

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

35. None
36. None

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

38. Loading cat by domaso on Dribbble

39. Progress indicators - Material Design

40. Loading – Carbon Design System

41. None
42. None

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

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

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

46. Technology Feature

47. None

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

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

50. Design Engineering

51. Design System

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

    to empower designers to code ― Diana Mounter, GitHub

53. Thank you @hiloki Special thanks: @shiba_mamehiko