こんなSketch(Zeplin)はイヤだ #dxel /Anti pattern of sketch and zeplin

by fromkk

Slide 1

Slide 1 text

͜ΜͳSketch (Zeplin )͸ΠϠͩ DXEL.2 2018/10/22 !1

Slide 2

Slide 2 text

Profile struct Profile { let name = "Kazuya Ueoka" let twitter = "@fromkk" let github = "fromkk" let qiita = "fromkk" let company = "Timers Inc." } • !2

Slide 3

Slide 3 text

લఏ •๭ΧϨϯμʔ࡞੒ΞϓϦΛ։ൃ͍ͯ͠ΔձࣾͰ͸  σβΠφʔ͸Sketch ͰσβΠϯσʔλΛ࡞੒ •Zeplin ͰUIͷ΍ΓऔΓ •σβΠϯΛड͚औͬͨΤϯδχΞ͕ʮ΋ͬͱ͜͏ͩͬͨ Βخ͍͠ͳ͊ʯͱࢥͬͨ෺Λ·ͱΊͨ࿩ !3

Slide 4

Slide 4 text

Sketch !4 https://sketchapp.com • σβΠϯ࡞੒πʔϧ • Web΍ΞϓϦʹಛԽ • ௚ײత • ϓϥάΠϯͳͲͰػೳ֦ு

Slide 5

Slide 5 text

Zeplin !5 https://www.zeplin.io • νʔϜ಺σβΠϯڞ༗πʔϧ • Sketch/Photoshop͔Β؆ ୯ॻ͖ग़͠ • ࡉ͔͍UIͷ֬ೝɺը૾ॻ͖ग़ ͠ػೳ • ίϝϯτʹΑΔίϛϡχέʔ γϣϯ • ಁա΢Οϯυ΢Ͱ੒Ռ෺֬ೝ

Slide 6

Slide 6 text

໿3೥ΞϓϦΛ։ൃɾӡ༻͍ͯ͠Δͱ •UIͷ࣮૷ʹۤ࿑ͨ͠ •Ͳ͏࣮૷ͨ͠Β͍͍ͷ͔෼͔Βͳ͍ •୺຤αΠζม͑Δͱ่Εͨ •etc !6

Slide 7

Slide 7 text

1. Ұݟී௨ͷϝχϡʔը໘ !7

Slide 8

Slide 8 text

࣮͸ҰͭͷςΩετͩͬͨ !8

Slide 9

Slide 9 text

Կ͕πϥ͍ͷ͔ •࣮૷ͷࢥߟͱ߹Θͳ͍ •ϥϕϧͷ഑ஔ͸਌ͷϏϡʔ͔ΒͷεϖʔεΛௐ੔ͯ͠ ͍͘ •εϖʔεͷαΠζ͕શ͘෼͔Βͳ͍ •ϥϕϧ͸վߦ͕͋ΓಘΔͷ͔ɺӳޠ౳ଟݴޠ΋ߟྀ͞ Ε͍ͯΔͷ͔෼͔Βͳ͍ !9

Slide 10

Slide 10 text

վળҊ ໘౗Ͱ΋ηϧͱςΩετΛͪΌΜͱ෼͚ͯ഑ஔ͠·͠ΐ͏ !10

Slide 11

Slide 11 text

2. ͖ͬ͞ΑΓ͸ྑͦ͞͏ͳը໘ !11

Slide 12

Slide 12 text

ຊ౰ʹtopͷεϖʔε4pt? !12

Slide 13

Slide 13 text

ຊ౰ʹtopͷεϖʔε4pt? !13 • Font sizeͱLine height͕ҟ ͳ͍ͬͯͨ • UILabel͸ͦͷ··࢖͏ͱϑΥ ϯταΠζ͕ߴ͞ʹͳΔ • ࣮ࡍͷεϖʔε͸  24-18+4=10ptͩͬͨͱ͍͏ࣄ Λܭࢉ͠ͳ͍ͱ͍͚ͳ͍

Slide 14

Slide 14 text

վળҊ !14 • 1ߦදࣔͷ৔߹͸Font sizeͱLine heightΛ߹ ΘͤΑ͏ • 2ߦදࣔҎ্ͷ৔߹͸ߦؒΛ ؾʹ͢Δͱࢥ͏ͷͰ͜ͷݶ ΓͰ͸͋Γ·ͤΜ

Slide 15

Slide 15 text

3. ͓ɺը૾ͬΆ͍ !15 ॻ͖ग़͕͠ඞཁͩ

Slide 16

Slide 16 text

͑ͬɺॻ͖ग़͠ग़དྷͳ͍ !16

Slide 17

Slide 17 text

վળҊ !17 ॻ͖ग़͠ઃఆ๨Εͳ͍

Slide 18

Slide 18 text

4.SketchͰෳ਺ը૾·ͱΊͯॻ͖ग़͠ !18

Slide 19

Slide 19 text

݁Ռ !19

Slide 20

Slide 20 text

͑ͬ !20 ෳ਺ຕॻ͖ग़ͨ͠͸ͣͳͷʹ1ຕ͔͠ແ͔ͬͨ

Slide 21

Slide 21 text

͜͏ͳ͍ͬͯͨ !21

Slide 22

Slide 22 text

վળҊ εϥΠεຖʹద੾ͳ໊લ෇͚·͠ΐ͏ !22

Slide 23

Slide 23 text

5. iPhone XSͰ͸ͱͯ΋͍͍ײ͡ʹݟ͑Δը໘ !23

Slide 24

Slide 24 text

iPhone SEͰݟͨΒͲ͏ͳΔʁ !24

Slide 25

Slide 25 text

͜͏ͳͬͨ !25 • େࣄͦ͏ͳϝοηʔδ͕੾Ε͍ͯΔ • େࣄͦ͏ͳΩϟονྖҬ͕੾Ε͍ͯΔ

Slide 26

Slide 26 text

վળҊ Zeplinͷ৔߹ !26 ֤ը໘αΠζ෼࡞ͬͯ ΋Β͏

Slide 27

Slide 27 text

վળҊ Sketchͷ৔߹ !27 ResizingΛ׆༻͢Δ

Slide 28

Slide 28 text

վળҊ Sketchͷ৔߹ !28 ResizingΛ׆༻͢Δ

Slide 29

Slide 29 text

վળҊ Sketchͷ৔߹ !29 ResizingΛ׆༻͢Δ

Slide 30

Slide 30 text

ߟ࡯ •UIͷड͚౉͠ʹZeplin͸ศར͚ͩͲສೳͰ͸ͳ͍ •ҟͳΔαΠζΛ֬ೝ͍ͨ͠৔߹ͳͲ͸SketchϑΝΠϧ Λͦͷ··΋Βͬͨํ͕఻ΘΔ͜ͱ΋͋Δ  (※ResizingΛద੾ʹར༻͍ͯ͠Δ৔߹ʹݶΔ) !30

Slide 31

Slide 31 text

ଞʹ΋ •ಉ͡ϑΥϯτͬΆ͍͕Α͘ݟΔͱϖʔδຖʹϑΥϯτα Πζҧ͏ •ࣅ༷ͨͳύʔπ͕͍ΖΜͳϖʔδຖʹඍົʹҧ͏ •etc !31

Slide 32

Slide 32 text

վળҊ Atomic Designͷग़൪  (Sketchͷ৔߹͸SymbolΛద੾ʹར༻) !32

Slide 33

Slide 33 text

͜Ε͚ͩ͋Δͱπϥͦ͏ʹݟ͑Δ͚Ͳ ࣮͸େ͖ͳ໰୊ʹ͸ͳ͍ͬͯͳ͍ !33

Slide 34

Slide 34 text

Կނ͔ Pt.1 •UIΨΠυϥΠϯ͕͋Δ •ਖ਼ղ͸ͦ͜ʹ͋ΔͷͰଟগZeplin΍Sketch͕ζϨ͍ͯͯ΋ؾʹ͠ͳ ͍ओٛ •ΨΠυϥΠϯʹमਖ਼͕ೖͬͯ΋શ෦΍Βͳ͖ΌͬͯΘ͚Ͱ͸ͳ͘ݟͭ ͚ͨॴ͔Βগͣͭ͠ରॲ •ίϛϡχέʔγϣϯͰΧόʔ •ΤϯδχΞͷߴ౓ͳ዁౓ྗ' !34

Slide 35

Slide 35 text

Կނ͔ Pt.2 !35 https://speakerdeck.com/fromkk/use-ui-testing-as-a-tool-in-iosdc-2018 TestSummariesΛ࢖ͬͯ၆ᛌͯ͠σβΠϯ่ΕΛνΣοΫ

Slide 36

Slide 36 text

ͱ͸͍͑ •΋͠৽ͨʹΫϥΠΞϯτΤϯδχΞ͕૿͑ͨΒֶशί ετߴͦ͏ •ΫϥΠΞϯτଆͰAtomic Design΍OOUXͳͲΛऔΓ ೖΕͯίϯϙʔωϯτΛ࠶ར༻͠΍͍͢޻෉͸ඞཁ͔΋ • ʢσβΠφʔ΋ΨΠυϥΠϯʹԊͬͯ࡞ͬͯཉ͍͠͠ॻ͖ग़͠ઃఆ͙Β͍ ๨Εͳ͍Ͱཉ͍͠(খ੠)ʣ !36

Slide 37

Slide 37 text

·ͱΊ •ݟͨ໨͚ͩσβΠϯ͞ΕͨSketch΍ZeplinΛ໯ͬͯ΋πϥ͍ ࣌͸͋ΔͷͰͪΌΜͱ੔ཧͯ͘͠ΕΔͱخ͍͠ •ϥϕϧ΍Ϙλϯɺը૾ؒͷεϖʔε͸࣮૷͢Δ࣌ͷίʔυͱҰ கग़དྷΔ༷ͳ޻෉͸ཉ͍͠) •ը૾ͷॻ͖ग़͠ઃఆ΍εϥΠεʹ໊લ෇͚Δͷେࣄ' •Symbol΍ResizingػೳΛద੾ʹ࢖͍͖ͬͯ·͠ΐ͏ !37