タブレットファーストと マルチデバイスUI

Adobe XDUG 大阪でお話した「タブレットファーストと マルチデバイスUI」です。前回のスライドより少しボリュームアップしています。

Transcript

1. View Slide

2. λϒϨοτϑΝʔετͱ
   ϚϧνσόΠε6*
   

   View Slide

3. :"5
   σβΠϯίϛϡχςΟ

   ʮσβΠϯϑϩϯτʯओ࠵
   ϑϦʔϥϯε
   σβΠφʔσϕϩούʔ
   :"5ͷCMPHΛӡӦ
   

   View Slide

4. :"5ͷ#MPH
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. ࢓ࣄ಺༰
    w αΠτͷઃܭɾσβΠϯ
    w 69σβΠϯ
    w ϑϩϯτΤϯυɺόοΫΤϯυ
    w 8PSE1SFTT
    w ϥΠςΟϯά
    w ࣸਅࡱӨ
    w 6*σβΠϯ
    w ϚʔΫΞοϓɾίʔσΟϯά
    w αʔόʔαΠυ
    w ίϯαϧςΟϯά
    w ηϛφʔɺΠϕϯτओ࠵
    w ಈըࡱӨɾฤू
    

    View Slide

12. "EPCF9%ͷϑΣʔζ
    w αΠτͷઃܭɾσβΠϯ
    w 69σβΠϯ
    w ϑϩϯτΤϯυɺόοΫΤϯυ
    w 8PSE1SFTT
    w ϥΠςΟϯά
    w ࣸਅࡱӨ
    w 6*σβΠϯ
    w ϚʔΫΞοϓɾίʔσΟϯά
    w αʔόʔαΠυ
    w ίϯαϧςΟϯά
    w ηϛφʔɺΠϕϯτओ࠵
    w ಈըࡱӨɾฤू
    

    View Slide

13. λϒϨοτϑΝʔετʁ
    

    View Slide

14. ͜Μͳ͜ͱͳ͍Ͱ͔͢ʁ
    

    View Slide

15. λϒϨοτͷσβΠϯ͕ͳ͍
    w εέδϡʔϧͷ౎߹
    w ༧ࢉͷ౎߹
    w λϒϨοτϢʔβʔ͕গͳ͍
    

    View Slide

16. λϒϨοτϢʔβʔ͕গͳ͍
    

    View Slide

17. ༧૝͞ΕΔݟղ
    ࢖͍ͮΒ͍
    εϚʔτϑΥϯͰॆ෼
    ͔ͬ͠ΓݟΔͳΒ1$
    

    View Slide

18. ͦͷઌΛߟ͑Δ
    w λϒϨοτͰ͸࢖͍ͮΒ͍ͩΖ͏ͱ͍͏ϢʔβʔͷԱଌ
    w ෳ਺ਓͰݟΔࡍʹλϒϨοτ͸རศੑ͕ߴ͍
    w Ͳ͏͍͏৔ॴͰͦͷαʔϏεΛར༻͢Δͷ͔
    

    View Slide

19. ௚ײతͳ6*Λ
    ߟ͑ͯΈΑ͏
    σϞ
    

    View Slide

20. w ΩʔϘʔυΛ࢖͏λΠϛϯάͰ΋λοϓͰ͖Δ΋ͷΛ༻ҙ͢Δ
    w ͳΔ΂͘νΣοΫϘοΫε΍ϥδΦϘοΫεͳͲΛ༻ҙ͢Δ
    w ਺ࣈೖྗʹมΘΔ෺Λߟ͑Δ
    

    View Slide

21. ϨεϙϯγϒϞʔυ
    ΢Οϯυ΢Մม࣌ͷڍಈΛߟྀ͠ͳ͕ΒσβΠϯͰ͖Δ
    ઃఆύωϧ
    

    View Slide

22. ϨεϙϯγϒϞʔυ
    ΢Οϯυ΢Մม࣌ͷڍಈΛߟྀ͠ͳ͕ΒσβΠϯͰ͖Δ
    

    View Slide

23. View Slide

24. ࢖͏γʔϯΛ૝ఆ͢Δ
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. ϚϧνσόΠεΛߟ͑΍͍͢
    

    View Slide

29. ϚϧνσόΠεΛߟ͑΍͍͢
    

    View Slide

30. ϒϨʔΫϙΠϯτ
    w J1BE.JOJ
    w J1BE
    w J1BE
    w J1BE
    w J1BE
    w J1BE"JS
    w J1BE"JS
    w J1BE1SP
    Y
    w J1BE1SP
    w J1BE"JS ੈ୅
    
    w J1BE1SP
    w J1BE1SP
    Y
    Y
    Y
    

    View Slide

31. ϒϨʔΫϙΠϯτ
    w J1IPOF4&

    ϥϯυεέʔϓ
    Y
    ΋͘͠͸
    

    View Slide

32. ϒϨʔΫϙΠϯτ
    https://qiita.com/tomohisaota/items/f8857d01f328e34fb551
    ࢀߟʹ
    J1IPOFJ1BE"QQMF8BUDIղ૾౓ ը໘αΠζ
    ૣݟද2JJUB
    https://hashimotosan.hatenablog.jp/entry/2019/05/28/164834
    ϨεϙϯγϒσβΠϯͷϒϨΠΫϙΠϯτͷਖ਼ղ͸͜Εͩͬͨ<࠷৽൛>
    

    View Slide

33. ·ͱΊ
    w Ϣʔβʔ͕গͳ͍͚ͩͰ൑அ͍͍͔ͯ͠͸Α͘ߟ͑Δ
    w λονσόΠε޲͚ͷ6*͸1$Ͱ΋༏Ґ
    w ֤σόΠεʹΑͬͯϢʔβʔͷγʔϯ͸ҟͳΔ
    w ϨεϙϯγϒͷࠩҟΛߟ͑΍͍͢
    

    View Slide

34. λϒϨοτϑΝʔετ
    ͓͢͢ΊͰ͢
    

    View Slide

35. 6*ͷࢀߟʹ
    https://www.tripadvisor.jp/
    τϦοϓΞυόΠβʔ
    https://www.expedia.co.jp/
    ΤΫεϖσΟΞ
    

    View Slide

36. ࠂ஌
    DESIGNFRONT
    

    View Slide

37. σβΠϯϑϩϯτ
    wσβΠϯ͕޷͖
    wσβΠϯʹڵຯ͕͋Δ
    ͦΜͳਓୡ͕ू·ΔίϛϡχςΟ
    

    View Slide

38. σβΠϯϑϩϯτ
    IUUQTEFTJHOGSPOUDPOOQBTTDPNFWFOU
    

    View Slide

39. GBDFCPPLϖʔδ
    IUUQTXXXGBDFCPPLDPNHSPVQTEFTJHOGSPOU
    

    View Slide

40. ͝ਗ਼ௌ༗೉͏͍͟͝·ͨ͠
    @yat8823jp
    wp.yat-net.com
    ブログ
    

    View Slide

41. View Slide