Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
オカンとオトンから学んだOOUIデザイン設計.pdf
Search
taku
July 22, 2020
Design
5
1.3k
オカンとオトンから学んだOOUIデザイン設計.pdf
taku
July 22, 2020
Tweet
Share
Other Decks in Design
See All in Design
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
Bulletproof Design System with TypeScript
takanorip
7
4k
「UXとUIの違い」v2
shirasu3
0
230
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
240
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
120
Them Middle School Kids Pitch
stevie_vee
0
130
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
220
Findyのプロデチームの 歩みとこれから
satty9556
0
260
アクセシビリティに取り組むメリット
magi1125
2
240
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
360
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
130
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Done Done
chrislema
185
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Practical Orchestrator
shlominoach
190
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Making Projects Easy
brettharned
117
6.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Why Our Code Smells
bkeepers
PRO
339
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Transcript
ΦΧϯͱΦτϯ͔ΒֶΜͩ OOUI σβΠϯઃܭ
Takuʢ29ʣ @hara _ taku_ • ΤϯδχΞͱͯ͠ͷۀɾۀքະ ܦݧʢݱࡏస৬׆ಈதͰ͢ʣ • Flutter Ͱڇൟ৩ՈͷͨΊͷੜҭ
هΞϓϦʮMemowʯΛϦϦʔε ʢݱࡏܧଓతʹΞοϓσʔτதʣ • QiitaʮʲॳΞϓϦʳະܦݧ͕ Flutter Ͱڇൟ৩ՈͷͨΊͷΞϓϦΛ ࡞ͬͯΈͨʯ1100LTGM ͑ • ษڧձͳͲͰʮڇͷʢΞϓϦͷʣ ਓʯͱݴΘΕ·͢
ࠓ͢͜ͱ • ʮMemowʯͷ੍࡞Ͱͭ·͍ͮͨͱ͜Ζ • ࣗͳΓͷղܾํ๏ΛγΣΞ • ಉ͡Α͏ʹ։ൃؤு͍ͬͯΔਓͷώϯτʹͳΕخ͍͠Ͱ͢ʂ
ͳͥڇൟ৩Ո͚ͷΞϓϦʁ
ͳͥڇൟ৩Ո͚ͷ ΞϓϦʁ • ͕྆ڇൟ৩ՈʢڇʹࢠڇΛ ੜ·ͤɺͦͷࢠڇΛ10ϲ݄ؒҭͯ ͯංҭʹҾ͖͢ʣ • Ξφϩάͳڇͷཧʹ͕྆՝Λ ײ͍ͯͨ͡ •
χονա͗ͯ྆ͷ՝͕ղܾͰ͖ ΔΞϓϦ͕ੈͷதʹແ͔ͬͨ
ͲΜͳΞϓϦ͔հͤͯͩ͘͞͞ ͍
ػೳ ᶃ ߦಈͷهɾཧ • ڇͷ৷ɾग़࢈Λ؆୯ʹه • 1 ಄͝ͱʹλΠϜϥΠϯܗࣜͰ֬ೝ
ػೳ ᶄ ঢ়ଶผͷιʔτ • λϒΛબ͢Δ͜ͱͰɺঢ়ଶ͝ͱͷ άϧʔϓ୯ҐͰڇͷҰཡΛ֬ೝ
ػೳ ᶅ σόΠεؒͷڞ༗ • ೖྗͨ͠ใɺෳͷσόΠεͰ ڞ༗Մೳ • টऀ͔ΒૹΒΕ͖ͯͨϦϯΫΛ λοϓ͢Δ͚ͩͰڞ༗͕։࢝ ✅
Firebase Dynamic Links Λ׆༻
ػೳ ᶆ ݸମใͷࣗಈೖྗ • 1 ಄ͣͭ͋Δڇͷށ੶දͷࣸਅΛಡ Έࠐ·ͤΔ͚ͩͰݸମใ͕ࣗಈೖ ྗ ✅ GCP
Vision AI Λ׆༻
ʮMemowʯΛϦϦʔεͯ͠Έͯ • ಛʹϨΫνϟʔͤͣͱ༻Ͱ͖͍ͯΔ • 50ޙͷΦΧϯΦτϯɺڞ༗ػೳΛར༻ͯ͠ɺ͓ޓ͍ͷσόΠεͰΞϓϦΛ ༻͍ͯ͠ΔʢओʹΦΧϯ͕ೖྗɺΦτϯӾཡʣ
ͳ͕͍ͥ྆͑ͯΔͷ͔ʁ
ϢʔβʔʢΦΧϯʣ͕ΞϓϦΛ͍͑ͯΔཧ༝ 1. ରϢʔβʔΛۃݶʢΦΧϯͱΦτϯʣ·ͰߜΓ 2. ରϢʔβʔ͔ΒχʔζΛపఈతʹฉ͖औΓ 3. Ϣʔβʔͷ՝ղܾΛͭͭ͠ΞϓϦͷػೳΛ࠷খݶͱ͠ 4. OOUI ʹجͮ͘σβΠϯઃܭΛҙࣝͨ͠
ϢʔβʔʢΦΧϯʣ͕ΞϓϦΛ͍͑ͯΔཧ༝ 1. ରϢʔβʔΛۃݶʢΦΧϯͱΦτϯʣ·ͰߜΓ 2. ରϢʔβʔ͔ΒχʔζΛపఈతʹฉ͖औΓ 3. Ϣʔβʔͷ՝ղܾΛͭͭ͠ΞϓϦͷػೳΛ࠷খݶͱ͠ 4. OOUI ʹجͮ͘σβΠϯઃܭΛҙࣝͨ͠
ίϨʹ͍͍͖ͭͯͯ͠·͢ ※ ΞφϩάཧΛ͍͕ͯͨ྆͠ΞϓϦΛͳ͘༻Ͱ͖͍ͯΔ͜ͱʹڻ͍ͨͱ͍͏ײΛɺQiita Twitter Ͱ ଟ͍͖ͨͩ͘·ͨ͠ɻ
OOUI ͱʁ ʮOkan Oton ʹదͨ͠ User Interfaceʯ
OOUI ͱʁ ʮOkan Oton ʹదͨ͠ User Interfaceʯ ʮObject-Oriented User Interfaceʯ
ʮΦϒδΣΫτࢦ UIʯ ɹɹɹɹɹ ! ʮΦϒδΣΫτΛख͕͔Γʹૢ࡞ઃܭ͞Εͨ UIʯ
ʮMemowʯͷσβΠϯ੍࡞ͷܦҢ 1. ࠷ॳʹ࡞ͬͨϓϩτλΠϓΦΧϯʹཧղͰ͖ͳ͔ͬͨ 2. ͍͍͢ UI ͕Կ͔ɺΦΧϯ͕͍͑ͯΔΞϓϦΛத৺ʹͻͨ͢Βௐͨ 3. σβΠϯઃܭʹ͕͋Δ͜ͱʹؾͮ͘ 4.
OOUIͱΒΛΔ 5. OOUIͷσβΠϯઃܭʹج͖ͮվળͨ͠
·ͣվળલͷσβΠϯΛݟͯΈ ·͠ΐ͏
None
σβΠϯઃܭʢվળલʣ 1. ڇͱࢠڇ͕ࠞ߹ͨ͠Ұཡ • ڇͱࢠڇͰཁ݅ಈ࡞͕ҟͳΔͷʹɺ ʮڇʯಉҰΧςΰϦͷΦϒδΣΫτͱ͍͏ೝࣝͰઃܭ͍ͯͨ͠ 2. ʮϝχϡʔʯΛىͱͳΔΦϒδΣΫτͱͨ͠ಋઢ • ૢ࡞ͷىͱͳΔΦϒδΣΫτΛఆΊ͍ͯͳ͔ͬͨͨΊɺ
ͯ͢ͷػೳΛʮϝχϡʔʯʹಥͬࠐΜͰ͍ͨ
ଓ͍ͯɺվળޙͷσβΠϯͰ͢
None
σβΠϯઃܭʢվળޙʣ 1. ʮڇʯͱʮࢠڇʯͦΕͧΕϝΠϯΦϒδΣΫτʹఆΊͨ • ڇͱࢠڇͰཁ͕݅ҧ͏ͨΊɺಉҰΦϒδΣΫτద͍ͯ͠ͳ͔ͬͨ 2. ʮϝχϡʔʯΦϒδΣΫτΛഇࢭ • ڇࢠڇͷঢ়ଶɺͦΕͧΕͷαϒΦϒδΣΫτͱͳΔͨΊʯ Ϣʔβʔ͕ΞϓϦΛ༻͢ΔγνϡΤʔγϣϯΛਂງΓ͠ɺϝΠϯΦϒδΣΫτΛ
ݟͨ͠ʢͱ͍͏͔ॳҙ͍ࣝͯ͠ͳ͔ͬͨʣ͜ͱ͕վળʹͭͳ͕ͬͨ
ߟ͑ํΛ·ͱΊΔͱɾɾɾ
ᶃ ΦϒδΣΫτͷநग़
ᶄ ʮԿΛͲͷΑ͏ʹʯ
ᶅ Ϗϡʔͷఆٛͱઃఆ
·ͱΊ • ϝΠϯΦϒδΣΫτͷઃఆΛޡΔͱΞϓϦͷઃܭɺσβΠϯͯ͢ʹѱӨڹΛٴ ΅͢ • ϝΠϯΦϒδΣΫτͷઃఆΞϓϦΛ༻͢ΔγνϡΤʔγϣϯΛ͔ͬ͠ΓѲ ͢Δ͜ͱ͕େࣄ • Ϣʔβʔʹͱֶͬͯशޮ͕ѱ͍ΞϓϦͱͳ͍ͬͯΔ߹ɺOOUIઃܭΛݟ͢ ͜ͱͰղܾͷࢳޱ͕ݟ͔ͭΔ͜ͱ
ࢀߟจݙ • ΦϒδΣΫτࢦUIσβΠϯ
ࠓճ͜Ε͕ॳLTͰͨ͠ ! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!