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 ΦϒδΣΫτࢦUIͱԿ͔ ABEMA weber ษڧձ 2020/09/16
Slide 2
Slide 2 text
ࢀߟॻ 2 • ༰͔ͳΓল͍͍ͯ·͢ • ࣗͷղऍͰ࠶ߏ͍ͯ͠·͢ • ؒҧ͍͕͋ͬͨΒ͝ΊΜͳ͍͞ • ͥͻຊΛಡΜͰ͍ͩ͘͞ʂ https://www.sociomedia.co.jp/10046
Slide 3
Slide 3 text
ͦͷଞͷࢀߟࢿྉ 3 https://youtu.be/2jqXiAhqCm0?t=4097 ! ! https://developer.apple.com/videos/play/wwdc2018/803/
Slide 4
Slide 4 text
ࠓճͷ༰ 4 • Ϣʔβʔͷओମੑ • UIͱԿ͔ • ΦϒδΣΫτࢦUIͱԿ͔ • λεΫࢦUIͳͥආ͚Δ͖͔
Slide 5
Slide 5 text
Ϣʔβʔͷओମੑ 5
Slide 6
Slide 6 text
Ϗδωεͷͯ 6 • ϏδωεతʹʮϢʔβʔ͔ΒۚΛר্͖͛ΒΕΕΑ͍ʯͣ... Ϣʔβʔ UI • ʮ͍͍͢UIʯΛٻΊΔͷɺͳͥʁ • ࡞Γखͷࣗݾຬʁ
Slide 7
Slide 7 text
ແཧΓߦಈͤͯ͞ɺܧଓͯ͘͠Εͳ͍ 7 • ࣗ༝͕ͳ͍ͷɺϢʔβʔʹͱͬͯετϨεͰ͔͠ͳ͍ • ैଐత • త • ҉త • ར༻ࢧ࣋ͷܧଓʹʮϢʔβʔͷओମੑʯ͕ඞཁෆՄܽ
Slide 8
Slide 8 text
ࣗ༝͔ͩΒɺओମతʹͳΕΔ 8 • ͍͍͢UIɺ • ࣗ༝͕ߴ͍ • తʹͳΕΔ • ָ͍͍ͬͯͯ͠ • ࢲ͕ͨͪٻΊ͍ͯΔͷɺ ʮ͍͍͢UIʯ=ʮϢʔβʔʹओಋݖΛ༩͑ɺओମੑΛଅ͢UIʯ
Slide 9
Slide 9 text
Կͳ͠ʹओମతʹͳΕͳ͍ 9 • ϢʔβʔʮͯʯΛͷͨΓʹͯ͠ɺओମతʹͳΔ • ओମੑΛଅ͢ʹɺ·ͣʮͯʯΛϢʔβʔʹݟͤΔ͜ͱ͔Β࢝ΊΔ • ʮओମʯੑΛଅͨ͢Ίʹʮ٬ମʯʹண͖͢ͳͷ͕ϙΠϯτ Photo by Rowan Heuvel on Unsplash ओମ = Ϣʔβʔ ٬ମ = αʔϏεͷ༰ɺϢʔβʔͷͯ ❤
Slide 10
Slide 10 text
ओମੑΛଅ͢ʮͷʯ 10 • ʮ٬ମʯʮͯʯʮͷʯӳޠͰʮObjectʯ • ٬ମʹணͤΑ = ΦϒδΣΫτΛࢦͤΑ • ΦϒδΣΫτࢦͱɺ ʮͯʯΛ࣠ʹɺϢʔβʔʹʮओମੑʯΛଅ͢͜ͱ
Slide 11
Slide 11 text
UIͱԿ͔ 11
Slide 12
Slide 12 text
UI = ϢʔβʔΠϯλʔϑΣʔε 12 • ಓ۩Λ༻͢Δࡍʹ৮ΕΔ෦ͷ͜ͱ Photo by Kate Hliznitsova on Unsplash
Slide 13
Slide 13 text
ҜࢠͷUI 13 • ࠲Δͱ͖ʹ৮ΕΔɺ࠲໘ • ࣋ͬͯӡͿͱ͖ʹ৮ΕΔɺ٭എͨΕ Photo by Sam Moqadam on Unsplash
Slide 14
Slide 14 text
ใγεςϜͷUI 14 • ΩʔϘʔυϚεͳͲͷϋʔυΣΞ • ιϑτΣΞʹΑͬͯ σΟεϓϨΠʹݱ͞ΕΔʮܗʯ Photo by John Schnobrich on Unsplash ใγεςϜͰɺUI͕ͦ͜ɺ ͦͷಓ۩͕ԿͰ͋Δ͔ͱ͍͏ϢʔβʔͷೝΛ࡞Δɺ࠷େͷઃܭςʔϚ
Slide 15
Slide 15 text
ಓ۩ੑΛݟ͍ͩ͢ɺਓͷओମੑ 15 • ਓྨͨͩͷੴΛɺੴثʹͨ͠ • ੴثͱ͍͏ಓ۩Λɺ ·ΔͰࣗͷମͷҰ෦ͷΑ͏ʹૢͬͨ • ૉखͰઓ͑ͳ͍֫ʹཱ͔ͪ͑ͨ • ৺ͷԆͷΑ͏ʹײ͡ΒΕΔಓ۩͕ ਓΛओମతʹ͖ͯͨ͠ ࠷ݹͷੴثʢPHOTOGRAPH BY SONIA HARMAND, NATIONAL GEOGRAPHIC CREATIVEʣ
Slide 16
Slide 16 text
ಓ۩Λ৺ͷԆͷΑ͏ʹײ͡ΒΕΔ͔ 16 • iPhone͕ఏڙ͢Δͷʮͯʯ=ʮΦϒδΣΫτʯʹ৮ΕΔମݧ • ओମੑ͕ۃ·ͬͨͱ͖ɺಓ۩ͷଘࡏҙ͔ࣝΒফ͑Δ https://developer.apple.com/videos/play/wwdc2018/803/
Slide 17
Slide 17 text
ΦϒδΣΫτࢦUIͱԿ͔ 17
Slide 18
Slide 18 text
ΦϒδΣΫτࢦUIͷݪଇ 18 • ΦϒδΣΫτΛ֮Ͱ͖తʹಇ͖͔͚ΒΕΔ • ΦϒδΣΫτࣗͷੑ࣭ͱঢ়ଶΛମݱ͢Δ • ΦϒδΣΫτબ→ΞΫγϣϯબ ͷૢ࡞ॱং • ͯ͢ͷΦϒδΣΫτ͕ޓ͍ʹڠௐ͠ͳ͕ΒUIΛߏ͢Δ
Slide 19
Slide 19 text
ΦϒδΣΫτΛ֮Ͱ͖తʹಇ͖͔͚ΒΕΔ 19 • ର͕ݟ͓͑ͯΓɺʮԿΛͰ͖Δ͔ʯͷώϯτ͕ಘΒΕΔ • ৮Δ͜ͱ͕Ͱ͖ɺରͷมԽͱͯ͠࡞ۀ݁Ռ͕ೝࣝͰ͖Δ ! "
Slide 20
Slide 20 text
ΦϒδΣΫτࣗͷੑ࣭ͱঢ়ଶΛମݱ͢Δ 20 • Ϣʔβʔ͕ঢ়گΛѲ͠ɺ࣍ʹߦ͏͖ૢ࡞Λߟ͑ΒΕΔΑ͏ʹ͢Δ • ϢʔβʔͷΞΫγϣϯʹରͯ͠ϦΞϧλΠϜʹԠΛฦ͢ • ϦΞϧੈքͷཧੑΛ࣋ͬͨʮͷʯͱಉ͡ײ֮Ͱѻ͑ΔΑ͏ʹ͢Δ https://www.sociomedia.co.jp/9267
Slide 21
Slide 21 text
ΦϒδΣΫτબ→ΞΫγϣϯબ ͷૢ࡞ॱং 21 • ʮ໊ࢺ→ಈࢺʯͷॱংΛపఈ͢Δ͜ͱ • ʮಈࢺ→໊ࢺʯݱ࣮Ͱ͋Γ͑ͳ͍ ʢ͔͛ͯΒੴΛ࣋ͭਓ͍ͳ͍ʣ https://www.sociomedia.co.jp/8740 1. ΦϒδΣΫτબ 2. ΞΫγϣϯબ
Slide 22
Slide 22 text
ͯ͢ͷΦϒδΣΫτ͕ޓ͍ʹڠௐ͠ͳ͕ΒUIΛߏ͢Δ 22 • ϦΞϧੈքͷ๏ଇΛϝλϑΝʔʹɺ όʔνϟϧੈքͷؔΘΓํΛ ࣗવʹମಘͰ͖ΔΑ͏ʹԋग़͢Δ • ΞϥϯɾέΠ͜ΕΛ ʮϢʔβʔΠϦϡʔδϣϯʯ ͱݺΜͰॏཁੑΛઆ͍ͨ https://www.apple.com/jp/macos/big-sur-preview/
Slide 23
Slide 23 text
ΦϒδΣΫτࢦUI͕࣮ݱ͢Δ͜ͱ 23 • ୭Ͱ͑Δಓ۩ • iPhoneʹઆ໌ॻ͕ͳ͍ • ΦϒδΣΫτͷԠΛݟͳ͕Βࢼߦࡨޡ͢ΔதͰɺΓ͍ͨ͜ͱΛ ࣮ݱͰ͖Δ • ࣗ༝ͳૢ࡞ॱং • ϞʔυϨε
Slide 24
Slide 24 text
Ϟʔυ 24 • ݶΒΕͨૢ࡞͔͠ߦ͑ͳ͍ঢ়ଶͷ͜ͱ https://www.sociomedia.co.jp/9094 ϞʔυϨε = Ϟʔυ͔Βग़ͨঢ়ଶ Ϟʔμϧ = Ϟʔυʹೖͬͨঢ়ଶ
Slide 25
Slide 25 text
ϢʔβʔΛϞʔυ͔Βղ์ͤΑ 25 • ਓͷ৺ৗʹྲྀಈతͰɺܹࢥߟʹԠͯ͠มԽ͢ΔՄೳੑ͕͋Δ • UI͕ϞʔυΛ࡞ΔͱɺϢʔβʔʹಛఆͷਐ࿏Λڧཁ͢Δ͜ͱʹͳΔ • Ϣʔβʔʹૢ࡞ݖΛ༩͑ɺओମతʹ͢ΔͨΊɺϞʔυϨεΛపఈ͖͢
Slide 26
Slide 26 text
λεΫࢦUIͳͥආ͚Δ͖͔ 26
Slide 27
Slide 27 text
λεΫࢦUIͷྫʢϑΝΠϧૢ࡞ʣ 27 • ಈࢺ→໊ࢺ • ʮରͷબͪϞʔυʯ ͕ൃੜ͢ΔʢϞʔμϧʣ https://www.sociomedia.co.jp/9275
Slide 28
Slide 28 text
λεΫࢦUIͷྫʢATMʣ 28 • ಈࢺ→໊ࢺ • ʮ࠷ॳ͔ΒΓ͍ͯͩ͘͠͞ʯ Ϟʔμϧͳূ • બࢶ͕ଟ͍ https://www.aichibank.co.jp/atm/using/guide/
Slide 29
Slide 29 text
λεΫࢦUIͳͥආ͚Δ͖͔ 29 • ಈࢺ→໊ࢺ • ʮͯʯʹରͯ͠ʮͲ͏͢Δ͔ʯΛߟ͑Δ͜ͱͦ͜ɺ ਓ͕ੑΛൃشͰ͖ΔྖҬ • UI͕ʮΔ͜ͱʯΛࢦࣔ͢Δͷɺࣗ༝Λୣ͍ɺओମੑΛ͙ • Ϟʔμϧ • ʮݶΒΕͨૢ࡞͔͠ߦ͑ͳ͍ঢ়ଶʯΛUI͕࡞ΔͷɺϢʔβʔͷࣗ༝ͳ ߦಈΛ੍ݶ͢Δ͜ͱʹͳΔ
Slide 30
Slide 30 text
λεΫࢦUIͲ͏ͯ͠ੜ·ΕΔͷ͔ 30 • ϏδωεཁٻϢʔβʔཁٻ Γ͍ͨ͜ͱϕʔε • ར༻खଓ͖ΛσβΠϯ͠Α͏ͱ͢Δ ʢձһొϑϩʔɺߪೖϓϩηεʣ • ϢʔβʔମݧͷσβΠϯΛར༻खଓ ͖ͷσβΠϯͱצҧ͍͍ͯ͠Δ • Ϣʔβʔઢ͔Βൈ͚ग़͍ͤͯͳ͍ ʢϢʔβʔʹدΓఴͬͨͭΓʣ
Slide 31
Slide 31 text
ΦϒδΣΫτࢦUIΛσβΠϯ͢Δʹ 31 • ϏδωεཁٻϢʔβʔཁٻ Γ͍ͨ͜ͱϕʔε • →ཁٻӏವΈʹͤͣɺטΈࡅ͍ͯ ΦϒδΣΫτʹ͢Δ • ར༻खଓ͖ΛσβΠϯ͠Α͏ͱ͢Δ ʢձһొϑϩʔɺߪೖϓϩηεʣ • →खଓ͖͔ΒΦϒδΣΫτΛநग़͠ ϞʔυϨεΛపఈ͢Δ • ϢʔβʔମݧͷσβΠϯΛར༻खଓ ͖ͷσβΠϯͱצҧ͍͍ͯ͠Δ • →ྑ͍ϢʔβʔମݧϢʔβʔͷ ࣗओੑ͔Βੜ·ΕΔ͜ͱΛೝࣝ͢Δ • Ϣʔβʔઢ͔Βൈ͚ग़͍ͤͯͳ͍ ʢϢʔβʔʹدΓఴͬͨͭΓʣ • →ϢʔβʔͱΦϒδΣΫτΛ ၆ᛌ͢Δʮୈࡾऀͷઢʯʹཱͭ
Slide 32
Slide 32 text
·ͱΊ 32
Slide 33
Slide 33 text
ΦϒδΣΫτࢦUIͱԿ͔ 33 • ΦϒδΣΫτΛࢦͯ͠ɺϢʔβʔʹओମੑΛଅ͢ • ʮ໊ࢺ→ಈࢺʯͷॱংͰʮϞʔυϨεʯΛపఈ͢Δ • ୭Ͱ͑Δಓ۩ͷʮݪཧʯ
Slide 34
Slide 34 text
࣍ճ༧ࠂ 34
Slide 35
Slide 35 text
@uenitty OOUIͷઃܭϓϩηε ABEMA weber ษڧձ 2020/09/30ʢ༧ఆʣ