OOUI設計の実践 / Practice of OOUI Design

Slide 1

Slide 1 text

@uenitty OOUIઃܭͷ࣮ફ ABEMA weber ษڧձ 2020/12/17

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 https://speakerdeck.com/uenitty/design-process-of-ooui

Slide 4

Slide 4 text

ࠓճͷ಺༰ 4 • جຊͷ࣮ફྫ • ࣮ફԋशͷԠ༻ฤΑΓ1ྫ঺հ

Slide 5

Slide 5 text

جຊͷ࣮ફྫ 5

Slide 6

Slide 6 text

λεΫͷஅยΛચ͍ग़͢ 6 • ΞϓϦέʔγϣϯ͕ൃ૝͞Εͨͱ͖ ͷখ͞ͳ໰୊ҙࣝͷू·Γ • ࣄલͷϦαʔν΍ཁٻ෼ੳͳͲʹ Αͬͯἧ͑Δ ΦϒδΣΫτࢦ޲UIσβΠϯ p.64

Slide 7

Slide 7 text

໊ࢺΛநग़͢Δ 7 • ػցతʹൈ͖ग़͢ͷͰ͸ͳ͘ɺ Ϣʔβʔͷؔ৺ͷର৅ͱͳΔ֓೦͸ Կ͔Λߟ͑ͯൈ͖ग़͢ ΦϒδΣΫτࢦ޲UIσβΠϯ p.65

Slide 8

Slide 8 text

໊ࢺಉ࢜ͷؔ܎Λ੔ཧ͢Δ 8 • λεΫʹෳ਺ͷ໊ࢺؚ͕·ΕΔ ৔߹͸ઢͰͭͳ͍Ͱؔ࿈Λࣔ͢ ΦϒδΣΫτࢦ޲UIσβΠϯ p.67

Slide 9

Slide 9 text

໊ࢺΛ൚Խ͠ɺཻ౓Λἧ͑Δ 9 • λεΫͷதʹग़ͯ͜ͳ໊͍ࢺΛ ৽ͨʹཱͯͯ΋ྑ͍ • ·ͱΊํʹܾ·Γ͸ͳ͍ ʢؔ৺ྖҬʹΑΔͨΊʣ ΦϒδΣΫτࢦ޲UIσβΠϯ p.68

Slide 10

Slide 10 text

໊ࢺͷؔ܎ੑΛͭͳ͛Δ 10 • ಉ໊͡ࢺΛ౷߹ͯ͠ɺ ωοτϫʔΫঢ়ʹͭͳ͛Δ • ΞϓϦέʔγϣϯશମΛ௨ͯ͡ ѻΘΕΔΦϒδΣΫτͷߏ੒͕ ݟ͑ͯ͘Δ ΦϒδΣΫτࢦ޲UIσβΠϯ p.69

Slide 11

Slide 11 text

ϝΠϯΦϒδΣΫτͱͦͷଟॏੑΛಛఆ͢Δ 11 • ΦϒδΣΫτͷ༏ઌ౓Λߟ͑ͯɺ ओཁͳ΋ͷͱͦ͏Ͱͳ͍΋ͷʹ ෼͚Δ • ෼͚ํʹܾ·Γ͸ͳ͍ ʢؔ৺ྖҬʹΑΔͨΊʣ • ϝΠϯΦϒδΣΫτؒͰଟॏʹͳΔ Մೳੑ͕͋Δ΋ͷͷଆʹʮ*ʯΛ ෇͚Δ ΦϒδΣΫτࢦ޲UIσβΠϯ p.70

Slide 12

Slide 12 text

෇ਵ͢ΔΦϒδΣΫτΛϓϩύςΟʹ͢Δ 12 • λεΫʹ໌ࣔ͞Ε͍ͯͳͯ͘΋ɺ ඞཁʹͳΓͦ͏ͳϓϩύςΟ͕ ͋Ε͹௥Ճ͢Δ • ؔ࿈͢ΔϝΠϯΦϒδΣΫτಉ࢜΋ ͦΕͧΕͷϓϩύςΟͰ͋Δͱ ߟ͑Δ ΦϒδΣΫτࢦ޲UIσβΠϯ p.71

Slide 13

Slide 13 text

λεΫͷಈࢺ͔ΒΞΫγϣϯΛݟ͚ͭΔ 13 • ϓϩύςΟͱಉ༷ʹɺඞཁʹͳΓ ͦ͏ͳΞΫγϣϯ͕͋Ε͹ิ଍͢Δ • ʮ֬ೝ͢ΔʯͳͲ͸ΞΫγϣϯʹ ؚΊͳ͍ʢදࣔ͢Ε͹ࡁΉͨΊʣ • ϓϩύςΟʹඥͮ͘ΞΫγϣϯ͸ɺ ϝΠϯΦϒδΣΫτʹඥ͚ͮΔ͔ ϓϩύςΟ໊ΛೖΕͨΞΫγϣϯΛ ͭ͘ΔͱΘ͔Γ΍͍͢ ΦϒδΣΫτࢦ޲UIσβΠϯ p.75

Slide 14

Slide 14 text

ϝΠϯΦϒδΣΫτʹϏϡʔΛ༩͑Δ 14 • ্ਤ͸2छྨͷϏϡʔΛػցతʹ༻ҙ͍ͯ͠Δ͕࠷ऴతʹলུ͢Δ৔߹΋͋Δ ʢOOUIຊ p.79ࢀরʣɻলུͷ൑அ͸ޙͷஈ֊Ͱ΋ྑ͍ • ίϨΫγϣϯϏϡʔ͔ΒγϯάϧϏϡʔΛݺͼग़͢ྲྀΕΛ໼ҹͰࣔ͢ ΦϒδΣΫτࢦ޲UIσβΠϯ p.79

Slide 15

Slide 15 text

Ϗϡʔؒͷݺͼग़ؔ͠܎Λݕ౼͢Δ 15 • ϝΠϯΦϒδΣΫτಉ࢜ͷͭͳ͕Γͱଟॏੑ͔ΒࢀরՄೳੑΛಋ͖ग़͠ɺ φϏήʔγϣϯͱͯ͠ͷݺͼग़ؔ͠܎Λఆٛ͢Δ • ௨ৗɺγϯάϧϏϡʔΛࢀরݩͱͯ͠ɺଟॏੑ͕͋Δ৔߹͸ίϨΫγϣϯ Ϗϡʔ͕ࢀরઌʹɺଟॏੑ͕ͳ͍৔߹͸γϯάϧϏϡʔ͕ࢀরઌʹͳΔ ΦϒδΣΫτࢦ޲UIσβΠϯ p.82

Slide 16

Slide 16 text

ϧʔτφϏήʔγϣϯ߲໨Λબఆ͢Δ 16 • ϝΠϯΦϒδΣΫτͷத͔Βಛʹॏཁͳ΋ͷΛฒ΂Δ • Ϣʔβʔ͕ΞϓϦέʔγϣϯΛ࢖͏ࡍʹɺ࠷ॳʹࢥ͍ු͔΂ΔΦϒδΣΫτ Λબఆ͢Δ • ΞϓϦέʔγϣϯΛʮػೳʯͰ͸ͳ͘ʮ΋ͷʯ͕ฒΜͰ͍ΔΠϝʔδͰଊ͑Δ ΦϒδΣΫτࢦ޲UIσβΠϯ p.82

Slide 17

Slide 17 text

ϨΠΞ΢τΛݕ౼͢Δ 17 • ϝΠϯΦϒδΣΫτಉ࢜ͷ ࢀরؔ܎Λ౿·͑ͯϨΠΞ΢τ ύλʔϯΛద༻͢Δ • OOUIʹదͨ͠ϨΠΞ΢τύλʔϯ ͷղઆ͸OOUIຊΛࢀরͷ͜ͱ ʢεϥΠυʹॻ͖੾Εͳ͍΄Ͳ ͔ͬ͠Γղઆ͞Ε͍ͯ·͢ʣ ΦϒδΣΫτࢦ޲UIσβΠϯ p.92

Slide 18

Slide 18 text

ϏδϡΞϧσβΠϯΛߦ͏ 18 • ೥ʑมԽ͢ΔϏδϡΞϧදݱͷτϨϯυ΍ϓϥοτϑΥʔϜ͝ͱͷඪ४ͳͲΛ ߟྀͭͭ͠ɺݟ΍͘͢Θ͔Γ΍͍͢දݱʹ͢Δ ΦϒδΣΫτࢦ޲UIσβΠϯ p.121

Slide 19

Slide 19 text

࣮ફԋशͷԠ༻ฤΑΓ1ྫ঺հ 19

Slide 20

Slide 20 text

࣮ફԋशͷԠ༻ฤͱ͸ 20 • OOUIຊͷޙ൒͸ɺखΛಈ͔͠ͳ͕Βཧղ͢ΔʮϫʔΫΞ΢τʢ࣮ફԋशʣʯ • શ18Ϩϕϧͷ͏ͪ10~18Ϩϕϧ͕Ԡ༻ฤ • ஶऀ͕ؔΘ࣮ͬͨࡍͷҊ͔݅Βɺਖ਼ղ͕ͻͱͭͰ͸ͳ͍໰୊΍ جຊηΦϦʔ͚ͩͰ͸ղܾʹࢸΒͳ͍՝୊ʹରͯ͠OOUIͷߟ͑ํΛ Ԡ༻͠ͳ͕Β࠷΋;͞Θ͍͠σβΠϯΛݕ౼͢Δ಺༰ • ࠓճ͸Ϩϕϧ12ʮอݥܖ໿ͷސ٬؅ཧΞϓϦέʔγϣϯʯΛ঺հ͢Δ

Slide 21

Slide 21 text

վળલͷΞϓϦέʔγϣϯ 21 • ࠨଆͷφϏήʔγϣϯϝχϡʔ͸ ۀ຿ =ʮ΍Δ͜ͱʯผͷೖΓޱͷ ҰཡͰ͋ΓɺλεΫࢦ޲ • ٯʹɺϝχϡʔ߲໨Λख͕͔Γʹ ۀ຿಺༰Λ೺Ѳ͢Ε͹ൈ͚࿙Ε ͳ͘λεΫΛચ͍ग़ͤͦ͏ ΦϒδΣΫτࢦ޲UIσβΠϯ p.220

Slide 22

Slide 22 text

λεΫΛચ͍ग़͢ 22 • ʲܖ໿রձʳܖ໿Λݕࡧ͢Δɻݕࡧ݁ՌҰཡ͔Βܖ໿ৄࡉΛݟΔ • ʲ͓٬༷৘ใরձʳސ٬Λݕࡧ͢Δɻݕࡧ݁ՌҰཡ͔Βސ٬ৄࡉΛݟΔ • ʲຬظ؅ཧʳຬظ͕͍ۙܖ໿Ұཡɻ͔ͦ͜Βܖ໿ৄࡉΛݟΔ • ʲܖ໿खଓ͖ʳ৽نਃࠐͷ࡞੒ը໘ • ʲอݥྉऩೲʳอݥྉະೲͷܖ໿Ұཡɻ͔ͦ͜Βܖ໿ৄࡉΛݟΔ • ʲࣄނରԠʳࣄނ৘ใͷҰཡɻ͔ͦ͜ΒࣄނৄࡉΛݟΔ • ʲ͓٬༷৘ใ؅ཧʳސ٬Λݕࡧ͢Δɻݕࡧ݁ՌҰཡ͔Βސ٬ฤूը໘Λ։͘ • ʲਃࠐ؅ཧʳະঝೝͷਃࠐͷҰཡɻ͔ͦ͜ΒਃࠐৄࡉΛݟΔ

Slide 23

Slide 23 text

λεΫΛચ͍ग़͢ 23 • ʲܖ໿রձʳܖ໿Λݕࡧ͢Δɻݕࡧ݁ՌҰཡ͔Βܖ໿ৄࡉΛݟΔ • ʲ͓٬༷৘ใরձʳސ٬Λݕࡧ͢Δɻݕࡧ݁ՌҰཡ͔Βސ٬ৄࡉΛݟΔ • ʲຬظ؅ཧʳຬظ͕͍ۙܖ໿Ұཡɻ͔ͦ͜Βܖ໿ৄࡉΛݟΔ • ʲܖ໿खଓ͖ʳ৽نਃࠐͷ࡞੒ը໘ • ʲอݥྉऩೲʳอݥྉະೲͷܖ໿Ұཡɻ͔ͦ͜Βܖ໿ৄࡉΛݟΔ • ʲࣄނରԠʳࣄނ৘ใͷҰཡɻ͔ͦ͜ΒࣄނৄࡉΛݟΔ • ʲ͓٬༷৘ใ؅ཧʳސ٬Λݕࡧ͢Δɻݕࡧ݁ՌҰཡ͔Βސ٬ฤूը໘Λ։͘ • ʲਃࠐ؅ཧʳະঝೝͷਃࠐͷҰཡɻ͔ͦ͜ΒਃࠐৄࡉΛݟΔ

Slide 24

Slide 24 text

ΦϒδΣΫτΛநग़͢Δ 24 • ચ͍ग़ͨ͠ۀ຿಺༰͔Βɺʮܖ໿ʯͱ͍͏ΦϒδΣΫτ͕࠷΋ଟ͘ͷۀ຿ʹ ؔΘ͍ͬͯΔ͜ͱ͕Θ͔Δ • ܖ໿ΦϒδΣΫτͷίϨΫγϣϯϏϡʔʢҰཡදࣔʣΛΞϓϦέʔγϣϯͷ த৺తͳը໘ʹ͢Δͱརศੑ͕ߴ͘ͳΓͦ͏ ΦϒδΣΫτࢦ޲UIσβΠϯ p.222

Slide 25

Slide 25 text

ΦϒδΣΫτΛநग़͢Δ 25 • ચ͍ग़ͨ͠ۀ຿಺༰͔Βɺʮܖ໿ʯͱ͍͏ΦϒδΣΫτ͕࠷΋ଟ͘ͷۀ຿ʹ ؔΘ͍ͬͯΔ͜ͱ͕Θ͔Δ • ܖ໿ΦϒδΣΫτͷίϨΫγϣϯϏϡʔʢҰཡදࣔʣΛΞϓϦέʔγϣϯͷ த৺తͳը໘ʹ͢Δͱརศੑ͕ߴ͘ͳΓͦ͏ • ୯७ͳΦϒδΣΫτҰཡͰ͸൚༻త͗͢ͳ͍͔ɺ֤ۀ຿ʹे෼ద߹Ͱ͖Δ͔ ஫ҙ͢Δ ΦϒδΣΫτࢦ޲UIσβΠϯ p.222

Slide 26

Slide 26 text

OOUIʹ͓͚ΔʮλεΫ΁ͷద߹ʯ 26 • ࠓճͷݩͷUIͰ͸ʮܖ໿ʯؔ࿈ͷ3ͭͷۀ຿͝ͱʹͦΕͧΕҟͳΔը໘͕ ༻ҙ͞Ε͍ͯͨ = ར༻จ຺ʹԠͨ͡ద੾ͳද͕ࣔͳ͞Ε͍ͯͨ • ಉ͡ΦϒδΣΫτʹରͯ͠ҟͳΔෳ਺ͷཁٻ͕͋Δ৔߹ɺOOUIͰ͸λεΫʹ Ԡͯ͡ίϨΫγϣϯϏϡʔͷදࣔʢϨΠΞ΢τύλʔϯʣΛ੾Γସ͑ΒΕΔ Α͏ʹ͢Δ ʢλεΫผͷೖΓޱΛઃ͚ͨΓ͠ͳ͍ʂʣ

Slide 27

Slide 27 text

OOUIʹ͓͚ΔʮλεΫ΁ͷద߹ʯ 27 • ࠓճͷݩͷUIͰ͸ʮܖ໿ʯؔ࿈ͷ3ͭͷۀ຿͝ͱʹͦΕͧΕҟͳΔը໘͕ ༻ҙ͞Ε͍ͯͨ = ར༻จ຺ʹԠͨ͡ద੾ͳද͕ࣔͳ͞Ε͍ͯͨ • ಉ͡ΦϒδΣΫτʹରͯ͠ҟͳΔෳ਺ͷཁٻ͕͋Δ৔߹ɺOOUIͰ͸λεΫʹ Ԡͯ͡ίϨΫγϣϯϏϡʔͷදࣔʢϨΠΞ΢τύλʔϯʣΛ੾Γସ͑ΒΕΔ Α͏ʹ͢Δ ʢλεΫผͷೖΓޱΛઃ͚ͨΓ͠ͳ͍ʂʣ • ࠓճ͸λεΫͷจதʹϑΟϧλϦϯάଐੑͱͯ͠ཁٻ͕දΕ͍ͯͨ → ϑΟϧλϦϯάଐੑΛʮϓϦηοτʯԽͯ͠ར༻จ຺ʹద߹͢Δ

Slide 28

Slide 28 text

ϑΟϧλϦϯάଐੑͰར༻จ຺Λ൓ө͢Δ 28 • ʲܖ໿রձʳܖ໿Λݕࡧ͢Δɻݕࡧ݁ՌҰཡ͔Βܖ໿ৄࡉΛݟΔ • ʲ͓٬༷৘ใরձʳސ٬Λݕࡧ͢Δɻݕࡧ݁ՌҰཡ͔Βސ٬ৄࡉΛݟΔ • ʲຬظ؅ཧʳຬظ͕͍ۙܖ໿Ұཡɻ͔ͦ͜Βܖ໿ৄࡉΛݟΔ • ʲܖ໿खଓ͖ʳ৽نਃࠐͷ࡞੒ը໘ • ʲอݥྉऩೲʳอݥྉະೲͷܖ໿Ұཡɻ͔ͦ͜Βܖ໿ৄࡉΛݟΔ • ʲࣄނରԠʳࣄނ৘ใͷҰཡɻ͔ͦ͜ΒࣄނৄࡉΛݟΔ • ʲ͓٬༷৘ใ؅ཧʳސ٬Λݕࡧ͢Δɻݕࡧ݁ՌҰཡ͔Βސ٬ฤूը໘Λ։͘ • ʲਃࠐ؅ཧʳະঝೝͷਃࠐͷҰཡɻ͔ͦ͜ΒਃࠐৄࡉΛݟΔ

Slide 29

Slide 29 text

ϏϡʔͱφϏήʔγϣϯΛݕ౼͢Δ 29 • ϑΟϧλϦϯάଐੑͷ΄͔ɺར༻จ຺ʹԠͨ͡நग़৚݅΍ιʔτॱɺ ϝλσʔλදࣔͳͲ΋ߟྀͯ͠ϓϦηοτΛ༻ҙ͢Δ ΦϒδΣΫτࢦ޲UIσβΠϯ p.224

Slide 30

Slide 30 text

ϨΠΞ΢τύλʔϯΛద༻͢Δ 30 • ۀ຿ʹ࠷దԽ͞Εͨৄࡉݕࡧͷ ઃఆΛϓϦηοτͱͯ͠ ΦϒδΣΫτʹݟཱͯͯ αΠυόʔʹ഑ஔ • ຬظ೔΍ରԠঢ়گɺΞΫγϣϯ ͳͲͷϝλσʔλͷදࣔઃఆ΋ ϓϦηοτʹؚΉ ΦϒδΣΫτࢦ޲UIσβΠϯ p.225

Slide 31

Slide 31 text

·ͱΊ 31

Slide 32

Slide 32 text

OOUIઃܭͷ࣮ફ 32 • ΦϒδΣΫτநग़͸ɺػցతʹൈ͖ग़͢ͷͰ͸ͳ͘ɺϢʔβʔͷؔ৺ͷର৅ ͱͳΔ֓೦͸Կ͔Λߟ͑ͯൈ͖ग़͢ • ΞϓϦέʔγϣϯΛʮػೳʯͰ͸ͳ͘ʮ΋ͷʯ͕ฒΜͰ͍ΔΠϝʔδͰଊ͑Δ • OOUI͸ϨΠΞ΢τύλʔϯͷ੾Γସ͑ͰಛఆͷλεΫ΁ద߹Ͱ͖Δ • ϨΠΞ΢τύλʔϯͷղઆ΍࣮ફԋशͷ಺༰͸΄ͱΜͲল͖·͕ͨ͠ɺ ॏཁͳ͜ͱ͕ͨ͘͞Μॻ͔Ε͍ͯΔͷͰͥͻOOUIຊΛಡΜͰ͍ͩ͘͞ʂ

Slide 33

Slide 33 text

OOUIຊΛಡΜͩײ૝ 33 • OOUIɺύϫϑϧ͗ͨ͢ • ࣗ༝౓͕ߴ͘ෳࡶͳόʔνϟϧੈքʹʮଘࡏʯͱ͍͏டংΛ༩͚͑ͨͩͰ ʮ࡞Γखྑ͠ɾ࢖͍खྑ͠ɾࣄۀྑ͠ʯ͕࣮ݱ͢Δͱ͸ • Apple͸OOUIΛ࣮ફͯ͠ࡒΛ੒ͨ͠ͱ͍ͬͯ΋աݴͰ͸ͳ͍ͱࢥͬͨ • OOUI͸ΦϒδΣΫτࢦ޲఩ֶ΁ͷೖΓޱͩͬͨ • औֻ͔ͬΓʹ͍͘͸ͣͷ఩ֶͷੈքΛࢹ֮తʹମײͰ͖ͨؾ͕ͨ͠ • OOUIͷ΋ͷͮ͘Γ؍ʹ৬छͱ͍͏࿮͸ͳ͔ͬͨ • OOUI͸৬छͷ࿮Λ௒͑ͯ͢΂ͯͷ࡞Γख͕࣋ͭ΂͖ʮڭཆʯͩͱࢥͬͨ