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

sketch.app 基礎講座

puzzeljp
August 01, 2015

sketch.app 基礎講座

15/07/25 @puzzeljp we-b inc.
アイコン素材:http://cl.ly/2w091v3n2b0j

puzzeljp

August 01, 2015
Tweet

More Decks by puzzeljp

Other Decks in Technology

Transcript

  1. TLFUDIBQQجૅߨ࠲
    1 5 / 0 7 / 2 5 @ p u z z e l j p w e - b i n c .
    1

    View full-size slide

  2. TLFUDIBQQͬͯ
    w ϕΫλʔ ֦େͯ͠΋Ԛ͘ͳΒͳ͍ʂ
    Ͱͭ͘ΕΔʂ
    w J1IPOFͷ6*ͳͲͬ͘͞ͱͭ͘ΕΔʂ
    w ॻ͖ग़َ͕͠؆୯ʂ
    w ಈ࡞͕͍ܰʂ1IPUPTIPQ࢖ͬͯΒΕͳ͍͘Β͍͔Δ͍ʂ
    TLFUDIBQQجૅߨ࠲
    2

    View full-size slide

  3. ࠓճ࡞Δͷ͸

    ΈΜͳ͝ଘ஌
    ! 5XJUUFSͰ͢ɻ

    "#ςετߦΘΕͯͯը໘ҧ͏͔΋Ͱ͕͢ɺ

    ίϨΛࢀߟʹ࡞͍͖ͬͯ·͠ΐ͏ɻ
    TLFUDIBQQجૅߨ࠲
    3

    View full-size slide

  4. ૣ଎্ཱͪ͛ͯΈΑ͏ʂ
    w جຊతʹ͸ӳޠ(6*Ͱ͕͢ɺ೉͍͠ӳޠ͸ͦΜͳʹͳ͍͸ͣʂস
    w γϣʔτΧοτ࢖͍·͘Γ·͢ʂ

    ˰֮͑·͠ΐ͏
    w ࠓճ͸ɺجຊૢ࡞Λֶͼ·͠ΐ͏ʂ

    ͳΜͰʜ5XJUUFSBQQ 

    ςΩετ΍جຊతͳ6*ɺը૾΍৭ɺؙ֯ͳͲ͢΂ͯೖͬͯΔʂʂ
    TLFUDIBQQجૅߨ࠲
    4

    View full-size slide

  5. γϣʔτΧοτʢ͜Ε͚ͩ͸͓֮͑ͯ͜͏ʣ
    w ςΩετೖྗ<5>
    w ௕ํܗ<3>
    w ղআ<&TD>
    w ෳ੡<$NE><%>
    w <4QBDF>τϥοΫύουͰΩϟϯόεΛಈ͔ͤ·͢ɻ
    TLFUDIBQQجૅߨ࠲
    5

    View full-size slide

  6. جຊతͳը໘Λ࡞͍͖ͬͯ·͢ʂ
    w ΞΠίϯ͸ͪ͜ΒͰ༻ҙ͍ͯ͠·͢ɻ

    Լه͔Βμ΢ϯϩʔυ͍ͯͩ͘͠͞ʂ

    IUUQDMMZXWOCK
    w TLFUDIʹը૾ΛೖΕΔͷ͸ɺυϥοΫΞϯυυϩοϓͰ͢ʂ
    w ϙΠϯτʂ

    ௕ํܗɺςΩετπʔϧɺϥΠϯπʔϧ͔͠جຊతʹ࢖͍·ͤΜʂ
    TLFUDIBQQجૅߨ࠲
    6

    View full-size slide

  7. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    7

    View full-size slide

  8. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    w "SUCPBSEΛબ୒ΫϦοΫ
    8

    View full-size slide

  9. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    "SUCPBSEΛબ୒ΫϦοΫ
    9

    View full-size slide

  10. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    J1IPOF4$ΛΫϦοΫ
    10

    View full-size slide

  11. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    "SUCPBSE͕Ͱ͖·ͨ͠ʂ
    ΞʔτϘʔυ͸ɺ؆୯ʹݴ͏ͱ

    TLFUDIBQQ͕صͩͱͯ͠ɺ

    ΞʔτϘʔυ͸ࢴͰ͢ɻ
    11

    View full-size slide

  12. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    12
    5XJUUFSͷΩϟϓνϟΛ഑ஔͯ͠ΈΑ͏ɻ
    ઌ΄Ͳμ΢ϯϩʔυͨ͠ը૾ϑΝΠϧͷத͔Β5XJUUFSͷ

    ΩϟϓνϟΛυϩοάΞϯυυϩοϓͯ͠ɺ഑ஔ͠Α͏ʂ

    View full-size slide

  13. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    13
    ·ͣ͸௕ํܗ<3>Λ࢖ͬͯɺ
    ϔομʔʢ੨͍෦෼ʣ

    Λ࡞͍͖ͬͯ·͠ΐ͏ʂ

    View full-size slide

  14. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    14
    ௕ํܗ͕Ͱ͖ͨΒɺ

    ࣍͸എܠ৭Λ෇͚·͠ΐ͏ʂ

    View full-size slide

  15. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    15
    ௕ํܗΛબ୒ͯ͠ɺӈͷ
    ʮ'JMMTʯͷάϨʔΛΫϦοΫ͠
    ͯɺ৭Λมߋ͠Α͏ʂ

    View full-size slide

  16. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    16
    εϙΠτΛར༻ͯ͠ɺ৭Λ

    औಘ͠Α͏ʂ

    View full-size slide

  17. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    17
    ৭͕͖ͭ·ͨ͠ɻ

    ࿮ઢΛ͚͠·͠ΐ͏ɻl#PSEFSTz
    ͷ$IFDLCPYΛ֎͠·͠ΐ͏ɻ

    View full-size slide

  18. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    18
    ϔομʔͷ্ʹΞΠίϯΛஔ
    ͍ͯߦ͖·͠ΐ͏

    View full-size slide

  19. TLFUDIBQQΛ։͖·͠ΐ͏
    TLFUDIBQQجૅߨ࠲
    19
    ϔομʔͷ্ʹςΩετΛ

    ॻ͖·͠ΐ͏ʂ
    ͜͜Ͱ৭ ͜͜Ͱ

    จࣈαΠζ
    ͜͜Ͱॻࣜมߋ
    5XJUUFSGPSJ1IPOFͰ͸ɺ

    ݟग़͠

    จࣈ

    View full-size slide

  20. ͜͜·ͰͰɺ

    ը૾഑ஔͱ௕ํܗͱςΩετೖྗ
    ͕Ͱ͖·ͨ͠Ͷʂ
    TLFUDIBQQجૅߨ࠲
    20
    ࢒Δ͸ʜ

    View full-size slide

  21. ͋ͱɺͻͨ͢Βɺ
    ը૾഑ஔͱςΩετΛଧ͚ͭͩʜʁ
    TLFUDIBQQجૅߨ࠲
    21

    View full-size slide

  22. ͋ʂը૾Λؙ֯ʹ͠ͳ͍ͱߦ͚ͳ͍Ͱ͢Ͷʂ
    TLFUDIBQQجૅߨ࠲
    22

    View full-size slide

  23. ը૾Λؙ֯ʹ͠Α͏ɻ
    TLFUDIBQQجૅߨ࠲
    23
    ࠷ॳʹ௕ํܗΛ࡞Γ·͠ΐ͏ʂ
    l3BEJVTzͰΛࢦఆؙͯ֯͠ʹ͠
    ·͠ΐ͏ʂ
    ը૾Λ௕ํܗͷ্ʹ

    ࡌͤ·͠ΐ͏ʙɻ

    View full-size slide

  24. ը૾Λؙ֯ʹ͠Α͏ɻ
    TLFUDIBQQجૅߨ࠲
    24
    ը૾Λ͔ͿͤͨΒɺ্ͷz.BTLz
    ΛΫϦοΫ͠Α͏ʂ

    View full-size slide

  25. ը૾Λؙ֯ʹ͠Α͏ɻ
    TLFUDIBQQجૅߨ࠲
    25
    ը૾ؙ͕֯ʹʂ

    View full-size slide

  26. จࣈࡌͤͨΓɺ
    ը૾ΛࡌͤͨΓ͢Δͱʙɻ
    ग़དྷ͕͋Γʙɻ
    TLFUDIBQQجૅߨ࠲
    26

    View full-size slide

  27. TLFUDIBQQ͸6*Λ࡞Δ͚ͩ͡Όͳ͍ɻ
    TLFUDIBQQجૅߨ࠲
    27

    View full-size slide

  28. TLFUDIBQQجૅߨ࠲
    28
    αΠτσβΠϯ͸Ͱ͖Δɻҹ࡮෺΋·͊Ͱ͖Δɻ

    View full-size slide

  29. TLFUDIBQQجૅߨ࠲
    29
    ϓϨθϯࢿྉ΋ɻ

    View full-size slide

  30. *MMVTUSBUPS΋1IPUPTIPQ΋࢖͏͚Ͳɺ
    ΍ͬͺΓಈ࡞ॏ͍͠ɺͬ͘͞ͱϓϩτλΠϐϯάͱ͔΋Ͱ͖ͳ͍͠ɻ
    ͦ͏͍͏༻్ͷ࣌͸TLFUDIBQQ͸ͱͬͯ΋ศརɻ
    TLFUDIBQQجૅߨ࠲
    30
    *MMVTUSBUPS͸ϩΰɺΞΠίϯΛ࡞Δ࣌ʹɻ

    1IPUPTIPQ͸ࣸਅՃ޻ɺ'#"EͳͲͰ࢖͍෼͚ͯ͠·͢ɻ
    ̎೔ؒͰɺ̑̌ݸ͘Β͍J04ͷը໘ͷϓϩτλΠϐϯά͚ͨ͠Ͳɺ

    શવॏ͘ͳͯ͘TLFUDIBQQͷܰ͞ʹ͸ײಈ͢Δɻ

    View full-size slide

  31. TLFUDIBQQجૅߨ࠲
    31
    ऴΘΓ
    QV[[FMKQ

    View full-size slide