オカンとオトンから学んだOOUIデザイン設計.pdf

Transcript

1. ΦΧϯͱΦτϯ͔ΒֶΜͩ OOUI σβΠϯઃܭ
2. Takuʢ29ʣ @hara _ taku_ • ΤϯδχΞͱͯ͠ͷۀ຿ɾۀք͸ະ ܦݧʢݱࡏస৬׆ಈதͰ͢ʣ • Flutter Ͱ೑ڇൟ৩೶ՈͷͨΊͷੜҭ ه࿥ΞϓϦʮMemowʯΛϦϦʔε ʢݱࡏ΋ܧଓతʹΞοϓσʔτதʣ • QiitaʮʲॳΞϓϦʳະܦݧ͕ Flutter Ͱ೑ڇൟ৩೶ՈͷͨΊͷΞϓϦΛ ࡞ͬͯΈͨʯ1100LTGM ௒͑ • ษڧձͳͲͰʮڇͷʢΞϓϦͷʣ ਓʯͱݴΘΕ·͢
3. ࠓ೔࿩͢͜ͱ • ʮMemowʯͷ੍࡞Ͱͭ·͍ͮͨͱ͜Ζ • ࣗ෼ͳΓͷղܾํ๏ΛγΣΞ • ಉ͡Α͏ʹ։ൃؤு͍ͬͯΔਓͷώϯτʹͳΕ͹خ͍͠Ͱ͢ʂ
4. ͳͥ೑ڇൟ৩೶Ո޲͚ͷΞϓϦʁ
5. ͳͥ೑ڇൟ৩೶Ո޲͚ͷ ΞϓϦʁ • ྆਌͕೑ڇൟ৩೶Ոʢ਌ڇʹࢠڇΛ ੜ·ͤɺͦͷࢠڇΛ໿10ϲ݄ؒҭͯ ͯංҭ຀৔ʹҾ͖౉͢ʣ • Ξφϩάͳڇͷ؅ཧʹ྆਌͕՝୊Λ ײ͍ͯͨ͡ • χονա͗ͯ྆਌ͷ՝୊͕ղܾͰ͖ ΔΞϓϦ͕ੈͷதʹແ͔ͬͨ
6. ͲΜͳΞϓϦ͔঺հͤͯͩ͘͞͞ ͍
7. ػೳ ᶃ ߦಈͷه࿥ɾ؅ཧ • ਌ڇͷ೛৷ɾग़࢈Λ؆୯ʹه࿥ • 1 ಄͝ͱʹλΠϜϥΠϯܗࣜͰ֬ೝ
8. ػೳ ᶄ ঢ়ଶผͷιʔτ • λϒΛબ୒͢Δ͜ͱͰɺঢ়ଶ͝ͱͷ άϧʔϓ୯ҐͰڇͷҰཡΛ֬ೝ
9. ػೳ ᶅ σόΠεؒͷڞ༗ • ೖྗͨ͠৘ใ͸ɺෳ਺ͷσόΠεͰ ڞ༗Մೳ • ট଴ऀ͔ΒૹΒΕ͖ͯͨϦϯΫΛ λοϓ͢Δ͚ͩͰڞ༗͕։࢝ ✅ Firebase Dynamic Links Λ׆༻
10. ػೳ ᶆ ݸମ৘ใͷࣗಈೖྗ • 1 ಄ͣͭ͋Δڇͷށ੶දͷࣸਅΛಡ Έࠐ·ͤΔ͚ͩͰݸମ৘ใ͕ࣗಈೖ ྗ ✅ GCP Vision AI Λ׆༻
11. ʮMemowʯΛϦϦʔεͯ͠Έͯ • ಛʹϨΫνϟʔͤͣͱ΋࢖༻Ͱ͖͍ͯΔ • 50୅ޙ൒ͷΦΧϯΦτϯ͸ɺڞ༗ػೳΛར༻ͯ͠ɺ͓ޓ͍ͷσόΠεͰΞϓϦΛ ࢖༻͍ͯ͠ΔʢओʹΦΧϯ͕ೖྗɺΦτϯ͸Ӿཡʣ
12. ͳͥ྆਌͕࢖͍͑ͯΔͷ͔ʁ
13. ϢʔβʔʢΦΧϯʣ͕ΞϓϦΛ࢖͍͑ͯΔཧ༝ 1. ର৅ϢʔβʔΛۃݶʢΦΧϯͱΦτϯʣ·ͰߜΓ 2. ର৅Ϣʔβʔ͔ΒχʔζΛపఈతʹฉ͖औΓ 3. Ϣʔβʔͷ՝୊ղܾΛͭͭ͠΋ΞϓϦͷػೳΛ࠷খݶͱ͠ 4. OOUI ʹجͮ͘σβΠϯઃܭΛҙࣝͨ͠
14. ϢʔβʔʢΦΧϯʣ͕ΞϓϦΛ࢖͍͑ͯΔཧ༝ 1. ର৅ϢʔβʔΛۃݶʢΦΧϯͱΦτϯʣ·ͰߜΓ 2. ର৅Ϣʔβʔ͔ΒχʔζΛపఈతʹฉ͖औΓ 3. Ϣʔβʔͷ՝୊ղܾΛͭͭ͠΋ΞϓϦͷػೳΛ࠷খݶͱ͠ 4. OOUI ʹجͮ͘σβΠϯઃܭΛҙࣝͨ͠ ίϨʹ͍ͭͯ࿩͍͖ͯ͠·͢ ※ Ξφϩά؅ཧΛ͍ͯͨ྆͠਌͕ΞϓϦΛ໰୊ͳ͘࢖༻Ͱ͖͍ͯΔ͜ͱʹڻ͍ͨͱ͍͏ײ૝ΛɺQiita ΍ Twitter Ͱ ଟ͍͖ͨͩ͘·ͨ͠ɻ
15. OOUI ͱ͸ʁ ʮOkan Oton ʹదͨ͠ User Interfaceʯ
16. OOUI ͱ͸ʁ ʮOkan Oton ʹదͨ͠ User Interfaceʯ ʮObject-Oriented User Interfaceʯ ʮΦϒδΣΫτࢦ޲ UIʯ ɹɹɹɹɹ ! ʮΦϒδΣΫτΛख͕͔Γʹૢ࡞ઃܭ͞Εͨ UIʯ
17. ʮMemowʯͷσβΠϯ੍࡞ͷܦҢ 1. ࠷ॳʹ࡞ͬͨϓϩτλΠϓ͸ΦΧϯʹ͸ཧղͰ͖ͳ͔ͬͨ 2. ࢖͍΍͍͢ UI ͕Կ͔ɺΦΧϯ͕࢖͍͑ͯΔΞϓϦΛத৺ʹͻͨ͢Βௐ΂ͨ 3. σβΠϯઃܭʹ໰୊͕͋Δ͜ͱʹؾͮ͘ 4. OOUIͱ΍ΒΛ஌Δ 5. OOUIͷσβΠϯઃܭʹج͖ͮվળͨ͠
18. ·ͣ͸վળલͷσβΠϯΛݟͯΈ ·͠ΐ͏
20. σβΠϯઃܭʢվળલʣ 1. ਌ڇͱࢠڇ͕ࠞ߹ͨ͠Ұཡ • ਌ڇͱࢠڇͰཁ݅΍ಈ࡞͕ҟͳΔͷʹɺ ʮڇʯ͸ಉҰΧςΰϦͷΦϒδΣΫτͱ͍͏ೝࣝͰઃܭ͍ͯͨ͠ 2. ʮϝχϡʔʯΛى఺ͱͳΔΦϒδΣΫτͱͨ͠ಋઢ • ૢ࡞ͷى఺ͱͳΔΦϒδΣΫτΛఆΊ͍ͯͳ͔ͬͨͨΊɺ ͢΂ͯͷػೳΛʮϝχϡʔʯʹಥͬࠐΜͰ͍ͨ
21. ଓ͍ͯɺվળޙͷσβΠϯͰ͢
23. σβΠϯઃܭʢվળޙʣ 1. ʮ਌ڇʯͱʮࢠڇʯ͸ͦΕͧΕϝΠϯΦϒδΣΫτʹఆΊͨ • ਌ڇͱࢠڇͰཁ͕݅ҧ͏ͨΊɺಉҰΦϒδΣΫτ͸ద͍ͯ͠ͳ͔ͬͨ 2. ʮϝχϡʔʯΦϒδΣΫτΛഇࢭ • ਌ڇ΍ࢠڇͷঢ়ଶ͸ɺͦΕͧΕͷαϒΦϒδΣΫτͱͳΔͨΊʯ Ϣʔβʔ͕ΞϓϦΛ࢖༻͢ΔγνϡΤʔγϣϯΛਂງΓ͠ɺϝΠϯΦϒδΣΫτΛ ݟ௚ͨ͠ʢͱ͍͏͔౰ॳ͸ҙ͍ࣝͯ͠ͳ͔ͬͨʣ͜ͱ͕վળʹͭͳ͕ͬͨ
24. ߟ͑ํΛ·ͱΊΔͱɾɾɾ
25. ᶃ ΦϒδΣΫτͷநग़
26. ᶄ ʮԿΛͲͷΑ͏ʹʯ
27. ᶅ Ϗϡʔͷఆٛͱઃఆ
28. ·ͱΊ • ϝΠϯΦϒδΣΫτͷઃఆΛޡΔͱΞϓϦͷઃܭɺσβΠϯ͢΂ͯʹѱӨڹΛٴ ΅͢ • ϝΠϯΦϒδΣΫτͷઃఆ͸ΞϓϦΛ࢖༻͢ΔγνϡΤʔγϣϯΛ͔ͬ͠Γ೺Ѳ ͢Δ͜ͱ͕େࣄ • Ϣʔβʔʹͱֶͬͯशޮ཰͕ѱ͍ΞϓϦͱͳ͍ͬͯΔ৔߹ɺOOUIઃܭΛݟ௚͢ ͜ͱͰղܾͷࢳޱ͕ݟ͔ͭΔ͜ͱ΋
29. ࢀߟจݙ • ΦϒδΣΫτࢦ޲UIσβΠϯ
30. ࠓճ͜Ε͕ॳLTͰͨ͠ ! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!