UI模写のすゝめ / Encouragement of UI drawing

2018.03.28
Androidエンジニア デザイン部 #1
https://nohana.connpass.com/event/80530/

Transcript

1. 6*໛ࣸͷ͢ʍΊ
   "OESPJEΤϯδχΞσβΠϯ෦
   !TIBOPOJN
   

   View Slide

2. TIBOPO !TIBOPOJN
   
   "OESPJE
   

   View Slide

3. ΤϯδχΞ͚ͩͲ
   σβΠϯεΩϧ্͍͛ͨ
   

   View Slide

4. σβΠϯεΩϧΛ্͛Δʹ͸
   ྑ͍σβΠϯΛਅࣅΔ͜ͱ
   

   View Slide

5. ઌഐ͕ॻ͍ͨಈ͖ͷύλʔϯΛ௫ΜͰਅࣅ͢Δɻ
   ࣗ෼ͳΓͷදݱͬͯͷ͸ͦΕ͔ΒɻֶͿ͍ͬͯ͏ͷ͸ʰ·ͶͿʱͬͯݴ͏͡ΌΜʁ
   ΈΜͳ࠷ॳ͸ͩΕ͔ͷਅࣅɻ͓Μͳ͓͡Μͳ͡ɻ
   ᴷҪޱ༞ະ
   

   View Slide

6. ྑ͍6*Λʰ·ͶͿʱɻ
   

   View Slide

7. 6*໛ࣸͷ͢ʍΊ
   

   View Slide

8. 6*໛ࣸͱ͸
   

   View Slide

9. 6*໛ࣸͱ͸
   ࣮ࡍͷϓϩμΫτʢΞϓϦɾ8FCʣͷ6*Λ
   Ξφϩά΋͘͠͸σδλϧͰॻ͖ࣸ͢͜ͱ
   ผ໊ʮ6*τϨʔεʯ
   Ξφϩάͷ৔߹͸ɺࢴͱԖච
   σδλϧͷ৔߹͸ɺσβΠϯπʔϧʢ4LFUDI΍1IPUPTIPQͳͲʣΛ࢖ͬͯ
   ໛ࣸ͢Δํ๏͕Ұൠత
   

   View Slide

10. 6*໛ࣸͷ໨త
    

    View Slide

11. 6*໛ࣸͷ໨త
    ໛ࣸͷ໨త͸ίϐʔΛͭ͘Δ͜ͱͰ͸͋Γ·ͤΜɻ
    Ұ൪ͷ໨త͸ɺର৅ͱͳΔσβΠϯΛͬ͘͡Γ؍࡯͠ɺٕज़Λ౪Έɺ
    ࣗ෼ͷҾ͖ग़͠Λ૿΍͢͜ͱͰ͢ɻ
    Ҿ༻IUUQTXXXXFCDSFBUPSCPYDPNUFDIJNQSPWFEFTJHOTLJMMT
    ·͞ʹʰ·ͶͿʱʜ
    

    View Slide

12. Ξφϩά໛ࣸPSσδλϧ໛ࣸ
    

    View Slide

13. Ξφϩά໛ࣸPSσδλϧ໛ࣸ
    खͰ໛ࣸͨ͠΄͏͕ࡉ͔͍ͱ͜Ζʹؾ͕ͭ͘ʢؾ͕͢Δʣ
    ॻ͖ͳ͕Βߟ͑Δ͔Βʜʁ
    Ξφϩά͸࢝ΊΔίετ͕গͳͯ͘ΦεεϝͰ͢ɻ
    ʢσβΠϯπʔϧͷ࢖͍ํΛษڧ͢Δඞཁ͕ͳ͍ʣ
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. 6*໛ࣸͷίπ
    

    View Slide

19. 6*໛ࣸͷίπ
    ҰൠతͳΞϓϦɺ਺ेը໘ͳΜͯβϥɻ
    ͢΂ͯ໛ࣸͯͨ͠ΒԿ೔΋͔͔Δ͠ɺ
    ࣮ࡍը໘ҎԼͰ΋ർΕͯ΍Ίͯ͠·͏ʜ
    ॻ͖͗͢ͳ͍ɻ
    ؾʹͳΔdը໘͚ͩॻ͘ɻ
    ྫ#/7ʹ৐͍ͬͯΔը໘ʴৄࡉը໘ʴЋ
    ʢ΋ͪΖΜϊο͖ͯͨΒ޷͖ͳ͚ͩॻ͍ͯ0,ʣ
    

    View Slide

20. 6*໛ࣸͷίπ
    ៉ྷͳઢͰ࿮Λॻ͔ͳ͖Όɻɻ
    ΞΠίϯਖ਼֬ʹ໛ࣸ͠ͳ͖Όɻɻ
    ਖ਼֬ʹ͗͢͠ͳ͍ɻ
    ద౰Ͱ͍͍ͱࢥ͍·͢ɻ
    ॻ͖ͳ͕Βؾ͖ͮΛಘΔ͜ͱ͕ॏཁͳͷͰɺ
    ଟগઢ͕࿪ΜͩΓɺਖ਼֬͡Όͳͯ͘΋ؾʹ͠ͳ͍
    

    View Slide

21. 6*໛ࣸͯ͠
    Α͔ͬͨ͜ͱ
    

    View Slide

22. 6*໛ࣸͯ͠ྑ͔ͬͨ͜ͱ
    ༗໊ͳΞϓϦɾٸ্ঢΞϓϦͷσβΠϯΛݟΔͨΊʹ
    (PPHMF1MBZͷϥϯΩϯάΛఆظతʹݟΔΑ͏ʹͳͬͨ
    (PPHMF1MBZͷϥϯΩϯάΛݟΔΑ͏ʹͳΔ
    τϨϯυʹৄ͘͠ͳΔ
    ීஈ࢖Θͳ͍ΞϓϦΛΠϯετʔϧͯ͠࢖͏͜ͱʹͳΔ
    

    View Slide

23. View Slide

24. 6*໛ࣸͯ͠ྑ͔ͬͨ͜ͱ
    ࣅͨۀଶͷΞϓϦɾࣅͨ6*ͷΞϓϦΛ࢖ͬͯΈͯ
    ໛ࣸͯ͠ΈΔ
    ࣗ෼ͷϓϩμΫτ΁ͷώϯτ͕ಘΒΕΔ
    ʮ͜ͷ6*ɺ͏ͪʹ΋࢖͑ͦ͏ʜʂʯ
    ʮ͜ͷϥΠϒϥϦ࢖͑ͦ͏ʜʂʯ
    

    View Slide

25. ࣗ෼͕஌Βͳ͍ΞΠσΟΞ͸
    ͕Μ͹ͬͯ΋ग़ͯ͜ͳ͍ʜ
    ʢ஌Βͳ͍͔Βʣ
    

    View Slide

26. 6*໛ࣸͯ͠ྑ͔ͬͨ͜ͱ
    ࡉ෦ʹ॓Δͩ͜ΘΓΛ஌Δ͜ͱͰ
    σβΠϯͱσβΠφʔʹର͢ΔϦεϖΫτ͕ߴ·Δ
    σβΠφʔͷؾ͕࣋ͪΘ͔Δ
    

    View Slide

27. ·ͱΊ
    ྑ͍σβΠϯΛ஌ΔͨΊʹ
    ͍ΖΜͳϓϩμΫτͷ6*Λ஌Δ
    ˣ
    6*໛͕ࣸΦεεϝͰ͢
    

    View Slide

28. Ԗච✏ͱϊʔτ͕͋Ε͹
    ࠓ೔͔ΒͰ͖Δ
    

    View Slide

29. ʲίϥϜʳ
    6*໛ࣸͯ͠ಘͨΞΠσ
    ΟΞ
    ɺͦͷ··࢖ͬͯେৎ෉ͳͷʁ
    Ҿ༻ʲϢʔβʔΠϯλʔϑΣʔεͷྨࣅˠஶ࡞ݖɾಛڐݖɾҙঊݖ৵֐ʹͳΓʹ͍͘ʛαΠϘ΢ζࣄ݅൑ྫ΄
    ͔ʳ
    IUUQTXXXNDMBXKQLJHZPIPNV
    6*ɾը໘දࣔʹ͍ͭͯ΋ɼʰදݱʱͷ̍ͭͱͯ͠ʰஶ࡞ݖʱͷର৅ͱͳΓ·͢ɻ
    ʢ৺഑ͳͱ͖͸ɺͪΌΜͱ๏຿ʹ૬ஊ͠·͠ΐ͏ʣ
    

    View Slide

30. Ҿ༻ʲϢʔβʔΠϯλʔϑΣʔεͷྨࣅˠஶ࡞ݖɾಛڐݖɾҙঊݖ৵֐ʹͳΓʹ͍͘ʛαΠϘ΢ζࣄ݅൑ྫ΄
    ͔ʳ
    IUUQTXXXNDMBXKQLJHZPIPNV
    

    View Slide

31. Ҿ༻ʲϢʔβʔΠϯλʔϑΣʔεͷྨࣅˠஶ࡞ݖɾಛڐݖɾҙঊݖ৵֐ʹͳΓʹ͍͘ʛαΠϘ΢ζࣄ݅൑ྫ΄
    ͔ʳ
    IUUQTXXXNDMBXKQLJHZPIPNV
    

    View Slide