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
デザインシステムが必須の時代に
Search
Yosuke Furukawa
PRO
August 10, 2025
Programming
2
160
デザインシステムが必須の時代に
Yosuke Furukawa
PRO
August 10, 2025
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.5k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.3k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
270
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.9k
Strip Types と Storage
yosuke_furukawa
PRO
4
430
Module Harmony について
yosuke_furukawa
PRO
3
1.8k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
830
Other Decks in Programming
See All in Programming
Introduce Hono CLI
yusukebe
6
3k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
CSC509 Lecture 07
javiergs
PRO
0
240
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
One Enishi After Another
snoozer05
PRO
0
140
理論と実務のギャップを超える
eycjur
0
170
ALL CODE BASE ARE BELONG TO STUDY
uzulla
26
6.6k
CSC509 Lecture 06
javiergs
PRO
0
260
チームの境界をブチ抜いていけ
tokai235
0
210
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
320
Devoxx BE - Local Development in the AI Era
kdubois
0
130
EMこそClaude Codeでコード調査しよう
shibayu36
0
290
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Context Engineering - Making Every Token Count
addyosmani
7
280
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Writing Fast Ruby
sferik
629
62k
How to Ace a Technical Interview
jacobian
280
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
4 Signs Your Business is Dying
shpigford
185
22k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Transcript
σβΠϯγεςϜ͕ඞਢͷ࣌ʹ yosuke_furukawa 2025/07/04
X: @yosuke_furukawa GitHub: yosuke-furukawa
χδϘοΫεσϕϩοϓ ϝϯτࣨࣨ
σβΠϯγεςϜ͕ ͦΜͳʹ͖Ͱͳ͔ͬͨ
σβΠϯγεςϜͷᨳ͍จ۟
σβΠϯγεςϜͷᨳ͍จ۟ • σβΠϯγεςϜͱɺσβΠϯͷҰ؏ੑΛ֬อ͠ɺޮతͳσβΠϯϓϩη εΛଅਐ͢ΔͨΊʹɺΨΠυϥΠϯΞηοτͳͲΛ࿈ܞͤͨ͞ΈͰ͢ • σβΠφʔΤϯδχΞɺσΟϨΫλʔͱ͍ͬͨҟͳΔ৬छɺϓϩδΣΫτͷ ϝϯόʔಉ࢜Ͱ૬ޓೝࣝΛ࣋ͭ͜ͱ͕Ͱ͖·͢ • Ұ؏ੑͷ͋ΔσβΠϯΛૉૣ͘ఏڙͰ͖ΔΑ͏ʹͳΔ͜ͱͰΑΓຊ࣭తͳ ղܾʹ࣌ؒΛ͏͜ͱ͕Ͱ͖ΔΑ͏ʹͳΓ·͢
https://www.amazon.co.jp/dp/4297144115 ͭͬͯ͘ɺΈͳ͓͢ɺσβΠϯγεςϜ from NijiBOX
͍ɺݪཧͱͯ͠Θ͔ΔΑʁ
ͦΕʹରͯ͠ࢧ͍ͬͯΔରՁ͕େ͖͘ͳ͍ʁ ཁඅ༻ରޮՌ͕ଌΓʹ͘͘ͳ͍ʁ
σβΠϯγεςϜͷඍົͩͱࢥͬͯͨͱ͜Ζ • ӡ༻ίετ͕͔͔Δ • ॊೈੑ͕ͳ͍ • Χλϩάʹ͋Δίϯϙʔωϯτ͕গ͠Γͳ͍࣌ʹΧλϩάଆʹػೳΛ͞ ͳ͍ͱ͍͚ͳ͍͕ɺΧλϩάΛӡ༻͍ͯ͠ΔνʔϜͱϓϩμΫτ։ൃ͍ͯ͠Δ νʔϜ͕ҧͬͨΓͯ͠໘ •
ಛघͳཁ݅Ͱɺ݁ہ͑ͳ͔ͬͨΓͯ͠ɺ࠶࣮ͯ͠͠·͏ • ࣌ΕʹͳΔϦεΫ • σβΠϯͷτϨϯυมΘΔ͜ͱ͕͋Δ͕ɺै͢Δͷ͕໘
͜͏͍͏ରԠ͕͞Εͳ͍··ͩͱ ܗ֚Խͨ͠σβΠϯγεςϜʹͳΔ
ͦͯ͠ܗ֚Խͨ͠σβΠϯγεςϜΛͨ͘͞Μݟ͖ͯͨ
͔ͩΒ
σβΠϯγεςϜ͕ ͦΜͳʹ͖Ͱͳ͔ͬͨ
Ͱࠓେݟํ͕มΘ͖ͬͯͨ
ݱࡏͷධՁʮσβΠϯγεςϜඞਢͷ࣌ʯͩͱࢥ͍ͬͯΔ
180มΘͬͨ༁͕ͩɺͳΜͰมΘͬͨͷ͔Λ͠·͢
ӡ༻ίετܰݮ
ӡ༻ίετ • σβΠϯγεςϜͷӡ༻ίετҎԼͷ௨Γ • ίϯϙʔωϯτΧλϩάΛཧ͢Δෛ୲ • υΩϡϝϯτͷߋ৽ෛ୲ • σβΠϯͷߋ৽ෛ୲ •
ͬͯΒ͏ͨΊͷܒ׆ಈ • ͍͔ͭ͘ࠓ͏ܰݮͰ͖Δͷʹͳ͖͍ͬͯͯΔ
ӡ༻ίετ • ίϯϙʔωϯτΧλϩάΛӡ༻͢Δίετ • ίϯϙʔωϯτͷ࣮ίετ • ݟͨͷςετΛ͢Δίετ • ίϯϙʔωϯτΧλϩάͷϥΠϒϥϦߋ৽ίετ •
πʔϧͷਐԽͰ͜ΕΒͷίετେԼ͕͍ͬͯΔ
ӡ༻ίετ • ํ๏ཱ͕͖͍֬ͯͯ͠Δ • Storybook͕ΧλϩάԽΛఏڙ • Visual Regression Testing Ͱίϯϙʔωϯτࣗͷ͕ࠩ֬ೝͰ͖Δ
• ͦΕΒΛCIʹೖΕͯίϛοτͷλΠϛϯάͰճ͢ • গ͠લ͜ͷΓํͰΧλϩάͷӡ༻ίετΛܰݮͯͨ͠ • ͏͜ΕΒͷํ๏ݹ͍
ӡ༻ίετ • AIπʔϧͷਐԽͰɺϧʔνϯϫʔΫ࡞ۀͱͯ͠ۃখԽ͞Ε͖ͯͯ ͍Δ • ͳͷͰɺ • ݟͨͷςετΛ͢Δίετ • ϥΠϒϥϦͷߋ৽ίετ
• ͜ΕΒͷίετʮͦ͏͍͏࡞ۀͷࢦࣔΛAIʹ͢Δίετʯͱ͍͏ͩ ͚Ͱۃݶʹখ͘͞ͳ͍ͬͯΔ
ӡ༻ίετ • ͞Βʹ࡞͢Δίετখ͘͞ͳ͍ͬͯΔ • ৽͍͠ίϯϙʔωϯτ͕ཉ͘͠ͳͬͨΒɺͦ͏ࢦࣔ͢Ε͍͍ • খ͞ͳίϯϙʔωϯτͷमਖ਼Ͱ͋Εɺ΄ͱΜͲଈ࠲ʹ࡞Εͯ͠·͏ • طଘʹσβΠϯγεςϜ͕͋ΔͳΒσβΠϯΨΠυϥΠϯ͕͋ΔͣͰͦͷ ΨΠυϥΠϯʹ߹ΘͤͨՃՄೳʹͳΔ
ӡ༻ίετ ࣄྫू: GitHub Design System ChiefʮAIͰσβΠϯγεςϜͷ৽͍͠ϨΠΞ τίϯϙʔωϯτͷҰ؏ੑͷ͋ΔσβΠϯ͕࡞ΕΔΑ͏ʹͳͬͯ ͍ͯɺ࡞ۀ͕ޮԽ͞Ε͍ͯΔʯ https://web f
low.com/blog/how-ai-will-transform-design-systems
ӡ༻ίετ ࣄྫू: AirbnbʮAIΛσβΠϯϓϩηεͷҰͱͯ͠ಋೖ͍ͯ͠Δɻͦͷࡍʹσ βΠϯγεςϜͷίϯϙʔωϯτΛػցֶश্ͤͨ͞ͰAIۦಈͰϓϩτλ Πϓ੍࡞Λߦ͍ͬͯΔʯ https://blog.logrocket.com/ux-design/how-designers-use-ai-product-design/#ai-driven-prototyping-with-airbnb
ӡ༻ίετ • ͜ΕΒίϯϙʔωϯτΧλϩάͷӡ༻ίετ͚ͩ͡Όͳ͘ɺυΩϡϝϯτ ͷӡ༻ίετɺσβΠϯͷӡ༻ίετԼ͕Δͷʹܨ͕͍ͬͯΔ • ࠷ޙʹ͍ͬͯΔͷʮܒ׆ಈͷͨΊͷίετʯ • σβΠϯγεςϜͷ࣭͕ྑ͘ͳΕܒ׆ಈͦͷͷ͕ෆཁʹͳΔͱࢥͬ ͍ͯΔ
AIπʔϧͱͷੑ
AIπʔϧͱͷੑ • σβΠϯγεςϜͷΑ͏ʹɺσβΠϯʹؔΘΔϦιʔεʢσβΠϯπʔϧͷग़ྗ݁Ռυ ΩϡϝϯτɺίϯϙʔωϯτΧλϩάʣ͕໌จԽ͞Ε͍ͯΔ͜ͱͰͦΕ͕AIʹͱͬͯͷ ίϯςΩετͷҰͭʹͳΔɻ • FigmaͳͲͷσβΠϯπʔϧɺNotionͳͲͷυΩϡϝϯτπʔϧɺStorybookͳͲͷίϯ ϙʔωϯτΧλϩάͷ༰ΛMCPΛͬͯೖྗϓϩϯϓτʹώϯτͱͯ͠Ճ͑Δ͜ͱ͕ Ͱ͖Δɻ •
AIͷग़ྗͷ࣭Λ্ͤ͞Δ͜ͱ͕Ͱ͖ΔͷͰɺܒ׆ಈ͕ͳͯ͘MCPΛܦ༝ͯ͠ AI͕উखʹֶΜͰ͘ΕΔɻඞཁͳͷMCPͰAIΤʔδΣϯτ͕σβΠϯγεςϜͷϦ ιʔεʹΞΫηε͢Δํ๏͚ͩ͋Εྑ͍ɻ
AIπʔϧͱͷੑ • ࣄྫհ • Ubieͷࣄྫ: Devin ͱ MCP x Design
SystemͰίʔυ͕ຽओԽ͞Εͨ https://eminent-saver-5df.notion.site/kano-devin-mcp
ࠓޙͷσβΠϯγεςϜ
ࠓޙͷσβΠϯγεςϜ • ಋೖɾӡ༻ͷίετ͕AIʹΑͬͯԼ͕Δɻ • ಋೖͨ͠ࡍʹAIͷώϯτͱͯ͠ͷޮՌ্͕͕Δɻ • අ༻ରޮՌ࣮֬ʹ্͕͍ͬͯΔɻ • ʮͳ͍ʯ͜ͱ͕ϦεΫʹͳΓಘΔɻCI/CDͷπʔϧࣗಈςετɺܕγ εςϜͳͲͱಉ༷ʹಋೖ͠ͳ͍͜ͱ͕ϦεΫʹͳ͍ͬͯ͘ɻ
ࠓޙͷσβΠϯγεςϜ • ҰํͰ AI ສೳͰͳ͍ɻࢦࣔ͞Εͨ͜ͱͰ͖Δ͕ɺࢦࣔ͞Ε͍ͯͳ͍͜ ͱΒͳ͍ɻ • σβΠϯγεςϜͷߏஙʹରͯ͠ΞυϗοΫʹίϯϙʔωϯτϖʔδυ ΩϡϝϯτͳͲΛࢦࣔͯ͠࡞ͬͯΒͬͨ݁ՌɺνάϋάͳσβΠϯΛ࡞ͬͯ ͍ΔͷͰ͋Εҙຯ͕ͳ͍ɻ
• σβΠϯγεςϜͦͷͷͷओମ͋͘·ͰϓϩμΫτΛ։ൃ͢Δ৫ͳͷ ͰɺAIʹͳΜͰͬͯΒ͏ͷͰͳ͘ɺࣗͨͪͷҙࢥΛ࣋ͬͯAIΛ πʔϧͱͯ͠͏ͷ͕ਖ਼͍࢟ͩ͠ͱࢥ͏ɻ
એ • χδϘοΫεAI x Design ͷΠϕϯτΔΈ͍ͨͰ͢ʂʂʂ • ͕ΔσβΠϯͷνΧϥ • https://nijibox.connpass.com/event/359092/