社内イベントで登壇した際のスライドです。「ユーザーインターフェイス解剖学」の改訂版。主に、UIデザインにおいて検討した方がよい/すべき考え方というものを簡単にご紹介しました。
ϢʔβʔΠϯλʔϑΣΠεղֶɾվగ൛ʢެ։൛ʣPitchpatch #8 ϢʔβʔΠϯλʔϑΣΠεઃܭͷߟ͑ํv2 2018.2.15© 2017-2018 Satori MARU. @usagimaruma
View Slide
@usagimarumaؙ ྯ ཬ· Δ ͞ ͱ ΓApplication DesignerInterface DevelopermacOS / iOS DeveloperSketch Plugin Developer
UIGUIͱͯ͠ͷUI
UIϨΠΞτφϏήʔγϣϯঢ়ଶΠϯλϥΫγϣϯλΠϙάϥϑΟจݴ৭άϥϑΟοΫεΞχϝʔγϣϯʜ͞·͟·ͳཁૉ
ߟ͑ํ
ϢʔβʔͱσόΠεͷڑจԽͱΠϯλʔϑΣΠεʗใల։ͷݪଇϞʔυϨεWTϞʔυΦϒδΣΫτࢦઃܭ
ϢʔβʔͱσόΠεͷڑ
Ϣʔβʔʹ͍ۙ΄Ͳň·Δ͍ʼn
ۙԕ
صʹஔ͘ صʹஔ͘ ʹண ࣖʹணนࡍʹஔ͘ ยखͰ࣋ͭۙԕ
ਂᖒਓ.JDSP$POTJEFSBUJPOԾʹҰ൪ࠨଆʹน͕͋ΓɺҰ൪ӈଆʹਓ͕͍ؒΔͱ͠·͢ɻͦͷҰ൪ࠨଆͷน࢛֯ͯ͘ɺͩΜͩΜਓؒͷମʹۙͮ͘ʹ͕ͨͬͯ͠ɺͷؙ͘ͳ͍ͬͯ͘ɻͱ͍͏֓೦Λߟ͑·ͨ͠ɻͦͷ௨Γʹɺͷੑ֨ผʹͦͷεέʔϧͷதʹϓϩοτͯ͠ೲΊͯΈ·ͨ͠ɻͦͷఆٛͷͱɺͲͷ͘Β͍࢛֯ͨ͘͠Β͍͍͔ɺͪΐͬͱؙͨ͘͠Β͍͍͔ͳͲͱߟ͑ͳ͕ΒɺશମͷܗΛܾΊ͍͖ͯ·ͨ͠ɻ͔ͩΒྫྷଂݿนʹ͍ۙํͰ࢛͍͚֯͘͢͝Ͳɺগ͠ॊΒ͔͘ͳ͍ͬͯΔ෦͕͋ΔɻͦͷܗͷඞવੑʕJOFWJUBCMFͱ͍͏͜ͱΛߟ͑ͳ͕ΒશମͷܗΛσβΠϯ͢Δ͜ͱ͕ॏཁͰ͢ɻIUUQTXXXNVKJDPNKQqBHTIJQIVBJIBJBSDIJWFGVLB[BXBIUNM
Լ෦ʹݻఆDock
Լ෦ʹݻఆDockDockͰු༡ΞϓϦ
iPhone 7iPhone XͱDockͷϥϯυ͕ҰகϋʔυΣΞͱιϑτΣΞͷ౷߹Լ෦ʹݻఆDockԼ෦ʹු༡DockiPhone XDockͰු༡ΞϓϦ
֯RͷҰக
Cancel OK
https://developer.apple.com/videos/play/wwdc2017/802/
֊ߏɾೖΕࢠߏ
https://developer.apple.com/ios/human-interface-guidelines/overview/themes/
iOS ͷσβΠϯʹ͓͚Δࢦ໌ྎ / Clarity߇͑Ί / DeferenceԞߦ͖ / Depth
લ໘എ໘
DockʹแʗDockͰු༡ΞϓϦʢೖΕࢠߏʣ
தؒͰු༡࠷എ໘ʹݻఆ࠷લ໘ɾ্෦ʹݻఆεςʔλεόʔΞϓϦนࢴ
DCBA ×WindowA B C D
ʹϝʔϧϘοΫε৽نϝοηʔδ৽نϝοηʔδ৽نϝοηʔδ৽نϝοηʔδ৽نϝοηʔδ
ॻࣈํɾ๏ɾ෩श͕ใͷྲྀΕΛܾΊΔจԽͱΠϯλʔϑΣΠε
ňࣙൣʢ;ΒΜ͢͡Μʣʼnߘ
αϯτϦʔനभৠཷॴ ΠεΩʔതؗͷలࣔΑΓ
https://twitter.com/horicun/status/749811918408343552
࡚ݝ࡚ࢢ ӫ౬
https://twitter.com/nonomaru116/status/741528924761378817 https://www.amazon.co.jp/dp/B009HPDI30/
Πϥετɿ@tobefrog
https://www.excite.co.jp/News/entertainment_g/20140717/Mogumogunews_553.html
ຊɿࠨଆ௨ߦ υΠπɿӈଆ௨ߦ๏
࢛ࠃീेീՕॴɿ࣌ܭճΓ Ϛχंɿ࣌ܭճΓڭ
https://commons.wikimedia.org/wiki/File:Chamber_of_the_House_of_Representatives_of_Japan.jpghttps://commons.wikimedia.org/wiki/File:Japanese_diet_inside.jpgऺٞӃɿ࣌ܭճΓ ࢀٞӃɿ࣌ܭճΓଠཅͷಈ͖
ใͷྲྀΕʹΑͬͯఆ·ΔΠϯλʔϑΣΠεͷํใల։ͷݪଇ
൱ఆ ಉҙ
FinderͷΧϥϜදࣔ
FinderͷΧϥϜදࣔΫϩʔζϘλϯӈԼ۱ॖখํʹ൱ఆ֦ுํʹߠఆ
macOS Windowshttps://commons.wikimedia.org/wiki/File:Solveur_libreoffice_calc_3_fr.png
macOS Windowshttps://commons.wikimedia.org/wiki/File:Solveur_libreoffice_calc_3_fr.png൱ఆ ൱ఆߠఆ ߠఆ ൱ఆ൱ఆ
ϔϒϥΠޠɾΞϥϏΞޠڥͷiOS
Master-Detail PatternϚελʔৄࡉύλʔϯ
αΠυόʔ αΠυόʔʢΤσΟλʣ WYSIWYGΤσΟλ ΠϯεϖΫλʔπʔϧόʔ
ϚελʔϖΠϯৄࡉϖΠϯ
ৄࡉϖΠϯϚελʔϖΠϯ
ϞʔυϨε vs. Ϟʔυ
"QQMF)VNBO*OUFSGBDF(VJEFMJOFTʢຊޠ൛ʣʮϞʔυϨεΦϖϨʔγϣϯʯϞʔυ͕ଘࡏ͢ΔγεςϜͰɺϢʔβଆͷૢ࡞͕ಉҰͰ͋ͬͯɺͦͷૢ࡞͕ͲͷϞʔυͰߦΘΕ͔ͨʹΑΓγεςϜଆͷԠมԽ͠·͢ɻৗੜ׆ͰϞʔυͷ֓೦͕༻͞ΕΔ͜ͱ΄ͱΜͲ͋Γ·ͤΜɻ͕ͨͬͯ͠ɺϞʔυͷଘࡏ͢ΔίϯϐϡʔλڥෆࣗવͰҟ࣭ͳͷʹࢥ͑·͢ɻ
ΞϓϦέʔγϣϯμΠΞϩάɿϞʔμϧϏϡʔ
γʔτμΠΞϩάɿϞʔμϧϏϡʔ
ݕࡧύωϧɿϞʔυϨεϏϡʔ
ΠϯεϖΫλʔɿϞʔυϨεϏϡʔ
https://dribbble.com/shots/1633262-Hamburger
ࣸਅҰཡϞʔυ֊Ϣʔβʔͷߦಈ#1 ňࣸਅҰཡʼnࣸਅΛோΊΔঢ়گ ΞϧόϜͷࣸਅͷ୳ࡧɾ၆ᛌϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡϞʔυ֊Ϣʔβʔͷߦಈ#1 ňࣸਅҰཡʼnࣸਅબػೳΛݟ͚ͭΔঢ়گ ΞϧόϜͷࣸਅͷ୳ࡧɾ၆ᛌϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡબϞʔυ֊Ϣʔβʔͷߦಈ#2 ňબʼnࣸਅબػೳΛ࣮ߦঢ়گ ΞϧόϜࣸਅબϞʔυʹҠߦϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡબࣸਅΛબϞʔυ֊Ϣʔβʔͷߦಈ#2 ňબʼnෳͷࣸਅΛબ͢Δঢ়گ ෳͷࣸਅΛબதϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡબࣸਅΛબϞʔυ֊Ϣʔβʔͷߦಈ#2 ňબʼnબࣸਅͷڞ༗ػೳΛݟ͚ͭΔঢ়گ ෳͷࣸਅΛબதϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡબڞ༗ࣸਅΛબϞʔυ֊Ϣʔβʔͷߦಈ#3 ňڞ༗ʼnڞ༗ػೳΛ࣮ߦঢ়گ ڞ༗ϞʔυʹҠߦϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡબڞ༗ࣸਅΛબAirDropϞʔυ֊Ϣʔβʔͷߦಈ#3 ňڞ༗ʼnAirDropૹ৴૬खΛબঢ়گ બ͞ΕͨࣸਅͷAirDropΛ։࢝Ϟʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡબڞ༗ࣸਅΛબAirDrop ૹ৴ࡁΈϞʔυ֊Ϣʔβʔͷߦಈ#3 ňڞ༗ʼnAirDropͷྃΛ֬ೝঢ়گ બ͞ΕͨࣸਅͷAirDrop͕ྃϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡબڞ༗ࣸਅΛબAirDrop ૹ৴ࡁΈϞʔυ֊Ϣʔβʔͷߦಈ#3 ňڞ༗ʼnڞ༗Λྃ͠Α͏ͱ͢Δঢ়گ બ͞ΕͨࣸਅͷAirDrop͕ྃϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡબڞ༗ࣸਅΛબAirDrop ૹ৴ࡁΈ ྃϞʔυ֊Ϣʔβʔͷߦಈ#2 ňબʼnڞ༗Λྃঢ়گ ڞ༗Ϟʔυ͔Βग़ɺબϞʔυʹؼؐϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡબڞ༗ࣸਅΛબAirDrop ૹ৴ࡁΈ ྃϞʔυ֊Ϣʔβʔͷߦಈ#2 ňબʼnࣸਅબΛதஅ͠Α͏ͱ͢Δঢ়گ ڞ༗Ϟʔυ͔Βग़ɺબϞʔυʹؼؐΩϟϯηϧϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡڞ༗ࣸਅΛબAirDrop ૹ৴ࡁΈ ྃΩϟϯηϧϞʔυ֊Ϣʔβʔͷߦಈ#1 ňࣸਅҰཡʼnબΛྃঢ়گ બϞʔυ͔Βग़ɺࣸਅҰཡʹؼؐબϞʔυ֊ͱΞΫγϣϯ
ࣸਅҰཡڞ༗ࣸਅΛબAirDrop ૹ৴ࡁΈ ྃΩϟϯηϧબϞʔυ͕ੵΈ্͕Δ΄ͲɺݩͷλεΫΛΕͯ͠·͏ݩͷॴʹΓͮΒ͘ͳΔ
σόΠεిݯೖϩάΠϯʗϩοΫը໘OSىಈσεΫτοϓʗϗʔϜΞϓϦA ΞϓϦBϞʔμϧϏϡʔ1ϞʔμϧϏϡʔ2ΞϥʔτμΠΞϩά
σόΠεిݯೖϩάΠϯʗϩοΫը໘OSىಈσεΫτοϓʗϗʔϜΞϓϦA ΞϓϦBϞʔμϧϏϡʔ1ϞʔμϧϏϡʔ2ΞϥʔτμΠΞϩάඞཁͳϞʔυΞϓϦҎԼʹੵ·Ε͍ͯΔϞʔυ
σόΠεిݯೖϩάΠϯʗϩοΫը໘OSىಈσεΫτοϓʗϗʔϜΞϓϦA ΞϓϦBϞʔμϧϏϡʔ1ϞʔμϧϏϡʔ2ΞϥʔτμΠΞϩά࠷খݶʹ͍͑ͨϢʔβʔ͕ҙࣝ͢ΔϞʔυ
σόΠεిݯೖϩάΠϯʗϩοΫը໘OSىಈσεΫτοϓʗϗʔϜΞϓϦA ΞϓϦBϞʔμϧϏϡʔ1ϞʔμϧϏϡʔ2ΞϥʔτμΠΞϩά͜ͷลΓʹډଓ͚ΒΕΔΑ͏ʹ
ΦϒδΣΫτࢦઃܭ
ʪΦϒδΣΫτʫΛʪͲ͏͢Δʫ໊ࢺʵಈࢺύϥμΠϜ
"QQMF)VNBO*OUFSGBDF(VJEFMJOFTʢຊޠ൛ʣʮબʯॲཧΛ࣮ߦ͢ΔલʹબʹΑΓରΛ໌Β͔ʹ͢Δૢ࡞ɺΞοϓϧώϡʔϚϯΠϯλʔϑΣʔεͷجຊతͳಛͷͭͱͳ͍ͬͯ·͢ɻ͜ͷૢ࡞࣍ͷύλʔϯʹ͚ͯߟ͑Δ͜ͱ͕Ͱ͖·͢ɻ ΦϒδΣΫτΛબ͢Δʢૢ࡞ର໊ࢺͰදݱʣ ॲཧ༰ΛબͿʢૢ࡞༰ಈࢺͰදݱʣ͜ͷύλʔϯΛl໊ࢺಈࢺύϥμΠϜzͱݺͿ߹͕͋Γ·͢ɻ
1. ΦϒδΣΫτʢ໊ࢺʣΛબ͢ΔͲͷΑ͏ͳΦϒδΣΫτΫϦοΫʹΑͬͯબՄೳ
2. ॲཧ༰ʢಈࢺʣΛબΜͰ࣮ߦϝχϡʔόʔʹฒͿॲཧ༰͍ͭͰ၆ᛌͰ͖ΔͷͰϢʔβʔ໋ྩͷํ๏Λ֮͑Δඞཁ͕ͳ͍
2. ॲཧ༰ʢಈࢺʣΛબΜͰ࣮ߦίϯςΫετϝχϡʔબΦϒδΣΫτʹର࣮ͯ͠ߦՄೳͳॲཧ༰Λநग़ͨ͠γϣʔτΧοτ
"QQMF)VNBO*OUFSGBDF(VJEFMJOFTʢຊޠ൛ʣʮϝχϡʔʯ"QQMF%FTLUPQ*OUFSGBDFʹ͓͚ΔϢʔβͷૢ࡞ɺσεΫτοϓ·ͨΠϯυͷදࣔ༰͔ΒॲཧͷରͱͳΔΦϒδΣΫτʢ໊ࢺʣΛબ͢Δ͜ͱɺͦͯ͠ɺͦͷΦϒδΣΫτʹର͢Δॲཧ༰ʢಈࢺʣΛબͿ͜ͱͷஈ֊ʹΘ͔ΒΕ·͢ɻ͜ͷl໊ࢺʵಈࢺzํࣜͷجຊͱͳΔͷ͕ϝχϡʔͰ͢ɻ
ಈࢺ໊ࢺݕࡧΞοϓσʔτAppsήʔϜToday୳͢ߋ৽͢ΔApps༡Ϳݟ͚ͭΔ
໊ࢺ ಈࢺʪ໊ࢺʫΛબ ࣮ߦϞʔυ͕ඞཁͳ͍ʢϞʔυϨεʣ
ಈࢺ ໊ࢺʪಈࢺʫϞʔυʹҠߦ ʪ໊ࢺʫΛબϞʔυ͕ඞཁ
ιγΦϝσΟΞň0069rΦϒδΣΫτϕʔεͷ6*ϞσϦϯάʼnΦϒδΣΫτϕʔεͷ6*ϢʔβʔΛϞʔυ͔Βղ์͠ɺզʑ͕ಓ۩ͷ͍ํʹ͍ؔͯ࣋ͬͯ͠ΔجຊతͳϝϯλϧϞσϧΛө͠·͢ɻఝΛଧͭ࣌ɺզʑ·ͣϋϯϚʔΛ࣋ͪɺͦΕ͔ΒৼΓԼΖ͠·͢ɻৼΓԼΖ͔ͯ͠ΒϋϯϚʔΛ࣋ͭਓ͍ͳ͍ͷͰ͢ɻIUUQTXXXTPDJPNFEJBDPKQ
ϢʔβʔͱσόΠεͷڑจԽͱΠϯλʔϑΣΠεʗใల։ͷݪଇϞʔυϨεWTϞʔυΦϒδΣΫτࢦઃܭମʹ͍ۙɾු༡͍ͯ͠Δɾ৮ΕΔͷň·Δ͍ʼn֊ߏɾೖΕࢠߏॻࣈํɾจԽɾ෩शͱใͷྲྀΕใల։ͷݪଇɾϚελʔৄࡉύλʔϯ໊ࢺʵಈࢺύϥμΠϜϞʔυϨεɾϞʔυɾϞʔυ֊
ɾࢀߟจݙ)VNBO*OUFSGBDF(VJEFMJOFTIUUQTEFWFMPQFSBQQMFDPNJPTIVNBOJOUFSGBDFHVJEFMJOFTσβΠϯΤϯτϩϐʔͷ੍IUUQTXXXTPDJPNFEJBDPKQ0069rΦϒδΣΫτϕʔεͷ6*ϞσϦϯάIUUQTXXXTPDJPNFEJBDPKQΦϒδΣΫτࢦ69IUUQQPTUEDDPCKFDUPSJFOUFEVY.BTUFSEFUBJMTQBUUFSOIUUQTEPDTNJDSPTPGUDPNFOVTXJOEPXTVXQEFTJHODPOUSPMTBOEQBUUFSOTNBTUFSEFUBJMT"QQMF)VNBO*OUFSGBDF(VJEFMJOFT5IF"QQMF%FTLUPQ*OUFSGBDFʢຊޠ൛ʣώϡʔϝΠϯɾΠϯλϑΣʔεਓʹ͍͞͠γεςϜͷ৽ͨͳࢦ