業務用デザインシステムとUXHubの紹介

1. Roy Kim / Yoshito Wakanabe
明⽇から使える
｢業務向けデザインシステム｣の紹介
Session 02

2. Fixel Inc. All rights reserved.
プロフィール
2018年6⽉に、デザイナーとして、NCDCにジョイン、その後Fixelへ。
以前は、主に、ウェブサービスの事業会社などで、BtoC、BtoB向けのプロダクトの制
作・管理・運営などに従事。
デジタルな領域だけでなく、グラフィック、プロダクトデザインの経験を⽣かして、定量
と定性のバランスのとれたデザインを⼼がけています。
2
若鍋 善⼈（わかなべ よしと）

3. Fixel Inc. All rights reserved.
デザインシステム構築・運営における課題
l 初期コストがかかる
• デザインガイドの作成
• UI部品の作成
• デザインシステム公開のためのサイト構築
• デザイナーとエンジニアで構成されたチームが必要
l 継続的な運⽤が必要
• デザインシステムの専任チームが必要
l 結果的に現状は主に⼤⼿企業や有名サービスだけがデザインシステムを構
築・運営している
3

4. Fixel Inc. All rights reserved.
課題解決の⽅法として
l 初期コストがかかる
• デザインガイドの作成 ☞ テンプレートとなるデザインガイドを⽤
意
• UI部品の作成 ☞ UI部品をあらかじめ⽤意
• デザインシステム公開のためのサイト構築 ☞ UXHubで公開
• デザイナーとエンジニアで構成されたチームが必要
☞ デザイナーだけ
l 継続的な運⽤が必要
• デザインシステムの専任チームが必要 ☞ 運⽤負荷軽減
l 結果的に現状は主に⼤⼿企業や有名サービスだけがデザインシステムを構
築・運営している
☞ 組織の規模に関わらず、⾃社のデザインシステムを作成・運⽤できる仕組
みを提供
4

5. Fixel Inc. All rights reserved.
⼀般的なデザインシステムの構成要素
5
デザイン原則
• デザインプリンシプル
• UXデザイン基本⽅針
• UIデザイン基本⽅針
ブランド
アイデンティティ
• ブランドガイドライン
• ロゴ、フォント、カラー
などのビジュアル基本要素
エディトリアル
ガイド
• ⾔語表現のガイドライン
• メッセージや⽤語集
パターンライブラリ
• UIコンポーネント
• ページテンプレート
• UIキット（PhotoshopやSketchなど）
コード
• コーディングガイドライン
• 対象プラットフォーム
(デバイスやOS、ブラウザなど)
• バージョニング
• 実装利⽤可能なUIコンポーネント集

6. Fixel Inc. All rights reserved.
業務向けデザインシステムの構成要素
6
デザイン原則
• デザインプリンシプル
• UXデザイン基本⽅針
• UIデザイン基本⽅針
ブランド
アイデンティティ
• ブランドガイドライン
• ロゴ、フォント、カラー
などのビジュアル基本要素
エディトリアル
ガイド
• ⾔語表現のガイドライン
• メッセージや⽤語集
パターンライブラリ
• UIコンポーネント
• ページテンプレート
• UIキット（PhotoshopやSketchなど）
コード
• コーディングガイドライン
• 対象プラットフォーム
(デバイスやOS、ブラウザなど)
• バージョニング
• 実装利⽤可能なUIコンポーネント集
☞ 業務向けの内容や要素を追加したデザインシステムを作成

7. Fixel Inc. All rights reserved.
「業務向けデザインシステム」の構成要素
l 構成要素
• デザインガイドライン
• →デザイン原則
• →⽬的と対象者
• →想定するユーザー像
• →⽂体と表現
• →アクセシビリティ
7
☞ 「業務向けデザインシステム」では、デ
ザイン原則とエディトリアルガイドを「デザ
インガイドライン」として、まとめています。

8. Fixel Inc. All rights reserved.
「業務向けデザインシステム」の構成要素
l 構成要素
• スタイル
• → background-color（背景⾊）
• → text-color（テキストカラー）
• → font（書体）
• → font-size（フォントサイズ）
• → line-height（⾏送り）
• → radius（⾓丸）
• → border-color（罫線⾊）
• → border-width（罫線の太さ）
• → opacity（不透明度）
• → spacing（余⽩）
8
☞ 「業務向けデザインシステム」では、デ
ザイン原則（UIデザイン基本⽅針）とパター
ンライブラリを「スタイル」として、まとめ
ています。

9. Fixel Inc. All rights reserved.
「業務向けデザインシステム」の構成要素
l 構成要素
• UIコンポーネント
• → Button
• → Icon
• → Checkbox / Radio button
• → Text input
• → Select
• → Table
• → Dialog
• → Tooltip
• → Typography
• → Header
• → Navigation tab
9
☞ 「業務向けデザインシステム」では、パ
ターンライブラリとコードを「UIコンポーネ
ン」として、まとめています。

10. Fixel Inc. All rights reserved.
「業務向けデザインシステム」の構成要素
l 構成要素
• レイアウト
• → Basic layout
• → List & Filter
• → Detail
• → Stepper
• ページ
• → Basic layout
• → List & Filter
• → Detail
• → Stepper
10
☞ 「業務向けデザインシステム」では、パ
ターンライブラリ（ページテンプレート）と
コードを「レイアウト」と「ページ」とし
て、まとめています。

11. Fixel Inc. All rights reserved.
「業務向けデザインシステム」のメリット
ü デザインシステムをフルスクラッチでゼロから作るのではなくテンプ
レートとなるデザインシステムを利⽤（複製・変更）することで⼿軽
に始められる。
ü UI部品もあらかじめ⽤意してあるので、⾜りない部品は追加するだ
け。
ü デザインガイドライン、スタイル、UIコンポーネント、レイアウト、
ページが⼀元管理して公開されている。
ü テンプレートから始めることで、組織の規模に関わらず、⾃社のデザ
インシステムを作成・運⽤することができる。
11

12. Fixel Inc. All rights reserved.
いままでのデザインとこれからのデザイン
作って
作り直す
12
作って
使い続ける
ü 持続可能なデザインのエコシステムを構築するために、デ
ザインシステムの導⼊をおすすめします。
ü その際には、0 ➡ 1 ではなく、1 ➡ 2 で始められるUXHub
で始めてみませんか︖
いままで これから

13. Fixel Inc. All rights reserved.
デザインのミッシングピース
13
Design
System
今までのデザインに⾜りていなかった部分を
補うものがデザインシステム

14. Fixel Inc. All rights reserved.
お知らせ
lオープンベータテスト開始します︕
l興味のある⽅ or 利⽤したい⽅は、
☞ uxhub.tokyoにアクセス
☞ 弊社スタッフにお気軽にお声がけください
14