Pro Yearly is on sale from $80 to $50! »

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

C5ab7cbecce50bc05680fc2574b89f47?s=47 hiloki
February 15, 2020

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

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

C5ab7cbecce50bc05680fc2574b89f47?s=128

hiloki

February 15, 2020
Tweet

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