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

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

Transcript

1. 2020.02.15 DIST.31 HIROKI TANI 18"儗➿ך8FCرؠ؎ٝךֶ⡲岀 41"
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. չ㛇劤涸ח⦐ד㣐♱㣗דׅպ 㣐♱㣗ׄׯזְ
28. ☠ Layout shift & Fixed Ξϝϒϩ2016 ~ React/ReduxͰͭ͘ΔIsomorphic web app ~
29. UI Stack 瑞涯 铣׫鴥׫ 鿇ⴓ涸 ؒٓ٦ 椚䟝
30. Google χϡʔε
34. ٗ٦ر؍ؚٝ׾رؠ؎ׅٝ׷ וֲ䖉׋ׇ׷ַ
37. 䞔㜠ך《䖤ח儗꟦ַַָ׏גְתׅ˘
38. Loading cat by domaso on Dribbble
39. Progress indicators - Material Design
40. Loading – Carbon Design System
43. WinTicket(΢Οϯνέοτ)
44. window.addEventListener( “offline", function(e){console.log("offline");} ); window.addEventListener( “online", function(e){console.log("online");} );
45. Network ؔؿٓ؎ٝ ⡚鸞橆㞮 鸞䏝ⵖꣲ ر٦ةإ٦ـ %
46. Technology Feature
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