ゆめみで実践するOOUI：画面ではなくオブジェクトをとらえる方法

ゆめみ塾で開催しているイベント「giveandgive」で登壇した資料となります。

Transcript

1. ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ ΏΊΈक़ ଜ্༤ଠ࿠
2. 2 ଜ্༤ଠ࿠ Yutaro Murakami ࣗݾ঺հ ॴଐ גࣜձࣾΏΊΈ ΏΊΈक़ ઐ໳ྖҬ ΠϯλϥΫγϣϯσβΠϯ ࠷ۙͷڵຯɾؔ৺ ϓϩάϥϛϯά ϞσϧɺμΠΞάϥϜ 4/4 5XJUUFSɿ!8FJXF:V :VUBSP .VSBLBNJ OPUFɿ!VUBSPSJHJOBM :VUBSP .VSBLBNJ 'BDFCPPLɿ:VUBSP .VSBLBNJ
3. ໨࣍ 3 νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏
4. 4 ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ
5. νΣοΫΠϯ 5 NJSPͷૢ࡞ʹ׳Εͯཉ͍͠ͷͰɺ NJSPͰ͠ΓͱΓΛͯ͠Έ·͠ΐ͏ʂ
6. 6 ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ
7. OOUIͱ͸Կ͔ʁ 7 Έͳ͞Μɺ006*ͬͯ͝ଘ஌Ͱ͔͢ʁ ʢ[PPNͷνϟοτͰϦΞΫγϣϯ͍͚ͨͩΔͱخ͍͠Ͱ͢✍ʣ
8. 8 OOUIͱ͸Կ͔ʁ ΦϒδΣΫτࢦ޲6*ͱ͸ɺΦϒδΣΫτΛखֻ͔Γʹૢ࡞ઃܭ͞Εͨ6*ͷ͜ͱͰ͢ɻ ΞϓϦέʔγϣϯͷ6*ߏ੒ΛܾΊΔࡍʹɺΦϒδΣΫτΛखֻ͔Γʹͯ͠ ը໘ͱσʔλΛରԠ͚ͮΔํ๏࿦͕ɺΦϒδΣΫτࢦ޲6*ઃܭͳͷͰ͢ɻ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ
9. 9 OOUIͱ͸Կ͔ʁ ͜ͷσβΠϯख๏͸ɺ(6*ΞϓϦέʔγϣϯΛσβΠϯ͢ΔࡍͷجຊతͳςΫχοΫ Ͱ͋Γɺࠓ͞Βͦ͜ʹ໊લΛ͚ͭΔͷ΋͓͔͍͠΄Ͳɺιϑτ΢ΣΞͷσβΠφʔ Ͱ͋Ε͹े෼ʹशಘ͍ͯ͠ͳ͚Ε͹ͳΒͳ͍΋ͷͩͱߟ͍͑ͯ·͢ɻ ࢀߟɿ্໺ֶ (2016) 006*
   r ΦϒδΣΫτϕʔεͷ6*ϞσϦϯάʢ IUUQTXXXTPDJPNFEJBDPKQ
   ʣ
10. OOUIͱ͸Կ͔ʁ 10 λεΫϕʔε ʮ໊ࢺ ‎ ಈࢺʯͷૢ࡞खॱ ʮಈࢺ ‎ ໊ࢺʯͷૢ࡞खॱ ૢ࡞ͷର৅෺ ΦϒδΣΫτ Λબ୒͠ɺͦͷର৅෺ ʹର͢ΔΞΫγϣϯΛબͿɻ λεΫʢ΍Δ͜ͱʣΛબͼɺ࣍ʹҾ਺ͱͯ͠ର৅෺ ΍ύϥϝʔλʔΛࢦఆ͢Δɻ ΦϒδΣΫτϕʔε （写真） （削除） （注⽂） （ピザ）
11. OOUIͱ͸Կ͔ʁ 11 λεΫϕʔε λεΫϕʔεͰ΋ઃܭ͸Ͱ͖Δ͕ɺΦϒδΣΫτϕʔεͩͱࣗ༝ͳૢ࡞ઃܭΛ࣮ݱͰ͖ɺ͍ΘΏΔ௚ײతʹ࢖͍΍͍͢αʔϏεʹ ઃܭ͠΍͘͢ͳΔ ΦϒδΣΫτϕʔε ✅ ࣗ༝ͳखॱͰλεΫΛਐߦ͢Δ͜ͱ͕Ͱ͖Δ ✅ Ϣʔβʔͷૢ࡞ޮ཰ɺֶशޮ཰͕ߴ͍ ✅ʢجຊతʹʣը໘਺͕ݮΓɺ ࣮૷΍ϝϯςφϯεͷίετ͕Լ͕Δ ✅ γεςϜ͕ಛఆػೳͷ࢖༻ʹ੍ݶ͞Εͨঢ়ଶ ✅ ػೳ͕૿͑Δͱֶशίετ্͕͕ͬͨΓɺ ը໘਺͕ଟ͘ͳͬͯ͠·͏
12. 12 ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ
13. 13 ΏΊΈक़Ͱ͸͜ͷOOUIͷ࣮ફʹࡍͯ͠ɺ ҎԼΛؚΉෳ਺ͷࢀߟจݙΛ׆༻ͯ͠ํ๏࿦ɾπʔϧΛ੔ཧ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ Conceptual Models Core to Good Design Jeff Johnson, Austin Henderson Dubbely Design Office Hugh Dubberly ΦϒδΣΫτࢦ޲UIσβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ
14. 14 ਺ֶऀɾݐஙՈͷChristopher AlexanderͷʰϊʔτʱͷσβΠϯϓϩηεΛࢀߟʹɺ ֤ࢀߟจݙͷํ๏࿦ɾπʔϧͷ૊Έ߹ΘͤΛΏΊΈक़ͷOOUIͷ࣮ફϓϩηεͱͯ͠੔ཧ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ Notes on the Synthesis of Form Christopher Alexander  00෼ੳ  6*؂ࠪ  ৘ใߏ଄ͷ ઃܭ  ϨΠΞ΢τ ύλʔϯ ͷద༻  ίϯηϓτϚοϓ จ຺ ܗ Information x Interaction ར༻ऀ͕ײ֮తʹཧղ͢Δ΋ͷ Presentation ར༻ऀ͕࣮ࡍʹݟΔ΋ͷ Model ར༻ऀ͕ೝ஌తʹܗ੒͢Δ΋ͷ
15. 15 ਺ֶऀɾݐஙՈͷChristopher AlexanderͷʰϊʔτʱͷσβΠϯϓϩηεΛࢀߟʹɺ ֤ࢀߟจݙͷํ๏࿦ɾπʔϧͷ૊Έ߹ΘͤΛΏΊΈक़ͷOOUIͷ࣮ફϓϩηεͱͯ͠੔ཧ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ Notes on the Synthesis of Form Christopher Alexander  00෼ੳ  6*؂ࠪ  ৘ใߏ଄ͷ ઃܭ  ϨΠΞ΢τ ύλʔϯ ͷద༻  ίϯηϓτϚοϓ จ຺ ܗ Information x Interaction ར༻ऀ͕ײ֮తʹཧղ͢Δ΋ͷ Presentation ར༻ऀ͕࣮ࡍʹݟΔ΋ͷ Model ར༻ऀ͕ೝ஌తʹܗ੒͢Δ΋ͷ
16. 16 2~5ͷϓϩηε͸ߦͬͨΓདྷͨΓ͠ͳ͕Βɺ࠷ऴతͳUIΛ࡞੒͍ͯ͘͠ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ Notes on the Synthesis of Form Christopher Alexander  00෼ੳ  6*؂ࠪ  ৘ใߏ଄ͷ ઃܭ  ϨΠΞ΢τ ύλʔϯ ͷద༻  ίϯηϓτϚοϓ จ຺ ܗ Information x Interaction ར༻ऀ͕ײ֮తʹཧղ͢Δ΋ͷ Presentation ར༻ऀ͕࣮ࡍʹݟΔ΋ͷ Model ར༻ऀ͕ೝ஌తʹܗ੒͢Δ΋ͷ
17. 17 1.UI؂ࠪ Ϣʔβʔͷཁٻ΍λεΫΛચ͍ग़͢ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ৽نαʔϏεͷ৔߹ γφϦΦ΍ετʔϦʔϘʔυ౳͔Βग़͖ͯͨɺϢʔβʔͷཁٻ΍ λεΫΛநग़͍ͯ͘͠ طଘαʔϏεͷ৔߹ طଘαʔϏεͷ6*؂ࠪΛߦ͍ɺͦͷιϑτ΢ΣΞͷதͰԿΛߦ͏͜ͱ ͕Ͱ͖Δͷ͔ʁΛநग़͍ͯ͘͠ɻ ϙΠϯτͱͯ͠͸ʮ୭͕ʢ4ʣԿΛʢ0ʣͲ͏͢Δʢ7ʣʯͱ͍͏ จܕͰநग़͢Δ͜ͱɻ
18. 18 1.UI؂ࠪ Ϣʔβʔͷཁٻ΍λεΫΛચ͍ग़͢ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ৽نαʔϏεͷ৔߹ γφϦΦ΍ετʔϦʔϘʔυ౳͔Βग़͖ͯͨɺϢʔβʔͷཁٻ΍ λεΫΛநग़͍ͯ͘͠ طଘαʔϏεͷ৔߹ طଘαʔϏεͷ6*؂ࠪΛߦ͍ɺͦͷιϑτ΢ΣΞͷதͰԿΛߦ͏͜ͱ ͕Ͱ͖Δͷ͔ʁΛநग़͍ͯ͘͠ɻ ϙΠϯτͱͯ͠͸ʮ୭͕ʢ4ʣԿΛʢ0ʣͲ͏͢Δʢ7ʣʯͱ͍͏ จܕͰநग़͢Δ͜ͱɻ ࠓճ͸ΦϒδΣΫτࢦ޲6*σβΠϯͷ ϫʔΫΞ΢τ͓୊Λ࢖ͬͯ ࣮ફͯ͠ΈΑ͏ͱࢥ͍·͢✍
19. 19 2. OO෼ੳʢObject Operation Analysisʣ Ϣʔβʔ͕ཧղ͢΂͖ίϯηϓτʢΦϒδΣΫτɺଐੑ৘ใɺΞΫγϣϯʣΛચ͍ग़͢ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ オブジェクト 属性情報 オペレーション オブジェクト/オペレーション分析（OO分析） ユーザーが、アプリケーション（サービス）を使⽤する 際に触れるコンセプト（オブジェクト＋属性情報＋オペ レーション）を洗い出すために実施する分析⼿法。同 質・類似コンセプトの分類や定義などのもここで⾏う。 また、各コンセプトの概要を追記することで、設計する アプリケーションの語録として活⽤することができる。
20. 20 2. OO෼ੳʢObject Operation Analysisʣ Ϣʔβʔ͕ཧղ͢΂͖ίϯηϓτʢΦϒδΣΫτɺଐੑ৘ใɺΞΫγϣϯʣΛચ͍ग़͢ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ オブジェクト 属性情報 オペレーション オブジェクト/オペレーション分析（OO分析） ユーザーが、アプリケーション（サービス）を使⽤する 際に触れるコンセプト（オブジェクト＋属性情報＋オペ レーション）を洗い出すために実施する分析⼿法。同 質・類似コンセプトの分類や定義などのもここで⾏う。 また、各コンセプトの概要を追記することで、設計する アプリケーションの語録として活⽤することができる。 λεΫચ͍ग़͠ͷϓϩηε λεΫ ϝϞΛ࡞੒͢Δ ϝϞΛฤू͢Δ ϝϞͷ೔෇Λฤू͢Δ ϝϞΛ֬ೝ͢Δ ࢁా͘ΜͷϝϞΛ֬ೝ͢Δ ϝϞͷ಺༰Λฤू͢Δ ΍Δ͜ͱϝϞΛ࡟আ͢Δ ϝϞΛΧςΰϦʔʹ෼͚Δ ΧςΰϦʔΛ࡞੒͢Δ ΧςΰϦʔΛ࡟আ͢Δ ίϯηϓτ ʹ ΦϒδΣΫτʢʹ໊ࢺ ྫɿϝϞ ʴ ଐੑ৘ใ ྫɿ಺༰ ʴ ΞΫγϣϯʢʹಈࢺʣ ྫɿฤू > 00෼ੳϓϩηε ΦϒδΣΫτ ଐੑ৘ใ ΞΫγϣϯ ϝϞ ಺༰ ฤू͢Δ ΧςΰϦʔ ໊લ ࡞੒͢Δ ࡟আ͢Δ
21. 21 2. OO෼ੳʢObject Operation Analysisʣ λεΫ͔ΒOO෼ੳΛ࣮ફ͢Δࡍͷίπɾ஫ҙ఺ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ • ΦϒδΣΫτ͸ɺUI΍λεΫͷத͔Β໊ࢺΛநग़͢Δ • ͜͜Ͱ͍͏ΦϒδΣΫτͱ͸ɺιϑτ΢ΣΞΛ࢖༻͢ΔࡍʹϢʔβʔ͕ҙ͍ࣝͯ͠Δ֓೦ʢΦϒδΣΫτʣͷ͜ͱ • ΞΫγϣϯʢ৽ن࡞੒ɺฤूɺ࡟আ౳ʣ͕Ͱ͖Δ͔Ͳ͏͔ • ΦϒδΣΫτͱଐੑ৘ใΛݟۃΊΔίπ͸ɺUI্ͰϢʔβʔ͕௚઀ૢ࡞Ͱ͖Δର৅͔Ͳ͏͔ • ݟͨΓɺಡΜͩΓ͢Δ͚ͩͷλΠτϧɺ೔෇ɺৄࡉ৘ใͳͲ͸ଐੑ৘ใ • λάͳͲ͸ɺΦϒδΣΫτͰ͋Γɺଐੑ৘ใͩͬͨΓ͢Δ • ΦϒδΣΫτಉ࢜ͷؔ܎ੑʹΑͬͯ͸ɺ͋ΔΦϒδΣΫτ͕ଞͷΦϒδΣΫτͷଐੑ৘ใʹͳͬͨΓ͢Δ৔߹΋͋Δɻʢ಺แؔ܎͕ෆ໌֬ͳ৔߹͸ɺ࣍ͷ εςοϓͷίϯηϓτϚοϓͰ੔ཧ͢Δʣ • ΞΫγϣϯ͸ɺUI΍λεΫͷதʹ͋ΔಈࢺΛநग़͢Δ • ΞΫγϣϯ͸ಛఆͷΦϒδΣΫτʹରͯ͠ߦΘΕΔ৔߹͕͋ΔͷͰɺͦͷ৔߹ʹ͸ΞΫγϣϯͷ໨త֨ΛؚΊΔʢྫɿಈըΛϓϨΠϦετʹอଘ͢Δʣ • ࠷ॳ͔Β׬ᘳʹ෼ੳ͢Δ͜ͱΛ໨ࢦ͞ͳ͍ • ෳ਺ਓͰ࣮ࢪ͢Δ࣌͸ɺέϯΧͤͣʹ͓ޓ͍ͷೝ͕ࣝଗ͏Α͏ʹର࿩Λ͢Δ • ෼ੳʹ೰Έ࢝ΊͨΒ࣍ͷεςοϓʹਐΜͰޙ͔Β੔߹ੑΛ֬ೝ͢Δ
22. 22 3. ίϯηϓτϚοϓ OO෼ੳͰચ͍ग़ͨ͠ίϯηϓτಉ࢜ͷ૬ޓؔ࿈Λ໌Β͔ʹͯ͠ɺ Ϣʔβʔ͕࣮ߦ͢ΔλεΫͱͲͷΑ͏ʹ߹க͢Δ͔Λඳ͍ͨந৅తͳϞσϧ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ コンセプトマップ アプリケーション（サービス）のコンセプト同⼠の相互 連関を、できる限りシンプルな状態で包括的にその全体 を可視化する⼿法。コンセプトは、他のコンセプトと必 ず関連性があり、論理的に無理があるものや重複してい るものを削除することができる。ユーザーは、UIを通し てコンセプトに触れるため、後のUI設計において登場す る余地のないコンセプトは⼊れないようにする。 コンセプト１ 含む コンセプト2 コンセプト3 含む 継承する
23. 23 3. ίϯηϓτϚοϓ ॻ͖ํᶃɿOO෼ੳͰϦετΞοϓͨ͠ΦϒδΣΫτͷ໊લΛॻ͖ग़͢ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ΦϒδΣΫτ ଐੑ৘ใ ΞΫγϣϯ ϝϞ ಺༰ ฤू͢Δ ΧςΰϦʔ ໊લ ࡞੒͢Δ ࡟আ͢Δ ΦϒδΣΫτ ʢ໊ࢺʣ ΦϒδΣΫτ ʢ໊ࢺʣ OO෼ੳͷදʢࠨͷྻ͸ΦϒδΣΫτʣ
24. 24 3. ίϯηϓτϚοϓ ॻ͖ํᶄɿιϑτ΢ΣΞͷதͰෳ਺ଘࡏ͢ΔΦϒδΣΫτʹʮ ʯΛ͚ͭΔ ʢྫɿʮϝϞʯͱ͍͏ΦϒδΣΫτ͸ΞϓϦ಺ʹෳ਺ଘࡏ͢ΔͷͰʮ ʯΛ͚ͭΔʣ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ΦϒδΣΫτ ʢ໊ࢺʣ ΦϒδΣΫτ ʢ໊ࢺʣ * ෳ਺ଘࡏ͢Δ
25. 25 3. ίϯηϓτϚοϓ ॻ͖ํᶄɿιϑτ΢ΣΞͷதͰෳ਺ଘࡏ͢ΔΦϒδΣΫτʹʮ ʯΛ͚ͭΔ ΦϒδΣΫτ͕ෳ਺ଘࡏ͢Δ৔߹͸ɺجຊίϨΫγϣϯʢϦετʣͱγϯάϧʢৄࡉը໘ʣ͕ඞཁͱͳΔ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ίϨΫγϣϯ ʢϦετʣ γϯάϧ ʢৄࡉը໘ʣ ΦϒδΣΫτ ʢ໊ࢺʣ ΦϒδΣΫτ ʢ໊ࢺʣ * ෳ਺ଘࡏ͢Δ
26. 26 3. ίϯηϓτϚοϓ ॻ͖ํᶅɿιϑτ΢ΣΞͷதͰෳ਺ଘࡏ͢ΔΦϒδΣΫτʹʮ ʯΛ͚ͭΔ ʢྫɿʮਓˠ৯΂ΔˠϦϯΰʯͷΑ͏ͳܗࣜʣ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ΦϒδΣΫτ ʢ໊ࢺʣ ΦϒδΣΫτ ʢ໊ࢺʣ * ෳ਺ଘࡏ͢Δ ΦϒδΣΫτಉ࢜ͷؔ܎ੑΛද͢ಈࢺ
27. 27 3. ίϯηϓτϚοϓ ίϯηϓτϚοϓྫɿSpotify ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ΞΧ΢ϯτ ϓϨΠϦετ ΞʔςΟετ ΞϧόϜ ۂ อ࣋ ؚΉ ؚΉ ࡞੒ อ࣋ * * * * ෳ਺ ௥Ճ͞ΕΔ ΞϧόϜϦετ ΞʔςΟετ Ϧετ ௥Ճ͞ΕΔ ௥Ճ͞ΕΔ ʢʮ͍͍Ͷʂʯ͢Δͱ ͓ؾʹʹೖΓʹ௥Ճ͞ΕΔɻ ʮϓϨΠϦετʹ௥Ճʯ Λબ୒͢Δͱɺ ࢦఆͨ͠ϓϨΠϦετʹ ௥Ճ͞ΕΔʣ ؚΉ
28. 28 3. ίϯηϓτϚοϓ ίϯηϓτϚοϓΛॻ͘ࡍͷίπɾ஫ҙ఺ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ • ΦϒδΣΫτಉ࢜ͷؔ܎ੑΛද͢ಈࢺ͸ɺࣗ෼͕ޱ಄ͰίϯηϓτϚοϓΛઆ໌͢Δͱ͖ʹ ࢖͍΍͍͢ಈࢺஔ͘ • ίϯηϓτϚοϓΛ1ਓͰ੍࡞͢Δͱ͖͸ɺಈࢺͷ૒ํ޲ੑ͸͋·Γؾʹʹ͠ͳͯ͘΋ྑ͍ • ίϯηϓτϚοϓΛ2ਓҎ্Ͱ੍࡞͢Δͱ͖͸ɺޓ͍ͷೝࣝ߹ΘͤͰಈࢺͷෆཁͳٞ࿦ʹͳΒͣʹࡁΉΑ͏ʹ૒ํ޲ੑΛ֬ೝ͢Δ • ͋͘·ͰOO෼ੳͰચ͍ग़ͨ͠ΦϒδΣΫτಉ࢜ͷؔ࿈ੑΛ͋Δఔ౓੔ཧ͢Δ͜ͱ͕໨తͳͷͰ ׬ᘳΛ໨ࢦ͞ͳͯ͘΋͍͍ • ෳ਺ਓͰ࣮ࢪ͢Δ࣌͸ɺέϯΧͤͣʹ͓ޓ͍ͷೝ͕ࣝଗ͏Α͏ʹର࿩Λ͢Δ • ֓೦ઃܭͳͷͰલఏ৚݅΍จ຺͕ҧ͑͹ɺΦϒδΣΫτಉ࢜ͷؔ܎ੑ΋มΘΔʢͭ·Γɺʮਖ਼͠͞ʯ͸ͳ͘ɺڧ͍ͯݴ͏ͳΒʮΘ͔Γ΍͢͞ʯʣ • ίϯηϓτϚοϓͰߦ͖٧·ͬͨ࣌͸ɺ࣍ͷεςοϓʢ৘ใߏ଄ͷઃܭʣʹҠߦͯ͠ΈΔ
29. 29 4. ৘ใߏ଄ͷઃܭɺ5.ϨΠΞ΢τύλʔϯͷద༻ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ৘ใߏ଄ͷઃܭ ϨΠΞ΢τύλʔϯͷద༻ ֊૚ߏ଄ɿπϦʔ ϚτϦΫε Ϧετɿ഑ྻ ϊʔυʴϦϯΫ ΢ΣϒɿΦϯτϩδʔ + ϧʔτφϏήʔγϣϯ Լ ։ด શը໘ ίϨΫγϣϯ Ϧετ άϦοτ Ϛοϓ γϯάϧ ଞͷΦϒδΣΫτͷ Ұ෦Λදࣔ ҰͭͷΦϒδΣΫτ ͷΈදࣔ ※Human Interface Guideline΍Material Design GuidelineΛࢀߟʹͯ͠ɺ ͦΕͧΕͷOSʹ߹ΘͤͨϨΠΞ΢τΛઃܭ͢Δ
30. 30 4. ৘ใߏ଄ͷઃܭ ৘ใߏ଄ͷઃܭΛ࣮ࢪ͢Δࡍͷίπɾ஫ҙ఺ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ • நग़ͨ͠ΦϒδΣΫτͷத͔ΒɺओཁͱͳΔΦϒδΣΫτΛબͿ • બΜͩΦϒδΣΫτΛϧʔͱφϏήʔγϣϯʹදࣔ͢Δ • ʮݕࡧʯ͚ͩ͸ϧʔτφϏήʔγϣϯʹ഑ஔՄೳʢΞϓϦʹଘࡏ͢ΔΦϒδΣΫτΛશͯݕࡧͰ͖ΔͨΊʣ • ϧʔτφϏήʔγϣϯͷλϒຖͷݕࡧόʔ͸ɺͦͷίϯςΩετʹదͨ͠ΦϒδΣΫτͷΈ͕ݕࡧͰ͖Δ΂͖ • ϢʔβʔΰʔϧͱϏδωεΰʔϧͷ྆ํΛਖ਼֬ʹ೺Ѳ͢Δඞཁ͕͋Δ • Ϣʔβΰʔϧ͸ɺϦαʔνͷஈ֊ͰϢʔβʔΠϯλϏϡʔ΍ఆྔௐࠪΛ௨ͯ͡໌֬ʹ͢Δ • Ϗδωεΰʔϧ͸ɺΞϓϦΛఏڙ͢ΔϏδωεΦʔφʔ΍εςʔΫϗϧμʔʹώΞϦϯά͢Δ • ͦΕͧΕͷΰʔϧ͕߹க͍ͯ͠Δ͜ͱͰ૒ํʹͱͬͯ࠷΋ద੾ͳ৘ใઃܭ͕ՄೳʹͳΔ • ݪଇͱͯ͠Ϣʔβʔΰʔϧ͕࠷େԽ͞ΕΔ΂͖Ͱ͋Δ • Ϣʔβʔΰʔϧ͕ຬͨ͞Εͨ݁Ռͱͯ͠ରՁ͕ࢧ෷ΘΕΔͱߟ͑Δ΂͖Ͱ͋Δ • ϏδωϧΰʔϧΛ༏ઌͨ͠৘ใߏ଄Λઃܭ͢ΔͱɺϢʔβʔͷϝϯλϧϞσϧͱ߹கͤͣʹར༻ͣ͠Β͍ΞϓϦʹͳΔ
31. 31 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿίϨΫγϣϯʢϦετʣ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ Ϧετ άϦου Χϧʔηϧ Ϛοϓ ࢀߟɿTheresa Nail (2015) ϞόΠϧσβΠϯύλʔϯ ୈ൛ɺ٢஛ྒྷ
    ௶ా๎
    ஑ా୓࢘
    ্ϊڷ୩ଠҰ
    ݩࢁ࿨೭
    Ӊ໺༤ (2019) UI Design Book
32. 32 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿγϯάϧʢৄࡉը໘ʣ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ৄࡉ৘ใͷΈ 詳細情報 タイトル ৄࡉ৘ใʴίϨΫγϣϯ 詳細情報 タイトル タイトル ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ
33. 33 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿCreateʢ৽ن࡞੒ʣ1 of 4 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ηʔϒΞζύλʔϯ 別名保存 タイトル︓ 件名 概要︓ 具体的な内容 ・具体的な内容/⽂章 ・具体的な内容/⽂章 ・具体的な内容/⽂章 ϒϥϯΫύλʔϯ 新規作成 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 新規作成 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 名称未設定
34. 34 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿCreateʢ৽ن࡞੒ʣ2 of 4 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ύϥϝʔλʔύλʔϯ 新規作成 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 新規作成 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 名前 キャンセル 新規作成 新規作成 ゆめみ 塾⼦ 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 ゆめみ 塾⼦ 苗字 名前
35. 35 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿCreateʢ৽ن࡞੒ʣ3 of 4 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ϓϨʔεϗϧμʔύλʔϯ 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 ゆめみ 塾⼦ 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 苗字 名前 ゆめみ 塾⼦
36. 36 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿCreateʢ৽ن࡞੒ʣ4 of 4 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ςϯϓϨʔτύλʔϯ 新規作成 ファイル名 ファイル名 ファイル名 ファイル名 ファイル名 ファイル名 ファイル名 キャンセル 新規作成 ファイル名 ファイル名 ファイル名 ファイル名 ファイル名 ファイル名 新規作成 Ϛελʔύλʔϯ 新規作成
37. 37 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿDeleteʢ࡟আʣ1 of 2 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ΞϯυΡϒϧύλʔϯ
38. 38 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿDeleteʢ࡟আʣ2 of 2 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ϞʔμϧίϯϑΝʔϜύλʔϯ ϞʔυϨείϯϑΝʔϜύλʔϯ 削除 削除 このページを削除すると更新履歴 も削除されます。 キャンセル 削除 具体的な内容 具体的な内容 具体的な内容 具体的な内容 具体的な内容 具体的な内容 具体的な内容 具体的な内容 具体的な内容 具体的な内容 削除
39. 39 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿUpdateʢߋ৽ʣ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ϞʔμϧΤσΟοτύλʔϯ 編集 タイトル︓ 件名 概要︓ 具体的な内容 ・具体的な内容/⽂章 ・具体的な内容/⽂章 ・具体的な内容/⽂章 保存 タイトル︓ 件名 概要︓ 具体的な内容 ・具体的な内容/⽂章 ・具体的な内容/⽂章 ・具体的な内容/⽂章 キャンセル 参加者︓ ・参加者 ・参加者 参加者︓ ・参加者 ・参加者 ϞʔυϨεΤσΟοτύλʔϯ タイトル︓ 件名 概要︓ 具体的な内容 ・具体的な内容/⽂章 ・具体的な内容/⽂章 ・具体的な内容/⽂章 参加者︓ ・参加者 ・参加者
40. 40 ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ
41. 41 OOUIϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂ NJSPͰ࣮ફͯ͠Έ·͠ΐ͏ʂ
42. 42 ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ
43. 43 ࢀߟจݙ • ΦϒδΣΫτࢦ޲UIσβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ /ιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟʢ2020ʣ • Conceptual Models core to good design / Jeff Johnson, Austin Hendersonʢ2011ʣ • Modeless and Modal / ্໺ֶ • Object-Oriented Interface Design: IBM Common User Access Guidelines / IBMʢ1993ʣ • THE HUMANE INTERFACE / Jef Raskinʢ2000ʣ • ܗͷ߹੒ʹؔ͢Δϊʔτ/౎ࢢ͸πϦʔͰ͸ͳ͍ / Christopher Alexanderʢ2013ʣ • ৘ใΞʔΩςΫνϟୈ4൛ - ݟ͚ͭ΍͘͢ཧղ͠΍͍͢৘ใઃܭ / Louis Ronsenfeld, Peter Morville, Jorge Arangoʢ2016ʣ • σβΠχϯάɾΠϯλʔϑΣʔεୈ2൛ – ύλʔϯʹΑΔ࣮ફΠϯλϥΫγϣϯσβΠϯ / Jenifer Tidwellʢ2011ʣ • About Face 3 / Alan Cooperʢ2008ʣ • Human Interface Guidelines / Apple • Material Design Guidelines / Google Ϋϩʔδϯά
44. 44 Ϋϩʔδϯά ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ