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

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

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

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

6978ccb697cda698fcfe588c9127d415?s=128

Shoya Ishimaru

March 28, 2015
Tweet

More Decks by Shoya Ishimaru

Other Decks in Programming

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. ࢀߟจݙ ϊϯσβΠφʔζɾσβΠϯϒοΫ 3PCJO8JMMJBNT ஶ ٢઒యल ຋༁ ຖ೔ίϛϡχέʔγϣϯζ ͣΔ͍σβΠϯςΫχοΫ 4FNJ'MBUWFSTJPO IUUQTTQFBLFSEFDLDPNLFO@D@MP[VSVJEF[BJOUFLVOJUVLVQMVTTFNJIVSBUVUPWFSTJPO

    ࣄྫͰֶͿσβΠϯͷݪଇCZ-JGFJT5FDI IUUQXXXTMJEFTIBSFOFULBOB[BXBOBPLJEFTJHOQSJODJQMFT େମ͍͍ײ͡ʹͳΔ,FZOPUFςϯϓϨʔτʮ"[VTBʯ࡞ͬͨ IUUQNFNPTBOPHSBQIJYOFUQPTU
  32. ΤϯδχΞͷͨΊͷ6*σβΠϯ !TIPZB