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
150
デザインシステムが必須の時代に
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.4k
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
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
240
CSC305 Lecture 04
javiergs
PRO
0
270
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
120
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
160
開発生産性を上げるための生成AI活用術
starfish719
3
1.3k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
310
理論と実務のギャップを超える
eycjur
0
140
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
170
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
220
CSC305 Lecture 05
javiergs
PRO
0
220
CSC509 Lecture 04
javiergs
PRO
0
300
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
Documentation Writing (for coders)
carmenintech
75
5.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Applications with DynamoDB
mza
96
6.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Docker and Python
trallard
46
3.6k
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/