OOUIの設計プロセス / Design process of OOUI

Slide 1

Slide 1 text

@uenitty OOUIͷઃܭϓϩηε ABEMA weber ษڧձ 2020/09/30

Slide 2

Slide 2 text

ࢀߟॻ 2 • ಺༰͸͔ͳΓল͍͍ͯ·͢ • ࣗ෼ͷղऍͰ࠶ߏ੒͍ͯ͠·͢ • ؒҧ͍͕͋ͬͨΒ͝ΊΜͳ͍͞ • ͥͻຊΛಡΜͰ͍ͩ͘͞ʂ https://www.sociomedia.co.jp/10046

Slide 3

Slide 3 text

લճͷࢿྉ 3 https://speakerdeck.com/uenitty/what-is-object-oriented-ui

Slide 4

Slide 4 text

ࠓճͷ಺༰ 4 • OOUIͷצॴ • UIΛߟ͑Δ໨ઢ • OOUIઃܭͷجຊεςοϓ

Slide 5

Slide 5 text

OOUIͷצॴ 5

Slide 6

Slide 6 text

ΦϒδΣΫτɿλεΫ ʹ 1ɿ∞ 6 • λεΫ͸ΦϒδΣΫτͱΞΫγϣϯͷ૊Έ߹Θͤ • ΦϒδΣΫτ܈ͷ૬ޓ࡞༻͕؀ڥΛߏ੒͢ΔʢλεΫ͸૊Έ߹Θͤരൃʣ • 1ͭͷʮΦϒδΣΫτʯʹରͯ͠ɺͦͷʮ࢖͍ํʯʮλεΫʯ͸ແݶʹ͋Δ ΦϒδΣΫτ ΦϒδΣΫτ λεΫ λεΫ λεΫ ɾ ɾ ɾ

Slide 7

Slide 7 text

λεΫࢦ޲UI 7 • Ͱ͖Δ͜ͱͷ෼͚ͩબ୒ࢶ͕ඞཁ ͳͨΊɺը໘ߏ੒΍ը໘ભҠ͸ ෳࡶʹͳΔ • খ͞ͳ࢓༷มߋ΍ػೳ௥ՃͰ΋ େن໛ͳ։ൃ͕ඞཁʹͳΓɺ ৚݅෼ذ͕૿͑ΔͨΊόά΋ଟ͍ ΦϒδΣΫτࢦ޲UIσβΠϯ p.39

Slide 8

Slide 8 text

ΦϒδΣΫτࢦ޲UI 8 • Ͱ͖Δ͜ͱ͕ଟ͔ͬͨΓ૿͑ͨΓ ͯ͠΋ɺը໘ߏ੒΍ૢ࡞ํ๏͸ γϯϓϧͳ·· • ࢓༷มߋ΍ػೳ௥Ճͷ޻਺͸ খن໛ͰࡁΈɺ৚݅෼ذ͕গͳ͘ όά΋গͳ͍ ΦϒδΣΫτࢦ޲UIσβΠϯ p.40

Slide 9

Slide 9 text

UIΛߟ͑Δ໨ઢ 9

Slide 10

Slide 10 text

ୈࡾऀͷࢹ఺͔Βٞ࿦͢Δ 10 • Ϣʔβʔ͕ϓϩμΫτΛར༻͢Δจ຺త؀ڥͷશମ૾ ʹ ϓϩμΫτ؀ڥΛ ٬ମͱͯ͠ओମతʹଊ͑௚͢͜ͱ͕ɺຊ౰ͷʮϢʔβʔத৺ઃܭʯ https://www.sociomedia.co.jp/8740

Slide 11

Slide 11 text

ιϑτ΢ΣΞσβΠϯͷϨΠϠʔ 11 • ΦϒδΣΫτͱ͍͏ࠜݯతͳ΋ͷΛ࣠ʹ UIΛݟͭΊΔͱɺ࠷௿Ͱ΋͜ͷ3૚΁ͷ ෼ղ͕ඞཁ • ϞσϧɺΠϯλϥΫγϣϯɺ ϓϨθϯςʔγϣϯ • ϑϩϯτΤϯυɺόοΫΤϯυͷ ۠ผͳ͘1ͭͷγεςϜͱݟͯٞ࿦͢Δ • σβΠϯͷڀۃͷ໨త͸ʮܗʯ • Ϣʔβʔ͔ΒݟͨUI͸ͲͪΒͷ۠ผ΋ ͳ͍͠ɺ࣮ࡍͲͪΒ΋ଟ෼ʹӨڹΛ ༩͑Δ ΦϒδΣΫτࢦ޲UIσβΠϯ p.42

Slide 12

Slide 12 text

֤ϨΠϠʔΛԿ౓΋ߦ͖དྷ͢Δ 12 • UIσβΠϯ͸֤ϨΠϠʔΛԿ౓΋ॱෆಉʹ ߦ͖དྷͯ͠શମͷόϥϯεΛݟͳ͕Βߦ͏΋ͷ • Ή͠ΖϓϨθϯςʔγϣϯ૚Λ͍͖ͳΓൃ૝ ͔ͯͦ͜͠ΒٯࢉͰଞΛߟ͑Δ͜ͱ΋ଟ͍ • σβΠϯʹϓϩηε͸ͳ͍ ΦϒδΣΫτࢦ޲UIσβΠϯ p.48

Slide 13

Slide 13 text

OOUIઃܭͷجຊεςοϓ 13

Slide 14

Slide 14 text

OOUIઃܭͷجຊεςοϓ 14 1. ΦϒδΣΫτͷநग़ʢϞσϧʣ 2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ 3. ϨΠΞ΢τύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ ͜ΕΒΛॱෆಉͰ܁Γฦ͠ௐ੔͠ɺશମͱͯ͠ͷ·ͱ·ΓΛ࡞Γ্͛Δ

Slide 15

Slide 15 text

1. ΦϒδΣΫτͷநग़ʢϞσϧʣ 15 • ϢʔβʔͷϝϯλϧϞσϧ΍ۀ຿ͷதʹͲͷΑ͏ͳ֓೦͕ଘࡏ͍ͯ͠Δ͔ௐ΂Δ • ͋Δ֓೦͕ΦϒδΣΫτͱ͍͑Δ͔൑அ͢Δख͕͔Γ • ਺͑ΒΕΔ໊ࢺͱͯ͠දͤΔ • ಉछͷू߹ͱͯ͠؅ཧ͞ΕಘΔ • ڞ௨ͷΞΫγϣϯΛ͍࣋ͬͯΔ ΦϒδΣΫτࢦ޲UIσβΠϯ p.54

Slide 16

Slide 16 text

2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ 16 • ͻͱ·ͱ·Γͷ৘ใදࣔྖҬʢϏϡʔʣͱ ͦΕΒͷݺͼग़ؔ͠܎ʢφϏήʔγϣϯʣ Λߟ͑Δ • 1ͭͷΦϒδΣΫτ͸ɺ৔໘ʹԠͯ࢟͡Λ ม͑ɺҟͳΔ໘ੵ΍৘ใͷৄࡉ౓Ͱ Ϣʔβʔʹ޲͚ͯද৅͞ΕΔͨΊɺ ͜ͷதؒతͳந৅౓ͷϨΠϠʔ͕ ॊೈͳOOUIΛߏங͢Δ্ͰॏཁʹͳΔ ΦϒδΣΫτࢦ޲UIσβΠϯ p.100

Slide 17

Slide 17 text

2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ 17 • Ϗϡʔʢͻͱ·ͱ·Γͷ৘ใදࣔྖҬʣͷछྨ͸େ͖͘2ͭ • ίϨΫγϣϯɿಉछͷΦϒδΣΫτΛෳ਺ฒ΂ͯදࣔ͢Δ΋ͷ • γϯάϧɿ1ͭͷϏϡʔͰ1ͭͷΦϒδΣΫτΛදࣔ͢Δ΋ͷ ΦϒδΣΫτࢦ޲UIσβΠϯ p.56

Slide 18

Slide 18 text

2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ 18 • ΦϒδΣΫτؒͷܨ͕Γͱଟॏੑ͔ΒࢀরՄೳੑΛಋ͖ɺφϏήʔγϣϯΛఆٛ͢Δ • φϏήʔγϣϯ͸Ϗϡʔಉ࢜ͷݺͼग़ؔ͠܎Ͱ͋Γɺը໘ભҠͰ͸ͳ͍͜ͱʹ஫ҙ • ΠϯλϥΫγϣϯ૚͸ը໘ͱ͍͏୯Ґʹґଘ͠ͳ͍ந৅౓ͷϨΠϠʔ ΦϒδΣΫτࢦ޲UIσβΠϯ p.56

Slide 19

Slide 19 text

3. ϨΠΞ΢τύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ 19 ΦϒδΣΫτࢦ޲UIσβΠϯ p.58 ΦϒδΣΫτࢦ޲UIσβΠϯ p.57

Slide 20

Slide 20 text

3. ϨΠΞ΢τύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ 20 ΦϒδΣΫτࢦ޲UIσβΠϯ p.59 ΦϒδΣΫτࢦ޲UIσβΠϯ p.58

Slide 21

Slide 21 text

3. ϨΠΞ΢τύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ 21 • ΠϯλϥΫγϣϯ૚Λ൓ө͢ΔΑ͏ʹϏϡʔΛ഑ஔͯ͠ɺϢʔβʔ͕࣮ࡍʹ ໨ʹ͢Δը໘Λߏ੒͢Δ • ը໘ͷ୯ҐΛม͑Δ͜ͱͰɺ·ͬͨ͘ಉ͡UIϞσϧͰҟͳΔը໘؀ڥʹ ରԠͰ͖Δ • ͢ͰʹҰൠԽ͍ͯ͠ΔϨΠΞ΢τύλʔϯΛ౿ऻ͢Δ͜ͱͰɺϢʔβʔͷ ֶशޮ཰΍ૢ࡞ੑΛ޲্Ͱ͖Δ

Slide 22

Slide 22 text

·ͱΊ 22

Slide 23

Slide 23 text

OOUIͷઃܭϓϩηε 23 1. ΦϒδΣΫτͷநग़ʢϞσϧʣ 2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ 3. ϨΠΞ΢τύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ ͜ΕΒΛॱෆಉͰ܁Γฦ͠ௐ੔͠ɺશମͱͯ͠ͷ·ͱ·ΓΛ࡞Γ্͛Δ