SIer / 情シス向け「 IT とデザインは仲良し ！ 」シリーズ 第 ７ 回

デザイントークンのおすすめ なぜ大規模システム、急成長するサービスこそ デザイントークンに注目すべきか？

Transcript

1. デザインシステムまでは難しい︕という⽅のための デザイントークンのおすすめ SIer/情シス向け「ITとデザインは仲良し︕」シリーズ 第7回 2021/09/30
2. 2 今⽇のスピーカの紹介 2 ۚ ੒఩ 3PZ
   ,JN 69
   &OHJOFFS
   
   $&0
   PG
   'JYFM *OD 商社マン プログラマー ITコンサルタント/アーキテクト プロダクト オーナー アプリ開発者/システムアーキテクト UXデザイナー、サービスデザイナー グランスフィア株式会社 （現 GMOシステムコンサル ティング株式会社） ⼤林コーポレーション（株） BEA Japan Oracle Japan EMC Japan Agentec株式会社 NCデザイン＆コンサルティング 株式会社 Fixel株式会社 ΩϟϦΞ 5年 10年 11年
3. 3 今⽇のスピーカの紹介 3 ۚ ੒఩ 3PZ
   ,JN 69
   &OHJOFFS
   
   $&0
   PG
   'JYFM *OD 営業 テクノロジー デザイン 経営 ΩϟϦΞ 5年 10年 10年 ある程度は、俯瞰できます︕ ΩϟϦΞ
4. 今⽇話す内容 ① デザインとITの解決すべき課題 ② デザイントークンとは︖ ③ デザイントークンの価値と活⽤⽅法 ④ 利⽤できるツールの紹介 ⑤ ⼀歩先に︓デザイントークンからデザインシステムへ ⑥ ラップアップ
5. ① デザインとITの解決すべき課題
6. 6 ⼩さいシステム、またはプロダクトの初期 プロダクト エン エン デ ワンチーム
7. 7 デザインチーム ⼤きいチーム、そして成⻑したプロダクト 機能 デ 機能 機能 機能 機能 エン デ デ デ エンジニアチーム エン エン エンジニアチーム エンジニアチーム エン エン エン
8. 8 デザインチーム ⼤きいチーム、そして成⻑したプロダクト 機能 デ 機能 機能 機能 機能 エン デ デ デ エンジニアチーム エン エン エンジニアチーム エンジニアチーム エン エン エン コミュニケーション︕︕
9. 9 デザインチーム そこに出現した解決策︕ 機能 デ 機能 機能 機能 機能 エン デ デ デ エンジニアチーム エン エン エンジニアチーム エンジニアチーム エン エン エン デザイン システム
10. 10 デザインチーム そこに出現した解決策︕ 機能 デ 機能 機能 機能 機能 エン デ デ デ エンジニアチーム エン エン エンジニアチーム エンジニアチーム エン エン エン デザイン システム デザイン ガイドライン デザイン トークン UI コンポーネント
11. デジタル庁の呟きが話題に︕ https://digital-gov.note.jp/n/n78f6a2f82e48 前回の資料から抜粋
12. 12 デザインシステムの例 Salesforce Lightning Design System https://www.lightningdesignsystem.com 複数のサービスプロバイダーから 提供するUXを統⼀する⼿段として デザインシステムを活⽤ 前回の資料から抜粋
13. 13 デザインシステムの例 IBM Carbon Design System http://carbondesignsystem.com 全社レベルのデザインシステムを プロダクト単位にテーマを変えて 適⽤する 前回の資料から抜粋
14. 14 デザインシステムの適⽤例 各国政府のデザインシステム アメリカ イギリス シンガポール 前回の資料から抜粋
15. 15 デザインガイドライン デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
16. 16 デザイントークン デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
17. 17 UIコンポーネント デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
18. 18 デザインチーム 今⽇はデザイントークンについて話します 機能 デ 機能 機能 機能 機能 エン デ デ デ エンジニアチーム エン エン エンジニアチーム エンジニアチーム エン エン エン デザイン システム デザイン ガイドライン デザイン トークン UI コンポーネント 今⽇のフォーカ スはここ︕
19. ②デザイントークンとは︖
20. 20 デザイントークンの定義 デザイントークンは ビジュアルなデザインの最⼩構成要素 であり、ビジュアルデザイン属性を保存するための名前付き の要素である。 デザイントークンに⾊のhex値やスペースのPixelの値など、 ハードコードされる値を格納して使うことで、 UI開発にお けるスケーラブルで安定的なビジュアルシステムを維持する
21. 21 デザイントークンの定義 デザイントークンは デザインシステムを 構築して運⽤するために必要な全ての値で ある。例えばSpacing、Color、 typography、Object Styles、アニメーシ ョンなどで、データとして表現される。
22. 22 l ボタン デザイントークン︓分かりやすく説明 https://codepen.io/royskim/pen/VwpNPeR
23. 23 l ボタン デザイントークン︓分かりやすく説明 構成要素の定義 ビジュアル （⾒た⽬）の定義 処理内容の定義
24. 24 l ビジュアル要素を変数として分離したボタン︓SCSS採⽤ デザイントークン︓分かりやすく説明 https://codepen.io/royskim/pen/pXmGWg
25. 25 l 変数の値を変えることで⾒た⽬を変更したボタン デザイントークン︓分かりやすく説明 https://codepen.io/royskim/pen/WNjeZKy
26. 26 l ビジュアルの変更に必要な修正はごく制限的 デザイントークン︓分かりやすく説明 変更した部分
27. 27 l UIの構成要素からビジュアルな特徴を表す部分を分離 l その部分に名前をつけ、特定の値を設定 l その名前を使ってUI構成要素のビジュアルな特徴を適⽤する l 名前はそのまま、値を変える l その結果として画⾯のUI要素（ボタン）の⾒た⽬が変わる 今やったこと
28. 28 今やったこと l UIの構成要素であるボタンからビジュアルな特徴を表す部分を分離 l その部分に名前をつけ、特定の値を設定 l その名前を使ってUI構成要素のビジュアルな特徴を適⽤する l 名前はそのまま、値を変える l その結果として画⾯のUI要素（ボタン）の⾒た⽬が変わる デザイントークンは ビジュアルなデザインの最⼩構成要素 であり、ビジュアルデザイン属性を保存するための名前付き の要素である。 デザイントークンに⾊のhex値やスペースのPixelの値など、 ハードコードされる値を格納して使うことで、 UI開発にお けるスケーラブルで安定的なビジュアルシステムを維持する
29. 29 デザイナーさん向けの説明︓ デザイントークン＝Figmaのスタイル
30. 30 デザイントークンの活⽤の実例 l UXHubを使った、デザイントークンの変更によるビジュアル変更の例をデモ
31. ③デザイントークンの価値と活⽤⽅法
32. 32 デザイントークンの価値︓その１ l デザイントークンの値を変えるだけで、同じUI要素 の⾒た⽬を変えることができる l 同じ値のデザイントークンを各UI要素に適⽤するこ とでデザインの⼀貫性が⽣じる ボ タ ン ボタン ボタン ボタン トークン︓ ⻘ トークン︓ ⻘
33. 33 デザイントークンの価値︓その２ l デザイントークンを変えることで、そのデザイント ークンを使っている全てのUI要素の⾒た⽬が変わる l UIの⾒た⽬の修正が容易にできる ボ タ ン ボタン ボタン ボタン トークン︓ ⻘ トークン︓ 紫
34. 34 デザイントークンの価値︓その３ l デザインの⾒た⽬以外の部分の再利⽤が可能になる l つまり、コードの再利⽤が可能になる l UIコンポーネントの再利⽤によって、実装⼯数が 減り、実装品質が上がる︕ ボ タ ン ボタン ボタン トークン︓ ⻘ トークン︓ 紫 トークン︓ 円型
35. 35 UIコンポーネント デザイントークンはブランドそのもの︖ l UIコンポーネント（コード）はブランド中⽴的で、ブランドを跨って再利⽤さ れるもの l ブランドの定義は結局デザイントークンの定義 l デザイントークンの管理と展開がブランド戦略の実践となる︕ ボタン 企業サイト テーブル ラベル ヘッダー ボタン テーブル ラベル ヘッダー デザイントークン デザイントークン デザイントークン プロダクトA プロダクトB
36. 36 とある電機メーカーさんのブランド戦略 l 企業ブランドをデザイントークンとして定義し、事業部、プロダクト単位でカスタ マイズして適⽤することでブランド感⽣成 企業ブランド A事業部ブランド A1プロダクト ブランド B事業部ブランド C事業部ブランド A2プロダクト ブランド A3プロダクト ブランド C3プロダクト ブランド デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン 上位階層のデザ イントークンを 再利⽤
37. 37 SIerのデザイントークン活⽤ l 企業ブランドをデザイントークンとして定義し、事業部、プロダクト単位でカスタ マイズして適⽤することでブランド感⽣成 SIerのデザイントークン A顧客⽤トークン A1システム⽤ デザイントークン B顧客⽤トークン C顧客⽤トークン A2システム⽤ デザイントークン A3システム⽤ デザイントークン C1システム⽤ デザイントークン デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン カスタム デザイン トークン 上位階層のデザ イントークンを 再利⽤
38. 38 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには
39. 39 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには ⽬的とレベルを考慮した デザイントークンの定義 https://spectrum.adobe.com/page/design-tokens/
40. 40 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには デザイントークン Web⽤のスタイル定義 iOS⽤のスタイル定義 アンドロイド⽤の スタイル定義 変換器 ビジネスドキュメント JSON / YAML / XML
41. 41 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義 デザイントークンを最⼤利⽤するためには デザイントークン Web⽤のスタイル定義 iOS⽤のスタイル定義 アンドロイド⽤の スタイル定義 変換器 ビジネスドキュメント JSON / YAML / XML 対象はソフトウェア だけではない︕
42. ③利⽤できるツールの紹介
43. 43 Figmaなどのデザインツール Style、 Component、 Varients、 Autolayout の活⽤ ※ Fixel Design System
44. 44 デザイントークン管理ツール アマゾンのStyle Dictionary SalesforceのTheo https://amzn.github.io/style-dictionary/#/ https://github.com/salesforce-ux/theo#overview
45. 45 UXHub l Fixelのデザインシステム制作・運⽤ツール l デザイントークンの編集⇒UIコンポーネントへの反映できる l コードをいじるのではなく、GUIで編集と確認が可能
46. ⑤デザイントークンからデザインシステムへ
47. 47 今までやったこと UIコンポーネント ボタン テーブル ラベル ヘッダー ボタン テーブル ラベル ヘッダー デザイントークン
48. 48 今までやったこと UIコンポーネント ボタン テーブル ラベル ヘッダー ボタン テーブル ラベル ヘッダー デザイントークン 作成時の 考え⽅などのメモ ついでに、これを やりましょう
49. 49 今までやったこと UIコンポーネント ボタン テーブル ラベル ヘッダー ボタン テーブル ラベル ヘッダー デザイントークン デザインプリンシプル デザインガイドライン 清書すると こうなる︕
50. 50 デザインシステム 今までやったこと UIコンポーネント ボタン テーブル ラベル ヘッダー ボタン テーブル ラベル ヘッダー デザイントークン デザインプリンシプル デザインガイドライン デザインシステム の出来上がり︕
51. ⑦ラップアップ
52. 今⽇の内容のサマリー l デザイントークンの活⽤でデザイナーとエンジニアのコラボレーションが円滑に l デザイントークンを利⽤するUIコンポーネントを作って、それを再利⽤することで⼯数削減、 品質向上︕ l デザイントークンは実装技術に依存しないことが望ましいが、まあ、最初は実装依存でも問 題ない。あまり無理しない。 l デザイントークン管理と運⽤のルールやプロセスの検討が必要 l デザイントークンの管理はブランド管理 ⇒ ビジュアルデザインの課題はこれで対応可 l デザイントークンからデザインシステムへシームレスに移⾏しよう︕
53. 53 参考までに、Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステムカスタマイズ • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
54. 最後に l デザインシステムに興味があるデザイナーを募集しております。 l 周りに興味のありそうな⽅に、 是⾮ご紹介ください。 l 申し込みは弊社のウェブサイトから お願いします︕ https://fixel.co.jp/blog/recruit-20210929/
55. MAKE DESIGN EASY SIer/情シスのデザインパートナー Q&A
56. MAKE DESIGN EASY SIer/情シスのデザインパートナー ありがとうございました︕ アンケート記⼊のお願い