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.2k
オカンとオトンから学んだOOUIデザイン設計.pdf
taku
July 22, 2020
Tweet
Share
Other Decks in Design
See All in Design
発表資料テンプレート / My slide template
thatblue
0
220
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
710
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
150
横断組織デザイナーの働き方
mixi_design
PRO
0
340
マンガで分かるサービスデザインガイドライン
senryakuka
1
670
Museum Heist
allykae
0
140
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
280
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
610
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
210
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
250
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
240
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Writing Fast Ruby
sferik
628
61k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Visualization
eitanlees
146
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Building an army of robots
kneath
303
45k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Music & Morning Musume
bryan
46
6.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Faster Mobile Websites
deanohume
306
31k
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Ͱͨ͠ ! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!