Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

hiloki
February 15, 2020

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

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

hiloki

February 15, 2020
Tweet

More Decks by hiloki

Other Decks in Design

Transcript

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

    View full-size slide

  2. ͑͜ͷϒϩά

    View full-size slide

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

    View full-size slide

  4. PWA
    Progressive Web Apps

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. SPA
    Single Page Application

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. How to fix a bad user interface

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Google χϡʔε

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. Loading cat by domaso on Dribbble

    View full-size slide

  30. Progress indicators - Material Design

    View full-size slide

  31. Loading – Carbon Design System

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Technology Feature

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Design Engineering

    View full-size slide

  39. Design System

    View full-size slide

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

    View full-size slide

  41. Thank you
    @hiloki
    Special thanks: @shiba_mamehiko

    View full-size slide