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

by Shoya Ishimaru

Slide 1

Slide 1 text

ΤϯδχΞͷͨΊͷ6*σβΠϯ !TIPZB

Slide 2

Slide 2 text

ࣗݾ঺հ ੴؙᠳ໵ !TIPZB ɾେࡕ෎ཱେֶେֶӃ޻ֶݚڀՊ೥ ɾझຯJ04 "OESPJE 8FCΞϓϦ։ൃ ɾݚڀ΢ΣΞϥϒϧηϯαʹΑΔߦಈೝࣝ

Slide 3

Slide 3 text

ࠓ೔ͷςʔϚ

Slide 4

Slide 4 text

ࠓ೔ͷςʔϚ νίΫΠΠϫέϩϘ SBDPMUB /'$+VODUJPO LPUPEBNB 3FTU$BTU 4XJQFS ͜Ε·Ͱͷ։ൃͰ਎ʹ͚ͭͨ σβΠϯͷཧ࿦ͱςΫχοΫΛ෼ؒʹڽॖ

Slide 5

Slide 5 text

ͭͷݪଇ

Slide 6

Slide 6 text

ͭͷݪଇ ۙ઀

Slide 7

Slide 7 text

ͭͷݪଇ ۙ઀ ੔ྻ

Slide 8

Slide 8 text

ͭͷݪଇ ۙ઀ ൓෮ ੔ྻ

Slide 9

Slide 9 text

ͭͷݪଇ ۙ઀ ൓෮ ੔ྻ ڧௐ

Slide 10

Slide 10 text

ͭͷݪଇ ۙ઀ ൓෮ ੔ྻ ڧௐ ༨ന ഑৭ ͭͷٕज़

Slide 11

Slide 11 text

ͭͷݪଇ ۙ઀ ൓෮ ੔ྻ ڧௐ ༨ന ഑৭ ͭͷٕज़

Slide 12

Slide 12 text

༨ന

Slide 13

Slide 13 text

༨നςΫχοΫʲ໾ׂΛߟ͑Δʳ

Slide 14

Slide 14 text

༨നςΫχοΫʲ໾ׂΛߟ͑Δʳ ࢹઢΛूΊΔ

Slide 15

Slide 15 text

༨നςΫχοΫʲ໾ׂΛߟ͑Δʳ ࢹઢΛूΊΔ ༨ӆΛ࢒͢

Slide 16

Slide 16 text

༨നςΫχοΫʲ໾ׂΛߟ͑Δʳ ࢹઢΛूΊΔ ༨ӆΛ࢒͢ ·ͱ·ΓΛ࡞Δ

Slide 17

Slide 17 text

༨നςΫχοΫʲϘλϯʳ

Slide 18

Slide 18 text

༨നςΫχοΫʲϘλϯʳ

Slide 19

Slide 19 text

༨നςΫχοΫʲϘλϯʳ จࣈαΠζͷഒ ഒ ഒ ഒ

Slide 20

Slide 20 text

༨നςΫχοΫʲϘλϯʳ $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; } } จࣈαΠζͷഒ ഒ ഒ ഒ

Slide 21

Slide 21 text

഑৭

Slide 22

Slide 22 text

഑৭ςΫχοΫ ৭ͷ਺Λ੍ݶ͢Δ

Slide 23

Slide 23 text

഑৭ςΫχοΫ ϕʔε ϝΠϯ ΞΫηϯτ

Slide 24

Slide 24 text

഑৭ςΫχοΫ ϝΠϯ ϕʔε ΞΫηϯτ

Slide 25

Slide 25 text

഑৭ςΫχοΫ ϝΠϯ ΞΫηϯτ ϕʔε

Slide 26

Slide 26 text

഑৭ςΫχοΫʲ৭બͼʳ Ͳ͏΍ܾͬͯΊΔͷʁ

Slide 27

Slide 27 text

഑৭ςΫχοΫʲ৭બͼʳ ͍͍ײ͡ͷ৭ΛύΫΔ

Slide 28

Slide 28 text

໾ཱͪϦϯΫʲ৭ΛબͿʳ IUUQQBMFUUBNSLDPN

Slide 29

Slide 29 text

໾ཱͪϦϯΫʲ૊Έ߹ΘͤΛબͿʳ IUUQDPMSEDPN

Slide 30

Slide 30 text

ͭͷݪଇ ۙ઀ ൓෮ ੔ྻ ڧௐ ༨ന ഑৭ ͭͷٕज़

Slide 31

Slide 31 text

ࢀߟจݙ ϊϯσβΠφʔζɾσβΠϯϒοΫ 3PCJO8JMMJBNT ஶ ٢઒యल ຋༁ ຖ೔ίϛϡχέʔγϣϯζ ͣΔ͍σβΠϯςΫχοΫ4FNJ'MBUWFSTJPO IUUQTTQFBLFSEFDLDPNLFO@D@MP[VSVJEF[BJOUFLVOJUVLVQMVTTFNJIVSBUVUPWFSTJPO ࣄྫͰֶͿσβΠϯͷݪଇCZ-JGFJT5FDI IUUQXXXTMJEFTIBSFOFULBOB[BXBOBPLJEFTJHOQSJODJQMFT େମ͍͍ײ͡ʹͳΔ,FZOPUFςϯϓϨʔτʮ"[VTBʯ࡞ͬͨ IUUQNFNPTBOPHSBQIJYOFUQPTU

Slide 32

Slide 32 text

ΤϯδχΞͷͨΊͷ6*σβΠϯ !TIPZB