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

by Yutaro Murakami

Slide 1

Slide 1 text

ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ ΏΊΈक़ ଜ্༤ଠ࿠

Slide 2

Slide 2 text

2 ଜ্༤ଠ࿠ Yutaro Murakami ࣗݾ঺հ ॴଐ גࣜձࣾΏΊΈ ΏΊΈक़ ઐ໳ྖҬ ΠϯλϥΫγϣϯσβΠϯ ࠷ۙͷڵຯɾؔ৺ ϓϩάϥϛϯά ϞσϧɺμΠΞάϥϜ 4/4 5XJUUFSɿ!8FJXF:V :VUBSP .VSBLBNJ OPUFɿ!VUBSPSJHJOBM :VUBSP .VSBLBNJ 'BDFCPPLɿ:VUBSP .VSBLBNJ

Slide 3

Slide 3 text

໨࣍ 3 νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏

Slide 4

Slide 4 text

4 ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ

Slide 5

Slide 5 text

νΣοΫΠϯ 5 NJSPͷૢ࡞ʹ׳Εͯཉ͍͠ͷͰɺ NJSPͰ͠ΓͱΓΛͯ͠Έ·͠ΐ͏ʂ

Slide 6

Slide 6 text

6 ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ

Slide 7

Slide 7 text

OOUIͱ͸Կ͔ʁ 7 Έͳ͞Μɺ006*ͬͯ͝ଘ஌Ͱ͔͢ʁ ʢ[PPNͷνϟοτͰϦΞΫγϣϯ͍͚ͨͩΔͱخ͍͠Ͱ͢✍ʣ

Slide 8

Slide 8 text

8 OOUIͱ͸Կ͔ʁ ΦϒδΣΫτࢦ޲6*ͱ͸ɺΦϒδΣΫτΛखֻ͔Γʹૢ࡞ઃܭ͞Εͨ6*ͷ͜ͱͰ͢ɻ ΞϓϦέʔγϣϯͷ6*ߏ੒ΛܾΊΔࡍʹɺΦϒδΣΫτΛखֻ͔Γʹͯ͠ ը໘ͱσʔλΛରԠ͚ͮΔํ๏࿦͕ɺΦϒδΣΫτࢦ޲6*ઃܭͳͷͰ͢ɻ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ

Slide 9

Slide 9 text

9 OOUIͱ͸Կ͔ʁ ͜ͷσβΠϯख๏͸ɺ(6*ΞϓϦέʔγϣϯΛσβΠϯ͢ΔࡍͷجຊతͳςΫχοΫ Ͱ͋Γɺࠓ͞Βͦ͜ʹ໊લΛ͚ͭΔͷ΋͓͔͍͠΄Ͳɺιϑτ΢ΣΞͷσβΠφʔ Ͱ͋Ε͹े෼ʹशಘ͍ͯ͠ͳ͚Ε͹ͳΒͳ͍΋ͷͩͱߟ͍͑ͯ·͢ɻ ࢀߟɿ্໺ֶ (2016) 006*r ΦϒδΣΫτϕʔεͷ6*ϞσϦϯάʢ IUUQTXXXTPDJPNFEJBDPKQʣ

Slide 10

Slide 10 text

OOUIͱ͸Կ͔ʁ 10 λεΫϕʔε ʮ໊ࢺ ‎ ಈࢺʯͷૢ࡞खॱ ʮಈࢺ ‎ ໊ࢺʯͷૢ࡞खॱ ૢ࡞ͷର৅෺ ΦϒδΣΫτ Λબ୒͠ɺͦͷର৅෺ ʹର͢ΔΞΫγϣϯΛબͿɻ λεΫʢ΍Δ͜ͱʣΛબͼɺ࣍ʹҾ਺ͱͯ͠ର৅෺ ΍ύϥϝʔλʔΛࢦఆ͢Δɻ ΦϒδΣΫτϕʔε （写真）（削除）（注⽂）（ピザ）

Slide 11

Slide 11 text

OOUIͱ͸Կ͔ʁ 11 λεΫϕʔε λεΫϕʔεͰ΋ઃܭ͸Ͱ͖Δ͕ɺΦϒδΣΫτϕʔεͩͱࣗ༝ͳૢ࡞ઃܭΛ࣮ݱͰ͖ɺ͍ΘΏΔ௚ײతʹ࢖͍΍͍͢αʔϏεʹ ઃܭ͠΍͘͢ͳΔ ΦϒδΣΫτϕʔε ✅ ࣗ༝ͳखॱͰλεΫΛਐߦ͢Δ͜ͱ͕Ͱ͖Δ ✅ Ϣʔβʔͷૢ࡞ޮ཰ɺֶशޮ཰͕ߴ͍ ✅ʢجຊతʹʣը໘਺͕ݮΓɺ ࣮૷΍ϝϯςφϯεͷίετ͕Լ͕Δ ✅ γεςϜ͕ಛఆػೳͷ࢖༻ʹ੍ݶ͞Εͨঢ়ଶ ✅ ػೳ͕૿͑Δͱֶशίετ্͕͕ͬͨΓɺ ը໘਺͕ଟ͘ͳͬͯ͠·͏

Slide 12

Slide 12 text

12 ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ

Slide 13

Slide 13 text

13 ΏΊΈक़Ͱ͸͜ͷOOUIͷ࣮ફʹࡍͯ͠ɺ ҎԼΛؚΉෳ਺ͷࢀߟจݙΛ׆༻ͯ͠ํ๏࿦ɾπʔϧΛ੔ཧ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ Conceptual Models Core to Good Design Jeﬀ Johnson, Austin Henderson Dubbely Design Oﬃce Hugh Dubberly ΦϒδΣΫτࢦ޲UIσβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ

Slide 14

Slide 14 text

14 ਺ֶऀɾݐஙՈͷChristopher AlexanderͷʰϊʔτʱͷσβΠϯϓϩηεΛࢀߟʹɺ ֤ࢀߟจݙͷํ๏࿦ɾπʔϧͷ૊Έ߹ΘͤΛΏΊΈक़ͷOOUIͷ࣮ફϓϩηεͱͯ͠੔ཧ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ Notes on the Synthesis of Form Christopher Alexander 00෼ੳ 6*؂ࠪ ৘ใߏ଄ͷ ઃܭ ϨΠΞ΢τ ύλʔϯ ͷద༻ ίϯηϓτϚοϓ จ຺ ܗ Information x Interaction ར༻ऀ͕ײ֮తʹཧղ͢Δ΋ͷ Presentation ར༻ऀ͕࣮ࡍʹݟΔ΋ͷ Model ར༻ऀ͕ೝ஌తʹܗ੒͢Δ΋ͷ

Slide 15

Slide 15 text

15 ਺ֶऀɾݐஙՈͷChristopher AlexanderͷʰϊʔτʱͷσβΠϯϓϩηεΛࢀߟʹɺ ֤ࢀߟจݙͷํ๏࿦ɾπʔϧͷ૊Έ߹ΘͤΛΏΊΈक़ͷOOUIͷ࣮ફϓϩηεͱͯ͠੔ཧ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ Notes on the Synthesis of Form Christopher Alexander 00෼ੳ 6*؂ࠪ ৘ใߏ଄ͷ ઃܭ ϨΠΞ΢τ ύλʔϯ ͷద༻ ίϯηϓτϚοϓ จ຺ ܗ Information x Interaction ར༻ऀ͕ײ֮తʹཧղ͢Δ΋ͷ Presentation ར༻ऀ͕࣮ࡍʹݟΔ΋ͷ Model ར༻ऀ͕ೝ஌తʹܗ੒͢Δ΋ͷ

Slide 16

Slide 16 text

16 2~5ͷϓϩηε͸ߦͬͨΓདྷͨΓ͠ͳ͕Βɺ࠷ऴతͳUIΛ࡞੒͍ͯ͘͠ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ Notes on the Synthesis of Form Christopher Alexander 00෼ੳ 6*؂ࠪ ৘ใߏ଄ͷ ઃܭ ϨΠΞ΢τ ύλʔϯ ͷద༻ ίϯηϓτϚοϓ จ຺ ܗ Information x Interaction ར༻ऀ͕ײ֮తʹཧղ͢Δ΋ͷ Presentation ར༻ऀ͕࣮ࡍʹݟΔ΋ͷ Model ར༻ऀ͕ೝ஌తʹܗ੒͢Δ΋ͷ

Slide 17

Slide 17 text

17 1.UI؂ࠪ Ϣʔβʔͷཁٻ΍λεΫΛચ͍ग़͢ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ৽نαʔϏεͷ৔߹ γφϦΦ΍ετʔϦʔϘʔυ౳͔Βग़͖ͯͨɺϢʔβʔͷཁٻ΍ λεΫΛநग़͍ͯ͘͠ طଘαʔϏεͷ৔߹ طଘαʔϏεͷ6*؂ࠪΛߦ͍ɺͦͷιϑτ΢ΣΞͷதͰԿΛߦ͏͜ͱ ͕Ͱ͖Δͷ͔ʁΛநग़͍ͯ͘͠ɻ ϙΠϯτͱͯ͠͸ʮ୭͕ʢ4ʣԿΛʢ0ʣͲ͏͢Δʢ7ʣʯͱ͍͏ จܕͰநग़͢Δ͜ͱɻ

Slide 18

Slide 18 text

18 1.UI؂ࠪ Ϣʔβʔͷཁٻ΍λεΫΛચ͍ग़͢ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ৽نαʔϏεͷ৔߹ γφϦΦ΍ετʔϦʔϘʔυ౳͔Βग़͖ͯͨɺϢʔβʔͷཁٻ΍ λεΫΛநग़͍ͯ͘͠ طଘαʔϏεͷ৔߹ طଘαʔϏεͷ6*؂ࠪΛߦ͍ɺͦͷιϑτ΢ΣΞͷதͰԿΛߦ͏͜ͱ ͕Ͱ͖Δͷ͔ʁΛநग़͍ͯ͘͠ɻ ϙΠϯτͱͯ͠͸ʮ୭͕ʢ4ʣԿΛʢ0ʣͲ͏͢Δʢ7ʣʯͱ͍͏ จܕͰநग़͢Δ͜ͱɻ ࠓճ͸ΦϒδΣΫτࢦ޲6*σβΠϯͷ ϫʔΫΞ΢τ͓୊Λ࢖ͬͯ ࣮ફͯ͠ΈΑ͏ͱࢥ͍·͢✍

Slide 19

Slide 19 text

19 2. OO෼ੳʢObject Operation Analysisʣ Ϣʔβʔ͕ཧղ͢΂͖ίϯηϓτʢΦϒδΣΫτɺଐੑ৘ใɺΞΫγϣϯʣΛચ͍ग़͢ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ オブジェクト属性情報オペレーションオブジェクト/オペレーション分析（OO分析）ユーザーが、アプリケーション（サービス）を使⽤する際に触れるコンセプト（オブジェクト＋属性情報＋オペレーション）を洗い出すために実施する分析⼿法。同質・類似コンセプトの分類や定義などのもここで⾏う。また、各コンセプトの概要を追記することで、設計するアプリケーションの語録として活⽤することができる。

Slide 20

Slide 20 text

20 2. OO෼ੳʢObject Operation Analysisʣ Ϣʔβʔ͕ཧղ͢΂͖ίϯηϓτʢΦϒδΣΫτɺଐੑ৘ใɺΞΫγϣϯʣΛચ͍ग़͢ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ オブジェクト属性情報オペレーションオブジェクト/オペレーション分析（OO分析）ユーザーが、アプリケーション（サービス）を使⽤する際に触れるコンセプト（オブジェクト＋属性情報＋オペレーション）を洗い出すために実施する分析⼿法。同質・類似コンセプトの分類や定義などのもここで⾏う。また、各コンセプトの概要を追記することで、設計するアプリケーションの語録として活⽤することができる。 λεΫચ͍ग़͠ͷϓϩηε λεΫ ϝϞΛ࡞੒͢Δ ϝϞΛฤू͢Δ ϝϞͷ೔෇Λฤू͢Δ ϝϞΛ֬ೝ͢Δ ࢁా͘ΜͷϝϞΛ֬ೝ͢Δ ϝϞͷ಺༰Λฤू͢Δ ΍Δ͜ͱϝϞΛ࡟আ͢Δ ϝϞΛΧςΰϦʔʹ෼͚Δ ΧςΰϦʔΛ࡞੒͢Δ ΧςΰϦʔΛ࡟আ͢Δ ίϯηϓτ ʹ ΦϒδΣΫτʢʹ໊ࢺ ྫɿϝϞ ʴ ଐੑ৘ใ ྫɿ಺༰ ʴ ΞΫγϣϯʢʹಈࢺʣ ྫɿฤू > 00෼ੳϓϩηε ΦϒδΣΫτ ଐੑ৘ใ ΞΫγϣϯ ϝϞ ಺༰ ฤू͢Δ ΧςΰϦʔ ໊લ ࡞੒͢Δ ࡟আ͢Δ

Slide 21

Slide 21 text

21 2. OO෼ੳʢObject Operation Analysisʣ λεΫ͔ΒOO෼ੳΛ࣮ફ͢Δࡍͷίπɾ஫ҙ఺ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ • ΦϒδΣΫτ͸ɺUI΍λεΫͷத͔Β໊ࢺΛநग़͢Δ • ͜͜Ͱ͍͏ΦϒδΣΫτͱ͸ɺιϑτ΢ΣΞΛ࢖༻͢ΔࡍʹϢʔβʔ͕ҙ͍ࣝͯ͠Δ֓೦ʢΦϒδΣΫτʣͷ͜ͱ • ΞΫγϣϯʢ৽ن࡞੒ɺฤूɺ࡟আ౳ʣ͕Ͱ͖Δ͔Ͳ͏͔ • ΦϒδΣΫτͱଐੑ৘ใΛݟۃΊΔίπ͸ɺUI্ͰϢʔβʔ͕௚઀ૢ࡞Ͱ͖Δର৅͔Ͳ͏͔ • ݟͨΓɺಡΜͩΓ͢Δ͚ͩͷλΠτϧɺ೔෇ɺৄࡉ৘ใͳͲ͸ଐੑ৘ใ • λάͳͲ͸ɺΦϒδΣΫτͰ͋Γɺଐੑ৘ใͩͬͨΓ͢Δ • ΦϒδΣΫτಉ࢜ͷؔ܎ੑʹΑͬͯ͸ɺ͋ΔΦϒδΣΫτ͕ଞͷΦϒδΣΫτͷଐੑ৘ใʹͳͬͨΓ͢Δ৔߹΋͋Δɻʢ಺แؔ܎͕ෆ໌֬ͳ৔߹͸ɺ࣍ͷ εςοϓͷίϯηϓτϚοϓͰ੔ཧ͢Δʣ • ΞΫγϣϯ͸ɺUI΍λεΫͷதʹ͋ΔಈࢺΛநग़͢Δ • ΞΫγϣϯ͸ಛఆͷΦϒδΣΫτʹରͯ͠ߦΘΕΔ৔߹͕͋ΔͷͰɺͦͷ৔߹ʹ͸ΞΫγϣϯͷ໨త֨ΛؚΊΔʢྫɿಈըΛϓϨΠϦετʹอଘ͢Δʣ • ࠷ॳ͔Β׬ᘳʹ෼ੳ͢Δ͜ͱΛ໨ࢦ͞ͳ͍ • ෳ਺ਓͰ࣮ࢪ͢Δ࣌͸ɺέϯΧͤͣʹ͓ޓ͍ͷೝ͕ࣝଗ͏Α͏ʹର࿩Λ͢Δ • ෼ੳʹ೰Έ࢝ΊͨΒ࣍ͷεςοϓʹਐΜͰޙ͔Β੔߹ੑΛ֬ೝ͢Δ

Slide 22

Slide 22 text

22 3. ίϯηϓτϚοϓ OO෼ੳͰચ͍ग़ͨ͠ίϯηϓτಉ࢜ͷ૬ޓؔ࿈Λ໌Β͔ʹͯ͠ɺ Ϣʔβʔ͕࣮ߦ͢ΔλεΫͱͲͷΑ͏ʹ߹க͢Δ͔Λඳ͍ͨந৅తͳϞσϧ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ コンセプトマップアプリケーション（サービス）のコンセプト同⼠の相互連関を、できる限りシンプルな状態で包括的にその全体を可視化する⼿法。コンセプトは、他のコンセプトと必ず関連性があり、論理的に無理があるものや重複しているものを削除することができる。ユーザーは、UIを通してコンセプトに触れるため、後のUI設計において登場する余地のないコンセプトは⼊れないようにする。コンセプト１含むコンセプト2 コンセプト3 含む継承する

Slide 23

Slide 23 text

23 3. ίϯηϓτϚοϓ ॻ͖ํᶃɿOO෼ੳͰϦετΞοϓͨ͠ΦϒδΣΫτͷ໊લΛॻ͖ग़͢ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ΦϒδΣΫτ ଐੑ৘ใ ΞΫγϣϯ ϝϞ ಺༰ ฤू͢Δ ΧςΰϦʔ ໊લ ࡞੒͢Δ ࡟আ͢Δ ΦϒδΣΫτ ʢ໊ࢺʣ ΦϒδΣΫτ ʢ໊ࢺʣ OO෼ੳͷදʢࠨͷྻ͸ΦϒδΣΫτʣ

Slide 24

Slide 24 text

24 3. ίϯηϓτϚοϓ ॻ͖ํᶄɿιϑτ΢ΣΞͷதͰෳ਺ଘࡏ͢ΔΦϒδΣΫτʹʮʯΛ͚ͭΔ ʢྫɿʮϝϞʯͱ͍͏ΦϒδΣΫτ͸ΞϓϦ಺ʹෳ਺ଘࡏ͢ΔͷͰʮʯΛ͚ͭΔʣ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ΦϒδΣΫτ ʢ໊ࢺʣ ΦϒδΣΫτ ʢ໊ࢺʣ * ෳ਺ଘࡏ͢Δ

Slide 25

Slide 25 text

25 3. ίϯηϓτϚοϓ ॻ͖ํᶄɿιϑτ΢ΣΞͷதͰෳ਺ଘࡏ͢ΔΦϒδΣΫτʹʮʯΛ͚ͭΔ ΦϒδΣΫτ͕ෳ਺ଘࡏ͢Δ৔߹͸ɺجຊίϨΫγϣϯʢϦετʣͱγϯάϧʢৄࡉը໘ʣ͕ඞཁͱͳΔ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ίϨΫγϣϯ ʢϦετʣ γϯάϧ ʢৄࡉը໘ʣ ΦϒδΣΫτ ʢ໊ࢺʣ ΦϒδΣΫτ ʢ໊ࢺʣ * ෳ਺ଘࡏ͢Δ

Slide 26

Slide 26 text

26 3. ίϯηϓτϚοϓ ॻ͖ํᶅɿιϑτ΢ΣΞͷதͰෳ਺ଘࡏ͢ΔΦϒδΣΫτʹʮʯΛ͚ͭΔ ʢྫɿʮਓˠ৯΂ΔˠϦϯΰʯͷΑ͏ͳܗࣜʣ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ΦϒδΣΫτ ʢ໊ࢺʣ ΦϒδΣΫτ ʢ໊ࢺʣ * ෳ਺ଘࡏ͢Δ ΦϒδΣΫτಉ࢜ͷؔ܎ੑΛද͢ಈࢺ

Slide 27

Slide 27 text

27 3. ίϯηϓτϚοϓ ίϯηϓτϚοϓྫɿSpotify ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ΞΧ΢ϯτ ϓϨΠϦετ ΞʔςΟετ ΞϧόϜ ۂ อ࣋ ؚΉ ؚΉ ࡞੒ อ࣋ * * * * ෳ਺ ௥Ճ͞ΕΔ ΞϧόϜϦετ ΞʔςΟετ Ϧετ ௥Ճ͞ΕΔ ௥Ճ͞ΕΔ ʢʮ͍͍Ͷʂʯ͢Δͱ ͓ؾʹʹೖΓʹ௥Ճ͞ΕΔɻ ʮϓϨΠϦετʹ௥Ճʯ Λબ୒͢Δͱɺ ࢦఆͨ͠ϓϨΠϦετʹ ௥Ճ͞ΕΔʣ ؚΉ

Slide 28

Slide 28 text

28 3. ίϯηϓτϚοϓ ίϯηϓτϚοϓΛॻ͘ࡍͷίπɾ஫ҙ఺ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ • ΦϒδΣΫτಉ࢜ͷؔ܎ੑΛද͢ಈࢺ͸ɺࣗ෼͕ޱ಄ͰίϯηϓτϚοϓΛઆ໌͢Δͱ͖ʹ ࢖͍΍͍͢ಈࢺஔ͘ • ίϯηϓτϚοϓΛ1ਓͰ੍࡞͢Δͱ͖͸ɺಈࢺͷ૒ํ޲ੑ͸͋·Γؾʹʹ͠ͳͯ͘΋ྑ͍ • ίϯηϓτϚοϓΛ2ਓҎ্Ͱ੍࡞͢Δͱ͖͸ɺޓ͍ͷೝࣝ߹ΘͤͰಈࢺͷෆཁͳٞ࿦ʹͳΒͣʹࡁΉΑ͏ʹ૒ํ޲ੑΛ֬ೝ͢Δ • ͋͘·ͰOO෼ੳͰચ͍ग़ͨ͠ΦϒδΣΫτಉ࢜ͷؔ࿈ੑΛ͋Δఔ౓੔ཧ͢Δ͜ͱ͕໨తͳͷͰ ׬ᘳΛ໨ࢦ͞ͳͯ͘΋͍͍ • ෳ਺ਓͰ࣮ࢪ͢Δ࣌͸ɺέϯΧͤͣʹ͓ޓ͍ͷೝ͕ࣝଗ͏Α͏ʹର࿩Λ͢Δ • ֓೦ઃܭͳͷͰલఏ৚݅΍จ຺͕ҧ͑͹ɺΦϒδΣΫτಉ࢜ͷؔ܎ੑ΋มΘΔʢͭ·Γɺʮਖ਼͠͞ʯ͸ͳ͘ɺڧ͍ͯݴ͏ͳΒʮΘ͔Γ΍͢͞ʯʣ • ίϯηϓτϚοϓͰߦ͖٧·ͬͨ࣌͸ɺ࣍ͷεςοϓʢ৘ใߏ଄ͷઃܭʣʹҠߦͯ͠ΈΔ

Slide 29

Slide 29 text

29 4. ৘ใߏ଄ͷઃܭɺ5.ϨΠΞ΢τύλʔϯͷద༻ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ৘ใߏ଄ͷઃܭ ϨΠΞ΢τύλʔϯͷద༻ ֊૚ߏ଄ɿπϦʔ ϚτϦΫε Ϧετɿ഑ྻ ϊʔυʴϦϯΫ ΢ΣϒɿΦϯτϩδʔ + ϧʔτφϏήʔγϣϯ Լ ։ด શը໘ ίϨΫγϣϯ Ϧετ άϦοτ Ϛοϓ γϯάϧ ଞͷΦϒδΣΫτͷ Ұ෦Λදࣔ ҰͭͷΦϒδΣΫτ ͷΈදࣔ ※Human Interface Guideline΍Material Design GuidelineΛࢀߟʹͯ͠ɺ ͦΕͧΕͷOSʹ߹ΘͤͨϨΠΞ΢τΛઃܭ͢Δ

Slide 30

Slide 30 text

30 4. ৘ใߏ଄ͷઃܭ ৘ใߏ଄ͷઃܭΛ࣮ࢪ͢Δࡍͷίπɾ஫ҙ఺ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ • நग़ͨ͠ΦϒδΣΫτͷத͔ΒɺओཁͱͳΔΦϒδΣΫτΛબͿ • બΜͩΦϒδΣΫτΛϧʔͱφϏήʔγϣϯʹදࣔ͢Δ • ʮݕࡧʯ͚ͩ͸ϧʔτφϏήʔγϣϯʹ഑ஔՄೳʢΞϓϦʹଘࡏ͢ΔΦϒδΣΫτΛશͯݕࡧͰ͖ΔͨΊʣ • ϧʔτφϏήʔγϣϯͷλϒຖͷݕࡧόʔ͸ɺͦͷίϯςΩετʹదͨ͠ΦϒδΣΫτͷΈ͕ݕࡧͰ͖Δ΂͖ • ϢʔβʔΰʔϧͱϏδωεΰʔϧͷ྆ํΛਖ਼֬ʹ೺Ѳ͢Δඞཁ͕͋Δ • Ϣʔβΰʔϧ͸ɺϦαʔνͷஈ֊ͰϢʔβʔΠϯλϏϡʔ΍ఆྔௐࠪΛ௨ͯ͡໌֬ʹ͢Δ • Ϗδωεΰʔϧ͸ɺΞϓϦΛఏڙ͢ΔϏδωεΦʔφʔ΍εςʔΫϗϧμʔʹώΞϦϯά͢Δ • ͦΕͧΕͷΰʔϧ͕߹க͍ͯ͠Δ͜ͱͰ૒ํʹͱͬͯ࠷΋ద੾ͳ৘ใઃܭ͕ՄೳʹͳΔ • ݪଇͱͯ͠Ϣʔβʔΰʔϧ͕࠷େԽ͞ΕΔ΂͖Ͱ͋Δ • Ϣʔβʔΰʔϧ͕ຬͨ͞Εͨ݁Ռͱͯ͠ରՁ͕ࢧ෷ΘΕΔͱߟ͑Δ΂͖Ͱ͋Δ • ϏδωϧΰʔϧΛ༏ઌͨ͠৘ใߏ଄Λઃܭ͢ΔͱɺϢʔβʔͷϝϯλϧϞσϧͱ߹கͤͣʹར༻ͣ͠Β͍ΞϓϦʹͳΔ

Slide 31

Slide 31 text

31 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿίϨΫγϣϯʢϦετʣ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ Ϧετ άϦου Χϧʔηϧ Ϛοϓ ࢀߟɿTheresa Nail (2015) ϞόΠϧσβΠϯύλʔϯ ୈ൛ɺ٢஛ྒྷ ௶ా๎ ஑ా୓࢘ ্ϊڷ୩ଠҰ ݩࢁ࿨೭ Ӊ໺༤ (2019) UI Design Book

Slide 32

Slide 32 text

32 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿγϯάϧʢৄࡉը໘ʣ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ৄࡉ৘ใͷΈ 詳細情報タイトル ৄࡉ৘ใʴίϨΫγϣϯ 詳細情報タイトルタイトル ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ

Slide 33

Slide 33 text

33 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿCreateʢ৽ن࡞੒ʣ1 of 4 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ηʔϒΞζύλʔϯ 別名保存タイトル︓ 件名概要︓ 具体的な内容・具体的な内容/⽂章・具体的な内容/⽂章・具体的な内容/⽂章 ϒϥϯΫύλʔϯ 新規作成苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前新規作成苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前名称未設定

Slide 34

Slide 34 text

34 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿCreateʢ৽ن࡞੒ʣ2 of 4 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ύϥϝʔλʔύλʔϯ 新規作成苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前新規作成苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前名前キャンセル新規作成新規作成ゆめみ塾⼦苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前ゆめみ塾⼦苗字名前

Slide 35

Slide 35 text

35 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿCreateʢ৽ن࡞੒ʣ3 of 4 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ϓϨʔεϗϧμʔύλʔϯ 苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前ゆめみ塾⼦苗字名前苗字名前苗字名前苗字名前苗字名前苗字名前ゆめみ塾⼦

Slide 36

Slide 36 text

36 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿCreateʢ৽ن࡞੒ʣ4 of 4 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ςϯϓϨʔτύλʔϯ 新規作成ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名キャンセル新規作成ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名新規作成 Ϛελʔύλʔϯ 新規作成

Slide 37

Slide 37 text

37 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿDeleteʢ࡟আʣ1 of 2 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ΞϯυΡϒϧύλʔϯ

Slide 38

Slide 38 text

38 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿDeleteʢ࡟আʣ2 of 2 ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ϞʔμϧίϯϑΝʔϜύλʔϯ ϞʔυϨείϯϑΝʔϜύλʔϯ 削除削除このページを削除すると更新履歴も削除されます。キャンセル削除具体的な内容具体的な内容具体的な内容具体的な内容具体的な内容具体的な内容具体的な内容具体的な内容具体的な内容具体的な内容削除

Slide 39

Slide 39 text

39 5.ϨΠΞ΢τύλʔϯͷద༻ ϨΠΞ΢τύλʔϯɿUpdateʢߋ৽ʣ ΏΊΈͰ࣮ફ͢ΔOOUIϓϩηεͷ঺հ ࢀߟɿιγΦϝσΟΞגࣜձࣾɺ্໺ֶɺ౻Ҫ޾ଟ(2020) ΦϒδΣΫτࢦ޲6*σβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ ϞʔμϧΤσΟοτύλʔϯ 編集タイトル︓ 件名概要︓ 具体的な内容・具体的な内容/⽂章・具体的な内容/⽂章・具体的な内容/⽂章保存タイトル︓ 件名概要︓ 具体的な内容・具体的な内容/⽂章・具体的な内容/⽂章・具体的な内容/⽂章キャンセル参加者︓ ・参加者・参加者参加者︓ ・参加者・参加者 ϞʔυϨεΤσΟοτύλʔϯ タイトル︓ 件名概要︓ 具体的な内容・具体的な内容/⽂章・具体的な内容/⽂章・具体的な内容/⽂章参加者︓ ・参加者・参加者

Slide 40

Slide 40 text

40 ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ

Slide 41

Slide 41 text

41 OOUIϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂ NJSPͰ࣮ફͯ͠Έ·͠ΐ͏ʂ

Slide 42

Slide 42 text

42 ΏΊΈͰ࣮ફ͢ΔOOUIɿ ը໘Ͱ͸ͳ͘ΦϒδΣΫτΛͱΒ͑Δํ๏ νΣοΫΠϯʢ෼ʣ 006*ͱ͸Կ͔ʁʢ෼ʣ ΏΊΈͰ࣮ફ͢Δ006*ϓϩηεͷ঺հʢ෼ʣ 006*ϓϩηεΛ࣮ࡍʹ΍ͬͯΈΑ͏ʂʢ෼ʣ Ϋϩʔδϯάʢ෼ʣ

Slide 43

Slide 43 text

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 Ϋϩʔδϯά

Slide 44

Slide 44 text

44 Ϋϩʔδϯά ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ