UI/UX NIGHT LT by ARISA MIYASAKA

Transcript

1. 1 ݎ࿚ͳCI, VIΛ࡞ΔͨΊͷ σβΠϯγεςϜ DESIGN SYSTEM 2018/07/20 Arisa Miyasaka
2. ຊ೔͓࿩͢Δ಺༰ Outline 2 - ࣗݾ঺հ - σβΠϯͱ͸ - CI, VIͱ͸ - σβΠϯγεςϜΛऔΓೖΕΔ - Atomic Design - ·ͱΊ
3. 3 ࣗݾ঺հ 01 Self Introduction
4. ɹ ࣗݾ঺հ Self Introduction Arisa Miyasaka 2016 / 04 - ύʔιϧϓϩηε&ςΫϊϩδʔೖࣾ 2017 / 03 - σδλϧϋϦ΢ουStudio্໺byLIG WebσβΠϯઐ߈ 2018 / 02 - Goodpatch.inc ೖࣾ 4 Career Occupation Frontend Developer / Designer Backend Developer UX Designer Frontend Developer / Designer ▼ ▼
5. Goodpatch঺հ Self Introduction 5 ϋʔτʹڹ͘UIΛ௥ٻ͢Δ άϩʔόϧͳUIσβΠϯΧϯύχʔ UI/UXσβΠϯΛڧΈͱͨ͠৽نࣄۀͷ্ཱͪ͛΍ɺ اۀͷσβΠϯઓཱུҊɺσβΠϯ૊৫ߏஙࢧԉͳ ͲΛߦ͍ɺσβΠϯͷՁ஋޲্Λ໨ࢦ͍ͯ͠Δσβ ΠϯձࣾͰ͢ɻ౦ژɺϕϧϦϯɺϛϡϯϔϯɺύϦʹ ΦϑΟεΛߏ͑ɺ͋ΒΏΔखஈͰσβΠϯ՝୊Λղ ܾ͢ΔσβΠϯύʔτφʔͰ͢ɻ TOKYO BERLIN
6. Goodpatch঺հ Self Introduction 6 IUUQTHPPEQBUDIDPN
7. 7 σβΠϯͱ͸ʁ 02 Design
8. σβΠϯͱ͸ʁ σβΠϯͱ͸ 8 σβΠϯͱ͍͏ݴ༿Λฉ͍ͯ ԿΛࢥ͍ු͔΂·͔͢ʁ
9. σβΠϯͱ͸ʁ σβΠϯͱ͸ 9 ɹ σβΠϯͱ͸ɺੜ׆ʹඞཁͳ৭ʑͳϞϊΛ࡞Δʹ͋ͨͬͯɺ
   
   ػೳ͸΋ͱΑΓɺඒ͠͞΍ௐ࿨Λߟ͑ͯɺҰͭͷϞϊͷܗଶ
   ͋Δ͍͸ܗࣜ΁ͱ·ͱΊ্͛Δ૯߹తͳܭըɺઃܭͷ͜ͱͰ͋Δɻ
   
   ݱ୅σβΠϯࣙయ ฏຌࣾ
   
   lσβΠϯz
   
   
10. UXͷ5֊૚Ϟσϧ σβΠϯͱ͸ 10
11. Ͳ͏ͯ͠ࠓσβΠϯ͕ඞཁͳͷͰ͠ΐ͏͔ʁ σβΠϯͱ͸ 11 σβΠϯඞཁੑ
12. σβΠϯͱ͸ 12 Ͳ͏ͯ͠σβΠϯ͕ॏཁͳͷ͔ʁ ୯ʹ࡞Δ͚ͩͰ͸΋ͷ΍αʔϏε͕ചΕͳ͍͔Β
13. Ͳ͏ͯ͠σβΠϯ͕ॏཁͳͷ͔ʁ σβΠϯͱ͸ 13 Stewart Butterfield Jack Dorsey Steve Jobs
14. Ͳ͏ͯ͠σβΠϯ͕ॏཁͳͷ͔ʁ σβΠϯͱ͸ 14 Ҿ༻ɿ ܦࡁ࢈ۀলɾಛڐிʮσβΠϯܦӦʯએݴ http://www.meti.go.jp/press/2018/05/20180523002/20180523002-1.pdf
15. 15 CI, VIͱ͸ʁ 03 CI & VI
16. CI, VIͱ͸ CI, VIͱ͸ 16 CI ʢίʔϙϨʔτΞΠσϯςΟςΟʣ اۀ͕ࣗࣾͷཧ೦΍ಛੑΛࣾձʹڞ༗͠ɺ اۀ಺֎ʹ౷Ұͨ͠ΠϝʔδΛ఻͑Δ͜ͱɻ VI ʢϏδϡΞϧΞΠσϯςΟςΟʣ CIͷதͰاۀͷ৅௃ͱͳΔγϯϘϧϚʔΫ ΍ϩΰλΠϓͱ͍ͬͨࢹ֮ (ϏδϡΞϧ) ͷ ౷ҰΛ͠Α͏ͱ͍͏ܭըͷ͜ͱɻ اۀͷϒϥϯσΟϯά 16
17. ࣮ྫ CI, VIͱ͸ Χϥʔ΍ϩΰɺϞνʔϑΛݟͯɺ͙͢ʹͦͷϒϥϯυΛΠϝʔδͰ͖Δ 17
18. Ͳ͏ͯ͠ϒϥϯσΟϯά͕ඞཁͳͷ͔ CI, VIͱ͸ اۀಠࣗͷΠϝʔδΛߏங͢Δ͜ͱͰ ଟ͘ͷਓ͕اۀͷଘࡏΛೝࣝͰ͖Δ 18
19. ࣮ྫ CI, VIͱ͸ 19 ېࢭࣄ߲ ϩΰपΓͷ༨ന ϩΰσʔλ Ҿ༻ɿ LINE APP ICON GUIDELINE https://line.me/ja/logo
20. CI, VIͱ͸ Ұ؏ੑͷ͋ΔاۀΞΠσϯςΟςΟΛߏங͢ΔͨΊ 20 ࣮ྫ
21. CI, VIͱ͸ اۀΞΠσϯςΟςΟ͸ߏங͢Δ͚ͩͰͳ͘ɺ कΓɺҭͯଓ͚͍͔ͯͳ͚Ε͹ͳΒͳ͍ 21 ࣮ྫ
22. CI, VIͱ͸ ௕೥ଓ͘اۀ΍αʔϏεͰ͸ Ұ؏ੑͷ͋ΔΞΠσϯςΟςΟΛ࡞͍ͬͯ͘͜ͱ͕೉͍͠ 22 ݒ೦఺
23. 23 σβΠϯγεςϜΛऔΓೖΕΔ 04 DESIGN SYSTEM
24. σβΠϯγεςϜͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ 24 σβΠϯγεςϜͱ͸ ڧݻͳVIΛ࣮ݱ͢ΔͨΊͷ σβΠϯͷݪཧ/ݪଇΛ·ͱΊͨ΋ͷ ʢαʔϏε΍νʔϜͷࢥ૝ɺελΠϧΨΠυɺ ίʔυϦϑΝϨϯεͳͲʣ Ҿ༻ɿ UX pin https://www.uxpin.com/
25. σβΠϯγεςϜͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ 25 Ҿ༻ɿ Design systems, style guides, pattern libraries. What the hell is the difference? https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc
26. http://atomicdesign.bradfrost.com/ Atomic Designͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ !26
27. σβΠϯγεςϜͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ 27 ίϯϙʔωϯτԽ
28. σβΠϯγεςϜͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ 28 Atomic Design
29. σβΠϯγεςϜͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ 29 Atomic DesignΛ࢖ͬͯ૊ΈཱͯΔ
30. σβΠϯγεςϜͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ 30 ελΠϧΨΠυ Ҿ༻ɿ Atomic Design & creativity https://uxdesign.cc/atomic-design-creativity-28ef74d71bc6
31. σβΠϯγεςϜͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ 31
32. σβΠϯγεςϜͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ 32 ཁૉͬͯͲ͜Ͱ۠੾ΒΕΔͷʁͬͯࢥ͍·ͤΜ͔ʁ
33. σβΠϯγεςϜͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ 33 Ͳ͜·Ͱ͕ࠇͰͲ͔͜Β͕άϨʔͩͱࢥ͍·͔͢ʁ
34. σβΠϯγεςϜΛऔΓೖΕΔ 34 ਓʹΑͬͯଊ͑ํ͕ҧ͏΋ͷʹϧʔϧΛ༩͑Δ͜ͱ͕Ͱ͖Δ σβΠϯγεςϜͱ͸
35. Atomic Designͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ ࠨ͔Βӈʹߦ͘΄Ͳཻ౓͕େ͖͘ɺந৅౓͸Լ͕Δ !35
36. ͜ΕҎ্෼ׂ͢Δ͜ͱͷ Ͱ͖ͳ͍࠷খͷUIཁૉ 2ͭҎ্ͷݪࢠ͔Β੒Δ UIཁૉ ෼ࢠΛ૊Έ߹Θͤͯ࡞Δ ෳࡶͳUIཁૉ ෳ਺ͷ༗ػମ͔Β੒Δ ϫΠϠʔϑϨʔϜͱ ͳΔ΋ͷ ςϯϓϨʔτʹ࣮ࡍͷ ίϯςϯπΛ͍Εͨ΋ͷ Atomic Designͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ !36
37. Atomic Designͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ !37 ଐਓԽΛͳ্ͨ͘͠ͰҰ؏ੑΛอͪଓ͚Δ͜ͱ͕Ͱ͖Δ
38. Atomic Designͱ͸ σβΠϯγεςϜΛऔΓೖΕΔ !38 Ұ؏ੑͷ͋ΔΞΠσϯςΟςΟΛߏங͠ଓ͚Δ͜ͱ͕Ͱ͖Δ
39. 39 ·ͱΊ 05 CONCLUSION
40. ·ͱΊ ·ͱΊ 40 σβΠϯγεςϜͰҰ؏ੑͷ͋Δݎ࿚ͳCI, VIΛ࡞Δ͜ͱ͕Ͱ͖ɺ ͦͯ͠ɺϢʔβͷମݧΛ޲্͢Δ͜ͱ͕Ͱ͖Δ
41. ·ͱΊ ·ͱΊ 41 σβΠφʔస৬ࢧԉ͸͡Ί·ͨ͠ʂ αϚʔΠϯλʔϯγοϓ։࠵͠·͢ʂ
42. 42 ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ