Slide 1

Slide 1 text

技術戦略としての デザインエンジニアリング 『 Shodai Suzuki @SoartecL dip × MOSH 2026.07.31 デザインシステム勉強会』 © MOSH Inc.

Slide 2

Slide 2 text

鈴⽊翔⼤ X @SoartecL 株式会社 技術戦略 エンジニア組織 デザインエンジニアリング 趣味 OSS Orvalメンテナ MOSH VP of Technology

Slide 3

Slide 3 text

なぜ技術戦略にデザインエンジニア リングが含まれるのか?

Slide 4

Slide 4 text

1 技術戦略と デザインシステム における技術戦略とデ ザインシステムの関係性 MOSH アジェンダ 2 デザインエンジニアリング デザインシステムとエンジニ アリングの実践

Slide 5

Slide 5 text

マルチプロダクトと デザインシステム 引用: DESIGN SYSTEM REPORT 2026 https://report.zeroheight.com/ 同時並行で複数プロダクトを構築 高速なプロダクト開発 開発プロセス デザインの一貫性 予測可能性 メンタルモデル構築 品質の安定化 ユーザービリティ アクセシビリティ 複数チームでの開発と組織スケール 共通言語を作る

Slide 6

Slide 6 text

デザインシステム デザインシステムの要素を用いることで プロトタイプやプロダクション対応のフ ロントエンドを素早く構築できます。“ コラボレーティブデザインのプラク ティス デザイナー、非デザイナーがコラ ボレーションしてチームの多様な 専門知識を活用することで効果的 なデザインを生み出す アイディアをスケッチした後に素早 く構築する “ 引用: 「Lean UX 第3版」 P147, P148

Slide 7

Slide 7 text

デザインシステム運用の 最大の課題ってなんでしょうか?

Slide 8

Slide 8 text

DESIGN SYSTEM REPORT 2026 “Adoption remains the existential challenge.” 普及促進と認知度が5年連続で課題 リストのトップ デザインシステムが存在することと 浸透することは別の話 引用: DESIGN SYSTEM REPORT 2026 https://report.zeroheight.com/

Slide 9

Slide 9 text

多くのエンジニアにとってデザインは別領域という認識 そもそも関心が薄い プロダクト開発とは別の専門性 デザイン品質の理解が追いついていない ユーザビリティ アクセシビリティ デザインシステム自体の理解が追いついていない 周りにどんな技術資産があるのか認知できていない 開発に溶け込んでいない なぜ普及と継続的な活用が難しいのか

Slide 10

Slide 10 text

デザインとプロダクト開発 が一体化していない

Slide 11

Slide 11 text

1 技術戦略と デザインシステム における技術戦略とデ ザインシステムの関係性や歴 史 MOSH アジェンダ 2 デザインエンジニアリング デザインシステムとエンジニ アリングの実践

Slide 12

Slide 12 text

デザインエンジニアリ ング 「デザインをプロダクト開発フローへ シームレスに繋ぎ込み、組織全体へ浸透 させるエンジニアリング」と捉える。 Design Rule Design System UI Component Catalog Tooling Documentation Accessibility AI Workflow ・

Slide 13

Slide 13 text

プラットフォームとし てのデザインシステム デザインシステムはプラットフォームな ので、様々なコンテキストで使用され、 幅広い環境に統合される必要がありま す。“ 組織が利用するプラットフォームは 技術資産としても重要な要素 “ 引用: 「Lean UX 第3版」 P149

Slide 14

Slide 14 text

具体例: PC/SP対応の方針整理 広域なカバー範囲 例えば、ユーザー体験や周辺の環境と、 開発・運用コストを踏まえた方針整理 システムリアーキテクチャの方針 要求が強いスマホ最適化に対する方 針整理と発信 用語の誤用によるミスコミュニケー ションの是正

Slide 15

Slide 15 text

技術選定 デザインエンジニアリングを加味したフ ロントエンドの技術選定 技術スタック shadcn Radix UI TanStack Table Tailwind CSS Lucide MUI, Chakra UI などのコンポーネン トライブラリも検討 短期の制約と長期の戦略から shadcnを選定

Slide 16

Slide 16 text

日々の取り組み UI コンポーネントの修正例 デザインシステム構築とプロダクト の機能開発が同時進行 整備が間に合っていないコンポーネ ントは後追いで修正 67の共通コンポーネントが存在 細分化すると221

Slide 17

Slide 17 text

最新の成果

Slide 18

Slide 18 text

人がデザイン AI 出力の品質向上 AI 生成

Slide 19

Slide 19 text

とデザインシステム AI “a codified design system will be essential to enable GenAI” 引用: DESIGN SYSTEM REPORT 2026 - https://report.zeroheight.com/ - 体系化されたデザインシステムは、 GenAIを実現する上で不可欠 一方で、AIは効率化のためのツール でありデザイン判断の代替ではない という統計もある AIをデザインに組み込むエンジニア や開発プラットフォーム化へと採用 市場の変化も観測

Slide 20

Slide 20 text

再掲: なぜ技術戦略にデザインエンジニア リングが含まれるのか?

Slide 21

Slide 21 text

デザインを開発組織全体へ浸透させ ると大きなレバレッジを産むため。 そのためには技術的な戦略とエンジ ニアリングが必要であるため。

Slide 22

Slide 22 text

高品質なデザインシステムはプロダクト開発において重 要な技術資産 しかし存在するだけでは効果は不十分 活用するための浸透が必要であり非常に難しい その橋渡しをするためのデザインエンジニアリング デザインエンジニアリングを念頭において技術選定や他 のプラットフォームと連携する AIとの接続においても大きな成果を発揮している まとめ

Slide 23

Slide 23 text

おわり