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

by Tony / Tongari / Naoto Togawa

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

とんがり株式会社マネーフォワードフロントエンド推進部 MFUI開発リード AI推進リーダー 🫶 カービィ、ポケモン、楽器、園芸 ← new

Slide 3

Slide 3 text

デザインシステム作ってますか？

Slide 4

Slide 4 text

すぐに作り始めてください！

Slide 5

Slide 5 text

これからのAI時代にデザインシステムは必須になります

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

MFUIの現在 ● マルチプロダクト企業（４０以上のプロダクト）  ● MFUIの導入数：２５プロダクト  ● 新規プロダクト開発での利用率：ほぼ１００ %  ● ガイドライン数：１３５、コンポーネント数：約５０  ● UI構築スピード：１６０%に 

Slide 8

Slide 8 text

AI時代におけるデザインシステムの価値

Slide 9

Slide 9 text

AIとデザインシステムの親和性 AIはデザインシステムがあって初めてUI開発において本領を発揮する

Slide 10

Slide 10 text

● AIは「それっぽい UI」をゼロから生成  ● プロダクトごとに微妙に異なるUIが量産される  ● ルールはなく一般的な知識のもとデザイン  デザインシステムがないと・・・

Slide 11

Slide 11 text

● 提供されたコンポーネントを使いまわせる  ● UIの品質、一貫性が自動的に担保される  ● ガイドラインのルールを理解した上で実装  デザインシステムがあると

Slide 12

Slide 12 text

AI時代のデザインシステムデザインシステムは人間のためのUI開発基盤から  AI時代では「機械のための UI開発基盤」になっていく 

Slide 13

Slide 13 text

AI時代に起き始めていること

Slide 14

Slide 14 text

デザイナーの成果物の変化

Slide 15

Slide 15 text

デザイナーとエンジニアの役割の変化デザイナーがAIを使ってUIを実装、エンジニアはロジック・アーキテクチャへ集中 

Slide 16

Slide 16 text

いやいや・・・コードの品質はどうなんだ

Slide 17

Slide 17 text

生成されるコードの品質を向上→役割の委譲がしやすくなる  AIとデザインシステムを組み合わせる

Slide 18

Slide 18 text

これからのAI時代にデザインシステムは必須になります

Slide 19

Slide 19 text

デザインシステムの導入は早くから

Slide 20

Slide 20 text

作ったデザインシステムどうやって広める？

Slide 21

Slide 21 text

結局草の根活動 ● 協力的なチームを探し大きいパーツから導入 → 事例を獲得 ● プロダクト開発者向けに発表を重ねる → 認知を獲得 ● フィードバックを収集し問題が起きたら即対応 → 信頼を獲得 ● 各チームの期のゴールへ組み込んでもらう → 理由を獲得どう広めていったか

Slide 22

Slide 22 text

まだまだ辛い道のりです

Slide 23

Slide 23 text

振り返ってみて早期からデザインシステムを導入することが重要 ● 規模が小さいうちから導入できる ● 早いうちからUIの統一感が得られる ● みんなで作っていく文化が醸成される

Slide 24

Slide 24 text

MFUIはどのように AIと付き合っていくか

Slide 25

Slide 25 text

● プロダクト毎に導入状況の濃淡がある ○ 全パーツがMFUIに置き換わっているプロダクト ○ 1つしか使えていないプロダクト ● 全く導入できそうにないプロダクトも ○ UIが古く、リプレイスが難しい ○ モダンなアーキテクチャに乗っていない ○ 導入するリソースが確保できない ● 専任チームが更新し続けている現在の課題

Slide 26

Slide 26 text

今後の展望 MFUIをAIに最適化する   ● AIがMFUIを駆使して高品質なUIをコスパ良く生成  ○ 新規プロダクトのUI開発の生産性を向上  ○ 既存プロダクトへの導入を促進  ○ エンジニアからデザイナーへのUI開発の役割委譲を促進  ● AIを駆使したユーザーも巻き込んだ自律的な改善サイクル 

Slide 27

Slide 27 text

AI最適化されたデザインシステムとは

Slide 28

Slide 28 text

実際の取り組み ● ガイドラインをNotionに移行  ● Reactコンポーネント用のMCPサーバーを提供  ● MFUI Agent Tools（Figma→Reactのマッピング、レイアウトのルール）   

Slide 29

Slide 29 text

まとめ

Slide 30

Slide 30 text

🤖 AI時代においてデザインシステムの価値は最大化する  💪 デザインシステムをAI最適化することが重要  ⚔ AI時代のデザイナー・エンジニアはAIとデザインシステムを武器にする    今すぐデザインシステムを作ろう！   まとめ