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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© 2019-2025 OPTiM Corp. All rights reserved. 2 基本情報自己紹介  名前: 清水(Shimizu)  所属: 社長室プロモーション・デザインユニット UIチーム  役職: サブマネージャー  入社: 2018年新卒  好き ◼ UIデザイン/ブランディング/イベント運営 ◼ ソシャゲ(アークナイツが熱い)  やってること ◼ UI/UX制作(10〜15製品ほど) ◼ OPTiMシリーズ製品ブランディング活動 ◼ 社内デザイン勉強会 ◼ UI/UX知見ポータルサイト運用 ◼ 社内ハッカソン運営

Slide 3

Slide 3 text

© 2019-2025 OPTiM Corp. All rights reserved. 3 こんなアイコンでRimlという名前で活動してます(@Fande4d) 基本情報自己紹介  名前: 高橋(Takahashi)  所属: 技術統括本部プラットフォームサービス開発部  役職: フロントエンドリードエンジニア  入社: 2022年新卒  好き ◼ フロントエンド/技術散策/イベント参加 ◼ VTuber(ホロライブ)  やってること ◼ 製品: ⚫ OPTiM Asset(NuxtJS) ⚫ OPTiM サスマネ(Next.js)、Agent(Electron) ◼ 有志活動 ⚫ デザインシステム、共通改善ツール作成 ⚫ フロントエンド室立ち上げ ⚫ 全社イベント立ち上げ ⚫ 技術標準化活動(デザイン設計・実装)

Slide 4

Slide 4 text

Slide 5

Slide 5 text

© 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

Slide 6

Slide 6 text

© 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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© 2019-2025 OPTiM Corp. All rights reserved. 9 デザインシステム制作の背景とこれまでの課題各産業に特化した製品のUIを制作し運用する中で直面した課題年々各サービスを進化させていく過程で、古いUIと新しいUIが混在し、同じ見た目でも動きが統一されないなど一貫性が損なわれていた各プロダクトで開発を進める中で得られたUI/UXのナレッジを、効率よく他のプロダクトへ還元できていなかった他社製品に負けない、OPTiM製品としての独自のブランドを確立する必要があったルールが存在しない知見が共有されていないデザインの統一感がないデザインシステムの必要性

Slide 10

Slide 10 text

© 2019-2025 OPTiM Corp. All rights reserved. 10 nucleusのデザイン原則よりスピーディに、より価値のあるプロダクトを。プロダクトに関わる人全てが幸せになるためのデザインシステムです。デザインしていくためのシステム nucleusは制約と統制ではなくより多くの製品と価値をユーザーに届けるための基盤です。「デザインされたシステム」ではなく「デザインしていくためのシステム」です。成長していくためのシステム nucleusは様々なプロダクト・サービスで得た知見を糧に成長しつづけます。そしてデザインシステムの成長とともに、nucleusを導入しているプロダクト・サービスもまた成長しつづけます。プロダクト、サービスに関わる人すべての手で育てていく「成長していくためのシステム」です。ユーザーと共感するためのシステム私たちがユーザーに何かを伝えたい時、自分たちの都合を押し付けていませんか？ユーザーは何かを求めてサービスに訪れます。ただ「使ってもらう」だけでなくサービスに共感できるように心がけてください。私たちもまたユーザーに共感し、ユーザーを理解する「共感するためのシステム」です。

Slide 11

Slide 11 text

© 2019-2025 OPTiM Corp. All rights reserved. 11 デザインシステム立ち上げの流れ調査・検討 UIチーム内制作・活用社内公開プロダクト導入開始 • デザインシステムの対象範囲の検討 • 運用ツールとフローの整備 • Figmaデータ制作とデザイントークンの開発 • スタイル、コンポーネント、レイアウト定義のドキュメント化 • 「デザインシステム0.5」の社内公開 • フィードバックに基づく定期的な改修と追加対応 • 「デザインシステム1.0」の社内公開 • 新規プロダクトへの導入と既存プロダクトへの段階的な導入マイルストーンを策定してタスクを具体化

Slide 12

Slide 12 text

© 2019-2025 OPTiM Corp. All rights reserved. 12 調査・検討①最低限の対象範囲の設定レイアウト設定画面ヘッダーとサイドナビゲーションは製品の印象を左右する重要な要素。最初に眼にする画面からユーザーの OPTiMシリーズ製品全体に対するブランドイメージが形成される設定画面はすべての製品に共通して実装される基本機能。コンポーネントやレイアウトの使用頻度が高く、機能追加により複雑化しやすい特性がある全てを共通化せず、まずは2つの要素を統一化

Slide 13

Slide 13 text

© 2019-2025 OPTiM Corp. All rights reserved. 13 調査・検討②運用ツールとフローの整備リソースの効率的な制作・運用と、メンバー間のコミュニケーションを促進リソースごとにチケットを作成しガントチャートにて進捗をチェック運用/制作の工数を各チケットに入力し工数を管理従来Adobe XDを利用していたがFigma へ移行 UIリソースの制作（masterとdevelop の分離運用）要件確定・設計完了後のバージョン管理議事録の保管補修内容の起票とバージョン詳細の確認デザイントークンの開発・管理 Redmine Figma Gitlab

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

© 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など多岐に渡るデザインチーム主体でフロントエンドエンジニアの参入を考慮されていない「デザインシステムへのコミットの工数？ありませんよ？」状態複数プロダクトに導入せよ別スタックでかつ、二つの意味で工数を削減する必要がある別々のスタック揃いあなたは有志です

Slide 19

Slide 19 text

© 2019-2025 OPTiM Corp. All rights reserved. 20 デザインシステムのすゝめ工数がない？じゃあ自分がリードしている製品を生贄に… スタックの違い、別プロダクトへ導入検証ができるぜ！！有志活動でできる範囲を見極める工数が無い中で無理にスタックに偏ったコンポーネントライブラリやWeb Components化を作っても墓場になる過去に経験があり現在もマイグレーションコストなどがかかってしまっている実際の導入コストを見極める何をすることで複数製品に導入することができるかを追求目的と手段が逆転しないようにするのと、フィットする設計になっているかを検証実際に導入しどれくらいコストがかかるかを算出し妥協ラインを見つけるデザインシステムを見極める「デザインしていくため」には何が課題かを再確認し本当に必要なものの整理を行うデザインシステムとは何かを考え、まずは小さく始めてデザインチームやプロダクトに落とすための課題を共有しnucleusを「成長させる」方針を考える Nuxt: https://nuxtjs.org Next.js: https://nextjs.org

Slide 20

Slide 20 text

© 2019-2025 OPTiM Corp. All rights reserved. 21 デザインシステムのすゝめ以前の流れ仕組み化ルールや知見が共有されていないという課題もあり、デザインの統一感がなかったのは、以下のような流れになっていたデザインシステムを基礎として各プロダクトのデザインと並列でトークン補助ライブラリを作成することでデザインシステムに沿ったプロダクトデザインを再現することができる選ばれたのはトークン補助ライブラリ化でした各プロダクトデザインFigma プロダクト毎にデザインが異なる事象プロダクトプロダクトデザインシステム Figma トークン補助ライブラリ各プロダクトデザインFigma デザインシステム準拠で実装をサポート

Slide 21

Slide 21 text

© 2019-2025 OPTiM Corp. All rights reserved. 22 デザインシステムのすゝめトークン補助ライブラリとは？！ Tokenレベルなので既存の仕組みを壊さず、パッケージを入れるのも少しづつ使い始めるが可能に！管理の面でも変換レイヤーの集約、UIの担保が補助ライブラリを利用することで簡単に！プロダクトデザインシステム Figma 複数UIライブラリの Theme一括設定関数トークン補助ライブラリ(NPM配信) Style Dictionary (TS、CSSファイル) CSS変換や JSON 変換ライブラリトークンの組み合わせを返却トークンの共通定数を返却 UI情報を取得するライブラリ MCPのtools的なイメージ実装する際もTokenを組み合わせれば実装が大幅にズレにくい、純粋関数なのでライブラリ依存も無し

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

© 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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

© 2019-2025 OPTiM Corp. All rights reserved. 29 今後の目標デザインシステムをプロダクト導入してみての課題現在Figmaなどツール上にまとまっており、AIに読ませる障壁の一つとなっている。こういったリソースの管理を考える必要ありやはりコンポーネント化の渇望は多いがスタック横断でどう共通化していくかなどの課題あり。製品のスタックを合わせるのは規模感的に難しいエンジニアもデザインシステム開発に携われるように工数の算出、フロントエンドエンジニアを集め横断的な活動を開始！デザインシステムの資料化コンポーネント化有志による非公式活動

Slide 29

Slide 29 text

© 2019-2025 OPTiM Corp. All rights reserved. 30 今後の目標新たな課題解決と多様なシーンを想定したアップデート様々な製品の利用用途やAI活用に合わせた修正・アップデートや、定義しきれてない要素部分の追加検討コンポーネントライブラリ等を用意する落とし所を見つけ導入速度を上げることにより、障壁を下げデザインシステムの導入を基準化させる効果測定による価値を可視化し、社内での一定の地位を確立することで継続的な支援体制の構築を目指すリソース運用・管理導入サポートと基準化社内浸透促進と体制構築製品とともに、デザインシステムも使いやすくしていきます！