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
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
120
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
How to go from research data to insights?
mastervicedesign
0
220
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
610
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
140
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Done Done
chrislema
182
16k
Fireside Chat
paigeccino
34
3.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Philosophy of Restraint
colly
203
16k
Site-Speed That Sticks
csswizardry
3
370
Building a Scalable Design System with Sketch
lauravandoore
460
33k
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Ͱͨ͠ ! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!