マルチプロダクト企業でのデザインシステム立ち上げとAIとの未来

株式会社estieさん主催「デザインエンジニアMeetup #5 開発スピードを落とさずにUI品質を守る」の発表資料
https://estie.connpass.com/event/382375/

Transcript

1. マルチプロダクト企業での デザインシステム立ち上げとAI との未来 2026/02/26
2. とんがり 株式会社マネーフォワード フロントエンド推進部 MFUI開発リード AI推進リーダー 🫶 カービィ、ポケモン、楽器、園芸 ← new
3. デザインシステム 作ってますか？
4. すぐに作り始めてください！
5. これからのAI時代に デザインシステムは 必須になります
7. MFUIの現在 • マルチプロダクト企業（４０以上のプロダクト）
 • MFUIの導入数： ２５プロダクト
 • 新規プロダクト開発での利用率：ほぼ１００ %
 • ガイドライン数：１３５、コンポーネント数：約５０
 • UI構築スピード：１６０%に

8. AI時代における デザインシステムの価値
9. AIとデザインシステムの親和性 AIはデザインシステムがあって初めてUI開発において本領を発揮 する
10. • AIは「それっぽい UI」をゼロから生成
 • プロダクトごとに微妙に異なるUIが量産される
 • ルールはなく一般的な知識のもとデザイン
 デザインシステムがないと・・・
11. • 提供されたコンポーネントを使いまわせる
 • UIの品質、一貫性が自動的に担保される
 • ガイドラインのルールを理解した上で実装
 デザインシステムがあると
12. AI時代のデザインシステム デザインシステムは人間のためのUI開発基盤から
 AI時代では「機械のための UI開発基盤」 になっていく

13. AI時代に起き始めていること
14. デザイナーの成果物の変化
15. デザイナーとエンジニアの役割の変化 デザイナーがAIを使ってUIを実装、エンジニアはロジック・アーキテクチャへ集中

16. いやいや・・・ コードの品質はどうなんだ
17. 生成されるコードの品質を向上→役割の委譲がしやすくなる
 AIとデザインシステムを組み合わせる
18. これからのAI時代に デザインシステムは 必須になります
19. デザインシステムの導入は 早くから
20. 作ったデザインシステム どうやって広める？
21. 結局草の根活動 • 協力的なチームを探し大きいパーツから導入 → 事例を獲得 • プロダクト開発者向けに発表を重ねる → 認知を獲得 • フィードバックを収集し問題が起きたら即対応 → 信頼を獲得 • 各チームの期のゴールへ組み込んでもらう → 理由を獲得 どう広めていったか
22. まだまだ辛い道のりです
23. 振り返ってみて 早期からデザインシステムを導入する ことが重要 • 規模が小さいうちから導入できる • 早いうちからUIの統一感が得られる • みんなで作っていく文化が醸成される
24. MFUIはどのように AIと付き合っていくか
25. • プロダクト毎に導入状況の濃淡がある ◦ 全パーツがMFUIに置き換わっているプロダクト ◦ 1つしか使えていないプロダクト • 全く導入できそうにないプロダクトも ◦ UIが古く、リプレイスが難しい ◦ モダンなアーキテクチャに乗っていない ◦ 導入するリソースが確保できない • 専任チームが更新し続けている 現在の課題
26. 今後の展望 MFUIをAIに最適化する 
 • AIがMFUIを駆使して高品質なUIをコスパ良く生成
 ◦ 新規プロダクトのUI開発の生産性を向上
 ◦ 既存プロダクトへの導入を促進
 ◦ エンジニアからデザイナーへのUI開発の役割委譲を促進
 • AIを駆使したユーザーも巻き込んだ自律的な改善サイクル

27. AI最適化されたデザインシステムとは
28. 実際の取り組み • ガイドラインをNotionに移行
 • Reactコンポーネント用のMCPサーバーを提供
 • MFUI Agent Tools（Figma→Reactのマッピング、レイアウトのルール）
 

29. まとめ
30. 🤖 AI時代においてデザインシステムの価値は最大化 する
 💪 デザインシステムをAI最適化することが重要
 ⚔ AI時代のデザイナー・エンジニアはAIとデザインシステムを武器にする
 
 今すぐデザインシステムを作ろう！ 
 まとめ
31. Thanks for listening! 🐹
32. Q&A