業務システムのUX／UIデザインを専門に手がけるFixelは、β版として提供していた、デザインシステム構築・運用支援ツール『UXHub』を公式ローンチした。
業務効率向上の観点から業務システムにおいても一般消費者向けアプリ同様にUX／UIの改善が重視されるようになった。数年前から欧米の政府や大手企業を中心に、あらゆるシステムの開発運用で『デザインシステム』の採用が増加している。デザインシステムでは、デザインガイドライン、デザインポリシー、UIコンポーネント（パターンライブラリー）、そのほかの各種リソースを一元管理し、ビジネス側、デザイナー、エンジニアなど、異なる立場で共有することで、UX／UIの一貫性を保ちながら、効率良く開発をすすめることができる。
今回ローンチされたUXHubは、業務システムをはじめとするあらゆるシステム開発やウェブアプリケーション開発において、デザインシステムを容易に制作して一元管理するためのSaaS型プラットフォームサービスだという。対象となるシステムのデザインのガイドラインやポリシーを作成して、それらに基づくカラースタイルやフォント、スペースのルールなどをデザイントークンとして定義し、再利用性の高いUIコンポーネントを作成・共有・管理することができる。
同ツールの特徴は、次のとおり。
デザインシステムのテンプレートを提供
同社のデザインシステム構築の経験を生かして制作した汎用的なデザインシステムのテンプレートとして、「Fixel Design System」が同ツールには格納されており、自由に利用が可能。デザインシステムを最初から制作する必要がなくなり、Fixel Design Systemで提供するReactやVue.js、AngularのUIコンポーネントのコードがそのまま利用できる。
複製とカスタマイズによるデザインシステムの量産が可能
同ツールはデザインシステムを複製し、カスタマイズする機能を提供し、手軽に異なるスタイルのデザインシステムを量産可能。企業や事業部単位でベースになるデザインシステムを運用しながら、必要に応じてシステム単位にデザインシステムを複製・カスタマイズすることで新しいデザインシステムを量産できる。
React、Vue.js、Angularなど、多様なUI作成方法を支援
同ツールにはフロントエンド実装に必要なUIコンポーネントのコードがデザインと一緒に格納されている。近年よく使われている次のUI実装用ライブラリー／フレームワークのコードが提供される。
React、Vue.js、AngularJS、HTML/CSS + Vanillar JS、Pug
同ツールに格納され提供されるUIコンポーネントのコードはよくデザインされ、汎用性と再利用性を意識した実装になっている。顧客のプロジェクトにそのままダウンロードして使うことが可能。もうスクラッチからフロントエンドのコードを書く必要がなくなる。このUIコンポーネントを使うことで、デザイン指示書やデザインガイドラインを読み込まなくても一貫性のあるデザイン実装をエンジニアだけでできることが最大のメリットとのこと。
また同ツール上でデザイントークン（スタイル定義）を変更するだけで、見た目を自由に変えることができるので、似たような画面を量産することも避けられる。
チームコラボレーションとバージョン管理
同ツールでは契約単位毎に『ワークスペース』が付与され、そのなかでチームやアカウント、そしてデザインシステムに対する権限管理が可能。ワークスペース、チーム、デザインシステムごとに管理者、編集者、閲覧者を指定することができる。共通のガイドラインページをチームで編集するだけでなく、コメント機能を使ったチームコラボレーションもできる。また、バージョン・履歴管理機能により過去の変更を確認できる。
UIデザインツール『Figma』との連携
ブラウザ上でプロトタイピングができるデザイン制作ツールの『Figma』で作成したデザインをシームレスに同ツールに反映することができる。具体的には命名規約に沿って作成したFigmaのStyleをUXHubのデザイントークンとしてインポートすることで、そのデザイントークンを使っているUIコンポーネントに新しいスタイルを適用できる。
