さらに便利になった最新版SketchとMaterial Theme Editor

2018年11月25日に開催されたHTML5 Conferenceでの講演資料。

Transcript

1. ͞Βʹศརʹͳͬͨ࠷৽൛4LFUDIͱ

   .BUFSJBM5IFNF&EJUPS
   ࢁຊຑඒ
   

   View Slide

2. ࢁຊຑඒ
   ೥͔ΒϑϦʔϥϯε
   8FC੍࡞ɺέʔλΠαΠτ੍࡞ͳͲ
   ೥
   "OESPJEͷձʹߦͬͨ͜ͱ͕͖͔͚ͬͰ
   εϚʔτϑΥϯΞϓϦͷ6*σβΠϯʹಛԽɻ
   اըஈ֊͔ΒϓϩδΣΫτϝϯόʔͱͯ͠

   ࢀՃ͢Δ͜ͱ͕΄ͱΜͲɻ
   ౦༸ඒज़ֶߍɺϩΫφφϫʔΫγϣοϓߨࢣ
   

   View Slide

3. ΋͘͡
   w 4LFUDIWFSͰԿ͕มΘͬͨͷ͔
   6*ͷ࡮৽
   μʔΫϞʔυ
   ωετ͞Εͨϒʔϧԋࢉ
   σʔλ
   4ZNCPM಺ͷ5FYU4UZMFΦʔόʔϥΠυ
   w .BUFSJBM5IFNF&EJUPS
   

   View Slide

4. 6*࡮৽
   

   View Slide

5. 6*͕৽͘͠ͳͬͨΑʂ
   

   View Slide

6. ͪͳΈʹ͜Ε͸چόʔδϣϯͰ͢
   

   View Slide

7. ৽
   چ
   πʔϧόʔ
   3FTJ[JOH
   ৽ چ
   

   View Slide

8. μʔΫϞʔυ
   

   View Slide

9. .BD04.PKBWF
   
   

   View Slide

10. ϥΠτ
    

    View Slide

11. μʔΫ
    

    View Slide

12. ϒʔϧԋࢉ
    

    View Slide

13. ෳ߹ਤܗ
    

    View Slide

14. ςΩετͷ··݁߹Ͱ͖ΔΑ͏ʹͳͬͨʂ
    

    View Slide

15. چόʔδϣϯͰ͸ʜ
    ςΩετΛΞ΢τϥΠϯԽͯ͠

    ύεσʔλʹ͠ͳ͍ͱ݁߹Ͱ͖ͳ͔ͬͨ
    

    View Slide

16. มߋ͕ͱͯ΋ָʹͳͬͨ
    

    View Slide

17. σʔλ
    

    View Slide

18. μϛʔσʔλΛೖྗͯ͘͠ΕΔϓϥάΠϯ
    

    View Slide

19. $SBGU
    

    View Slide

20. $SBGUإࣸਅ΍໊લ
    

    View Slide

21. 4LFUDI͚ͩͰͰ͖ΔΑ͏ʹͳΓ·ͨ͠ʂ
    

    View Slide

22. إࣸਅΛϥϯμϜͰදࣔ
    

    View Slide

23. إࣸਅΛϥϯμϜͰදࣔ
    

    View Slide

24. ਓ໊ΛϥϯμϜͰදࣔ
    

    View Slide

25. ਓ໊ΛϥϯμϜͰදࣔ
    

    View Slide

26. ೔ຊਓͷإࣸਅΛද͍ࣔͨ͠৔߹͸ࣗ෼Ͱ༻ҙ͢Δ
    ϩʔΧϧɺ%SPQCPYͳͲʹ

    ը૾ૉࡐΛೖΕ͓ͯ͘
    

    View Slide

27. ೔ຊਓ໊Λද͍ࣔͨ͠৔߹͸σʔλΛࣗ෼Ͱ࡞Δ
    ਓ෼͘Β͍࡞͓͚ͬͯ͹

    ඃΒͳ͍
    

    View Slide

28. .BDͷςΩετΤσοτͷ৔߹
    ϦονςΩετͩͱ

    4LFUDIʹಡΈࠐΊ·ͤΜ
    

    View Slide

29. 4LFUDI1SFGFSFODFTʜ%BUB
    ͔͜͜Β௥Ճ͢Δ
    

    View Slide

30. ೔ຊਓࣸਅ΍໊લ͕ϥϯμϜͰೖΓ·͢
    

    View Slide

31. 4ZNCPM಺ʹ΋ద༻Ͱ͖Δ
    

    View Slide

32. ෳ਺4ZNCPMʹ͍ͬ΃Μʹద༻Ͱ͖Δ
    

    View Slide

33. 4ZNCPM಺ͷ

    5FYU4UZMFΦʔόʔϥΠυ
    

    View Slide

34. %JTBCMFEΛ࡞Ζ͏ͱ͢Δͱʜ
    

    View Slide

35. ςΩετ΋4ZNCPMʹ͢Δඞཁ͕͋ͬͨ
    4ZNCPMͩΒ͚ʹͳͬͯ͠·͏
    %FGBVMU
    %JTBCMFE
    

    View Slide

36. ςΩετͷ4UZMFΛมߋͰ͖ΔΑ͏ʹͳͬͨͷͰ
    

    View Slide

37. 4ZNCPMʹ͠ͳͯ͘0,
    εοΩϦʂʂ
    

    View Slide

38. ࠓճͷΞοϓσʔτͷॏཁͳϙΠϯτ
    

    
    ςΩετϨΠϠʔͷ··ύεͷ݁߹͕Ͱ͖Δ

    
    ϓϥάΠϯʹཔΒͣμϛʔσʔλ͕ೖΕΒΕΔ

    
    4ZNCPMͷੜ੒Λ࠷খݶʹ཈͑ΒΕΔ
    

    View Slide

39. .BUFSJBM5IFNF&EJUPS
    

    View Slide

40. .BUFSJBM5IFNJOH

    ϚςϦΞϧςʔϚ
    

    View Slide

41. View Slide

42. .BUFSJBM5IFNF&EJUPS
    

    View Slide

43. 4LFUDIͷ-JCSBSZͱͯ͠࡞੒͞ΕΔ
    

    View Slide

44. 4LFUDIͷ-JCSBSZʹ௥Ճ͞Εͯ·͢ʂ
    

    View Slide

45. 4IBQF
    

    View Slide

46. $PMPS
    

    View Slide

47. 5ZQPHSBQIZ
    

    View Slide

48. $PNQPOFOU

    6*෦඼
    

    View Slide

49. $PNQPOFOUT
    

    View Slide

50. $PNQPOFOUT
    ͨ͘͞Μͷίϯϙʔωϯτ͕
    ༻ҙ͞Ε͍ͯ·͢
    

    View Slide

51. .BUFSJBM5IFNF&EJUPSͰ࡞੒͞Εͨ$PNQPOFOUT
    

    View Slide

52. σβΠϯͨ͠ʂ
    

    View Slide

53. (BMMFSZ
    

    View Slide

54. (BMMFSZʹVQMPBE
    

    View Slide

55. (BMMFSZ
    

    View Slide

56. (BMMFSZ
    EFWFMPQϖʔδ͕։͘
    

    View Slide

57. "OESPJE։ൃ༻υΩϡϝϯτ
    ίʔυΛίϐϖͰ
    ΞϓϦΛ࣮૷Ͱ͖Δ
    

    View Slide

58. ͦͷଞϓϥοτϑΥʔϜ
    

    View Slide

59. (BMMFSZJ04ϓϩδΣΫτ
    J04༻ͷυΩϡϝϯτ΁ϦϯΫ
    

    View Slide

60. J04։ൃ༻υΩϡϝϯτ
    ศརͩʂ
    

    View Slide

61. (BMMFSZͱ;FQMJOͷҧ͍
    (BMMFSZ
    σβΠϯϑΝΠϧͷ࣮૷৘ใΛڞ༗ɻ

    .BUFSJBM5IFNF&EJUPSͱซ༻͢Δ͜ͱ
    Ͱɺ։ൃ༻υΩϡϝϯτʹ௚઀ΞΫηεͰ͖Δ
    Α͏ʹͳΔɻϚςϦΞϧσβΠϯઐ༻πʔϧɻ
    ;FQMJO σβΠϯϑΝΠϧͷ࣮૷৘ใΛڞ༗ɻ

    ը૾BTTFUTͷFYQPSU΍ΧϥʔύϨοτͷ؅
    ཧͳͲ͕Մೳɻ
    

    View Slide

62. ;FQMJO
    

    View Slide

63. ;FQMJO
    

    View Slide

64. ;FQMJO
    

    View Slide

65. ;FQMJO
    BTTFUT໊ͷ֬ೝ΍
    FYQPSU͕Ͱ͖Δ
    

    View Slide

66. (BMMFSZ
    BTTFUT໊ͷ֬ೝ΍
    FYQPSUػೳ͸ແ͍
    

    View Slide

67. .BUFSJBM5IFNF&EJUPSʹ͸க໋తͳ໰୊͕͋Δʜ
    ೔ຊޠॻମΛ

    ࢖͍͍ͨΜ͚ͩͲʜ
    

    View Slide

68. ࿨จϑΥϯτ໰୊
    

    View Slide

69. ࿨จϑΥϯτ໰୊
    ϑΥϯταΠζͷ

    ਺஋͕খ਺఺ʹPS[
    

    View Slide

70. ࿕ใʂʂʂ
    ݱࡏ(PPHMFͰ͸ɺ

    ͜ͷ໰୊Λղܾ͢Δ΂͘

    Ұੜݒ໋։ൃதͱ͍͏͜ͱͰ͢ʂ
    

    View Slide

71. .BUFSJBM5IFNF&EJUPS(BMMFSZͰɺ

    σβΠϯ͔Β։ൃ·Ͱ
    Ұ؏ͯ͠(PPHMFͷαʔϏεͷϝϦοτΛ
    ϑϧͰڗड͢Δ͜ͱ͕Ͱ͖Δɻ
    

    View Slide

72. ͓·͚
    ࠷ۙɺΦϯϥΠϯͷ
    σβΠϯπʔϧ͕
    Ξπ͍Ͱ͢Ͷɻ
    

    View Slide

73. 8FC੍࡞ݱ৔Ͱ
    ϨεϙϯγϒͷσβΠϯ͕
    )5.-Ͳ͕ͬͪॻ͘ͷʁ
    

    View Slide

74. 456%*0
    

    View Slide

75. GPS1$
    

    View Slide

76. GPS5BCMFU
    

    View Slide

77. GPS.PCJMF
    

    View Slide

78. ϨΠΞ΢τͷઃఆ
    

    View Slide

79. νʔϜʹڞ༗͢Ε͹୭Ͱ΋ߋ৽Ͱ͖Δ
    ΍Γ·͢Αʔ
    ΑΖ͘͠ʔ
    

    View Slide

80. ΞϓϦͷΞοϓσʔτͱ͔Ͱ
    ͏͏ɺ๩͍͠ɻ
    εΫϦʔϯγϣοτ
    ߋ৽ͯ͠ʙ
    

    View Slide

81. $BOWB
    

    View Slide

82. ϒϥ΢βͰ؆୯ૢ࡞
    

    View Slide

83. νʔϜʹڞ༗͢Ε͹୭Ͱ΋ߋ৽Ͱ͖Δ
    ࣗ෼Ͱ
    ߋ৽Ͱ͖Δʂʂ
    

    View Slide

84. ϩΫφφϫʔΫγϣοϓ4LFUDIೖ໳ߨ࠲
    

    View Slide