UXHubの設定

推奨環境

対応ブラウザ/OS

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

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

アカウント

アカウントの取得方法

UXHubは現在ベータ版であるため、個別に申し込んだユーザーに対してのみ、アカウントを作成しています。

アカウントが必要な方は、こちらの問い合わせフォームよりご連絡ください。

ログイン

ログインの方法

UXHub運営事務局からメールでお送りした、テナントID、ユーザーID、パスワードを入力してログインしてください。

テナントID、ユーザーID、パスワードを忘れた方は、こちらの問い合わせフォームよりご連絡ください。

デザインシステム一覧

デザインシステム一覧

①デザインシステム名と説明
作業の参考になるように、サンプルデザインシステムが一つ以上表示されています。
サンプルデザインシステムは閲覧専用で編集はできません。
ただし、これを複製して新しいデザインシステムを作った場合は自由に編集できます。

②リソースのダウンロード
リソースダウンロード:UXHubで作成した全てのCSSファイルとUXHubに登録した全ての画像ファイルがダウンロードできます。

③設定
デザインシステム名前や、ユーザー権限の設定ができます。
※テーマIDは、デザインシステム作成後に編集できません。

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

⑤ヘルプ
UXHubユーザーマニュアル(本ページ)に遷移します。

⑥アカウント情報
アカウント情報ページへの遷移、表示言語切り替え、ログアウトが行えます。

デザインシステムの設定

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

削除する際は、画面右上の「削除」をクリックしてください。

デザインシステムの編集

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

デザインシステムを利用できるユーザーの権限を変更できます。

ユーザーを追加する場合は、「ユーザー権限追加」をクリックしてください。

権限

テナント管理者
テナント情報とユーザー情報の編集権限を持っています。
また、テナントに登録されているデザインシステムすべてに対しての編集、削除権限があります。

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

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

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

テナント情報

テナント情報

UXHubをご使用になる企業、組織、グループの設定ページです。

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

テナントIDは変更することができません。

テナント情報の編集

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

ユーザー一覧

ユーザー一覧

UXHubを使用できるユーザーの新規登録や、ユーザー名、ログインパスワード、権限の変更ができます。

一度登録したユーザーIDは変更することができません。

ユーザーを新しく追加する場合は、画面右上の「新規ユーザー登録」をクリックしてください。

すでに登録したユーザーの詳細情報は「詳細」から見ることができます。

新規ユーザー登録

新規ユーザーの必要項目を入力し、保存してください。

アカウント設定

アカウント情報の確認方法

個人のアカウント情報の変更は、画面右上のユーザー名から「アカウント情報」を選んでください。

アカウント情報の詳細

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

アカウント情報の編集

①ログインパスワードの変更
「パスワードを変更する」にチェックを入れると、新しいパスワードを入力できます。

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

③ユーザー権限削除
ユーザー権限が削除できます。

④ユーザー権限追加
ユーザー権限を追加することができます。

UXHubの使い方

サイドメニュー

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

「メニューを編集」ボタンをクリックすると、ページの編集と追加ができます。

メニューを編集

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

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

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

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

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

⑥「このアイテムを削除」
追加したアイテムを削除します。

⑦「移動」
ページの順番を入れ替えます。

⑧「名前を変更」
カテゴリーのタイトルを変更します。

概要

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

該当するデザインシステムに関して、基本的な説明や情報を記載します。

ページの上部に「カバー画像」を設定することができます。

編集時のテキスト入力方法は「ガイドライン(エディタページ)の編集方法」を参照してください

デザインガイドライン

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

すでにデザインガイドラインがある場合は、ガイドラインの基本方針、原則、ルールなどを記載します。

デザインガイドラインがまだない場合は、ページを追加して、直接ガイドラインを記述・編集することができます。

ガイドライン(エディタページ)の編集方法1

編集モードの切り替え 画面右上の「編集」をクリックしてください。

コンテンツエリアが編集モードに変わります。

ガイドライン(エディタページ)の編集方法2

ブロックの追加 テキストや画像などを追加したい場所をクリックしてください。

「ブロック追加」が表示されます。

ガイドライン(エディタページ)の編集方法3

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

ガイドライン(エディタページ)の編集方法4

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

ガイドライン(エディタページ)の編集方法5

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

スタイル

スタイルについて

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

コンポーネントのプレビュー

画面右のプレビューボタンをクリックすると、スタイルを適用させたUIコンポーネントを見ることができます。

プレビューでは、現在表示しているページのスタイル変数が使われているコンポーネントが自動的に表示されます。

スタイルページの編集方法1(編集モードの切り替え)

画面右上の「編集」をクリックしてください。

コンテンツエリアが編集モードに変わります。

スタイルページの編集方法2(スタイルの追加)

画面の一番下の「スタイル変数を追加」をクリックすると、スタイルを追加できます。

スタイルページの編集方法3(スタイルの設定)

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

UIコンポーネント

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

デザインシステムで使用可能なHTMLベースの「UIコンポーネント」を作成できます。

ページ内には、ガイドラインの記述と複数のUIコンポーネント作成ができます。

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

UIコンポーネント名

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

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

HTML

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

CSS

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

JavaScript

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

Vue.js

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

使い方

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

コンポーネントページの編集方法1(編集モードの切り替え)

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

コンポーネントページの編集方法2(コンポーネントの説明)

ページ上部には説明用のテキストが自由入力できます。※任意入力

コンポーネントページの編集方法3(コンポーネントの追加)

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

コンポーネント名を入力し、HTML、CSS、JavaScript、Vue.js、使い方、を入力していきます。

コンポーネントページの編集方法4(HTMLの編集)

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

コードの下には、簡単な説明テキストを入力することができます。※任意入力

コンポーネントページの編集方法5(CSSの編集)

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

「新規クラスを追加」で新しいクラスを作成できます。

クラス名を入力します。

クラスの説明が入力できます。※任意入力

コードエディタを使用すると複数のクラスを入力できます。

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

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

コンポーネントページの編集方法6(JavaScriptの編集)

UIコンポーネントで使用されているJavaScriptを入力します。

「HTML」と同様に、「編集」ボタンを押下後、コードを入力できます。

コードの説明が入力できます。※任意入力

コンポーネントページの編集方法(Vue.jsの編集)

UIコンポーネントで使用されているフレームワークなどを入力します。

「Scriptを追加」で新しい入力エリアが作成されます。

コンポーネントページの編集方法8(使い方の編集)

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

編集ボタンを押すと、タイトルと説明が入力できます、

「テキストブロックを追加」で新しい入力エリアが作成されます。

レイアウト

レイアウトについて

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

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

ページ

ページについて

ページは、「コンポーネント」で作成したUIコンポーネントを使ったプレビュー用のサンプル画面を作成できます。
プレビュー用のサンプル画面は、HTML、CSSで記述します。

記述した内容はHTMLファイル、CSSファイルとしてダウンロードができます。
また、ローカルに用意したHTML/CSSファイルをZIP圧縮してアップロードすることで内容を更新できます。

「別ウィンドウで開く」で、プレビュー用サンプル画面を別ウィンドウで開き表示させることができます。

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

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

ページの編集方法2(HTML/CSSの編集)

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

コメント

コメントについて

次の種類のページではコメント機能があります。

・ガイドライン
・スタイル
・コンポーネント

コメント機能

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

バージョン

バージョンについて

デザインシステム全体の内容を保存してバージョン管理ができます。

バージョンの追加や、保存した過去のバージョンに切り替える見ることができます。

過去のバージョンは、編集はできません。

更新履歴

更新履歴について

過去の更新履歴を見ることができます。

過去の更新履歴は、編集はできません。

ログアウト

ログアウトについて

ログアウトは、画面右上の「ユーザー名」から表示されるメニューより行います。