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
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