$30 off During Our Annual Pro Sale. View Details »

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

asamieee7
November 25, 2018

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

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

asamieee7

November 25, 2018
Tweet

Other Decks in Design

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