ロジカルなUIデザイン 考え方と関わり方 / A Logical Approach to UI Design, How to Think and Engage

「ロジカルなUIデザイン 考え方と関わり方」
ソフトウェアエンジニアリングの視点から、UIデザインの考え方や関わり方の事例を紹介します。また、役割や職種の異なるエンジニア／デザイナー同士の共通言語の持ち方や、協業の仕方について考えます。

Offers
https://offers.jp/worker_events/connpass_44
https://offers-jp.connpass.com/event/327741/
#Offers_DeepDive

--

本講演資料は、オファーズさん主催のオンラインイベント「エンジニア出身デザイナーusagimaru氏と学ぶ　ロジカルに考えるエンジニアのためのUIデザイン」にて使用したものの編集版です。

Transcript

1. https://offers.jp/worker_events/connpass_44 2024.10.15 ϩδΧϧͳUIσβΠϯ ߟ͑ํͱؔΘΓํ © 2024 usagimaru ʰΤϯδχΞग़਎σβΠφʔusagimaruࢯͱֶͿɹϩδΧϧʹߟ͑ΔΤϯδχΞͷͨΊͷUIσβΠϯʱ #Offers_DeepDive usagimaru ެ։൛
2. © 2024 usagimaru ιϑτ΢ΣΞσβΠφʔ / UIΞʔΩςΫτ / σϕϩούʔ usagimaru גࣜձࣾλΠϜϥϘ @usagimaru @usagimaruma bento.me/usagimaru ! ! ! ex גࣜձࣾάουύον
3. ։࠵࣮੷ © 2024 usagimaru 1024jp zumuya usagimaru Nobtaka macos-native.github.io “macOS native” ίϛϡχςΟӡӦ (2018–)
4. © 2024 usagimaru ιϑτ΢ΣΞσβΠϯ UI / ৘ใΞʔΩςΫνϟ / ΠϯλϥΫγϣϯ AppleϓϥοτϑΥʔϜͰͷΞϓϦ։ൃ ߨԋɾొஃɺࣥච׆ಈɺΠϕϯτӡӦ΄͔ ιϑτ΢ΣΞΤϯδχΞϦϯά ίϛϡχέʔγϣϯ
5. © 2024 usagimaru UI Design Engineering
6. © 2024 usagimaru ιϑτ΢ΣΞUIσβΠϯ ϩδΧϧͳଊ͑ํ l z ߨԋςʔϚ
7. © 2024 usagimaru UI Design φϏήʔγϣϯ ίϯςϯπ ΠϯλϥΫγϣϯ ΞΠίϯ λΠϙάϥϑΟ ϨΠΞ΢τ …
8. © 2024 usagimaru UI Design ୯ͳΔň͓ֆඳ͖ʼn ……ͱ͍͏Θ͚Ͱ͸ͳ͍ʂ → γεςϜΛߏங͢Δ͜ͱʹ૊Έࠐ·ΕΔ → ιϑτ΢ΣΞͷݪཧΛ஌Δඞཁ͕͋Δ → ΤϯδχΞϦϯάͱ΋ຊ࣭͸ࣅ͍ͯΔ
9. © 2024 usagimaru Design ʮઃܭʯ
10. ઃܭʹ͸ ݪཧݪଇͱϩδοΫ͕͋Δ © 2024 usagimaru
11. © 2024 usagimaru UIઃܭͷݪཧݪଇͱϩδοΫ Ұྫ
12. UIઃܭͷݪཧݪଇͱϩδοΫ Apple Human Interface Guidelines / Design Principles © 2024 usagimaru • ൺᄻͷ࢖༻ • ௚઀ૢ࡞ • ݟͨ΋ͷΛࢦࣔ • Ұ؏ੑ • WYSIWYGʢݟͨ··Λඳըʣ • ϢʔβʔʹΑΔ੍ޚ • ϑΟʔυόοΫ • ׮༰ੑ • ҆ఆੑ • ඒత੔߹ੑ Human Interface Guidelines: The Apple Desktop Interface HIG for Desktop (1987) iOS HIG (2017) • ൺᄻͷ࢖༻ (Metaphors) • ௚઀ૢ࡞ (Direct Manipulation) • Ұ؏ੑ (Consistency) • ϢʔβʔʹΑΔ੍ޚ (User Control) • ϑΟʔυόοΫ (Feedback) • ඒత੔߹ੑ (Aesthetic Integrity)
13. UIઃܭͷݪཧݪଇͱϩδοΫ ϠίϒɾχʔϧηϯͷϢʔβϏϦςΟ10ݪଇ © 2024 usagimaru https://u-site.jp/about/nielsen • γεςϜঢ়ଶͷࢹೝੑΛߴΊΔ • ࣮؀ڥʹ߹ͬͨγεςϜΛߏங͢Δ • Ϣʔβʔʹίϯτϩʔϧͷओಋݖͱࣗ༝౓Λ༩͑Δ • Ұ؏ੑͱඪ४ԽΛอ࣋͢Δ • ΤϥʔͷൃੜΛࣄલʹ๷ࢭ͢Δ • هԱ͠ͳͯ͘΋ɺݟΕ͹Θ͔ΔΑ͏ͳσβΠϯΛߦ͏ • ॊೈੑͱޮ཰ੑΛ࣋ͨͤΔ • ࠷খݶͰඒ͍͠σβΠϯΛࢪ͢ • ϢʔβʔʹΑΔΤϥʔೝࣝɺ਍அɺճ෮Λαϙʔτ͢Δ • ϔϧϓͱϚχϡΞϧΛ༻ҙ͢Δ
14. ͜ΕΒ͸ ҰൠԽͨ͠ΨΠυϥΠϯ © 2024 usagimaru → ޙ͔ΒઃܭΛධՁ͢ΔࡍʹோΊΕ͹े෼
15. © 2024 usagimaru ߏ଄ύλʔϯ ϞσϧԽ
16. © 2024 usagimaru ߏ଄ύλʔϯ
17. σβΠϯύλʔϯ ΦϒδΣΫτࢦ޲ʹ͓͚Δ࠶ར༻ͷͨΊͷύλʔϯ © 2024 usagimaru GoF Design Patterns Chain of Responsibility Template Adapter Singleton Builder Memento Proxy …
18. UIઃܭʹ͓͚Δύλʔϯ © 2024 usagimaru B C A
19. φϏήʔγϣϯύλʔϯ φϏήʔγϣϯͷྫ © 2024 usagimaru ϋϒɾΞϯυɾεϙʔΫ υϦϧμ΢ϯ ϐϥϛου εςοϓ Ϟʔμϧ … ϑϥοτ φϏήʔγϣϯύλʔϯ A
20. υϦϧμ΢ϯ © 2024 usagimaru ૈ ࡉ 情報の粒度・解像度 #1 #2 #3 ໭Δ ໭Δ 奥に潜るほど情報が⾼解像化 A1
21. ॏ૚Խʢ͋Δ͍͸Ϟʔμϧʣ © 2024 usagimaru 情報は「重層化」され、⼿前にくるほど新しい ৽ ݹ ৘ ใ ͷ ৽ ن ੑ ࠷৽ લ ޙ ৘ ใ ͷ ֊ ૚ ྫɿϞʔμϧϏϡʔ UIを覆い隠し、｢着⽬すべき情報」を⽰す A2
22. © 2024 usagimaru ‣ ࠨͷ৘ใ͸ૈ͘ɺӈͷ৘ใ͸ࡉ͔͍ ‣ ্ͷ৘ใ͸ૈ͘ɺԼͷ৘ใ͸ࡉ͔͍ ‣ άϧʔϓ͸ૈ͘ɺࢠཁૉ͸ࡉ͔͍ 粗 細 *ࠨԣॻ͖ϨΠΞ΢τͷ৔߹ ϨΠΞ΢τͷجຊݪଇ B
23. ϨΠΞ΢τͷجຊݪଇ Main + Detailʢλςʣ © 2024 usagimaru Main Detail ֓ཁ ৄࡉ ্͔ΒԼʹల։ B1
24. ϨΠΞ΢τͷجຊݪଇ Main + DetailʢϤίʣ © 2024 usagimaru Main Detail ֓ཁ ৄࡉ ࠨ͔Βӈʹల։ B2
25. © 2024 usagimaru Content area ϨΠΞ΢τͷجຊݪଇ σεΫτοϓΞϓϦͷ΢Πϯυ΢ߏ੒ྫ Title bar / Toolbar Untitled Optional area Inspector Sidebar B3
26. © 2024 usagimaru πϦʔ ηϛϥςΟε C
27. © 2024 usagimaru πϦʔߏ଄ άϧʔϓ͕1ɺཁૉ͕ෳ਺ άϧʔϓͱཁૉͷؔ܎ʹ͓͍ͯ ɹ ϑΝΠϧ͔Βݟͯ ɹ ϑΥϧμ͸ 1 ɹ ϑΥϧμ͔Βݟͯ ɹ ϑΝΠϧ͸ 0..n ཁૉ͸Ұͭͷάϧʔϓʹॴଐ άϧʔϓ͸ෳ਺ͷཁૉΛแׅ • σΟϨΫτϦʗϑΥϧμ֊૚ • ੓෎૊৫ɾاۀͷߏ଄ • ݐ෺ͷߏ଄ • ॅॴͷදݱ • ػցͷߏ଄ άϧʔϓ ཁૉ 0..n 1 C1
28. © 2024 usagimaru ཁૉ͸ෳ਺ͷάϧʔϓʹॴଐ άϧʔϓ͸ෳ਺ͷཁૉΛแׅ ηϛϥςΟεߏ଄ • λάωοτϫʔΫ • iPhoneͷࣸਅΞϧόϜ • ԻָܥappͷεϚʔτϓϨΠϦετ • πϦʔܕͷ౷࣏ػߏʢॅॴʣͱɺ ࣮ࡍͷਓʑͷ׆ಈൣғ άϧʔϓ͕ෳ਺ɺཁૉ͕ෳ਺ άϧʔϓͱཁૉͷؔ܎ʹ͓͍ͯ ɹ ࣸਅ͔Βݟͯ ɹ ΞϧόϜ͸ 1..n ɹ ΞϧόϜ͔Βݟͯ ɹ ࣸਅ͸ 0..n 0..n 1..n άϧʔϓ ཁૉ C2
29. © 2024 usagimaru ϞσϧԽ
30. © 2024 usagimaru ۩ମ෺Λ࡞Βͳ͍ͱ൑அͰ͖ͳ͍΋ͷ͸ ϓϩτλΠϓͰධՁ w w w w w w ص্Ͱݕ౼Մೳͳ΋ͷ͸ ϞσϧͰධՁ w w w • ߏ଄ͷ࿦ཧੑ • දࣔܗଶ • φϏήʔγϣϯʗঢ়ଶભҠ • Ϣʔβʔͷ༻్ͱधཁ • දݱͷଥ౰ੑ • ݟͨ໨ɾಈ͖ͷҹ৅΍ײ৮ • ϢʔβϏϦςΟɺΞΫηγϏϦςΟ • ϓϨθϯςʔγϣϯɺ૯߹తͳσβΠϯͷධՁ
31. ίϯςϯπߏ଄ͷϞσϧԽ ϨγϐαʔϏεͷྫ © 2024 usagimaru Ϩγϐ ࡐྉ ྉཧݚڀՈ Ϣʔβ ίϝϯτ ௐཧಈը ίϝϯτऀ ౤ ߘ ऀ ౤ ߘ ಺ ༰ ౤ߘ಺༰ ౤ߘઌ Ϩ γ ϐ ࡐ ྉ ؂मϨγϐ ؂मऀ ಈը ίϝϯτ౤ߘ ͨ͠Ϩγϐ
32. ϢʔεέʔεͷϞσϧԽ Ϣʔεέʔεఆٛͷྫ © 2024 usagimaru Use-case #A1-1 ň༧໿Λొ࿥Ͱ͖Δʼn Use-case #A1-2 ň༧໿Λ࡟আͰ͖Δʼn Use-case #A1-3 ň༧໿ΛฤूͰ͖Δʼn Use-case #A2-1 ňϓϩϑΟʔϧΛొ࿥Ͱ͖Δʼn Use-case #A2-2 ňϓϩϑΟʔϧΛ࡟আͰ͖Δʼn Use-case #A2-3 ňϓϩϑΟʔϧΛฤूͰ͖Δʼn
33. ڞ௨ݴޠΛ࣋ͭ͜ͱ ϞσϧΛ࢖ͬͨձ࿩ © 2024 usagimaru ΤϯδχΞ σβΠφʔ ڞ௨ݴޠ͕ͳ͍ ͋qwͤdrftgy;͜͡lp ៰̧w៰ᇴrftgy៰ś៰ှˋlp
34. ڞ௨ݴޠΛ࣋ͭ͜ͱ ϞσϧΛ࢖ͬͨձ࿩ © 2024 usagimaru ΤϯδχΞ σβΠφʔ ͜ͷ֓೦Λ࣮૷͠·͢ ͜ͷ֓೦ΛUIͰදݱ͠·͢ ڞ௨ݴޠ Ϟσϧ
35. © 2024 usagimaru ߏ଄ύλʔϯ ϞσϧԽ
36. © 2024 usagimaru ߏ଄ύλʔϯ ϞσϧԽ ৘ใΞʔΩςΫνϟ
37. © 2024 usagimaru UI Design Engineering ৘ใΞʔΩςΫνϟ