エンジニアのためのUIデザイン

エンジニアでも使えるデザインの理論とテクニック

Transcript

1. ΤϯδχΞͷͨΊͷ6*σβΠϯ
   !TIPZB
2. ࣗݾ঺հ ੴؙ
   ᠳ໵
   !TIPZB ɾେࡕ෎ཱେֶ
   େֶӃ
   ޻ֶݚڀՊ
   ೥ ɾझຯ
   J04
   "OESPJE
   8FCΞϓϦ։ൃ ɾݚڀ
   ΢ΣΞϥϒϧηϯαʹΑΔߦಈೝࣝ
3. ࠓ೔ͷςʔϚ
4. ࠓ೔ͷςʔϚ νίΫΠΠϫέϩϘ SBDPMUB /'$
   +VODUJPO LPUPEBNB 3FTU$BTU 4XJQFS ͜Ε·Ͱͷ։ൃͰ਎ʹ͚ͭͨ
   σβΠϯͷཧ࿦ͱςΫχοΫΛ෼ؒʹڽॖ
5. ͭͷݪଇ
6. ͭͷݪଇ ۙ઀
7. ͭͷݪଇ ۙ઀ ੔ྻ
8. ͭͷݪଇ ۙ઀ ൓෮ ੔ྻ
9. ͭͷݪଇ ۙ઀ ൓෮ ੔ྻ ڧௐ
10. ͭͷݪଇ ۙ઀ ൓෮ ੔ྻ ڧௐ ༨ന ഑৭ ͭͷٕज़
11. ͭͷݪଇ ۙ઀ ൓෮ ੔ྻ ڧௐ ༨ന ഑৭ ͭͷٕज़
12. ༨ന
13. ༨നςΫχοΫʲ໾ׂΛߟ͑Δʳ
14. ༨നςΫχοΫʲ໾ׂΛߟ͑Δʳ ࢹઢΛूΊΔ
15. ༨നςΫχοΫʲ໾ׂΛߟ͑Δʳ ࢹઢΛूΊΔ ༨ӆΛ࢒͢
16. ༨നςΫχοΫʲ໾ׂΛߟ͑Δʳ ࢹઢΛूΊΔ ༨ӆΛ࢒͢ ·ͱ·ΓΛ࡞Δ
17. ༨നςΫχοΫʲϘλϯʳ
18. ༨നςΫχοΫʲϘλϯʳ
19. ༨നςΫχοΫʲϘλϯʳ จࣈαΠζͷഒ ഒ ഒ ഒ
20. ༨നςΫχοΫʲϘλϯʳ $font-size: 30px; .btn{ font-size: $font-size; padding: 0 $font-size*2.0 0 $font-size*1.5; height: $font-size*3.0; line-height: $font-size*3.0; .icon{ top: $font-size*0.1; } } จࣈαΠζͷഒ ഒ ഒ ഒ
21. ഑৭
22. ഑৭ςΫχοΫ ৭ͷ਺Λ੍ݶ͢Δ 
23. ഑৭ςΫχοΫ ϕʔε ϝΠϯ ΞΫηϯτ
24. ഑৭ςΫχοΫ ϝΠϯ ϕʔε ΞΫηϯτ
25. ഑৭ςΫχοΫ ϝΠϯ ΞΫηϯτ ϕʔε
26. ഑৭ςΫχοΫʲ৭બͼʳ Ͳ͏΍ܾͬͯΊΔͷʁ
27. ഑৭ςΫχοΫʲ৭બͼʳ ͍͍ײ͡ͷ৭ΛύΫΔ
28. ໾ཱͪϦϯΫʲ৭ΛબͿʳ IUUQQBMFUUBNSLDPN
29. ໾ཱͪϦϯΫʲ૊Έ߹ΘͤΛબͿʳ IUUQDPMSEDPN
30. ͭͷݪଇ ۙ઀ ൓෮ ੔ྻ ڧௐ ༨ന ഑৭ ͭͷٕज़
31. ࢀߟจݙ ϊϯσβΠφʔζɾσβΠϯϒοΫ
    3PCJO
    8JMMJBNT
    ஶ
    ٢઒
    యल
    ຋༁
    ຖ೔ίϛϡχέʔγϣϯζ ͣΔ͍σβΠϯςΫχοΫ
    
    
    4FNJ'MBU
    WFSTJPO
    IUUQTTQFBLFSEFDLDPNLFO@D@MP[VSVJEF[BJOUFLVOJUVLVQMVTTFNJIVSBUVUPWFSTJPO ࣄྫͰֶͿσβΠϯͷݪଇ
    CZ
    -JGF
    JT
    5FDI
    IUUQXXXTMJEFTIBSFOFULBOB[BXBOBPLJEFTJHOQSJODJQMFT େମ͍͍ײ͡ʹͳΔ,FZOPUFςϯϓϨʔτʮ"[VTBʯ࡞ͬͨ
    IUUQNFNPTBOPHSBQIJYOFUQPTU
32. ΤϯδχΞͷͨΊͷ6*σβΠϯ
    !TIPZB