手軽なのに奥が深い！Sketchを使ったデザインの魅力

2019/2/27開催の【cloudpack デ部会】「サイト制作をチームで効率化！今どきワークフローを考えよう！！」で発表した登壇資料になります。

Transcript

1. ୈճσ෦ձʮαΠτ੍࡞ΛνʔϜͰޮ཰ԽʂࠓͲ͖ϫʔΫϑϩʔΛߟ͑Α͏ʂʂʯ
   
   8FE
    खܰͳͷʹԞ͕ਂ͍ʂ
   4LFUDIΛ࢖ͬͨσβΠϯͷັྗ
2. 
    ࣗݾ঺հ ࣄۀઓུຊ෦
   σβΠϯηΫγϣϯ
   σβΠφʔ
   ೥݄ೖࣾ άϥϑΟοΫσβΠϯͷઐ໳Λଔۀޙ
   %51σβΠϯΛ೥ɺ-1όφʔΛ೥൒ܦݧɻ
   XFCۀք͸ΞΠϨοτ͕ॳΊͯͷXFCॳڃऀ
   ࠷ۙϖοτͷϋϜελʔʹ࿩͔͚ͯ͠Δࣗ෼͕ͭΒ͍ɻ ד৿
   ࠫ໻߳ ͔Ϳͱ΋Γɹ͞΍͔
3. 
    ΞΠϨοτσβΠϯηΫγϣϯͷϫʔΫϑϩʔ σΟϨΫλʔ σβΠφʔ ϑϩϯτΤϯυ ͍·͜͜ʂ
4. 
    ໨࣍ ɹࠓճ੍࡞ͨ͠σβΠϯʹ͍ͭͯ ɹTLFUDIΛ࢖ͬͨ΢ΣϒσβΠϯ ɹσβΠφʔ͔ΒϑϩϯτΤϯυ΁ ɹ·ͱΊ
5. 
     ࠓճ੍࡞ͨ͠
   σβΠϯʹ͍ͭͯ
6. 
    σ ΟϨΫλʔ͔Βͷࢦࣔ اۀαΠτͰ͋Δ֓೦ʹ
   ͱΒΘΕͣɺࣗ༝ʹʂ ד৿͞ΜͷςΠετͰʂ ʻ΄Μͱʹ͍͍ͷʂ ʁ
7. 
    ࢲ͔ΒݟͨΞΠϨοτͷσβΠϯηΫγϣϯ ࣗ༝ͳࣾ෩Ͱɺ
   ࣾһಉ࢜ͷ஥͕Α͍͜ͱ σΟϨΫλʔσβΠφʔϑϩϯτΤϯυ
   ݸੑ༷ʑͳϝϯόʔ͕ू͍ͬͯΔ༷ࢠ
9. 
    σ ΟϨΫλʔ͔Βͷࢦࣔ ͔ͤͬͩ͘͠ɺαΠτͷงғؾʹ
   ߹Θͤͨϩΰ͕͋Δͱ͍͍͔΋ɻ
   ࡾ֯΍ઢͷཁૉ͕͋Δͱ͍͍Ͷ" தଜ͞Μ ಡΈ΍͢͞͸ࣦΘͳ͍Α͏ɺ
   σϑΥϧϝ͗͢͠ͳ͍ఔ౓Ͱ ઒ຢ͞Μ や り 取 り は Slackで 行 い ま す ♪
10. 
    
11. 
     σβΠϯͷςʔϚ ɾݎۤ͘͠ͳ͘ɺೃછΈ΍ͦ͢͏ͳ഑৭ ɾ˚΍ઢͳͲɺجຊతͳਤܗΛ૊Έ߹Θͤͯ
    ɹ৽͍͠΋ͷΛੜΈग़͍༷ͯ͘͠Λදݱ ɾΧϥϑϧͳ৭Ͱݸੑ༷ʑͳϝϯόʔΛදݱ
12. 
      շదͳσβΠϯ੍࡞Λ
    ࣮ݱ͢Δ4LFUDIͷັྗ
13. 
     ࢖༻πʔϧ 4LFUDI
14. 
     σβΠϯͱݴ͑͹ʜ 1IPUPTIPQ
15. 
     1IPUPTIPQͰ8FCσβΠϯ͢Δ࣌ͷσϝϦοτ ɹϕΫλʔσʔλ͕ѻ͑ͳ͍ ɹಈ࡞͕ॏ͍ ɹը૾ΞηοτͰͷॻ͖ग़͕͠໘౗ ɹޙ޻ఔʹྲྀ͢ͱ͖ͷ࿈ܞ͕खؒ ɹεϚϗͰϦΞϧλΠϜʹσβΠϯͷ֬ೝ͕Ͱ͖ͳ͍
16. 
     TLFUDIͷϝϦοτ ɹϓϥάΠϯͰ΋ͬͱޮ཰Խ ɹಈ࡞σʔλ͕͍ܰ ɹγϯϘϧͱ͍͏ػೳ͕͋Δ ɹ༷ʑͳղ૾౓Ͱͷը૾ॻ͖ग़͕͠؆୯ ɹεϚϗͰσβΠϯͷ֬ೝ͕Ͱ͖Δ
17. 
     TLFUDIͷϝϦοτᶃ ಈ࡞͕͍ܰ
18. 
     ಈ࡞͕͍ܰ ͭͷσʔλͷதʹ
    ΞʔτϘʔυΛ
    ݸҎ্࡞ͬͯ΋͍ܰɻ 1IPUPTIPQͰΞʔτϘʔυΛ૿΍͢ͱ
    ͳΜͰ͋Μͳʹॏ͍Μͩʜʁ
19. 
     σʔλ΋͍ܰ αΠτͷશͯͷσβΠϯ͕ೖͬͨσʔλ چαΠτͷ501ϖʔδͷΈͷσʔλ
20. 
     σʔλ΋͍ܰ ܰ͗͢
21. 
     TLFUDIͷϝϦοτᶄ εϚϗͰϦΞϧλΠϜʹ
    σβΠϯͷ֬ೝ͕Ͱ͖Δ
22. 
     ࢖༻ΞϓϦ 4LFUDI
    NJSSPS
23. 
     εϚϗͰσβΠϯ֬ೝ ݟΕͯΔʙʂ 1$Ͱͷมߋ͸
    ϦΞϧλΠϜʹ
    ൓ө͞Ε·͢
24. 
     "OESPJEͷํ͸ʜ $SZTUBM
25. 
     TLFUDIͷϝϦοτ γϯϘϧͱ͍͏ػೳ͕͋Δ
26. ࡞੒ͨ͠ΦϒδΣΫτʹ
    ໊લΛ͚ͭͯొ࿥͢Δ͜ͱ
     γϯϘϧͱ͸ γϯϘϧΛฤू͢Δͱ
    શͯҰׅͰมߋ͞ΕΔ
28. 
     TLFUDIͷϝϦοτ ϓϥάΠϯͰ΋ͬͱޮ཰Խʂ
29. 
     ࢖༻ͨ͠ϓϥάΠϯ .BQ
    (FOFSBUPS σβΠϯσʔλʹ஍ਤΛຒΊࠐΊΔϓϥάΠϯ
31. 
    
    ͍͜͞͏ͷϓϥάΠϯୡ "SUCPBSE
    .BOBHFS ΞʔτϘʔυΛࣗಈͰ
    ੔ཧͯ͘͠ΕΔ 3VOOFS 4LFUDIಛԽܕ4JSJతͳ΍ͭ
    આ໌ͮ͠Β͍͕ศར JDPO
    GPOU ͍͍ͪͪωοτ͔Β
    ΞΠίϯΛ୳͞ͳ͍͍ͯ͘ʂ
32. 
     TLFUDIͷϝϦοτ ΫϦοΫͰը૾Λॻ͖ग़͠
33. 
     ը૾ॻ͖ग़͠ ը૾ΛҰؾʹબ୒ͯ͠
    ॻ͖ग़͠αΠζΛબ΂͹
    ࣗಈͰ!Yɺ!Y΋
    ॻ͖ग़ͯ͘͠ΕΔʂ
34. 
     ը૾ॻ͖ग़͠ ઃఆΛม͑Ε͹
    "OESPJE΍J04ʹ
    ରԠͨ͠αΠζͰ΋
    ॻ͖ग़ͤ·͢ʂ ΞϓϦ੍࡞ʹ΋͹ͬͪ Γʂ
35. 
      σϕϩούʔͱͷ
    ࿈ܞΛߴΊΔ;FQMJO
36. 
     σϕϩούʔ΁౉͢΋ͷ ɹ࢖༻ͨ͠ը૾ ɹσβΠϯͷࢦࣔॻ
37. 
     σϕϩούʔ΁౉͢΋ͷ σβΠϯͷࢦࣔॻ Ϛʔδϯʹ͍ͭͯɺϨεϙϯγϒରԠͰͲ͏ಈ͔͘ɺ
    αΠτͷΞχϝʔγϣϯରԠͳͲʜ
38. 
     ελΠϧΨΠυ ;FQMJO
39. ్த͔ΒҊ݅ʹ
    ؔΘΔΜ͚ͩͲ
    ϨΪϡϨʔγϣϯ͕
    Θ͔Βͳ͍ʜ ͜͜ͷςΩετ
    Կ৭͚ͩͬʜʁ
     ελΠϧΨΠυͱ͸ʁ σβΠφʔෳ਺໊Ͱ
    ࡞ۀͯ͠Δͱ
    ݸਓؒͰงғؾʹ
    όϥ͖͕ͭ͋Δʜ ͜͜ͷεϖʔε͸
    ԿϐΫηϧ
    ඞཁͳΜ͚ͩͬʜʁ
40. 
     ελΠϧΨΠυͱ͸ʁ ͦͷϓϩδΣΫτͷσβΠϯͰ࢖༻͢Δ
    ॻମ΍৭ɺϘλϯ΍֤ύʔπͳͲͷ
    ϧʔϧΛ·ͱΊͨ΋ͷ
41. 
     [FQMJOͰ࡞ΔελΠϧΨΠυ TLFUDIͰ੍࡞࢖༻ͨ͠
    ΦϒδΣΫτɾςΩετελΠϧɾΧϥʔ
    Λऔಘͯ͠·ͱΊͯ͘ΕΔʂ
42. 
     [FQMJOͰ࡞ΔελΠϧΨΠυ
43. 
     [FQMJOͰ࡞ΔελΠϧΨΠυ
44. 
     ̐ ·ͱΊ
45. 
     ࢓ࣄʹܾ·ͬͨ΍Γํ͸ͳ͍
    ৗʹ৽͍͠৘ใΛऔΓೖΕΔʂ ͍͍ํ๏Λݟ͚ͭͨΒͲΜͲΜࢼͯ͠Έ͍ͨ