デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方

2025/10/24 開催「~エンジニア視点で議論する~ 次世代デザインシステムへの現在地」での発表資料です。

https://connpass.com/event/368658/

Transcript

1. © 2019-2025 OPTiM Corp. All rights reserved. デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方 株式会社オプティム
2. © 2019-2025 OPTiM Corp. All rights reserved. 2 基本情報 自己紹介  名前: 清水(Shimizu)  所属: 社長室 プロモーション・デザインユニット UIチーム  役職: サブマネージャー  入社: 2018年新卒  好き ◼ UIデザイン/ブランディング/イベント運営 ◼ ソシャゲ(アークナイツが熱い)  やってること ◼ UI/UX制作(10〜15製品ほど) ◼ OPTiMシリーズ製品ブランディング活動 ◼ 社内デザイン勉強会 ◼ UI/UX知見ポータルサイト運用 ◼ 社内ハッカソン運営
3. © 2019-2025 OPTiM Corp. All rights reserved. 3 こんなアイコンでRimlという名前で活動してます(@Fande4d) 基本情報 自己紹介  名前: 高橋(Takahashi)  所属: 技術統括本部 プラットフォームサービス開発部  役職: フロントエンド リードエンジニア  入社: 2022年新卒  好き ◼ フロントエンド/技術散策/イベント参加 ◼ VTuber(ホロライブ)  やってること ◼ 製品: ⚫ OPTiM Asset(NuxtJS) ⚫ OPTiM サスマネ(Next.js)、Agent(Electron) ◼ 有志活動 ⚫ デザインシステム、共通改善ツール作成 ⚫ フロントエンド室立ち上げ ⚫ 全社イベント立ち上げ ⚫ 技術標準化活動(デザイン設計・実装)
4. C O N F I D E N T I A L © 2019-2025 OPTiM Corp. All rights reserved. 4 会社概要
5. © 2019-2025 OPTiM Corp. All rights reserved. 5 会社概要 商号 株式会社オプティム 英語表記：OPTiM Corporation 東京証券取引所プライム市場：3694 所在地 OPTiM TOKYO (東京本社＠浜松町) OPTiM SAGA (佐賀本店＠佐賀大学キャンパス内) OPTiM KOBE （神戸オフィス＠三ノ宮） TECH CENTER IIZUKA （テックセンター飯塚＠九州工業大学飯塚キャンパス前） 代表 菅谷 俊二 （すがや しゅんじ） 設立 2000年６月８日 従業員数 443名 （2025年4月1日現在） Saga Tokyo Kobe
6. © 2019-2025 OPTiM Corp. All rights reserved. 6 プロダクト全体像 アグリテック アグリテック アグリテック デジタルヘルス デジタルコンストラクション デジタルヘルス オフィスDX モバイルマネジメント マーケティングDX 映像管理DX オフィスDX その他 プラットフォーム オフィスDX OPTiMは、AI・IoT・Cloud・Mobile・Roboticsを使った 新しい価値を創造し続け、あらゆる産業のDXを推進し、 あらゆる人々に、豊かでサステナブルな未来を実現する企業です プラットフォーム オフィスDX オフィスDX オフィスDX コミュニケーションDX オフィスDX コミュニケーションDX コミュニケーションDX
7. © 2019-2025 OPTiM Corp. All rights reserved. 7 UIチームが担当している担当製品は…… 社内製品ほぼ全部！
8. C O N F I D E N T I A L © 2019-2025 OPTiM Corp. All rights reserved. 8 nucleus（ニュークリアス） OPTiM の社内デザインシステム
9. © 2019-2025 OPTiM Corp. All rights reserved. 9 デザインシステム制作の背景とこれまでの課題 各産業に特化した製品のUIを制作し運用する中で直面した課題 年々各サービスを進化させていく過程で、 古いUIと新しいUIが混在し、同じ見た目 でも動きが統一されないなど一貫性が損 なわれていた 各プロダクトで開発を進める中で得られ たUI/UXのナレッジを、効率よく他のプ ロダクトへ還元できていなかった 他社製品に負けない、OPTiM製品として の独自のブランドを確立する必要があっ た ルールが存在しない 知見が共有されていない デザインの統一感がない デザインシステムの必要性
10. © 2019-2025 OPTiM Corp. All rights reserved. 10 nucleusのデザイン原則 よりスピーディに、より価値のあるプロダクトを。 プロダクトに関わる人全てが幸せになるためのデザインシステムです。 デザインしていくためのシステム nucleusは制約と統制ではなくより多くの製品と価値をユーザーに届けるための基盤です。 「デザインされたシステム」ではなく「デザインしていくためのシステム」です。 成長していくためのシステム nucleusは様々なプロダクト・サービスで得た知見を糧に成長しつづけます。 そしてデザインシステムの成長とともに、nucleusを導入しているプロダクト・ サービスもまた成長しつづけます。 プロダクト、サービスに関わる人すべての手で育てていく「成長していくためのシステム」です。 ユーザーと共感するためのシステム 私たちがユーザーに何かを伝えたい時、自分たちの都合を押し付けていませんか？ ユーザーは何かを求めてサービスに訪れます。ただ「使ってもらう」だけでなくサービスに 共感できるように心がけてください。 私たちもまたユーザーに共感し、ユーザーを理解する「共感するためのシステム」です。
11. © 2019-2025 OPTiM Corp. All rights reserved. 11 デザインシステム立ち上げの流れ 調査・検討 UIチーム内 制作・活用 社内公開 プロダクト 導入開始 • デザインシステムの 対象範囲の検討 • 運用ツールとフローの 整備 • Figmaデータ制作と デザイントークンの開発 • スタイル、コンポーネン ト、レイアウト定義のド キュメント化 • 「デザインシステム0.5」 の社内公開 • フィードバックに基づく 定期的な改修と追加対応 • 「デザインシステム1.0」 の社内公開 • 新規プロダクトへの導入 と既存プロダクトへの段 階的な導入 マイルストーンを策定してタスクを具体化
12. © 2019-2025 OPTiM Corp. All rights reserved. 12 調査・検討①最低限の対象範囲の設定 レイアウト 設定画面 ヘッダーとサイドナビゲーションは製品の印象を左右 する重要な要素。最初に眼にする画面からユーザーの OPTiMシリーズ製品全体に対するブランドイメージが 形成される 設定画面はすべての製品に共通して実装される基本機 能。 コンポーネントやレイアウトの使用頻度が高く、機能 追加により複雑化しやすい特性がある 全てを共通化せず、まずは2つの要素を統一化
13. © 2019-2025 OPTiM Corp. All rights reserved. 13 調査・検討②運用ツールとフローの整備 リソースの効率的な制作・運用と、メンバー間のコミュニケーションを促進 リソースごとにチケットを作成しガント チャートにて進捗をチェック 運用/制作の工数を各チケットに入力し工 数を管理 従来Adobe XDを利用していたがFigma へ移行 UIリソースの制作（masterとdevelop の分離運用） 要件確定・設計完了後のバージョン管理 議事録の保管 補修内容の起票とバージョン詳細の確認 デザイントークンの開発・管理 Redmine Figma Gitlab
14. © 2019-2025 OPTiM Corp. All rights reserved. 14 UIチーム内制作・活用 再利用可能なリソースとしてまとめる
15. © 2019-2025 OPTiM Corp. All rights reserved. 15 社内公開 開発チームの会議に参加し、v0.5の内容を周知・フィードバックを受ける ※写真はイメージです
16. © 2019-2025 OPTiM Corp. All rights reserved. 16 プロダクト導入開始 「デザインシステム1.0」の正式発表、プロダクトへの導入開始
17. C O N F I D E N T I A L © 2019-2025 OPTiM Corp. All rights reserved. 18 デザインシステムのすゝめ プロダクト導入編
18. © 2019-2025 OPTiM Corp. All rights reserved. 19 デザインシステムのすゝめ 実際にプロダクトに落とし込む課題 墓場を避けないとならない 導入コストが高ければプロダクトに入れ てもらえない、各プロダクトの寿命が長 い Next.js / React(RR) Nuxt / Vue.js Ruby on Railsなど… CSSも 直利用 や CSS in JS、 Zero Runtime CSSなど多岐に渡る デザインチーム主体でフロントエンドエ ンジニアの参入を考慮されていない 「デザインシステムへのコミットの工 数？ありませんよ？」状態 複数プロダクトに導入せよ 別スタックでかつ、二つの意味で工数を削減する必要がある 別々のスタック揃い あなたは有志です
19. © 2019-2025 OPTiM Corp. All rights reserved. 20 デザインシステムのすゝめ 工数がない？じゃあ自分がリードしている製品を生贄に… スタックの違い、別プロダクトへ導入検証ができるぜ！！ 有志活動でできる範囲を見極める 工数が無い中で無理にスタックに偏ったコンポーネントライブラリやWeb Components化を 作っても墓場になる 過去に経験があり現在もマイグレーションコストなどがかかってしまっている 実際の導入コストを見極める 何をすることで複数製品に導入することができるかを追求 目的と手段が逆転しないようにするのと、フィットする設計になっているかを検証 実際に導入しどれくらいコストがかかるかを算出し妥協ラインを見つける デザインシステムを見極める 「デザインしていくため」には何が課題かを再確認し本当に必要なものの整理を行う デザインシステムとは何かを考え、まずは小さく始めてデザインチームやプロダクトに落とす ための課題を共有しnucleusを「成長させる」方針を考える Nuxt: https://nuxtjs.org Next.js: https://nextjs.org
20. © 2019-2025 OPTiM Corp. All rights reserved. 21 デザインシステムのすゝめ 以前の流れ 仕組み化 ルールや知見が共有されていないという課題もあり、 デザインの統一感がなかったのは、以下のような流れ になっていた デザインシステムを基礎として各プロダクトのデザイ ンと並列でトークン補助ライブラリを作成することで デザインシステムに沿ったプロダクトデザインを再現 することができる 選ばれたのは トークン補助ライブラリ 化でした 各プロダクト デザインFigma プロダクト毎にデザインが異なる事象 プロダクト プロダクト デザインシステム Figma トークン補助 ライブラリ 各プロダクト デザインFigma デザインシステム準拠で実装をサポート
21. © 2019-2025 OPTiM Corp. All rights reserved. 22 デザインシステムのすゝめ トークン補助ライブラリとは？！ Tokenレベルなので既存の仕組みを壊さず、パッケージを入れるのも少しづつ使い始めるが可能に！ 管理の面でも変換レイヤーの集約、UIの担保が補助ライブラリを利用することで簡単に！ プロダクト デザインシステム Figma 複数UIライブラリの Theme一括設定関数 トークン補助ライブラリ(NPM配信) Style Dictionary (TS、CSSファイル) CSS変換 や JSON 変換ライブラリ トークンの組み合わせを 返却 トークンの共通定数を返 却 UI情報を取得するライブラリ MCPのtools的なイメージ 実装する際もTokenを組み合わせれば実装が大幅にズレにくい、純粋関数なのでライブラリ依存も無し
22. © 2019-2025 OPTiM Corp. All rights reserved. 23 デザインシステムのすゝめ 導入数: 19製品に導入 ※一部Web管理画面製品のみを含む
23. C O N F I D E N T I A L © 2019-2025 OPTiM Corp. All rights reserved. 24 AIとデザインシステムの活用
24. © 2019-2025 OPTiM Corp. All rights reserved. 25 AIとデザインシステムの活用 流れ AI資産化 デザインシステムから派生し、トークン補助ライブラ リからプロダクトに適用されているという流れ。 デザインシステム、補助ライブラリをそのままAIに活 用することが可能 AI Agentで資産を利用可能にするためのツール化、 MCPやAgentの活用の幅を広げています。 挑戦中！ ミニマムで依存が少ないことからAI活用への派生がしやすい プロダクト デザインシステム Figma トークン補助 ライブラリ 各プロダクト デザインFigma デザインシステム Figma トークン補助 ライブラリ デザインシステムとして活用できるAI仕組み作り OPTiM textlint-rule nucleus MCPサーバー AI レビューツール Claude code Slash Command Figma MCP Playwright MCP
25. © 2019-2025 OPTiM Corp. All rights reserved. 26 AIとデザインシステムの活用 OPTiM textlint-rule nucleus MCPサーバー 活用例
26. © 2019-2025 OPTiM Corp. All rights reserved. 27 AIとデザインシステムの活用 AI レビューツール 活用例
27. C O N F I D E N T I A L © 2019-2025 OPTiM Corp. All rights reserved. 28 今後の目標
28. © 2019-2025 OPTiM Corp. All rights reserved. 29 今後の目標 デザインシステムをプロダクト導入してみての課題 現在Figmaなどツール上にまとまってお り、AIに読ませる障壁の一つとなってい る。こういったリソースの管理を考える 必要あり やはりコンポーネント化の渇望は多いが スタック横断でどう共通化していくかな どの課題あり。製品のスタックを合わせ るのは規模感的に難しい エンジニアもデザインシステム開発に携 われるように工数の算出、フロントエン ドエンジニアを集め横断的な活動を開 始！ デザインシステムの資料化 コンポーネント化 有志による非公式活動
29. © 2019-2025 OPTiM Corp. All rights reserved. 30 今後の目標 新たな課題解決と多様なシーンを想定したアップデート 様々な製品の利用用途やAI活用に 合わせた修正・アップデートや、定 義しきれてない要素部分の追加検討 コンポーネントライブラリ等を用意 する落とし所を見つけ導入速度を上 げることにより、障壁を下げデザイ ンシステムの導入を基準化させる 効果測定による価値を可視化し、社 内での一定の地位を確立することで 継続的な支援体制の構築を目指す リソース運用・管理 導入サポートと基準化 社内浸透促進と体制構築 製品とともに、デザインシステムも使いやすくしていきます！
30. © 2019-2025 OPTiM Corp. All rights reserved.