Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SIer / 情シス向け「 IT とデザインは仲良し ! 」シリーズ 第 7 回
Search
Fixel Inc.
September 30, 2021
Design
1
940
SIer / 情シス向け「 IT とデザインは仲良し ! 」シリーズ 第 7 回
デザイントークンのおすすめ なぜ大規模システム、急成長するサービスこそ デザイントークンに注目すべきか?
Fixel Inc.
September 30, 2021
Tweet
Share
More Decks by Fixel Inc.
See All by Fixel Inc.
超簡単!デザインシステム導入の手引き
fixel_admin
1
1.3k
4つの事例から分かる ビジネスを成功させたUXデザイン
fixel_admin
1
1.2k
第14回_製造業のシステムのUX_UIデザイン改善事例を公開_Webinar20220825.pdf
fixel_admin
1
760
第13回_フロントエンド開発の課題をデザインシステムで解決しよう!
fixel_admin
2
540
第10回_業務システムのUX/UIデザイン改善によくある間違いとその解決策
fixel_admin
6
2.6k
デザインとフロントエンドの最先端! 最新ツールを駆使したデザインから実装、そしてプロトタイプまでのシームレスな流れ【第9回】
fixel_admin
2
960
SIer / 情シス向け「 IT とデザインは仲良し ! 」シリーズ 第 8 回
fixel_admin
0
940
SIer / 情シス向け「 IT とデザインは仲良し ! 」シリーズ 第 6 回
fixel_admin
1
1.1k
古くて使いにくい業務システムを 使いやすく新しいデザインに刷新する! セミナー資料
fixel_admin
0
1.8k
Other Decks in Design
See All in Design
MLP_Cleanup_Olga
olgastoryboard
0
120
Credence
lratmansunu
0
260
20240921-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
140
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
260
Making impact with your craft with sociotechnical design
xinyao
1
170
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
1
390
Cхематизация процессов и пользовательского опыта с Картой процесса-опыта
ashapiro
0
260
デザイナー向け会社紹介資料(採用資料)
dreamarts
0
300
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
110
202409_会社概要資料_Englishver.pdf
zakkerooni
0
190
Du Bois Challenge 2024 Recap
ajstarks
1
140
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
360
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
4
120
How to Ace a Technical Interview
jacobian
275
23k
Thoughts on Productivity
jonyablonski
67
4.2k
Producing Creativity
orderedlist
PRO
341
39k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Clear Off the Table
cherdarchuk
91
320k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Music & Morning Musume
bryan
46
6.1k
Writing Fast Ruby
sferik
626
60k
Transcript
デザインシステムまでは難しい︕という⽅のための デザイントークンのおすすめ SIer/情シス向け「ITとデザインは仲良し︕」シリーズ 第7回 2021/09/30
2 今⽇のスピーカの紹介 2 ۚ 3PZ,JN 69&OHJOFFS$&0PG'JYFM *OD 商社マン プログラマー
ITコンサルタント/アーキテクト プロダクト オーナー アプリ開発者/システムアーキテクト UXデザイナー、サービスデザイナー グランスフィア株式会社 (現 GMOシステムコンサル ティング株式会社) ⼤林コーポレーション(株) BEA Japan Oracle Japan EMC Japan Agentec株式会社 NCデザイン&コンサルティング 株式会社 Fixel株式会社 ΩϟϦΞ 5年 10年 11年
3 今⽇のスピーカの紹介 3 ۚ 3PZ,JN 69&OHJOFFS$&0PG'JYFM *OD 営業 テクノロジー
デザイン 経営 ΩϟϦΞ 5年 10年 10年 ある程度は、俯瞰できます︕ ΩϟϦΞ
今⽇話す内容 ① デザインとITの解決すべき課題 ② デザイントークンとは︖ ③ デザイントークンの価値と活⽤⽅法 ④ 利⽤できるツールの紹介 ⑤
⼀歩先に︓デザイントークンからデザインシステムへ ⑥ ラップアップ
① デザインとITの解決すべき課題
6 ⼩さいシステム、またはプロダクトの初期 プロダクト エン エン デ ワンチーム
7 デザインチーム ⼤きいチーム、そして成⻑したプロダクト 機能 デ 機能 機能 機能 機能 エン
デ デ デ エンジニアチーム エン エン エンジニアチーム エンジニアチーム エン エン エン
8 デザインチーム ⼤きいチーム、そして成⻑したプロダクト 機能 デ 機能 機能 機能 機能 エン
デ デ デ エンジニアチーム エン エン エンジニアチーム エンジニアチーム エン エン エン コミュニケーション︕︕
9 デザインチーム そこに出現した解決策︕ 機能 デ 機能 機能 機能 機能 エン
デ デ デ エンジニアチーム エン エン エンジニアチーム エンジニアチーム エン エン エン デザイン システム
10 デザインチーム そこに出現した解決策︕ 機能 デ 機能 機能 機能 機能 エン
デ デ デ エンジニアチーム エン エン エンジニアチーム エンジニアチーム エン エン エン デザイン システム デザイン ガイドライン デザイン トークン UI コンポーネント
デジタル庁の呟きが話題に︕ https://digital-gov.note.jp/n/n78f6a2f82e48 前回の資料から抜粋
12 デザインシステムの例 Salesforce Lightning Design System https://www.lightningdesignsystem.com 複数のサービスプロバイダーから 提供するUXを統⼀する⼿段として デザインシステムを活⽤
前回の資料から抜粋
13 デザインシステムの例 IBM Carbon Design System http://carbondesignsystem.com 全社レベルのデザインシステムを プロダクト単位にテーマを変えて 適⽤する
前回の資料から抜粋
14 デザインシステムの適⽤例 各国政府のデザインシステム アメリカ イギリス シンガポール 前回の資料から抜粋
15 デザインガイドライン デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
16 デザイントークン デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
17 UIコンポーネント デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
18 デザインチーム 今⽇はデザイントークンについて話します 機能 デ 機能 機能 機能 機能 エン
デ デ デ エンジニアチーム エン エン エンジニアチーム エンジニアチーム エン エン エン デザイン システム デザイン ガイドライン デザイン トークン UI コンポーネント 今⽇のフォーカ スはここ︕
②デザイントークンとは︖
20 デザイントークンの定義 デザイントークンは ビジュアルなデザインの最⼩構成要素 であり、ビジュアルデザイン属性を保存するための名前付き の要素である。 デザイントークンに⾊のhex値やスペースのPixelの値など、 ハードコードされる値を格納して使うことで、 UI開発にお けるスケーラブルで安定的なビジュアルシステムを維持する
21 デザイントークンの定義 デザイントークンは デザインシステムを 構築して運⽤するために必要な全ての値で ある。例えばSpacing、Color、 typography、Object Styles、アニメーシ ョンなどで、データとして表現される。
22 l ボタン デザイントークン︓分かりやすく説明 https://codepen.io/royskim/pen/VwpNPeR
23 l ボタン デザイントークン︓分かりやすく説明 構成要素の定義 ビジュアル (⾒た⽬)の定義 処理内容の定義
24 l ビジュアル要素を変数として分離したボタン︓SCSS採⽤ デザイントークン︓分かりやすく説明 https://codepen.io/royskim/pen/pXmGWg
25 l 変数の値を変えることで⾒た⽬を変更したボタン デザイントークン︓分かりやすく説明 https://codepen.io/royskim/pen/WNjeZKy
26 l ビジュアルの変更に必要な修正はごく制限的 デザイントークン︓分かりやすく説明 変更した部分
27 l UIの構成要素からビジュアルな特徴を表す部分を分離 l その部分に名前をつけ、特定の値を設定 l その名前を使ってUI構成要素のビジュアルな特徴を適⽤する l 名前はそのまま、値を変える l
その結果として画⾯のUI要素(ボタン)の⾒た⽬が変わる 今やったこと
28 今やったこと l UIの構成要素であるボタンからビジュアルな特徴を表す部分を分離 l その部分に名前をつけ、特定の値を設定 l その名前を使ってUI構成要素のビジュアルな特徴を適⽤する l 名前はそのまま、値を変える
l その結果として画⾯のUI要素(ボタン)の⾒た⽬が変わる デザイントークンは ビジュアルなデザインの最⼩構成要素 であり、ビジュアルデザイン属性を保存するための名前付き の要素である。 デザイントークンに⾊のhex値やスペースのPixelの値など、 ハードコードされる値を格納して使うことで、 UI開発にお けるスケーラブルで安定的なビジュアルシステムを維持する
29 デザイナーさん向けの説明︓ デザイントークン=Figmaのスタイル
30 デザイントークンの活⽤の実例 l UXHubを使った、デザイントークンの変更によるビジュアル変更の例をデモ
③デザイントークンの価値と活⽤⽅法
32 デザイントークンの価値︓その1 l デザイントークンの値を変えるだけで、同じUI要素 の⾒た⽬を変えることができる l 同じ値のデザイントークンを各UI要素に適⽤するこ とでデザインの⼀貫性が⽣じる ボ タ
ン ボタン ボタン ボタン トークン︓ ⻘ トークン︓ ⻘
33 デザイントークンの価値︓その2 l デザイントークンを変えることで、そのデザイント ークンを使っている全てのUI要素の⾒た⽬が変わる l UIの⾒た⽬の修正が容易にできる ボ タ ン
ボタン ボタン ボタン トークン︓ ⻘ トークン︓ 紫
34 デザイントークンの価値︓その3 l デザインの⾒た⽬以外の部分の再利⽤が可能になる l つまり、コードの再利⽤が可能になる l UIコンポーネントの再利⽤によって、実装⼯数が 減り、実装品質が上がる︕ ボ
タ ン ボタン ボタン トークン︓ ⻘ トークン︓ 紫 トークン︓ 円型
35 UIコンポーネント デザイントークンはブランドそのもの︖ l UIコンポーネント(コード)はブランド中⽴的で、ブランドを跨って再利⽤さ れるもの l ブランドの定義は結局デザイントークンの定義 l デザイントークンの管理と展開がブランド戦略の実践となる︕
ボタン 企業サイト テーブル ラベル ヘッダー ボタン テーブル ラベル ヘッダー デザイントークン デザイントークン デザイントークン プロダクトA プロダクトB
36 とある電機メーカーさんのブランド戦略 l 企業ブランドをデザイントークンとして定義し、事業部、プロダクト単位でカスタ マイズして適⽤することでブランド感⽣成 企業ブランド A事業部ブランド A1プロダクト ブランド B事業部ブランド
C事業部ブランド A2プロダクト ブランド A3プロダクト ブランド C3プロダクト ブランド デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン 上位階層のデザ イントークンを 再利⽤
37 SIerのデザイントークン活⽤ l 企業ブランドをデザイントークンとして定義し、事業部、プロダクト単位でカスタ マイズして適⽤することでブランド感⽣成 SIerのデザイントークン A顧客⽤トークン A1システム⽤ デザイントークン B顧客⽤トークン
C顧客⽤トークン A2システム⽤ デザイントークン A3システム⽤ デザイントークン C1システム⽤ デザイントークン デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン 上位階層のデザ イントークンを 再利⽤
38 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l
デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには
39 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l
デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには ⽬的とレベルを考慮した デザイントークンの定義 https://spectrum.adobe.com/page/design-tokens/
40 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l
デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには デザイントークン Web⽤のスタイル定義 iOS⽤のスタイル定義 アンドロイド⽤の スタイル定義 変換器 ビジネスドキュメント JSON / YAML / XML
41 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l
デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには デザイントークン Web⽤のスタイル定義 iOS⽤のスタイル定義 アンドロイド⽤の スタイル定義 変換器 ビジネスドキュメント JSON / YAML / XML 対象はソフトウェア だけではない︕
③利⽤できるツールの紹介
43 Figmaなどのデザインツール Style、 Component、 Varients、 Autolayout の活⽤ ※ Fixel Design
System
44 デザイントークン管理ツール アマゾンのStyle Dictionary SalesforceのTheo https://amzn.github.io/style-dictionary/#/ https://github.com/salesforce-ux/theo#overview
45 UXHub l Fixelのデザインシステム制作・運⽤ツール l デザイントークンの編集⇒UIコンポーネントへの反映できる l コードをいじるのではなく、GUIで編集と確認が可能
⑤デザイントークンからデザインシステムへ
47 今までやったこと UIコンポーネント ボタン テーブル ラベル ヘッダー ボタン テーブル ラベル
ヘッダー デザイントークン
48 今までやったこと UIコンポーネント ボタン テーブル ラベル ヘッダー ボタン テーブル ラベル
ヘッダー デザイントークン 作成時の 考え⽅などのメモ ついでに、これを やりましょう
49 今までやったこと UIコンポーネント ボタン テーブル ラベル ヘッダー ボタン テーブル ラベル
ヘッダー デザイントークン デザインプリンシプル デザインガイドライン 清書すると こうなる︕
50 デザインシステム 今までやったこと UIコンポーネント ボタン テーブル ラベル ヘッダー ボタン テーブル
ラベル ヘッダー デザイントークン デザインプリンシプル デザインガイドライン デザインシステム の出来上がり︕
⑦ラップアップ
今⽇の内容のサマリー l デザイントークンの活⽤でデザイナーとエンジニアのコラボレーションが円滑に l デザイントークンを利⽤するUIコンポーネントを作って、それを再利⽤することで⼯数削減、 品質向上︕ l デザイントークンは実装技術に依存しないことが望ましいが、まあ、最初は実装依存でも問 題ない。あまり無理しない。 l
デザイントークン管理と運⽤のルールやプロセスの検討が必要 l デザイントークンの管理はブランド管理 ⇒ ビジュアルデザインの課題はこれで対応可 l デザイントークンからデザインシステムへシームレスに移⾏しよう︕
53 参考までに、Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステムカスタマイズ • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック
• 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 + + https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
最後に l デザインシステムに興味があるデザイナーを募集しております。 l 周りに興味のありそうな⽅に、 是⾮ご紹介ください。 l 申し込みは弊社のウェブサイトから お願いします︕ https://fixel.co.jp/blog/recruit-20210929/
MAKE DESIGN EASY SIer/情シスのデザインパートナー Q&A
MAKE DESIGN EASY SIer/情シスのデザインパートナー ありがとうございました︕ アンケート記⼊のお願い