BADUI探訪 / BADUI Exploration

北海道情報大学の講義「ビギナーズセミナー」の講義資料

Transcript

1. ౬ଜ ཌྷ BADUI探訪 @yumu19 / @yumulab yumura@do-johodai.ac.jp ϏΪφʔζηϛφʔ
2. 自己紹介 • ౬ଜ ཌྷ (ΏΉΒ ͭ͹͞) @yumu19 / @yumulab • ৘ใϝσΟΞֶՊ ।ڭत (2021/04ʙ) • ઐ໳͸৘ใՊֶɺಛʹΠϯλϑΣʔεɺηϯγϯάɺIoTɺVRɺωοτϫʔΫ౳ • ܦྺ • ࡳຈ։੒ߴ౳ֶߍ ଔۀ • ๺ւಓେֶ ཧֶ෦ ஍ٿՊֶՊ ଔۀ • ౦ژେֶେֶӃ ཧֶܥݚڀՊ ஍ٿ࿭੕Պֶઐ߈ म࢜՝ఔ • ๺཮ઌ୺Պֶٕज़େֶӃେֶ ৘ใՊֶݚڀՊ ৘ใՊֶઐ߈ ത࢜՝ఔ • 2008-2011 גࣜձࣾ౦ࣳʢωοτϫʔΫՈిͷݚڀ։ൃͳͲʣ • 2011-2013 Ϋ΢δοτגࣜձࣾʢ԰಺ଌҐΞϓϦɺΠϯλϥΫςΟϒలࣔͷ։ൃɾPMͳͲʣ • 2013-2014 ϑϦʔϥϯεΤϯδχΞɾ߹ಉձࣾPhysVis ୅දࣾһCEOʢiOSΞϓϦέʔγϣϯͷडୗ։ൃͳͲʣ • 2015-2021 ࠃཱݚڀ։ൃ๏ਓ৘ใ௨৴ݚڀػߏʢωοτϫʔΫςετϕουɺແઢωοτϫʔΫΤϛϡϨʔλͷݚڀͳͲʣ 2
3. BADUI • BADUI (Bad User Interface)ɿϢʔβΠϯλϑΣʔεͷࣦഊࣄྫ 3 ʮηϒϯΧϑΣʯͷྫͷ݅͸݁ہԿͩͬͨͷ͔ɺʹ͍ͭͯߟ͍͑ͨ - MGAελοϑϒϩάMGAελοϑϒϩά - גࣜձࣾϚοΫάϥϑΟοΫΞʔπ https://moha.linica.jp/blog/archives/6274 ηϒϯΠϨϒϯͷίʔώʔϚγϯUI໰୊ɻʛՃ౻խҰʢTEXFARM INC.ʣ https://note.com/masakazukato/n/nc1c757b30e87
4. BADUI 4
5. BADUI 5
6. BADUI 6
7. スケジュール • BADUI୳๚ (30෼) • POLITEʹΞοϓϩʔυ • ;Γ͔͑ΓɿपΓͷਓͱσΟεΧογϣϯ 7
8. BADUI探訪 • ͍·͔Β30෼ؒɺେֶ಺ͰBADUIΛ୳͖͍ͯͯͩ͘͠͞ • BADUIΛݟ͚ͭͨΒεϚϗͰࣸਅΛࡱ͖͍ͬͯͯͩ͘͞📷 • ಛʹؾʹͳͬͨਪ͠BADUIΛɺࣸਅͱ؆୯ͳղઆจΛఴ͑ͯ POLITEʹΞοϓϩʔυ͍ͯͩ͘͠͞ • πΠʔτͯ͠΋Α͍ਓ͸ɺϋογϡλά #BADUI Ͱ౤ߘʂ • 1ਓͰ୳͠ʹߦͬͯ΋άϧʔϓͰ୳͠ʹߦͬͯ΋OK • ଞͷतۀ౳ͷ໎࿭ʹͳΒͳ͍Α͏ʹ஫ҙʂ • ՙ෺͸ஔ͍͓͍ͯͯOK (ࡒ෍ɾεϚϗ౳͸ࣗ෼Ͱ؅ཧ) 8
9. デザインの4原則 • ۙ઀ • ੔ྻ • ڧऑ • ൓෮ 9
10. 近接 • ۙ͘ʹ͋Δ৘ใ͸ؔ࿈͕͋Δ 10
11. 整列 • ഑ஔʹҰମੑΛ࣋ͨͤͯ૊৫Խ͢Δ • ἧ͍ͬͯͳ͍ͱɺݟͮΒ͍͚ͩͰ͸ͳ͘ɺ༨ܭͳҙຯΛݟग़ͦ͏ͱͤͯ͞͠·͏ 11
12. 強弱 • ॏཁͳ৘ใͷ৭ɺ഑ஔɺେ͖͞ͳͲΛม͑ͯҧ͍Λ໌֬ʹ͢Δ 12
13. 反復 • ࢹ֮తཁૉΛ܁Γฦ͢͜ͱͰҰମײΛڧԽࠞ͠ཚΛݮΒ͢ 13
14. アフォーダンスとシグニファイア • ΞϑΥʔμϯεɿର৅෺ͱਓؒͷؒͷΠϯλϥΫγϣϯͷؔ܎ • γάχϑΝΠΞɿର৅෺ͱਓؒͱͷؒͷΠϯλϥΫγϣϯͷՄ ೳੑΛࣔࠦ͢Δख͕͔Γ΍ಛ௃ 14 ۩ମྫ͔Βߟ͑ΔΞϑΥʔμϯεͱγάχϑΝΠΞͷҧ͍ʛηϒϯσοΫε https://sevendex.com/post/6841/
15. アフォーダンスとシグニファイア 15
16. 参考文献 16 ʰϊϯσβΠφʔζɾσβΠϯϒοΫʱ https://book.mynavi.jp/nddb/ ʰࣦഊ͔ΒֶͿϢʔβΠϯλϑΣʔε ੈք͸BADUIʢόουɾϢʔΞΠʣͰ͋;Ε͍ͯΔʱ https://gihyo.jp/book/2015/978-4-7741-7064-0 ʰ৽͍͠ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯͷ ڭՊॻɹجૅ͔Β࣮ફ·Ͱʱ https://bookclub.kodansha.co.jp/product? item=0000275998