オカンとオトンから学んだ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. ·ͣ͸վળલͷσβΠϯΛݟͯΈ ·͠ΐ͏

19. None

20. σβΠϯઃܭʢվળલʣ 1. ਌ڇͱࢠڇ͕ࠞ߹ͨ͠Ұཡ • ਌ڇͱࢠڇͰཁ݅΍ಈ࡞͕ҟͳΔͷʹɺ ʮڇʯ͸ಉҰΧςΰϦͷΦϒδΣΫτͱ͍͏ೝࣝͰઃܭ͍ͯͨ͠ 2. ʮϝχϡʔʯΛى఺ͱͳΔΦϒδΣΫτͱͨ͠ಋઢ • ૢ࡞ͷى఺ͱͳΔΦϒδΣΫτΛఆΊ͍ͯͳ͔ͬͨͨΊɺ

    ͢΂ͯͷػೳΛʮϝχϡʔʯʹಥͬࠐΜͰ͍ͨ

21. ଓ͍ͯɺվળޙͷσβΠϯͰ͢

22. None

23. σβΠϯઃܭʢվળޙʣ 1. ʮ਌ڇʯͱʮࢠڇʯ͸ͦΕͧΕϝΠϯΦϒδΣΫτʹఆΊͨ • ਌ڇͱࢠڇͰཁ͕݅ҧ͏ͨΊɺಉҰΦϒδΣΫτ͸ద͍ͯ͠ͳ͔ͬͨ 2. ʮϝχϡʔʯΦϒδΣΫτΛഇࢭ • ਌ڇ΍ࢠڇͷঢ়ଶ͸ɺͦΕͧΕͷαϒΦϒδΣΫτͱͳΔͨΊʯ Ϣʔβʔ͕ΞϓϦΛ࢖༻͢ΔγνϡΤʔγϣϯΛਂງΓ͠ɺϝΠϯΦϒδΣΫτΛ

    ݟ௚ͨ͠ʢͱ͍͏͔౰ॳ͸ҙ͍ࣝͯ͠ͳ͔ͬͨʣ͜ͱ͕վળʹͭͳ͕ͬͨ

24. ߟ͑ํΛ·ͱΊΔͱɾɾɾ

25. ᶃ ΦϒδΣΫτͷநग़

26. ᶄ ʮԿΛͲͷΑ͏ʹʯ

27. ᶅ Ϗϡʔͷఆٛͱઃఆ

28. ·ͱΊ • ϝΠϯΦϒδΣΫτͷઃఆΛޡΔͱΞϓϦͷઃܭɺσβΠϯ͢΂ͯʹѱӨڹΛٴ ΅͢ • ϝΠϯΦϒδΣΫτͷઃఆ͸ΞϓϦΛ࢖༻͢ΔγνϡΤʔγϣϯΛ͔ͬ͠Γ೺Ѳ ͢Δ͜ͱ͕େࣄ • Ϣʔβʔʹͱֶͬͯशޮ཰͕ѱ͍ΞϓϦͱͳ͍ͬͯΔ৔߹ɺOOUIઃܭΛݟ௚͢ ͜ͱͰղܾͷࢳޱ͕ݟ͔ͭΔ͜ͱ΋

29. ࢀߟจݙ • ΦϒδΣΫτࢦ޲UIσβΠϯ

30. ࠓճ͜Ε͕ॳLTͰͨ͠ ! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!