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

某カレンダー作成アプリを開発している会社で受け取ったデザインファイルがもっとこうだったら良かったなぁというものをまとめた発表です。
https://engineers-x-designers.connpass.com/event/103562/

Transcript

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

   View Slide

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

   View Slide

3. લఏ
   •๭ΧϨϯμʔ࡞੒ΞϓϦΛ։ൃ͍ͯ͠ΔձࣾͰ͸

   σβΠφʔ͸Sketch ͰσβΠϯσʔλΛ࡞੒
   •Zeplin ͰUIͷ΍ΓऔΓ
   •σβΠϯΛड͚औͬͨΤϯδχΞ͕ʮ΋ͬͱ͜͏ͩͬͨ
   Βخ͍͠ͳ͊ʯͱࢥͬͨ෺Λ·ͱΊͨ࿩
   !3
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. ຊ౰ʹtopͷεϖʔε4pt?
    !13
    • Font sizeͱLine height͕ҟ
    ͳ͍ͬͯͨ
    • UILabel͸ͦͷ··࢖͏ͱϑΥ
    ϯταΠζ͕ߴ͞ʹͳΔ
    • ࣮ࡍͷεϖʔε͸

    24-18+4=10ptͩͬͨͱ͍͏ࣄ
    Λܭࢉ͠ͳ͍ͱ͍͚ͳ͍
    

    View Slide

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

    View Slide

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

    View Slide

16. ͑ͬɺॻ͖ग़͠ग़དྷͳ͍
    !16
    

    View Slide

17. վળҊ
    !17
    ॻ͖ग़͠ઃఆ๨Εͳ͍
    

    View Slide

18. 4.SketchͰෳ਺ը૾·ͱΊͯॻ͖ग़͠
    !18
    

    View Slide

19. ݁Ռ
    !19
    

    View Slide

20. ͑ͬ
    !20
    ෳ਺ຕॻ͖ग़ͨ͠͸ͣͳͷʹ1ຕ͔͠ແ͔ͬͨ
    

    View Slide

21. ͜͏ͳ͍ͬͯͨ
    !21
    

    View Slide

22. վળҊ
    εϥΠεຖʹద੾ͳ໊લ෇͚·͠ΐ͏
    !22
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. ߟ࡯
    •UIͷड͚౉͠ʹZeplin͸ศར͚ͩͲສೳͰ͸ͳ͍
    •ҟͳΔαΠζΛ֬ೝ͍ͨ͠৔߹ͳͲ͸SketchϑΝΠϧ
    Λͦͷ··΋Βͬͨํ͕఻ΘΔ͜ͱ΋͋Δ

    (※ResizingΛద੾ʹར༻͍ͯ͠Δ৔߹ʹݶΔ)
    !30
    

    View Slide

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

    View Slide

32. վળҊ
    Atomic Designͷग़൪

    (Sketchͷ৔߹͸SymbolΛద੾ʹར༻)
    !32
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. PR
    !38
    

    View Slide

39. !39
    

    View Slide

40. !40
    ΤϯδχΞ΋σβΠφʔ΋ืूதʂ
    

    View Slide

41. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠)
    !41
    

    View Slide