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

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

shanonim
March 28, 2018

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

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

shanonim

March 28, 2018
Tweet

More Decks by shanonim

Other Decks in Technology

Transcript

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

    View full-size slide

  2. TIBOPO !TIBOPOJN

    "OESPJE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 6*໛ࣸͷ͢ʍΊ

    View full-size slide

  8. 6*໛ࣸͱ͸

    View full-size slide

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

    View full-size slide

  10. 6*໛ࣸͷ໨త

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 6*໛ࣸͷίπ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide