デザインシステムが必須の時代に

Transcript

1. σβΠϯγεςϜ͕ඞਢͷ࣌୅ʹ yosuke_furukawa 2025/07/04
2. X: @yosuke_furukawa GitHub: yosuke-furukawa
3. χδϘοΫεσϕϩοϓ ϝϯτࣨࣨ௕
4. σβΠϯγεςϜ͕ ͦΜͳʹ޷͖Ͱ͸ͳ͔ͬͨ
5. σβΠϯγεςϜͷᨳ͍จ۟
6. σβΠϯγεςϜͷᨳ͍จ۟ • σβΠϯγεςϜͱ͸ɺσβΠϯͷҰ؏ੑΛ֬อ͠ɺޮ཰తͳσβΠϯϓϩη εΛଅਐ͢ΔͨΊʹɺΨΠυϥΠϯ΍ΞηοτͳͲΛ࿈ܞͤͨ͞࢓૊ΈͰ͢ • σβΠφʔ΍ΤϯδχΞɺσΟϨΫλʔͱ͍ͬͨҟͳΔ৬छɺϓϩδΣΫτͷ ϝϯόʔಉ࢜Ͱ૬ޓೝࣝΛ࣋ͭ͜ͱ͕Ͱ͖·͢ • Ұ؏ੑͷ͋ΔσβΠϯΛૉૣ͘ఏڙͰ͖ΔΑ͏ʹͳΔ͜ͱͰΑΓຊ࣭తͳ໰ ୊ղܾʹ࣌ؒΛ࢖͏͜ͱ͕Ͱ͖ΔΑ͏ʹͳΓ·͢ https://www.amazon.co.jp/dp/4297144115 ͭͬͯ͘ɺΈͳ͓͢ɺσβΠϯγεςϜ from NijiBOX
7. ͍΍ɺݪཧͱͯ͠͸Θ͔ΔΑʁ
8. ͦΕʹରͯ͠ࢧ෷͍ͬͯΔରՁ͕େ͖͘ͳ͍ʁ ཁ͸අ༻ରޮՌ͕ଌΓʹ͘͘ͳ͍ʁ
9. σβΠϯγεςϜͷඍົͩͱࢥͬͯͨͱ͜Ζ • ӡ༻ίετ͕͔͔Δ • ॊೈੑ͕ͳ͍ • Χλϩάʹ͋Δίϯϙʔωϯτ͕গ͠଍Γͳ͍࣌ʹΧλϩάଆʹػೳΛ଍͞ ͳ͍ͱ͍͚ͳ͍͕ɺΧλϩάΛӡ༻͍ͯ͠ΔνʔϜͱϓϩμΫτ։ൃ͍ͯ͠Δ νʔϜ͕ҧͬͨΓͯ͠໘౗ • ಛघͳཁ݅Ͱɺ݁ہ࢖͑ͳ͔ͬͨΓͯ͠ɺ࠶࣮૷ͯ͠͠·͏ • ࣌୅஗ΕʹͳΔϦεΫ • σβΠϯͷτϨϯυ͸มΘΔ͜ͱ͕͋Δ͕ɺ௥ै͢Δͷ͕໘౗
10. ͜͏͍͏ରԠ͕͞Εͳ͍··ͩͱ ܗ֚Խͨ͠σβΠϯγεςϜʹͳΔ
11. ͦͯ͠ܗ֚Խͨ͠σβΠϯγεςϜΛͨ͘͞Μݟ͖ͯͨ
12. ͔ͩΒ
13. σβΠϯγεςϜ͕ ͦΜͳʹ޷͖Ͱ͸ͳ͔ͬͨ
14. Ͱ΋ࠓ͸େ෼ݟํ͕มΘ͖ͬͯͨ
15. ݱࡏͷධՁ͸ʮσβΠϯγεςϜ͸ඞਢͷ࣌୅ʯͩͱࢥ͍ͬͯΔ
16. 180౓มΘͬͨ༁͕ͩɺͳΜͰมΘͬͨͷ͔Λ࿩͠·͢
17. ӡ༻ίετܰݮ
18. ӡ༻ίετ • σβΠϯγεςϜͷӡ༻ίετ͸ҎԼͷ௨Γ • ίϯϙʔωϯτΧλϩάΛ؅ཧ͢Δෛ୲ • υΩϡϝϯτͷߋ৽ෛ୲ • σβΠϯͷߋ৽ෛ୲ • ࢖ͬͯ΋Β͏ͨΊͷܒ໤׆ಈ • ͍͔ͭ͘͸ࠓ͸΋͏ܰݮͰ͖Δ΋ͷʹͳ͖͍ͬͯͯΔ
19. ӡ༻ίετ • ίϯϙʔωϯτΧλϩάΛӡ༻͢Δίετ • ίϯϙʔωϯτͷ࣮૷ίετ • ݟͨ໨ͷςετΛ͢Δίετ • ίϯϙʔωϯτΧλϩάͷϥΠϒϥϦߋ৽ίετ • πʔϧͷਐԽͰ͜ΕΒͷίετ͸େ෼Լ͕͍ͬͯΔ
20. ӡ༻ίετ • ํ๏࿦ཱ͕͖͍֬ͯͯ͠Δ • Storybook͕ΧλϩάԽΛఏڙ • Visual Regression Testing Ͱίϯϙʔωϯτࣗ਎ͷࠩ෼͕֬ೝͰ͖Δ • ͦΕΒΛCIʹೖΕͯίϛοτͷλΠϛϯάͰճ͢ • গ͠લ͸͜ͷ΍ΓํͰΧλϩάͷӡ༻ίετΛܰݮͯͨ͠ • ΋͏͜ΕΒͷํ๏΋ݹ͍
21. ӡ༻ίετ • AIπʔϧͷਐԽͰɺϧʔνϯϫʔΫ͸΋͸΍࡞ۀ޻਺ͱͯ͠ۃখԽ͞Ε͖ͯͯ ͍Δ • ͳͷͰɺ • ݟͨ໨ͷςετΛ͢Δίετ • ϥΠϒϥϦͷߋ৽ίετ • ͜ΕΒͷίετ͸΋͸΍ʮͦ͏͍͏࡞ۀͷࢦࣔΛAIʹ͢Δίετʯͱ͍͏ͩ ͚Ͱۃݶʹখ͘͞ͳ͍ͬͯΔ
22. ӡ༻ίετ • ͞Βʹ࡞੒͢Δίετ΋খ͘͞ͳ͍ͬͯΔ • ৽͍͠ίϯϙʔωϯτ͕ཉ͘͠ͳͬͨΒɺͦ͏ࢦࣔ͢Ε͹͍͍ • খ͞ͳίϯϙʔωϯτͷमਖ਼Ͱ͋Ε͹ɺ΄ͱΜͲଈ࠲ʹ࡞Εͯ͠·͏ • طଘʹσβΠϯγεςϜ͕͋ΔͳΒσβΠϯΨΠυϥΠϯ͕͋Δ͸ͣͰͦͷ ΨΠυϥΠϯʹ߹Θͤͨ௥Ճ΋ՄೳʹͳΔ
23. ӡ༻ίετ ࣄྫू: GitHub Design System ChiefʮAIͰσβΠϯγεςϜͷ৽͍͠ϨΠΞ ΢τ΍ίϯϙʔωϯτͷҰ؏ੑͷ͋ΔσβΠϯ͕࡞ΕΔΑ͏ʹͳͬͯ ͍ͯɺ࡞ۀ͕ޮ཰Խ͞Ε͍ͯΔʯ https://web f low.com/blog/how-ai-will-transform-design-systems
24. ӡ༻ίετ ࣄྫू: AirbnbʮAIΛσβΠϯϓϩηεͷҰ؀ͱͯ͠ಋೖ͍ͯ͠Δɻͦͷࡍʹσ βΠϯγεςϜͷίϯϙʔωϯτΛػցֶश্ͤͨ͞ͰAIۦಈͰϓϩτλ Πϓ੍࡞Λߦ͍ͬͯΔʯ https://blog.logrocket.com/ux-design/how-designers-use-ai-product-design/#ai-driven-prototyping-with-airbnb
25. ӡ༻ίετ • ͜ΕΒ͸ίϯϙʔωϯτΧλϩάͷӡ༻ίετ͚ͩ͡Όͳ͘ɺυΩϡϝϯτ ͷӡ༻ίετɺσβΠϯͷӡ༻ίετ΋Լ͕Δͷʹܨ͕͍ͬͯΔ • ࠷ޙʹ࢒͍ͬͯΔͷ͸ʮܒ໤׆ಈͷͨΊͷίετʯ • σβΠϯγεςϜͷ඼࣭͕ྑ͘ͳΕ͹ܒ໤׆ಈͦͷ΋ͷ͕ෆཁʹͳΔͱࢥͬ ͍ͯΔ
26. AIπʔϧͱͷ਌࿨ੑ
27. AIπʔϧͱͷ਌࿨ੑ • σβΠϯγεςϜͷΑ͏ʹɺσβΠϯʹؔΘΔϦιʔεʢσβΠϯπʔϧͷग़ྗ݁Ռ΍υ ΩϡϝϯτɺίϯϙʔωϯτΧλϩάʣ͕໌จԽ͞Ε͍ͯΔ͜ͱͰͦΕ͕AIʹͱͬͯͷ ίϯςΩετͷҰͭʹͳΔɻ • FigmaͳͲͷσβΠϯπʔϧɺNotionͳͲͷυΩϡϝϯτπʔϧɺStorybookͳͲͷίϯ ϙʔωϯτΧλϩάͷ಺༰ΛMCPΛ࢖ͬͯೖྗϓϩϯϓτʹώϯτͱͯ͠Ճ͑Δ͜ͱ͕ Ͱ͖Δɻ • AI΁ͷग़ྗͷ඼࣭Λ޲্ͤ͞Δ͜ͱ͕Ͱ͖ΔͷͰɺܒ໤׆ಈ͕ͳͯ͘΋MCPΛܦ༝ͯ͠ AI͕উखʹֶΜͰ͘ΕΔɻඞཁͳͷ͸MCPͰAIΤʔδΣϯτ͕σβΠϯγεςϜͷϦ ιʔεʹΞΫηε͢Δํ๏͚ͩ͋Ε͹ྑ͍ɻ
28. AIπʔϧͱͷ਌࿨ੑ • ࣄྫ঺հ • Ubieͷࣄྫ: Devin ͱ MCP x Design SystemͰίʔυ͕ຽओԽ͞Εͨ https://eminent-saver-5df.notion.site/kano-devin-mcp
29. ࠓޙͷσβΠϯγεςϜ
30. ࠓޙͷσβΠϯγεςϜ • ಋೖɾӡ༻ͷίετ͕AIʹΑͬͯԼ͕Δɻ • ಋೖͨ͠ࡍʹAI΁ͷώϯτͱͯ͠ͷޮՌ্͕͕Δɻ • අ༻ରޮՌ͸࣮֬ʹ্͕͍ͬͯΔɻ • ΋͸΍ʮͳ͍ʯ͜ͱ͕ϦεΫʹͳΓಘΔɻCI/CDͷπʔϧ΍ࣗಈςετɺܕγ εςϜͳͲͱಉ༷ʹಋೖ͠ͳ͍͜ͱ͕ϦεΫʹͳ͍ͬͯ͘ɻ
31. ࠓޙͷσβΠϯγεςϜ • ҰํͰ AI ͸ສೳͰ͸ͳ͍ɻࢦࣔ͞Εͨ͜ͱ͸Ͱ͖Δ͕ɺࢦࣔ͞Ε͍ͯͳ͍͜ ͱ͸΍Βͳ͍ɻ • σβΠϯγεςϜͷߏஙʹରͯ͠ΞυϗοΫʹίϯϙʔωϯτ΍ϖʔδ΍υ ΩϡϝϯτͳͲΛࢦࣔͯ͠࡞ͬͯ΋Βͬͨ݁ՌɺνάϋάͳσβΠϯΛ࡞ͬͯ ͍ΔͷͰ͋Ε͹ҙຯ͕ͳ͍ɻ • σβΠϯγεςϜͦͷ΋ͷͷओମ͸͋͘·ͰϓϩμΫτΛ։ൃ͢Δ૊৫ͳͷ ͰɺAIʹͳΜͰ΋΍ͬͯ΋Β͏ͷͰ͸ͳ͘ɺࣗ෼ͨͪͷҙࢥΛ࣋ͬͯAIΛ πʔϧͱͯ͠࢖͏ͷ͕ਖ਼͍࢟͠੎ͩͱࢥ͏ɻ
32. એ఻ • χδϘοΫε΋AI x Design ͷΠϕϯτ΍ΔΈ͍ͨͰ͢ʂʂʂ • ޿͕ΔσβΠϯͷνΧϥ • https://nijibox.connpass.com/event/359092/