Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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ΛΦϒδΣΫτࢦ ʹ͢Δํ๏ͳͲৄࡉใɺॻ੶ಈը͕͓͢͢Ί