エンジニアがUIデザインをしてみた話

Transcript

1. ΤϯδχΞ͕6*σβΠϯΛͯ͠Έͨ࿩
   σβΠφʔͱΤϯδχΞ͕ڠྗλοάΛ૊ΜͩαʔϏε։ൃ
   $POOFIJUPJOD'SPOUFOE&OHJOFFS3ZP"EBDIJ
   Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ
   

   View Slide

2. ͸͡Ί·ͯ͠ʂ
   w ʙ
   w ϑϩϯτΤϯυΤϯδχΞ
   w ͖ͬ͞ϛχϦϡ΢ั·͑·ͨ͠
   ҆ୡྏ !EBDIJ@
   
   

   View Slide

3. w ͸͡Ίʹ
   w 6*σβΠϯΛͯ͠Έͨ࿩
   w ෼͔ͬͨ͜ͱɺྑ͔ͬͨ͜ͱ
   w ·ͱΊ
   ࠓ೔࿩͢͜ͱ
   

   View Slide

4. ͸͡Ίʹ
   σβΠφʔͱΤϯδχΞ͕ڠྗλοάΛ૊ΜͩαʔϏε։ൃ
   Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ
   

   View Slide

5. w αʔόαΠυ
   w 1)1
   w ϑϩϯτΤϯυ
   w +BWB4DSJQU
   w $44
   ͸͡Ίʹ
   ࢲͷ࢓ࣄ
   
   

   View Slide

6. σβΠϯ͸ૉਓʜ
   ͸͡Ίʹ
   

   View Slide

7. ͔͠΋σβΠφʔ͞Μͱͷ࢓ࣄॳΊͯʜ
   ͸͡Ίʹ
   

   View Slide

8. 6*σβΠϯΛͯ͠Έͨ࿩
   σβΠφʔͱΤϯδχΞ͕ڠྗλοάΛ૊ΜͩαʔϏε։ൃ
   Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ
   

   View Slide

9. w Ұॹʹ࢓ࣄΛ͍ͯ͠ΔσβΠφʔ͞Μͷ࢓ࣄΛཧղ͢Δ
   w σβΠϯ͸Կ͕େมͳͷ͔ʁ
   w ΤϯδχΞ͕ख఻͑Δ͜ͱ͸ͳ͍͔ʁ
   w ྑ͍ίϛϡχέʔγϣϯΛऔΔʹ͸ʁ
   6*σβΠϯΛͯ͠Έͨ࿩
   ͳΜͰ΍Ζ͏ͱࢥ͔ͬͨ
   

   View Slide

10. ᶃ 6*Λࣗ෼Ͱߟ͑Δ
    ᶄ $44Λࣗ෼Ͱॻ͘
    ᶅ (JU)VCͰެ։͢Δ
    6*σβΠϯΛͯ͠Έͨ࿩
    6*σβΠϯΛ࠷ޙ·Ͱ΍ͬͯΈΔ
    

    View Slide

11. 6*σβΠϯΛͯ͠Έͨ࿩
    ᶃ6*Λࣗ෼Ͱߟ͑Δ
    
    

    View Slide

12. w δΣωϨʔλ
    w ίϐϖ
    6*σβΠϯΛͯ͠Έͨ࿩
    ᶄ$44Λࣗ෼Ͱॻ͘
    

    View Slide

13. w ࠓͷࣗ෼ͷ࣮ྗΛӅ͞ͳ͍
    w ܧଓͯ͠ྑ͍ͯ͘͘͠౒ྗΛ͢Δ
    w IUUQTHJUIVCDPNEBDIJCPJMFSQMBUF
    6*σβΠϯΛͯ͠Έͨ࿩
    ᶅ(JU)VCͰެ։͢Δ
    

    View Slide

14. ෼͔ͬͨ͜ͱɺྑ͔ͬͨ͜ͱ
    σβΠφʔͱΤϯδχΞ͕ڠྗλοάΛ૊ΜͩαʔϏε։ൃ
    Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ
    

    View Slide

15. w ΋ͷ͕͔͔࣌ؒ͘͢͝Δ
    w ϩδΧϧʹߟ͑ΒΕͳ͍
    ෼͔ͬͨ͜ͱɺྑ͔ͬͨ͜ͱ
    ෼͔ͬͨ͜ͱ
    

    View Slide

16. w σβΠϯͷେม͞Λײ͡ΒΕͨ
    w 6*Λߟ͑Δͷָ͕͘͠ͳ͖ͬͯͨ
    ෼͔ͬͨ͜ͱɺྑ͔ͬͨ͜ͱ
    ྑ͔ͬͨ͜ͱ
    

    View Slide

17. ·ͱΊ
    σβΠφʔͱΤϯδχΞ͕ڠྗλοάΛ૊ΜͩαʔϏε։ൃ
    Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ
    

    View Slide

18. w ·ͣ͸ࣗ෼͕ࠓͰ͖Δ͜ͱΛߟ͑ͯ΍ͬͯΈΔ
    w ૬खͷ΍͍ͬͯΔ࢓ࣄͷେม͞Λࣗ෼΋ײͯ͡ΈΔ
    w େม͞Λ஌ͬͯΑΓྑ͘͢Δํ๏Λߟ͑Δ
    ͍͞͝ʹ
    ͍͞͝ʹ
    

    View Slide

19. σβΠφʔ͞Μɺ͍ͭ΋͋Γ͕ͱ͏ʂʂ
    ͍͞͝ʹ
    

    View Slide

20. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    σβΠφʔͱΤϯδχΞ͕ڠྗλοάΛ૊ΜͩαʔϏε։ൃ
    Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ
    

    View Slide