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.3k
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.8k
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
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
Swift Concurrency - 状態監視の罠
objectiveaudio
2
270
CSC509 Lecture 03
javiergs
PRO
0
320
CSC509 Lecture 01
javiergs
PRO
1
430
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
3
920
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
270
Repenser les filtres API Platform: une nouvelle syntaxe
vinceamstoutz
2
150
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
780
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
350
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
200
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
740
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Designing Experiences People Love
moore
142
24k
Speed Design
sergeychernyshev
32
1.1k
Embracing the Ebb and Flow
colly
88
4.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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/