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

Slide 1

Slide 1 text

デザインシステムまでは難しい︕という⽅のためのデザイントークンのおすすめ SIer/情シス向け「ITとデザインは仲良し︕」シリーズ第7回 2021/09/30

Slide 2

Slide 2 text

2 今⽇のスピーカの紹介 2 ۚ ੒఩ 3PZ,JN 69&OHJOFFS$&0PG'JYFM *OD 商社マンプログラマー ITコンサルタント/アーキテクトプロダクトオーナーアプリ開発者/システムアーキテクト UXデザイナー、サービスデザイナーグランスフィア株式会社（現 GMOシステムコンサルティング株式会社）⼤林コーポレーション（株） BEA Japan Oracle Japan EMC Japan Agentec株式会社 NCデザイン＆コンサルティング株式会社 Fixel株式会社 ΩϟϦΞ 5年 10年 11年

Slide 3

Slide 3 text

3 今⽇のスピーカの紹介 3 ۚ ੒఩ 3PZ,JN 69&OHJOFFS$&0PG'JYFM *OD 営業テクノロジーデザイン経営 ΩϟϦΞ 5年 10年 10年ある程度は、俯瞰できます︕ ΩϟϦΞ

Slide 4

Slide 4 text

今⽇話す内容 ① デザインとITの解決すべき課題 ② デザイントークンとは︖ ③ デザイントークンの価値と活⽤⽅法 ④ 利⽤できるツールの紹介 ⑤ ⼀歩先に︓デザイントークンからデザインシステムへ ⑥ ラップアップ

Slide 5

Slide 5 text

① デザインとITの解決すべき課題

Slide 6

Slide 6 text

6 ⼩さいシステム、またはプロダクトの初期プロダクトエンエンデワンチーム

Slide 7

Slide 7 text

7 デザインチーム⼤きいチーム、そして成⻑したプロダクト機能デ機能機能機能機能エンデデデエンジニアチームエンエンエンジニアチームエンジニアチームエンエンエン

Slide 8

Slide 8 text

8 デザインチーム⼤きいチーム、そして成⻑したプロダクト機能デ機能機能機能機能エンデデデエンジニアチームエンエンエンジニアチームエンジニアチームエンエンエンコミュニケーション︕︕

Slide 9

Slide 9 text

9 デザインチームそこに出現した解決策︕ 機能デ機能機能機能機能エンデデデエンジニアチームエンエンエンジニアチームエンジニアチームエンエンエンデザインシステム

Slide 10

Slide 10 text

10 デザインチームそこに出現した解決策︕ 機能デ機能機能機能機能エンデデデエンジニアチームエンエンエンジニアチームエンジニアチームエンエンエンデザインシステムデザインガイドラインデザイントークン UI コンポーネント

Slide 11

Slide 11 text

デジタル庁の呟きが話題に︕ https://digital-gov.note.jp/n/n78f6a2f82e48 前回の資料から抜粋

Slide 12

Slide 12 text

12 デザインシステムの例 Salesforce Lightning Design System https://www.lightningdesignsystem.com 複数のサービスプロバイダーから提供するUXを統⼀する⼿段としてデザインシステムを活⽤前回の資料から抜粋

Slide 13

Slide 13 text

13 デザインシステムの例 IBM Carbon Design System http://carbondesignsystem.com 全社レベルのデザインシステムをプロダクト単位にテーマを変えて適⽤する前回の資料から抜粋

Slide 14

Slide 14 text

14 デザインシステムの適⽤例各国政府のデザインシステムアメリカイギリスシンガポール前回の資料から抜粋

Slide 15

Slide 15 text

15 デザインガイドラインデザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋

Slide 16

Slide 16 text

16 デザイントークンデザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋

Slide 17

Slide 17 text

17 UIコンポーネントデザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋

Slide 18

Slide 18 text

18 デザインチーム今⽇はデザイントークンについて話します機能デ機能機能機能機能エンデデデエンジニアチームエンエンエンジニアチームエンジニアチームエンエンエンデザインシステムデザインガイドラインデザイントークン UI コンポーネント今⽇のフォーカスはここ︕

Slide 19

Slide 19 text

②デザイントークンとは︖

Slide 20

Slide 20 text

20 デザイントークンの定義デザイントークンはビジュアルなデザインの最⼩構成要素であり、ビジュアルデザイン属性を保存するための名前付きの要素である。デザイントークンに⾊のhex値やスペースのPixelの値など、ハードコードされる値を格納して使うことで、 UI開発におけるスケーラブルで安定的なビジュアルシステムを維持する

Slide 21

Slide 21 text

21 デザイントークンの定義デザイントークンはデザインシステムを構築して運⽤するために必要な全ての値である。例えばSpacing、Color、 typography、Object Styles、アニメーションなどで、データとして表現される。

Slide 22

Slide 22 text

22 l ボタンデザイントークン︓分かりやすく説明 https://codepen.io/royskim/pen/VwpNPeR

Slide 23

Slide 23 text

23 l ボタンデザイントークン︓分かりやすく説明構成要素の定義ビジュアル（⾒た⽬）の定義処理内容の定義

Slide 24

Slide 24 text

24 l ビジュアル要素を変数として分離したボタン︓SCSS採⽤デザイントークン︓分かりやすく説明 https://codepen.io/royskim/pen/pXmGWg

Slide 25

Slide 25 text

25 l 変数の値を変えることで⾒た⽬を変更したボタンデザイントークン︓分かりやすく説明 https://codepen.io/royskim/pen/WNjeZKy

Slide 26

Slide 26 text

26 l ビジュアルの変更に必要な修正はごく制限的デザイントークン︓分かりやすく説明変更した部分

Slide 27

Slide 27 text

27 l UIの構成要素からビジュアルな特徴を表す部分を分離 l その部分に名前をつけ、特定の値を設定 l その名前を使ってUI構成要素のビジュアルな特徴を適⽤する l 名前はそのまま、値を変える l その結果として画⾯のUI要素（ボタン）の⾒た⽬が変わる今やったこと

Slide 28

Slide 28 text

28 今やったこと l UIの構成要素であるボタンからビジュアルな特徴を表す部分を分離 l その部分に名前をつけ、特定の値を設定 l その名前を使ってUI構成要素のビジュアルな特徴を適⽤する l 名前はそのまま、値を変える l その結果として画⾯のUI要素（ボタン）の⾒た⽬が変わるデザイントークンはビジュアルなデザインの最⼩構成要素であり、ビジュアルデザイン属性を保存するための名前付きの要素である。デザイントークンに⾊のhex値やスペースのPixelの値など、ハードコードされる値を格納して使うことで、 UI開発におけるスケーラブルで安定的なビジュアルシステムを維持する

Slide 29

Slide 29 text

29 デザイナーさん向けの説明︓ デザイントークン＝Figmaのスタイル

Slide 30

Slide 30 text

30 デザイントークンの活⽤の実例 l UXHubを使った、デザイントークンの変更によるビジュアル変更の例をデモ

Slide 31

Slide 31 text

③デザイントークンの価値と活⽤⽅法

Slide 32

Slide 32 text

32 デザイントークンの価値︓その１ l デザイントークンの値を変えるだけで、同じUI要素の⾒た⽬を変えることができる l 同じ値のデザイントークンを各UI要素に適⽤することでデザインの⼀貫性が⽣じるボタンボタンボタンボタントークン︓ ⻘トークン︓ ⻘

Slide 33

Slide 33 text

33 デザイントークンの価値︓その２ l デザイントークンを変えることで、そのデザイントークンを使っている全てのUI要素の⾒た⽬が変わる l UIの⾒た⽬の修正が容易にできるボタンボタンボタンボタントークン︓ ⻘トークン︓ 紫

Slide 34

Slide 34 text

34 デザイントークンの価値︓その３ l デザインの⾒た⽬以外の部分の再利⽤が可能になる l つまり、コードの再利⽤が可能になる l UIコンポーネントの再利⽤によって、実装⼯数が減り、実装品質が上がる︕ ボタンボタンボタントークン︓ ⻘トークン︓ 紫トークン︓ 円型

Slide 35

Slide 35 text

35 UIコンポーネントデザイントークンはブランドそのもの︖ l UIコンポーネント（コード）はブランド中⽴的で、ブランドを跨って再利⽤されるもの l ブランドの定義は結局デザイントークンの定義 l デザイントークンの管理と展開がブランド戦略の実践となる︕ ボタン企業サイトテーブルラベルヘッダーボタンテーブルラベルヘッダーデザイントークンデザイントークンデザイントークンプロダクトA プロダクトB

Slide 36

Slide 36 text

36 とある電機メーカーさんのブランド戦略 l 企業ブランドをデザイントークンとして定義し、事業部、プロダクト単位でカスタマイズして適⽤することでブランド感⽣成企業ブランド A事業部ブランド A1プロダクトブランド B事業部ブランド C事業部ブランド A2プロダクトブランド A3プロダクトブランド C3プロダクトブランドデザイントークンカスタムデザイントークンカスタムデザイントークンカスタムデザイントークンカスタムデザイントークンカスタムデザイントークンカスタムデザイントークンカスタムデザイントークン上位階層のデザイントークンを再利⽤

Slide 37

Slide 37 text

37 SIerのデザイントークン活⽤ l 企業ブランドをデザイントークンとして定義し、事業部、プロダクト単位でカスタマイズして適⽤することでブランド感⽣成 SIerのデザイントークン A顧客⽤トークン A1システム⽤デザイントークン B顧客⽤トークン C顧客⽤トークン A2システム⽤デザイントークン A3システム⽤デザイントークン C1システム⽤デザイントークンデザイントークンカスタムデザイントークンカスタムデザイントークンカスタムデザイントークンカスタムデザイントークンカスタムデザイントークンカスタムデザイントークンカスタムデザイントークン上位階層のデザイントークンを再利⽤

Slide 38

Slide 38 text

38 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義デザイントークンを最⼤利⽤するためには

Slide 39

Slide 39 text

39 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義デザイントークンを最⼤利⽤するためには⽬的とレベルを考慮したデザイントークンの定義 https://spectrum.adobe.com/page/design-tokens/

Slide 40

Slide 40 text

40 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義デザイントークンを最⼤利⽤するためにはデザイントークン Web⽤のスタイル定義 iOS⽤のスタイル定義アンドロイド⽤のスタイル定義変換器ビジネスドキュメント JSON / YAML / XML

Slide 41

Slide 41 text

41 l デザイントークンの定義 l デザイントークンの体系化 l デザイントークンの共有 l デザイントークンの管理プロセスを定義 l デザイントークンを利⽤するUIコンポーネントを実装・利⽤ l 実装技術に依存しないデザイントークンの定義デザイントークンを最⼤利⽤するためにはデザイントークン Web⽤のスタイル定義 iOS⽤のスタイル定義アンドロイド⽤のスタイル定義変換器ビジネスドキュメント JSON / YAML / XML 対象はソフトウェアだけではない︕

Slide 42

Slide 42 text

③利⽤できるツールの紹介

Slide 43

Slide 43 text

43 Figmaなどのデザインツール Style、 Component、 Varients、 Autolayout の活⽤ ※ Fixel Design System

Slide 44

Slide 44 text

44 デザイントークン管理ツールアマゾンのStyle Dictionary SalesforceのTheo https://amzn.github.io/style-dictionary/#/ https://github.com/salesforce-ux/theo#overview

Slide 45

Slide 45 text

45 UXHub l Fixelのデザインシステム制作・運⽤ツール l デザイントークンの編集⇒UIコンポーネントへの反映できる l コードをいじるのではなく、GUIで編集と確認が可能

Slide 46

Slide 46 text

⑤デザイントークンからデザインシステムへ

Slide 47

Slide 47 text

47 今までやったこと UIコンポーネントボタンテーブルラベルヘッダーボタンテーブルラベルヘッダーデザイントークン

Slide 48

Slide 48 text

48 今までやったこと UIコンポーネントボタンテーブルラベルヘッダーボタンテーブルラベルヘッダーデザイントークン作成時の考え⽅などのメモついでに、これをやりましょう

Slide 49

Slide 49 text

49 今までやったこと UIコンポーネントボタンテーブルラベルヘッダーボタンテーブルラベルヘッダーデザイントークンデザインプリンシプルデザインガイドライン清書するとこうなる︕

Slide 50

Slide 50 text

50 デザインシステム今までやったこと UIコンポーネントボタンテーブルラベルヘッダーボタンテーブルラベルヘッダーデザイントークンデザインプリンシプルデザインガイドラインデザインシステムの出来上がり︕

Slide 51

Slide 51 text

⑦ラップアップ

Slide 52

Slide 52 text

今⽇の内容のサマリー l デザイントークンの活⽤でデザイナーとエンジニアのコラボレーションが円滑に l デザイントークンを利⽤するUIコンポーネントを作って、それを再利⽤することで⼯数削減、品質向上︕ l デザイントークンは実装技術に依存しないことが望ましいが、まあ、最初は実装依存でも問題ない。あまり無理しない。 l デザイントークン管理と運⽤のルールやプロセスの検討が必要 l デザイントークンの管理はブランド管理 ⇒ ビジュアルデザインの課題はこれで対応可 l デザイントークンからデザインシステムへシームレスに移⾏しよう︕

Slide 53

Slide 53 text

53 参考までに、Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステムカスタマイズ • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃っている • 複製&カスタマイズすることで新しいデザインシステムを瞬時作成可能 Fixel Design System 業務システム向け汎用的デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用低減・工期短縮プロフェッショナルサービスデザインシステム作成・運用支援＋＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo

Slide 54

Slide 54 text

最後に l デザインシステムに興味があるデザイナーを募集しております。 l 周りに興味のありそうな⽅に、是⾮ご紹介ください。 l 申し込みは弊社のウェブサイトからお願いします︕ https://fixel.co.jp/blog/recruit-20210929/

Slide 55

Slide 55 text

MAKE DESIGN EASY SIer/情シスのデザインパートナー Q&A

Slide 56

Slide 56 text

MAKE DESIGN EASY SIer/情シスのデザインパートナーありがとうございました︕ アンケート記⼊のお願い