15分しかないLTだが全力で OOUI を紹介したい / OOUI Introduction in 15 min LT

Slide 1

Slide 1 text

@uenitty 15෼͔͠ͳ͍LT͕ͩ શྗͰ OOUI Λ঺հ͍ͨ͠ ABEMA LT 2020/10/26

Slide 2

Slide 2 text

OOUIͱ͸ 2 • ΦϒδΣΫτࢦ޲UIʢObject-Oriented User Interfaceʣ • OOUI͸ʮ࢖͍΍͢͞ʯͱʮ։ൃ͠΍͢͞ʯཱ͕྆Ͱ͖Δ

Slide 3

Slide 3 text

ΦϒδΣΫτࢦ޲ͱ͸ 3 • ΦϒδΣΫτ • ໨౰ͯɺ໨తɺର৅෺ɺ΋ͷ • ࢦ޲ • ͋Δํ޲΍໨తʹ޲͔͏͜ͱɺ޲͔ΘͤΔ͜ͱ • ΦϒδΣΫτࢦ޲ • ໨౰ͯͷର৅෺ʹண໨͢Δ͜ͱ

Slide 4

Slide 4 text

ΦϒδΣΫτࢦ޲ͱ͸ 4 • ΦϒδΣΫτ • ໨౰ͯɺ໨తɺର৅෺ɺ΋ͷ • ࢦ޲ • ͋Δํ޲΍໨తʹ޲͔͏͜ͱɺ޲͔ΘͤΔ͜ͱ • ΦϒδΣΫτࢦ޲ • ໨౰ͯʹண໨͢Δ͜ͱ

Slide 5

Slide 5 text

۩ମྫ 5 • πΠʔτ Λ ౤ߘ͢Δ • πΠʔτ Λ Ӿཡ͢Δ • πΠʔτ ʹ ͍͍Ͷ͢Δ • πΠʔτ Λ ࡟আ͢Δ

Slide 6

Slide 6 text

۩ମྫ 6 • πΠʔτ Λ ౤ߘ͢Δ • πΠʔτ Λ Ӿཡ͢Δ • πΠʔτ ʹ ͍͍Ͷ͢Δ • πΠʔτ Λ ࡟আ͢Δ ໊ࢺ ಈࢺ ໨౰ͯ ػೳ ΦϒδΣΫτ λεΫ

Slide 7

Slide 7 text

ΦϒδΣΫτΛࢦ޲ͨ͠UIͷྫ 7 πΠʔτ • ࠷ॳ͔Β໨౰ͯͷର৅෺͕ݟ͍͑ͯΔ • ૢ࡞ର৅Λબ୒ͯ͠ɺΞΫγϣϯΛબ୒͢Δ • ໊ࢺ → ಈࢺ • ܾ·ͬͨૢ࡞ॱং͸ͳ͍ • ϞʔυϨε

Slide 8

Slide 8 text

λεΫΛࢦ޲ͨ͠UIͷྫ 8 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ

Slide 9

Slide 9 text

λεΫΛࢦ޲ͨ͠UIͷྫ 9 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ

Slide 10

Slide 10 text

λεΫΛࢦ޲ͨ͠UIͷྫ 10 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ

Slide 11

Slide 11 text

λεΫΛࢦ޲ͨ͠UIͷྫ 11 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ ͍͍Ͷ͢ΔπΠʔτΛ બ୒͍ͯͩ͘͠͞

Slide 12

Slide 12 text

λεΫΛࢦ޲ͨ͠UIͷྫ 12 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ ͍͍Ͷ͢ΔπΠʔτΛ બ୒͍ͯͩ͘͠͞

Slide 13

Slide 13 text

λεΫΛࢦ޲ͨ͠UIͷྫ 13 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ • ର৅෺͕ݟ͍͑ͯͳ͍ • ΞΫγϣϯΛબ୒ͯ͠ɺૢ࡞ର৅Λબ୒͢Δ • ಈࢺ → ໊ࢺ • ૢ࡞Λ࢝ΊΔͱଞͷ͜ͱ͕Ͱ͖ͳ͍ • Ϟʔμϧ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

͜Ε͸OOUI 16 https://www.apple.com/jp/newsroom/

Slide 17

Slide 17 text

͜Ε͸OOUI͡Όͳ͍ 17 https://www.aichibank.co.jp/atm/using/guide/

Slide 18

Slide 18 text

͜Ε͸OOUI 18 https://abema.tv/

Slide 19

Slide 19 text

͜Ε͸OOUI͡Όͳ͍ 19 https://abema.tv/channels/payperview-1/slots/AakjKLgTGb6msu ΞΧ΢ϯτ͋Γ & ίΠϯ͋Γͷ৔߹ ߪೖ׬ྃ ΞΧ΢ϯτ͋Γ & ίΠϯͳ͠ͷ৔߹ ్தͰΩϟϯηϧͷ৔߹ ৼΓग़͠ʹ໭Δ ΞΧ΢ϯτͳ͠ & ίΠϯͳ͠ͷ৔߹

Slide 20

Slide 20 text

OOUI͕࣮ݱ͢Δʮ࢖͍΍͢͞ʯ 20 • ୭Ͱ΋࢖͑Δಓ۩ • iPhoneʹ͸આ໌ॻ͕ͳ͍ • ΦϒδΣΫτͷ൓ԠΛݟͳ͕Βࢼߦࡨޡ͢ΔதͰɺ΍Γ͍ͨ͜ͱΛ ࣮ݱͰ͖Δ • ࣗ༝ͳૢ࡞ॱং • ϞʔυϨε

Slide 21

Slide 21 text

OOUI͕࣮ݱ͢Δʮ࡞Γ΍͢͞ʯ 21 • গͳ͍ը໘਺ɺγϯϓϧͳը໘ભҠ • λεΫࢦ޲UIͩͱ5ʙ20ഒͷը໘਺͕ඞཁʹͳΔ※ • গͳ͍৚݅෼ذ = গͳ͍όά • ෳࡶͳ৚݅෼ذ͸ɺϢʔβʔͷࢥߟ΍൑அͷதʹҠಈ͢Δ • ਖ਼֬ͳ޻਺ݟੵɺαʔϏε੒௕΁ͷૉૣ͍௥ै • มΘΓʹ͍͘΋ͷΛ࣠ʹ࣮૷͢Δ͜ͱʹͳΔͨΊɺมߋՕॴ͕໌֬ʹ ͳΓɺ޻਺͕গͳ͘ͳΔ ※ ΦϒδΣΫτࢦ޲UIσβΠϯ p.ix

Slide 22

Slide 22 text

OOUIɺͳΜͰͦΜͳʹύϫϑϧͳͷʁ 22 • ͏͔ͬΓԿͰ΋Ͱ͖ͯ͠·͏όʔνϟϧੈքʹடংΛ΋ͨΒ͔͢Β • ΦϒδΣΫτࢦ޲ͱ͸ɺʮଘࡏʯΛ࣠ʹ͢Δɺͱ͍͏͜ͱ • ϦΞϧੈքͰ͸౰ͨΓલͷʢ= ݴޠԽ͢Δͱ఩ֶతʹͳΔʣ֓೦ • όʔνϟϧੈքͷ΋ͷͮ͘ΓͰ͸ɺ࡞Γख͕ҙࣝ͠ͳ͍ͱ͍͚ͳ͍ • OOUI͚ͩ͡Όͳ͍ɺʮΦϒδΣΫτࢦ޲ʯࣗମͷԞਂ͞

Slide 23

Slide 23 text

OOUIΛֶ΂Δࢿྉ 23

Slide 24

Slide 24 text

OOUIຊ 24 • ΦϒδΣΫτࢦ޲UIσβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ • OOUIʹ͍ͭͯͷ೔ຊޠͷॻ੶͸ ͨͿΜ͜Ε͚ͩ https://www.sociomedia.co.jp/10046

Slide 25

Slide 25 text

• ຊΛಡΉલʹશମ૾Λ௫Ήͷʹ ͓͢͢Ί • 1࣌ؒ͋Γ·͢ OOUIຊͷஶऀͷొஃಈը 25 https://youtu.be/2jqXiAhqCm0?t=4097 !

Slide 26

Slide 26 text

OOUIຊͷஶऀͷϒϩάͱTwitter 26 • ຊͱ͸ҧ͏੾ΓޱͰઆ໌͞Ε͍ͯΔ͜ͱ͕͋Γɺཧղ͕ਂ·Δ https://www.sociomedia.co.jp/category/blog https://twitter.com/manabuueno

Slide 27

Slide 27 text

੿࡞ͷࢿྉ΋ҰԠ 27 https://speakerdeck.com/uenitty/what-is-object-oriented-ui https://speakerdeck.com/uenitty/design-process-of-ooui

Slide 28

Slide 28 text

·ͱΊ 28

Slide 29

Slide 29 text

OOUI ΍͍͖ͬͯ·͠ΐ͏ʂ 29 • ΦϒδΣΫτࢦ޲UI • ʮ࢖͍΍͢͞ʯͱʮ։ൃ͠΍͢͞ʯΛཱ྆͢Διϑτ΢ΣΞͷʮݪཧʯ • ໊ࢺ → ಈࢺ • ○ϞʔυϨεɺ✗Ϟʔμϧ • എܠͷ఩ֶ΍۩ମతͳઃܭํ๏ɺ͢ͰʹλεΫࢦ޲ͳUIΛΦϒδΣΫτࢦ޲ ʹ͢Δํ๏ͳͲৄࡉ৘ใ͸ɺॻ੶΍ಈը͕͓͢͢Ί