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
アフォーダンスとシグニファイア
ryokanakai
0
300
Night Shift concept 9/15/2024
cpineda57
0
740
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
290
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
180
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
0
980
Dreamia
elsh
0
150
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
790
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
460
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
160
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
870
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
390
Minuto de Aventura
olgastoryboard
0
170
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Producing Creativity
orderedlist
PRO
341
39k
Gamification - CAS2011
davidbonilla
80
5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Side Projects
sachag
452
42k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Being A Developer After 40
akosma
86
590k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
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Ͱͨ͠ ! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!