Getting Started UXHub

UXHubとは?

UXHubはデザインシステムを簡単に構築し、運用するためのクラウドサービスです。多数の日本企業のデザインシステム作成実績を持つ「Fixel株式会社」によって作成・提供されております。UXHubはまだオープンベータですが、数年前から既に多くの日本企業のデザインシステムの構築と運用に使われております。

UXHubの特徴や他のソリューションとの差は?

海外のデザインシステム向けソリューションと比較した際のUXHubにおける特徴は、下記の通りです。

  • 日本発:日本の会社(https://fixel.co.jp)で作られたサービスです。日本語での支援はもちろん、日本の大手企業のデザインシステムを多数作成したFixelの経験を元に、日本の企業の体制や働き方を反映した上で、デザインシステムを手軽に作成して運用するために必要な実践的な機能を集約して提供します。
  • テンプレートを使ってすぐ始められる:UXHubが提供する「Fixel Design System」という汎用的なデザインシステムのテンプレートを使うことでデザインシステム構築の初期工数を劇的に節約できます。デザインシステムをスクラッチから作り上げることはもう必要ありません。
  • 容易なデザイン変更:UXHubの中でデザイントークンとして定義されたスタイル要素を編集することで、各デザインシステムはユニークなスタイルにカスタマイズできます。簡単なカスタマイズならデザインツールはもう不要です。専門的なデザイン知識がなくてもそれなりのデザインの作成ができます。
  • 実装コードが含まれる:UXHubではデザインだけではなく、よく使われるUIコンポーネントを実装したコードが一緒に提供されます。アトミックデザインの思想に従って定義され、再利用性を考慮したコーディング規約に沿って作成したコードが、以下のバージョンで提供されます。
    ※UIコンポーネントは随時追加されています。
    • HTML/CSS & Vanilla JS
    • React.js
    • Vue.js
  • 自由な拡張:UXHubが提供するテンプレートやその中に含まれる各種ガイドライン、スタイルの定義、コードは全て自由に変更・拡張することができます。各サービスに必要な部分だけを採用し、追加で必要なものは新しく作成しながらデザインシステムを成長させることができます。
  • オープンなコラボレーション:UXHubに他の人を招待することで、自分で作成したデザインシステムを共有することができます。許可があれば、他人が作成したデザインシステムを複製し、新しいデザインシステムに作り替えることもできます。今後、自分が作成したデザインシステムを有料で販売することも可能になります。
  • 無限な成長性:UXHubはまだ成長中のサービスです。ユーザーからのリクエストによって今後も多様な機能を追加して行きます。UXHubを使いながら感じる不便、ほしい機能などがある場合はこちらよりいつでも気軽にお問い合わせください。ユーザーと一緒にもっと良いプロダクトにして行きたいと思います。

UXHubでのデザインシステムの始め方

UXHubで新しいデザインシステムを真っ新な状態から作成することができますが、お勧めはUXHubに格納されて提供されるテンプレートのデザインシステムを複製して始める方法です。

自作されたデザインシステムを含め、UXHubに格納された全てのデザインシステムはワンクリックで簡単に複製できます。既に存在するデザインシステムを複製して編集することで新しいデザインシステムを作成する方法がより手軽で、更に下記のアドバンテージがあります。

  • デザインプリンシプル、デザインガイドラインなどの文書が含まれている。
  • 色、フォント、画像、スペースなど、カスタマイズできるスタイル要素がデザイントークンとして既に定義されている。
  • アトミックデザインに基づいて作成されたUIコンポーネントがコードと一緒に定義されている

つまり、既存のデザインシステムを複製することでデザインシステムに必要な作業を大幅に低減できます。

UXHubには「Fixel Design System」という汎用的なデザインシステムが提供されます。多くの場合、Fixel Design Systemを複製し、自分の目的に合ったデザインシステムにカスタマイズして行くことがもっとも手軽な方法です。それで自分のデザインシステムを作成してからは、自分のデザインシステムを複製して多様なデザインシステムに展開できます。

UXHubで作成できるもの

デザインシステムを構成する要素として以下のものをページ単位に作成できます。

  • ドキュメント:デザインガイドラインを含め、多様な文書を書くためのフォーマットです。デザインシステムの使用に関する多様な文書を画像やテーブル、コードなどを交えながら自由に記述できます。

  • スタイル変数:デザインのビジュアルなスタイルを決める色、フォント、アイコン、画像、余白の定義など、多様なスタイル要素を定義します。ここに定義したスタイルを変更することで全体のデザインを変えることができます。

  • コンポーネント:UIコンポーネントを作成するためのページです。独自のUIをデザインしてコードで実装し、共有できます。

  • レイアウト:アトミックデザインでテンプレートと呼ばれる、画面のレイアウトを作成して共有するためのページです。

  • ページ:UIコンポーネントを組みわせてレイアウト内に配置することで実際に作成された画面を表示するためのページです。

  • フォルダ:複数のページをグルーピングするためのフォルダを作成できます。

UXHubが提供する価値

デザイナーや小さいデザインチーム

手軽にデザインシステムを作成し、共有したり、お客様に提供できるプラットフォームとしてUXHubを使用できます。既に含まれているデザインガイドラインや実装コードによって生産性を向上し、最終成果物の品質をあげることができます。

企業内デザインチーム

デザインシステムはデザインチームの作業を全社に展開するために不可欠なツールとなりつつあります。企業のデザインシステムを作成し、それに基づいた事業部レベルのデザインシステム、そしてプロダクトレベルのデザインシステムなど、企業活動のあらゆる場面で必要な多様なデザインシステムが必要となります。UXHubのデザインシステム複製機能を活用すると多数のデザインシステムをを簡単に作成して運用できます。またUXHubのコミュニケーション機能を活用して現場からのフィードバックを集約し、デザインシステムの更新に活用できます。

エンジニア

UXHubのデザインシステムに含まれるUIコンポーネントは、そのまま再利用可能なフロントエンドのライブラリーとして使用できます。UXHubにデザインとコードがマッチングされて共有されるので、必要な画面の部品をプレビューで確認しながら必要なコードを取得して自分のコードに挿入できます。UIコンポーネントを使うことでデザイン指示書やデザインガイドラインを読み込まなくてもデザイナーの意図に合致した実装を行うことができます。フロントエンド作成のための道具箱としてUXHubを活用できます。

管理者、ビジネス側における価値

デザインがコードと一緒にUXHubに集約され、再利用できる資産として管理できるようになります。デザインシステムの作成と運用によって、デザインがやっと一回性の費用ではなく、組織として共有と管理ができる資産となります。

セキュリティーと権限制御

UXHubは個人や小さいチームはもちろん、大規模の企業による使用を前提にして制作されております。UXHubでは契約単位毎に「ワークスペース」が付与され、その中でチームやアカウント、そしてデザインシステムの管理ができます。ワークスペース、チーム、デザインシステム毎に管理者、編集者、閲覧者を指定し、不適切なアクセスを遮断することはもちろん、各アカウントに対して適切な権限制御を行うことができます。

よくある質問と回答

  • UXHubをSaaSではなく、オンプレミス方式で使うことはできますか?
    • 企業内のサーバーか企業の契約しているクラウドサービスなど、プライベートな環境にUXHubを設置して独自の運用をおことうことができます。条件や費用などに関してはお問い合わせください。
  • UXHubはまだオープンベータ版の状態ですが、いつ正式リリースされる予定ですか?
    • 2021年の夏を想定しております。
  • UXHubの有料化計画はありますか?また料金はどうなりますか?
    • 正式リリースの際には有料プランも提供する予定です。料金は調整中です。
  • FigmaやAdobe XDなど、デザインツールからデザインのデータをインポートする機能はありますか?
    • オープンベータ環境ではないですが、正式リリースの際にはメジャーなデザインツールとの連携機能を提供する予定です。
  • UXHubで作成したデザインシステムをウェブで公開することはできますか?
    • できます。UXHubで作成したデザインシステムはデフォルトでは権限のあるユーザーに対してのみアクセスができますが、設定の変更によって一般公開することができます。
  • UXHubで作成したデザインシステムをエクスポートする機能はありますか?
    • オープンベータ版にはまだないですが、近日追加される予定です。
  • デザインシステム作成に対しての支援はありますか?
    • Fixelはデザインシステム作成と運用を支援するプロフェッショナルサービスを運用しております。必要な方は「 info@fixel.co.jp」に気軽に声をかけてください。

UXHubの基本情報

推奨環境

対応ブラウザ/OS

最新版のGoogle Chromeが推奨ブラウザ(動作とレイアウトを保証しているブラウザ)となっています。

上記がご利用できるOSであれば、WindowsでもMacでも問題なくご利用いただけます。

アカウント

アカウントの発行依頼

ログイン画面の「新規会員登録」より新規アカウントを発行できます。


ご登録いただいたメールアドレス宛にアカウント登録用のURLを送信します。
※システムより即時送信されます。


アカウントの新規作成

アカウント登録に必要な情報をご登録いただければ、UXHubをご利用いただけます。

ログイン/ログアウト

ログイン方法

アカウント発行時にご登録いただいたユーザーIDとパスワードを入力することで、ログインすることができます。

※ユーザーIDまたはパスワードを忘れてしまった場合は、以下より再発行が可能です。
ユーザーIDを忘れた方はこちら
パスワードを忘れた方はこちら


ログアウト方法

画面右上の「ユーザー名」から表示されるメニューからログアウトができます。


デザインシステム一覧

デザインシステム一覧

①デザインシステムのテンプレート
UXHubには作業の参考になるように、サンプルのデザインシステムを提供しています。
テンプレートを複製して新しいデザインシステムを作ることができます。

②あなたが所有するデザインシステム
あなたが所有しているデザインシステムが表示されます。

③テナントが所有するデザインシステム
あなたが所属しているテナントのデザインシステムが表示されます。

④デザインシステムの新規作成
デザインシステムを追加することができます。
新規作成、または複製して作成してください。

⑤テナントの新規作成
UXHubを使用する企業、組織、グループを作成することができます。

⑥デザインシステムの課題一覧
各ページに対して、課題を登録することができます。

⑦アカウント情報
アカウント情報ページへの遷移、表示言語切り替え、ログアウトが行えます。
機能機能では各ページの内容に関することなど、同じテナントの利用者間でのやり取りが行えます。


デザインシステムの基本メニュー

①名称変更
デザインシステムの名称を変更することができます。

②複製
デザインシステムを複製することができます。

③ダウンロード
UXHubで作成した全てのリソース(HTML,CSS,JavaScript,画像ファイル)をダウンロードできます。

④設定
デザインシステムの基本情報、テーマ、権限等を設定することができます。

⑤削除
デザインシステムを削除することができます。


デザインシステムの基本情報

①名称変更
デザインシステムを新規作成、または複製した際に設定したでデザインシステムIDを表示します。
デザインシステムIDは、変更することができません。

②デザインシステム名
デザインシステムの名称を変更することができます。

③サムネイル
デザインシステムのサムネイルを設定することができます。

④プレビュー設定
PC、タブレット、スマホのプレビュー時のディスプレイ幅を設定することができます。


デザインシステムのテーマ

デザインシステムのロゴ、カラー(キーカラー、ページ背景色、テーブルヘッダー背景色、プレビューの背景色)を設定することができます。


デザインシステムの権限

①公開設定
デザインシステムをWeb公開することができます。

②デザインシステムのユーザー権限
デザインシステムのユーザー権限を変更することができます。


権限設定

管理者
デザインシステム管理者は自分が権限を持っているデザインシステムに関して、編集、削除の権限があります。

編集者
デザインシステムのコンテンツに関して編集権限を持ちますが、管理画面では閲覧のみになります。

閲覧者
デザインシステムのコンテンツを閲覧できますが、編集はできません。


デザインシステム詳細

デザインシステムの編集

画面右上の「編集」をクリックすると、編集モードに変わります。


変更後は画面右上の「保存」をクリックしてください。


更新履歴

過去の更新履歴を見ることができます。
過去の更新履歴は、編集することができません。


バージョン

デザインシステム全体の内容を保存してバージョン管理ができます。
バージョンの追加や、保存した過去のバージョンに切り替えて見ることができます。
過去のバージョンは、編集することができません。


テナント

テナントの基本メニュー

①名称変更
デザインシステムの名称を変更することができます。

②チーム
デザインシステムおけるチームを作成し、ユーザーを追加することができます。

③ユーザー
デザインシステムにユーザーを追加することができます。

④設定
デザインシステムの基本情報、テーマ、権限を設定することができます。

⑤削除
デザインシステムを削除することができます。

テナントのチーム管理

デザインシステムのユーザーをチーム単位で管理することができます。
チームを作成することでユーザーを管理する手間を省くことができますが、ユーザー権限を変更するためには個別の設定変更が必要です。


テナントのチーム編集

チームの名称とユーザーの追加・削除、およびユーザー権限の変更ができます。


テナント内のチームのユーザー権限

管理者
管理者は自分が権限を持っているテナントのデザインシステムに関して、編集、削除の権限があります。

編集者
デザインシステムのコンテンツに関して編集権限を持ちますが、管理画面では閲覧のみになります。

閲覧者
デザインシステムのコンテンツを閲覧できますが、編集はできません。


テナントのユーザー管理

テナントのユーザーを管理することができます。
新たにユーザーを追加する場合は、画面右上の「ユーザーを招待」から招待することができます。


テナントのユーザー管理

ユーザー単位で、テナントの権限変更と削除、所属チームの権限変更と追加・削除、権限を有するデザインシステム権限変更と削除ができます。


テナントのユーザー権限

管理者
管理者は自分が権限を持っているテナントのデザインシステムに関して、編集、削除の権限があります。

編集者
デザインシステムのコンテンツに関して編集権限を持ちますが、管理画面では閲覧のみになります。

閲覧者
デザインシステムのコンテンツを閲覧できますが、編集はできません。


UXHubの使い方

概要

デザインシステムのトップページ

該当するデザインシステムに関して、基本的な説明や情報を記載します。
また、ページの上部に「カバー画像」を設定することができます。


サイドメニュー

サイドメニューの編集方法

①名称変更
メニュー上の名称を変更することができます。

②同階層に追加
選択しているメニュー上の項目と同階層にページを追加することができます。

③子階層に追加
選択しているメニュー上の項目と子階層にページを追加することができます。

④削除
メニュー上の項目からページを削除することができます。


ドキュメント

エディタページが追加されます。
ガイドラインは、任意のテキストや画像を記載することができます。


スタイル変数

スタイル作成ページが追加されます。
スタイルは、デザインシステムで使用する各種スタイルのガイドラインを記載したり、「コンポーネント」間で共通に利用できる「スタイル変数」を定義することができます。


コンポーネント

UIコンポーネント作成ページが追加されます。
コンポーネントは、デザインシステムで使用可能なHTMLベースの「UIコンポーネント」を作成できます。

レイアウト

レイアウトのページが追加されます。
レイアウトは、デザインシステムで使用する「画面レイアウト」のテンプレートを作成できます。


ページ

プレビュー用ページが追加されます。
ページは、「コンポーネント」で作成したUIコンポーネントを使ったプレビュー用のサンプル画面を作成できます。


フォルダ

メニューにフォルダが追加されます。 フォルダは、メニュー上の項目をグループとして束ねることができます。


ガイドライン(ページの種類:ドキュメント)

デザインガイドラインについて

すでにデザインガイドラインがある場合は、ガイドラインの基本方針、原則、ルールなどを記載します。
デザインガイドラインがまだない場合は、ページを追加して、直接ガイドラインを記述・編集することができます。


編集方法1(編集モードへの切り替え)

画面右上の「編集」をクリックしてください。
コンテンツエリアが編集モードに変わります。


編集方法2(ブロックの追加)

テキストや画像などを追加したい場所をクリックしてください。
「ブロック追加」が表示されます。


編集方法3(追加できるブロックの種類)

追加できるブロックは次の4種類です。
①テキスト
②画像ファイル
③添付ファイル
④テーブル


編集方法4(テキストの書式設定)

テキストを選択すると、太字やリンクなどの書式設定ができます。


編集方法5(保存)

編集した内容を保存するために、「保存」をクリックしてください。


デザイントークン(ページの種類:スタイル変数)

デザイントークンについて

デザインシステムで使用する各種スタイルのガイドラインを記載したり、「コンポーネント」間で共通に利用できる「スタイル変数」を定義することができます。


編集方法1(編集モードへの切り替え)

画面右上の「編集」をクリックしてください。
コンテンツエリアが編集モードに変わります。


編集方法2(スタイルの追加・削除)

画面の一番下の「+」「×」をクリックすると、スタイルを追加・削除することができます。


編集方法3(スタイルの定義)

スタイルの名前、タイプ、変数名、値を入力してください。


編集方法4(保存)

編集した内容を保存するために、「保存」をクリックしてください。


UIコンポーネント(ページの種類:コンポーネント)

UIコンポーネントについて

デザインシステムで使用可能なHTMLベースの「UIコンポーネント」を作成できます。
ページ内には、ガイドラインの記述と複数のUIコンポーネント作成ができます。

UIコンポーネントは次の内容で構成されています。

UIコンポーネント名

UIコンポーネントのプレビュー
HTML/CSSに記述した内容が表示されます。

UIコンポーネントの中身
HTML、CSS、JavaScript、React、Vue.js使い方の5つがあります。


HTML

コンポーネントをHTMLコードで記述します。


CSS

このコンポーネントで使うCSSクラスを作成します。


JavaScript

コンポーネントにJavaScriptが使用されている場合、そのコードを記述します。


React

Reactで作成したコンポーネントのコードがある場合、そのコードを登録できます。


Vue.js

Vue.jsで作成したコンポーネントのコードがある場合、そのコードを登録できます。


ドキュメント

このコンポーネントの使い方やガイドラインを記述します。


編集方法1(編集モードへの切り替え)

画面右上の「編集」ボタンをクリックしてください。
コンテンツエリアが編集モードに変わります。


編集方法2(コンポーネントの追加)

画面一番下の「+」で、コンポーネント作成ブロックが追加されます。

コンポーネント名を入力し、HTML+JS、React、Vue.js、ドキュメントを入力していきます。

編集方法3(HTMLの編集)

作成したコンポーネントをHTMLコードで記述します。
コードの下には、簡単な説明テキストを入力することができます。※任意入力


編集方法4(CSSの編集)

コンポーネントで使うCSSのクラスを作成できます。

「+」をクリックして、クラス名、プロパティ、値を入力します。
ここで「スタイル変数」を指定した場合は、スタイル変数で定義した値が割り当てられます。
スタイル変数を活用することで、複数のコンポーネントやデザイン要素で共通の値を利用できるようになります。

ヒント 新しく作成したクラスは、そのデザインシステム内で再利用可能な「定義済みクラス」になり、他のコンポーネントでも参照できるようになります。


編集方法5(JavaScriptの編集)

UIコンポーネントで使用されているJavaScriptを入力します。
「HTML」と同様に、「編集」ボタンを押下後、コードを入力できます。
コードの説明が入力できます。※任意入力


編集方法6(Reactの編集)

UIコンポーネントで使用されているReactを入力します。
「HTML」と同様に、「編集」ボタンを押下後、コードを入力できます。
コードの説明が入力できます。※任意入力


編集方法7(Vue.jsの編集)

UIコンポーネントで使用されているVue.jsを入力します。
「HTML」と同様に、「編集」ボタンを押下後、コードを入力できます。
コードの説明が入力できます。※任意入力


編集方法8(ドキュメントの編集)

このUIコンポーネントに関する使い方やガイドラインなどを入力します。

編集方法9(保存)

編集した内容を保存するために、「保存」をクリックしてください。


ページ(ページの種類:ページ)

ページについて

ページは、「コンポーネント」で作成したUIコンポーネントを使ったプレビュー用のサンプル画面を作成できます。
プレビュー用のサンプル画面は、HTML、CSSで記述します。
記述した内容はHTMLファイル、CSSファイルとしてダウンロードができます。
また、ローカルに用意したHTML/CSSファイルをZIP圧縮してアップロードすることで内容を更新できます。
「別ウィンドウで開く」で、プレビュー用サンプル画面を別ウィンドウで開き表示させることができます。


編集方法1(編集モードへの切り替え)

画面右上の「編集」ボタンをクリックしてください。
コンテンツエリアが編集モードに変わります。


編集方法2(HTML/CSSの編集)

HTMLとCSSを入力して、サンプル画面を作成します。


編集方法3(保存)

編集した内容を保存するために、「保存」をクリックしてください。


テンプレート(ページの種類:レイアウト)

テンプレートについて

テンプレートは、デザインシステムで使用する「画面レイアウト」のテンプレートを作成できます。
画面レイアウトの元となるテンプレートをHTML/CSSで作成します。

プレビューは、HTMLで記述した各領域がわかる形で表示されます。
プレビューの表示サイズを変更することができます。


編集方法1(編集モードへの切り替え)

画面右上の「編集」ボタンをクリックしてください。
コンテンツエリアが編集モードに変わります。


編集方法2(HTML/CSSの編集)

HTMLとCSSを入力して、テンプレート画面を作成します。


編集方法3(保存)

編集した内容を保存するために、「保存」をクリックしてください。


課題

課題について

各ページに対して課題を登録することができます。


課題機能

課題では各ページの内容に関することなど、同じテナントの利用者間でのやり取りが行えます。