技術戦略としてのデザインエンジニアリング / Design System Study by dip and MOSH

2026-07-31 「技術戦略としてのデザインエンジニアリング」の登壇資料です。

Transcript

1. 技術戦略としての デザインエンジニアリング 『 Shodai Suzuki @SoartecL dip × MOSH 2026.07.31 デザインシステム勉強会』 © MOSH Inc.
2. 鈴⽊翔⼤ X @SoartecL 株式会社 技術戦略 エンジニア組織 デザインエンジニアリング 趣味 OSS Orvalメンテナ MOSH VP of Technology
3. なぜ技術戦略にデザインエンジニア リングが含まれるのか？
4. 1 技術戦略と デザインシステム における技術戦略とデ ザインシステムの関係性 MOSH アジェンダ 2 デザインエンジニアリング デザインシステムとエンジニ アリングの実践
5. マルチプロダクトと デザインシステム 引用: DESIGN SYSTEM REPORT 2026 https://report.zeroheight.com/ 同時並行で複数プロダクトを構築 高速なプロダクト開発 開発プロセス デザインの一貫性 予測可能性 メンタルモデル構築 品質の安定化 ユーザービリティ アクセシビリティ 複数チームでの開発と組織スケール 共通言語を作る
6. デザインシステム デザインシステムの要素を用いることで プロトタイプやプロダクション対応のフ ロントエンドを素早く構築できます。“ コラボレーティブデザインのプラク ティス デザイナー、非デザイナーがコラ ボレーションしてチームの多様な 専門知識を活用することで効果的 なデザインを生み出す アイディアをスケッチした後に素早 く構築する “ 引用: 「Lean UX 第3版」 P147, P148
7. デザインシステム運用の 最大の課題ってなんでしょうか？
8. DESIGN SYSTEM REPORT 2026 “Adoption remains the existential challenge.” 普及促進と認知度が5年連続で課題 リストのトップ デザインシステムが存在することと 浸透することは別の話 引用: DESIGN SYSTEM REPORT 2026 https://report.zeroheight.com/
9. 多くのエンジニアにとってデザインは別領域という認識 そもそも関心が薄い プロダクト開発とは別の専門性 デザイン品質の理解が追いついていない ユーザビリティ アクセシビリティ デザインシステム自体の理解が追いついていない 周りにどんな技術資産があるのか認知できていない 開発に溶け込んでいない なぜ普及と継続的な活用が難しいのか
10. デザインとプロダクト開発 が一体化していない
11. 1 技術戦略と デザインシステム における技術戦略とデ ザインシステムの関係性や歴 史 MOSH アジェンダ 2 デザインエンジニアリング デザインシステムとエンジニ アリングの実践
12. デザインエンジニアリ ング 「デザインをプロダクト開発フローへ シームレスに繋ぎ込み、組織全体へ浸透 させるエンジニアリング」と捉える。 Design Rule Design System UI Component Catalog Tooling Documentation Accessibility AI Workflow ・
13. プラットフォームとし てのデザインシステム デザインシステムはプラットフォームな ので、様々なコンテキストで使用され、 幅広い環境に統合される必要がありま す。“ 組織が利用するプラットフォームは 技術資産としても重要な要素 “ 引用: 「Lean UX 第3版」 P149
14. 具体例: PC/SP対応の方針整理 広域なカバー範囲 例えば、ユーザー体験や周辺の環境と、 開発・運用コストを踏まえた方針整理 システムリアーキテクチャの方針 要求が強いスマホ最適化に対する方 針整理と発信 用語の誤用によるミスコミュニケー ションの是正
15. 技術選定 デザインエンジニアリングを加味したフ ロントエンドの技術選定 技術スタック shadcn Radix UI TanStack Table Tailwind CSS Lucide MUI, Chakra UI などのコンポーネン トライブラリも検討 短期の制約と長期の戦略から shadcnを選定
16. 日々の取り組み UI コンポーネントの修正例 デザインシステム構築とプロダクト の機能開発が同時進行 整備が間に合っていないコンポーネ ントは後追いで修正 67の共通コンポーネントが存在 細分化すると221
17. 最新の成果
18. 人がデザイン AI 出力の品質向上 AI 生成
19. とデザインシステム AI “a codified design system will be essential to enable GenAI” 引用: DESIGN SYSTEM REPORT 2026 - https://report.zeroheight.com/ - 体系化されたデザインシステムは、 GenAIを実現する上で不可欠 一方で、AIは効率化のためのツール でありデザイン判断の代替ではない という統計もある AIをデザインに組み込むエンジニア や開発プラットフォーム化へと採用 市場の変化も観測
20. 再掲: なぜ技術戦略にデザインエンジニア リングが含まれるのか？
21. デザインを開発組織全体へ浸透させ ると大きなレバレッジを産むため。 そのためには技術的な戦略とエンジ ニアリングが必要であるため。
22. 高品質なデザインシステムはプロダクト開発において重 要な技術資産 しかし存在するだけでは効果は不十分 活用するための浸透が必要であり非常に難しい その橋渡しをするためのデザインエンジニアリング デザインエンジニアリングを念頭において技術選定や他 のプラットフォームと連携する AIとの接続においても大きな成果を発揮している まとめ
23. おわり