インターフェイスデザインとの向き合い方（公開版）/ How to face interface design

Goodpatch Engineer Meetup Vol.5 で登壇した際のスライドです。iOS Developerだった者がどのようにしてUIデザイナーとして取り組んでいったのか、Interface Architectの動き方や自己の紹介を兼ねながら、エンジニアリングの発想を活かすUI設計の観点を簡単にお話しいたしました。

https://goodpatch.connpass.com/event/156462/

Transcript

1. © 2019 Satori Maru / @usagimaruma. OK %NKEM #gpeng Goodpatch Engineer Meetup Vol.5 OK OK
2. © 2019 Satori Maru / @usagimaruma. ιϑτ΢ΣΞσβΠφʔʗΠϯλʔϑΣΠεΞʔΩςΫτ ݩiOS Developer Interface Design / Interaction Design / Information Architecture @usagimaru @usagimaruma @usagimaru Interaction Design / macOS / iOS / Sketch / Typography #gpeng Goodpatch Engineer Meetup Vol.5 usagimaru
3. © 2019 Satori Maru / @usagimaruma. Goodpatch UI Design Advent Calendar 2019 #gpeng Goodpatch Engineer Meetup Vol.5 MacͱωΠςΟϒΠϯλʔϑΣΠεͱGUIͷݪཧʹؔ͢Δߟ࡯ https://note.com/usagimaruma/n/n03bd95b99dfa
4. @usagimaruma ΠϯλʔϑΣΠεσβΠϯͱͷ޲͖߹͍ํ goodpatch.connpass.com/event/156462/ © 2019 Satori Maru / @usagimaruma. Goodpatch Engineer Meetup Vol.5 #gpeng Goodpatch Engineer Meetup Vol.5
5. © 2019 Satori Maru / @usagimaruma. ʬϢʔβʔΠϯλʔϑΣΠεʭ User Interface #gpeng Goodpatch Engineer Meetup Vol.5
6. © 2019 Satori Maru / @usagimaruma. ΠϝʔδɿSimulator.app Interface #gpeng Goodpatch Engineer Meetup Vol.5
7. © 2019 Satori Maru / @usagimaruma. https://www.flickr.com/photos/24926669@N07/4205240306/ Interface #gpeng Goodpatch Engineer Meetup Vol.5
8. © 2019 Satori Maru / @usagimaruma. https://www.flickr.com/photos/pestoverde/17182400279 Interface #gpeng Goodpatch Engineer Meetup Vol.5
9. © 2019 Satori Maru / @usagimaruma. https://commons.wikimedia.org/wiki/File:Mesa_de_v%C3%ADdeo_1.JPG Interface #gpeng Goodpatch Engineer Meetup Vol.5
10. © 2019 Satori Maru / @usagimaruma. https://commons.wikimedia.org/wiki/File:Tobus_D-H245_2016-9-16.jpg https://commons.wikimedia.org/wiki/File:Mercedes-Benz_Bus_O405N_ZOB_Hannover_Germany.jpg Interface #gpeng Goodpatch Engineer Meetup Vol.5
11. © 2019 Satori Maru / @usagimaruma. Interface #gpeng Goodpatch Engineer Meetup Vol.5
12. © 2019 Satori Maru / @usagimaruma. Inter-face #gpeng Goodpatch Engineer Meetup Vol.5
13. © 2019 Satori Maru / @usagimaruma. Inter-face ʬ໘ͱ໘ͷؒʭ #gpeng Goodpatch Engineer Meetup Vol.5
14. © 2019 Satori Maru / @usagimaruma. Ϣʔβʔͷੈք ର৅ͷੈք ࡞༻ ࡞༻ User Interface #gpeng Goodpatch Engineer Meetup Vol.5
15. © 2019 Satori Maru / @usagimaruma. Ϣʔβʔͷੈք ର৅ͷੈք ૬ޓ࡞༻ User Interface Interaction #gpeng Goodpatch Engineer Meetup Vol.5
16. © 2019 Satori Maru / @usagimaruma. Ϣʔβʔͷੈք ιϑτ΢ΣΞͷੈք ૬ޓ࡞༻ Interaction User Interface Interaction #gpeng Goodpatch Engineer Meetup Vol.5
17. © 2019 Satori Maru / @usagimaruma. Interaction #gpeng Goodpatch Engineer Meetup Vol.5
18. © 2019 Satori Maru / @usagimaruma. Inter-action ʬޓ͍ʹ࡞༻͢Δ͜ͱʭ #gpeng Goodpatch Engineer Meetup Vol.5
19. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 Ϣʔβʔͷࢹ఺Ͱ͸……ʁ
20. OK © 2019 Satori Maru / @usagimaruma. Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ϘλϯΛԡͯ͠ΈΑ͏ͱߟ͑Δ Ϣʔβʔ Ϣʔβʔͷࢥߟ
21. OK © 2019 Satori Maru / @usagimaruma. Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ΧʔιϧΛϘλϯͷ্ʹҠಈ͢Δ Ϣʔβʔ Ϣʔβʔͷࢥߟ
22. © 2019 Satori Maru / @usagimaruma. Interaction #gpeng Goodpatch Engineer Meetup Vol.5 OK %NKEM ϘλϯΛΫϦοΫ͢Δ Ϣʔβʔ Ϣʔβʔͷࢥߟ
23. © 2019 Satori Maru / @usagimaruma. Interaction #gpeng Goodpatch Engineer Meetup Vol.5 OK ϘλϯΛΫϦοΫ͢Δ Ϣʔβʔ Ϣʔβʔͷࢥߟ
24. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 ઃܭऀͷࢹ఺Ͱ͸……ʁ
25. OK © 2019 Satori Maru / @usagimaruma. 㖝闃闳猳 Ϙλϯ ϓογϡϘλϯͰ͋Δ͜ͱΛΞϐʔϧ ϘλϯΛࢹೝͯ͠ɺ࣍ͷߦಈΛݕ౼ Ϣʔβʔ Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
26. © 2019 Satori Maru / @usagimaruma. Interaction 㖝闃闒閬闰猳 OK Ϙλϯ ඇ׆ੑͰ͋Δ͜ͱΛΞϐʔϧ ϘλϯΛࢹೝͯ͠ɺԡͤͳ͍ͱ൑அ Ϣʔβʔ #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
27. OK © 2019 Satori Maru / @usagimaruma. ΧʔιϧΛૢ࡞ͯ͠໨ඪʢϘλϯʣΛϙΠϯςΟϯά Ϣʔβʔ Ϙλϯ – Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
28. © 2019 Satori Maru / @usagimaruma. OK %NKEM ໨ඪʢϘλϯʣͷ্ͰϚ΢εϘλϯΛԡԼ Ϣʔβʔ Ϙλϯ ԡԼͷ࡞༻ʹ൓Ԡͯ͠ݟͨ໨ΛมԽ Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
29. © 2019 Satori Maru / @usagimaruma. OK Ϛ΢εϘλϯ͔ΒࢦΛ཭ͯ͠ΫϦοΫϑΣʔζΛऴ͑Δ Ϣʔβʔ Ϙλϯ ԡ͠ࠐΈղআʹ൓Ԡͯ͠ݟͨ໨ΛมԽ Interaction #gpeng Goodpatch Engineer Meetup Vol.5 ࡞༻ͱڍಈͷ෼ղ
30. © 2019 Satori Maru / @usagimaruma. OK OK OK OK draw() mouseEntered() mouseDown() mouseUp() .isEnabled = false ʪϘλϯΛΫϦοΫ͢Δ͜ͱʫ Normal Normal Highlighted Normal Disabled ڍಈ ঢ়ଶ ը໘ – ϙΠϯςΟϯά Ϛ΢εμ΢ϯ Ϛ΢εΞοϓ – ࡞༻ʢΠϕϯτʣ Ϋ Ϧ ỽ Ϋ OK ҙ ࣝ ͢ Δ Ϙ λ ϯ ͷ ૢ ࡞ ํ ๏ ͸ ⍾ ϙ Π ϯ ς ỹ ϯ ά Ứ ͱ ủ Ϋ Ϧ ỽ Ϋ Ứ ͷ Έ Ố #gpeng Goodpatch Engineer Meetup Vol.5 Ϣʔβʔ
31. © 2019 Satori Maru / @usagimaruma. OK OK OK OK draw() mouseEntered() mouseDown() mouseUp() .isEnabled = false Normal Normal Highlighted Normal Disabled ڍಈ ঢ়ଶ ը໘ – ϙΠϯςΟϯά Ϛ΢εμ΢ϯ Ϛ΢εΞοϓ – ࡞༻ʢΠϕϯτʣ OK ͋ Β Ώ Δ ঢ় ଶ ΍ ڍ ಈ ʹ ର ͢ Δ ద ੾ ͳ ϓ ϩ ά ϥ ϛ ϯ ά ͕ ඞ ཁ Ố ࡞ ༻ ʹ ର ͠ ͯ ൓ Ԡ Λ Ͳ ͏ ฦ ͢ ͷ ͔ ύ λ ʔ ϯ Λ ઃ ܭ ͢ Δ Ố #gpeng Goodpatch Engineer Meetup Vol.5 ʪϘλϯΛΫϦοΫ͢Δ͜ͱʫ γεςϜ
32. © 2019 Satori Maru / @usagimaruma. OK OK OK OK draw() mouseEntered() mouseDown() mouseUp() .isEnabled = false Normal Normal Highlighted Normal Disabled ڍಈ ঢ়ଶ ը໘ – ϙΠϯςΟϯά Ϛ΢εμ΢ϯ Ϛ΢εΞοϓ – ࡞༻ʢΠϕϯτʣ OK ͋ Β Ώ Δ ঢ় ଶ ΍ ڍ ಈ ʹ ର ͢ Δ ద ੾ ͳ ϓ ϩ ά ϥ ϛ ϯ ά ͕ ඞ ཁ Ố ࡞ ༻ ʹ ର ͠ ͯ ൓ Ԡ Λ Ͳ ͏ ฦ ͢ ͷ ͔ ύ λ ʔ ϯ Λ ઃ ܭ ͢ Δ Ố ΠϯλϥΫγϣϯςΫχοΫ #gpeng Goodpatch Engineer Meetup Vol.5
33. © 2019 Satori Maru / @usagimaruma. IBM “Designing for the User with OVID” (1998) ΑΓղऍ ਓؒͷײ֮ʹ௚઀ؔΘΔઃܭ ΠϯλϥΫγϣϯςΫχοΫΛۦ࢖ͨ͠ઃܭ ΦϒδΣΫτϞσϧͷઃܭ ΦϒδΣΫτͷ۩ମతͳݟ͑ํ ΦϒδΣΫτͱϢʔβͷର࿩ํ๏ ιϑτ΢ΣΞσβΠϯͷओཁͳ3ͭͷ؍఺ ΠϯλϥΫγϣϯ ΦϒδΣΫτϞσϧ ࢹ֮දݱ 10% 30% 60% #gpeng Goodpatch Engineer Meetup Vol.5 ΠϯλϑΣʔε΍ΦϒδΣΫτͷߏ଄
34. © 2019 Satori Maru / @usagimaruma. IBM “Designing for the User with OVID” (1998) ΑΓղऍ ਓؒͷײ֮ʹ௚઀ؔΘΔઃܭ ΠϯλϥΫγϣϯςΫχοΫΛۦ࢖ͨ͠ઃܭ ΦϒδΣΫτϞσϧͷઃܭ ΦϒδΣΫτͷ۩ମతͳݟ͑ํ ΦϒδΣΫτͱϢʔβͷର࿩ํ๏ ιϑτ΢ΣΞσβΠϯͷओཁͳ3ͭͷ؍఺ ΠϯλϥΫγϣϯ ΦϒδΣΫτϞσϧ ࢹ֮දݱ 10% 30% 60% OK OK OK #gpeng Goodpatch Engineer Meetup Vol.5 ΠϯλϑΣʔε΍ΦϒδΣΫτͷߏ଄
35. © 2019 Satori Maru / @usagimaruma. IBM “Designing for the User with OVID” (1998) ΑΓղऍ ΦϒδΣΫτϞσϧ ࢹ֮දݱ 10% 60% ਓؒͷײ֮ʹ௚઀ؔΘΔઃܭ ΠϯλϥΫγϣϯςΫχοΫΛۦ࢖ͨ͠ઃܭ ΦϒδΣΫτϞσϧͷઃܭ ΦϒδΣΫτͷ۩ମతͳݟ͑ํ ΦϒδΣΫτͱϢʔβͷର࿩ํ๏ ιϑτ΢ΣΞσβΠϯͷओཁͳ3ͭͷ؍఺ ΠϯλϥΫγϣϯ 30% OK #gpeng Goodpatch Engineer Meetup Vol.5 ΠϯλϑΣʔε΍ΦϒδΣΫτͷߏ଄
36. © 2019 Satori Maru / @usagimaruma. IBM “Designing for the User with OVID” (1998) ΑΓղऍ ਓؒͷײ֮ʹ௚઀ؔΘΔઃܭ ΠϯλϥΫγϣϯςΫχοΫΛۦ࢖ͨ͠ઃܭ ΦϒδΣΫτϞσϧͷઃܭ ΦϒδΣΫτͷ۩ମతͳݟ͑ํ ΦϒδΣΫτͱϢʔβͷର࿩ํ๏ ΠϯλϑΣʔε΍ΦϒδΣΫτͷߏ଄ ιϑτ΢ΣΞσβΠϯͷओཁͳ3ͭͷ؍఺ ΠϯλϥΫγϣϯ ΦϒδΣΫτϞσϧ ࢹ֮දݱ 10% 30% 60% #gpeng Goodpatch Engineer Meetup Vol.5
37. © 2019 Satori Maru / @usagimaruma. ʬΞʔΩςΫνϟʭ Architecture #gpeng Goodpatch Engineer Meetup Vol.5
38. © 2019 Satori Maru / @usagimaruma. ʬΠϯλʔϑΣΠεΞʔΩςΫνϟʭ Interface Architecture #gpeng Goodpatch Engineer Meetup Vol.5
39. © 2019 Satori Maru / @usagimaruma. Interface Architecture ʬΠϯλʔϑΣΠεΞʔΩςΫνϟʭ #gpeng Goodpatch Engineer Meetup Vol.5 lΠϯλʔϑΣΠεͷߏ଄͸ɺؔΘΔ֓೦ɺσβΠφʔͷઃܭࢥ૝ɺϢʔε έʔεɺͦΕΒΛج൫ͱͨ͠৘ใઃܭ΍ϞσϦϯάʹΑΓܗ࡞ΒΕ·͢ɻ
    6*ͱͯ͠ػೳͤ͞ΔͨΊʹ͸ɺద੾ͳΠϯλϥΫγϣϯٕज़Λ༻͍ͯೖग़ྗ ͷ࢓૊ΈΛઃܭ͠ɺਖ਼͘͠ର࿩͕ߦΘΕΔ؀ڥʹ࢓ཱͯΔ͜ͱ͕ॏཁͰ͢ɻz
40. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 Ϋϥε Πϯελϯε
41. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 ࣸਅ ϓϩύςΟ ܕ ଟॏ౓ ըૉ਺ 1 ࡱӨ೔࣌ 1 ࡱӨػࡐ 0..1 ࡱӨ৔ॴ 0..1 ΞΫηεݖ 1 ॴଐΞϧόϜ ʪΞϧόϜʫ 0..n λά ʪλάʫ 0..n ΞϧόϜ ϓϩύςΟ ܕ ଟॏ౓ ΞϧόϜ໊ 1 ࣸਅ਺ 1 ࣸਅҰཡ ʪࣸਅʫ 0..n λάҰཡ ʪλάʫ 0..n λά ϓϩύςΟ ܕ ଟॏ౓ λά໊ 1 ࡞੒೔࣌ 1 ⱖ溪♧鋮 ةؚ 䨽㾩،ٕغي ةؚ♧鋮 UIΫϥεਤ UMLͷΫϥεਤΛϕʔεʹͨ͠ɺUIͷϞσϦϯάݴޠɻ ※ࣸਅΞϓϦέʔγϣϯͷUIߏ଄
42. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 Πϯελϯεͷଟॏ౓ Zero One Infinity ϧʔϧ
43. © 2019 Satori Maru / @usagimaruma. 0 1 ∞ ιϑτ΢ΣΞͰద༻͞ΕΔ੍໿͸ɺ0ŋ1ŋແݶେ ͰදͤΔ਺Λجຊͱ͢Δ Zero One Infinity ϧʔϧ ۩ମతͳ਺஋͸ɺແݶେʹରͯ͠ޙ͔Βద༻͢Δɻ #gpeng Goodpatch Engineer Meetup Vol.5
44. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 0..4 iOS Dock: 2..n macOS Dock: ϑΥʔϜϑΝΫλʹΑΔ੍໿ ΠϝʔδɿiOS, macOS
45. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 0..n Apps: ՄೳͳݶΓແݶݸΛڐ༰ ΠϝʔδɿiOS
46. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 1..3 1..n දݱ౎߹ͷ੍໿ ΠϝʔδɿiOS
47. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 πϦʔ ηϛϥςΟε
48. © 2019 Satori Maru / @usagimaruma. ਌͕1ɺࢠ͕ෳ਺ ϑΥϧμ 1 0..n ϑΝΠϧ ϑΝΠϧ͔Βݟͯɺ ϑΥϧμ͸ඞͣ1 ϑΥϧμ͔Βݟͯɺ ϑΝΠϧ͸0..n ཁૉ͸ҰͭͷάϧʔϓʹͷΈॴଐͰ͖Δɻ άϧʔϓ͸ෳ਺ͷཁૉΛแׅ͢Δɻ πϦʔߏ଄ #gpeng Goodpatch Engineer Meetup Vol.5
49. © 2019 Satori Maru / @usagimaruma. ΞϧόϜ 0..n ࣸਅ 0..n ཁૉ͸ෳ਺ͷάϧʔϓʹॴଐͰ͖Δɻ άϧʔϓ͸ෳ਺ͷཁૉΛแׅ͢Δɻ ηϛϥςΟεߏ଄ #gpeng Goodpatch Engineer Meetup Vol.5 ࣸਅ͔Βݟͯɺ ΞϧόϜ͸0..n ΞϧόϜ͔Βݟͯɺ ࣸਅ͸0..n ਌͕ෳ਺ɺࢠ͕ෳ਺
50. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 OOUI
51. © 2019 Satori Maru / @usagimaruma. ΦϒδΣΫτ ΞΫγϣϯ ࣮ߦ͢Δ બ୒͔ͯ͠Β… #gpeng Goodpatch Engineer Meetup Vol.5 ΠϯλϥΫγϣϯʹ͓͚Δʮ໊ࢺ → ಈࢺʯߏจ
52. © 2019 Satori Maru / @usagimaruma. cralus.moof() object method ΦϒδΣΫτ ΞΫγϣϯ Focus ʹ View ʹ Message ϑΥʔΧεͷ͋ΔΦϒδΣΫτʹ ϝοηʔδΛૹ৴ #gpeng Goodpatch Engineer Meetup Vol.5 ࣮ߦ͢Δ બ୒͔ͯ͠Β… ΠϯλϥΫγϣϯʹ͓͚Δʮ໊ࢺ → ಈࢺʯߏจ
53. © 2019 Satori Maru / @usagimaruma. ίϚϯυ ϝχϡʔόʔ ϑΥʔΧε ϑΝΠϧ ίϚϯυ ίϯςΫετϝχϡʔ ϑΥʔΧε ϑΝΠϧ ʪϝχϡʔʫ͸ϑΥʔΧεͷ౰ͨͬͨΦϒδΣΫτ౳ʹରͯ͠༗ޮͳίϚϯυͷஔ͖৔ #gpeng Goodpatch Engineer Meetup Vol.5 ΠϝʔδɿmacOS
54. © 2019 Satori Maru / @usagimaruma. ʪπʔϧόʔʫ͸ϑΥʔΧεͷ౰ͨͬͨΦϒδΣΫτʹରͯ͠༗ޮͳίϚϯυͷஔ͖৔ ίϚϯυ πʔϧόʔ ϑΥʔΧε ߦʗϑΝΠϧ ϑΥʔΧε ΢Πϯυ΢ #gpeng Goodpatch Engineer Meetup Vol.5 ΠϝʔδɿmacOS
55. © 2019 Satori Maru / @usagimaruma. #gpeng Goodpatch Engineer Meetup Vol.5 UIΫϥεਤ ଟॏ౓ Πϯελϯε OOUI πϦʔ ηϛϥςΟε Ϋϥε ϞʔυϨε Ϟʔμϧ Zero One Infinity ϧʔϧ ֓೦Ϟσϧ υϝΠϯ ϢϏΩλεݴޠ ࢀর ൚Խ දݱϞσϧ ࣮૷Ϟσϧ ೴಺Ϟσϧ UX ϢʔβϏϦςΟ ΠϯλϥΫγϣϯ
56. © 2019 Satori Maru / @usagimaruma. l(6*ͷߏ଄΍ઃܭύλʔϯɺγεςϜͷ࢓૊Έʹਫ਼௨͓ͯ͠ΓɺΞʔΩςΫ νϟͷઃܭʹ੹೚Λ࣋ͭʮ6*σβΠφʔʯͷҰछͰ͢ɻ(6*ʹؔ͢Δ֓೦ɾ ઃܭࢥ૝ͷఆٛɺυϝΠϯϞσϧͷઃܭɺ৘ใઃܭɺ006*ϞσϦϯάɺΠϯ λϥΫγϣϯઃܭΛத৺ʹɺιϑτ΢ΣΞͷl֦ுੑzΛߟྀ͠ͳ͕ΒσβΠ ϯʹऔΓ૊Έ·͢ɻz 6*σβΠϯʹ͓͚ΔΠϯλʔϑΣΠεΞʔΩςΫτͷ໾ׂ
    IUUQTHPPEQBUDIDPNCMPHVJJOUFSGBDFBSDIJUFDU Interface Architect ʬΠϯλʔϑΣΠεΞʔΩςΫτʭ #gpeng Goodpatch Engineer Meetup Vol.5
57. © 2019 Satori Maru / @usagimaruma. UIσβΠϯʹ͓͚ΔΠϯλʔϑΣΠεΞʔΩςΫτͷ໾ׂ https://goodpatch.com/blog/ui-interface-architect/ #gpeng Goodpatch Engineer Meetup Vol.5
58. © 2019 Satori Maru / @usagimaruma. #gpeng