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

Slide 1

Slide 1 text

デザインシステムの活⽤でこんなにも変わる︕ デザインシステムを活⽤した新しいプロセスのご提案 SIer/情シス向け「ITとデザインは仲良し︕」シリーズ第6回 2021/09/16

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プロセス ③ デザインシステムの作成と運⽤における課題 ④ Fixelの提案するデザインシステムとの付き合い⽅ ⑤ デザインシステムの事例紹介 ⑥ ラップアップ

Slide 5

Slide 5 text

① デザインシステムとは︖

Slide 6

Slide 6 text

デジタル庁の呟きが話題に︕ https://digital-gov.note.jp/n/n78f6a2f82e48

Slide 7

Slide 7 text

デジタル庁の⾔う、デザインシステムとは︖

Slide 8

Slide 8 text

デジタル庁が⾔う、デザインシステムの構成

Slide 9

Slide 9 text

デジタル庁が⾔う、デザインシステムの構成

Slide 10

Slide 10 text

デジタル庁様、誠にありがとうございます︕

Slide 11

Slide 11 text

デジタル庁 Fixelが⾔う、デザインシステム https://speakerdeck.com/fixel_admin

Slide 12

Slide 12 text

Fixelが⾔う、デザインシステムの構成

Slide 13

Slide 13 text

Fixelが⾔う、デザインシステムの構成 ITの観点では、これが結構⼤事︕

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 エンジニア向け利⽤ガイドデザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 デザインシステムの適⽤例各国政府のデザインシステムアメリカイギリスシンガポール

Slide 22

Slide 22 text

②デザインシステムを含めたITプロセス

Slide 23

Slide 23 text

23 再び、過去の資料から抜粋

Slide 24

Slide 24 text

24 再び、過去の資料から抜粋フロント実装の前に、デザインシステムが⽤意されていることが理想的

Slide 25

Slide 25 text

25 担当ビジネスモデル検証デザイン・実装準備実装ビジネスデザインデザイン＆テックテック新規サービス（システム）作成時のプロセス① UXデザイン UIデザインビジュアルデザインデザインシステム作成開発基盤準備フィジビリティテストプロトタイプ作成バックエンド開発フロントエンド開発ビジネスモデル作成・検証デザインシステムを先に制作してからフロント開発に⼊る l フロントエンドの開発までに時間がかかるが、その後のフロントエンド実装の効率化によって挽回出来る。

Slide 26

Slide 26 text

26 担当ビジネスモデル検証デザイン・実装準備実装ビジネスデザインデザイン＆テックテック新規サービス作成時のプロセス② UXデザイン UIデザインビジュアルデザインデザインシステム作成開発基盤準備フィジビリティテストプロトタイプ作成バックエンド開発フロントエンド開発ビジネスモデル作成・検証フロントエンドを実装しつつ、デザインシステムを同時に作成する l フロントエンドの開発の負荷が増えるが、将来の開発の効率化ができる

Slide 27

Slide 27 text

27 担当 UX/UIデザイン改善デザイン・実装準備実装ビジネスデザインデザイン＆テックテック既存サービス（システム）の改善時のプロセス UXデザイン UIデザインビジュアルデザインデザインシステム作成フロント実装の標準化既存UI要素の分析バックエンド開発フロントエンド開発改善の⽬的・KPIの検討 l 既存UI要素の分析から改善、標準化を⾏い、それをデザインシステムとしてまとめ、フロントエンド開発に繋げる。開発効率が向上し、⻑期的な品質を維持できる基盤ができる

Slide 28

Slide 28 text

③デザインシステム作成と運営における課題

Slide 29

Slide 29 text

再び、デジタル庁の資料によると、

Slide 30

Slide 30 text

再び、デジタル庁の資料によると、どちらも、結構⼤きい企業ですよね

Slide 31

Slide 31 text

31 担当 UX/UIデザイン改善デザイン・実装準備実装ビジネスデザインデザイン＆テックテック既存サービス（システム）の改善時のプロセス UXデザイン UIデザインビジュアルデザインデザインシステム作成フロント実装の標準化既存UI要素の分析バックエンド開発フロントエンド開発改善の⽬的・KPIの検討 l 既存UI要素の分析から改善、標準化を⾏い、それをデザインシステムとしてまとめ、フロントエンド開発に繋げる。開発効率が向上し、⻑期的な品質を維持できる基盤ができるこのタスクの中を覗いてみると…

Slide 32

Slide 32 text

32 配布ツールの作成デザインシステム作成と運⽤におけるハードル成功事例の作成と共有 UIコンポーネント作成デザインガイドライン作成デザイン改善と標準化既存プロダクト分析公開⽤サイト作成・運⽤デザインシステムプロジェクト提供フィードバックデザインシステム作成デザインシステム公開デザインシステム運⽤更新エバンジェリスト活動

Slide 33

Slide 33 text

33 配布ツールの作成デザインシステム作成と運⽤におけるハードル成功事例の作成と共有 UIコンポーネント作成デザインガイドライン作成デザイン改善と標準化既存プロダクト分析公開⽤サイト作成・運⽤デザインシステムプロジェクト提供フィードバックデザインシステム作成デザインシステム公開デザインシステム運⽤更新エバンジェリスト活動

Slide 34

Slide 34 text

34 l 初期コストがかかる l デザインガイドラインの作成 l UIコンポーネントの洗い出しとコードの実装 l デザインシステム公開のためのサイト構築 l 既存のデザインと実装のプロセスを変える必要がある l 継続的な運⽤（更新）が必要 l デザイナーとエンジニアで構成された専任のチームが必要 l デザインシステムの管理チームと個別プロジェクト間の配布とフィードバックのプロセス定義が必要デザインシステムの活⽤における課題デザインシステムをスクラッチから作るのは難しい前回の資料から抜粋

Slide 35

Slide 35 text

④Fixelの提案するデザインシステムとの付き合い⽅

Slide 36

Slide 36 text

36 5年前からデザインシステムを作って来ていると、いつも同じことを繰り返している・・・

Slide 37

Slide 37 text

37 怠けるための知恵を作り出す︕ テンプレートにして再利⽤しよう ︕ デザインシステムのテンプレート

Slide 38

Slide 38 text

38 ⾞輪の再発明はやめる︕ 公開と運⽤のための基盤と必要だね︕ デザインシステムのテンプレートデザインシステム公開・運⽤基盤権限管理配布ツールコミュニケーション⽀援版管理

Slide 39

Slide 39 text

39 道具だけでは不⼗分︕ 知識の伝達と経験豊かな専⾨家の⽀援も必要だね。デザインシステムのテンプレートデザインシステム公開・運⽤基盤権限管理配布ツールコミュニケーション⽀援版管理プロフェッショナルサービス UX/UIデザインガイドライン作成 UIコンポーネント作成運⽤⽀援

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

41 配布ツールの作成デザインシステム作成と運⽤におけるハードル成功事例の作成と共有 UIコンポーネント作成デザインガイドライン作成デザイン改善と標準化既存プロダクト分析公開⽤サイト作成・運⽤デザインシステムプロジェクト提供フィードバックデザインシステム製作デザインシステム公開デザインシステム運⽤更新エバンジェリスト活動

Slide 42

Slide 42 text

42 カスタマイズするだけ︕ Fixelのデザインシステム作成と運⽤に対する⽀援プロジェクト提供フィードバックデザインシステム製作デザインシステム公開デザインシステム運⽤更新既存プロダクト分析独⾃デザインシステム

Slide 43

Slide 43 text

43 カスタマイズするだけ︕ Fixelのデザインシステム作成と運⽤に対する⽀援プロジェクト提供フィードバックデザインシステム製作デザインシステム公開デザインシステム運⽤更新既存プロダクト分析独⾃デザインシステム

Slide 44

Slide 44 text

44 demo オンラインデモ

Slide 45

Slide 45 text

45 他のデザインシステム⽤のソリューション︓ https://www.invisionapp.com/design-system-manager https://www.uxpin.com/merge 前回の資料から抜粋

Slide 46

Slide 46 text

⑤デザインシステムの事例紹介

Slide 47

Slide 47 text

47 l コールセンターシステムのデザインシステム作成 l 業務の特徴を考慮した複雑なUIコンポーネントをデザインシステム制作チームから作成・提供 l 汎⽤的なUIコンポーネントと画⾯テンプレートの提供と再利⽤ l メリット︓ l デザインシステム作成によるフロント実装の品質向上及び⼯数低減 l 再利⽤可能なUI部品が管理できる資産として残るオリックス⽣命保険（完了）

Slide 48

Slide 48 text

48 l B2Bサービスプロバイダ l 既存サービスのデザイン改善に伴い、デザインシステムを作成して運⽤ l サービスの改修・機能追加の際に、デザインシステムのUIコンポーネントを再利⽤して⼯数低減及びデザインの⼀貫性維持 l 新しいUI部品が必要な場合は、デザインシステムに追加後、プロダクトに適⽤するプロセスを構築 l パッケージソフトベンダー l 複数の外注開発会社によって製作された複数のソフトのUIを改善・統⼀する際にデザインシステムを作成 l フロント実装技術もUIコンポーネントを作成しながら標準化 l １つのソフトに適⽤し、それをテーマとして変更・展開して複数のソフトに適⽤ l メリット︓ l 複数のソフト、⻑期に渡るデザインの⼀貫性を⼿に⼊れる B2Bサービスプロバイダ及びパッケージソフトベンダー（完了）

Slide 49

Slide 49 text

49 l 全社規模のデザインシステムを作成中 l 企業全体のデザインシステムの定義から、事業部、プロダクト単位のデザインシステムに展開 l 上位階層のデザインシステムを複製して下位階層のデザインシステムを作成することで制作負荷を低減 l 上位階層のデザインシステムに変更してはいけない部分を指定することで企業としてのブランドを維持する l 下位階層でのカスタマイズで独⾃性を出す l 上記プロセスに合わせた組織構造と作業プロセスの定義が必要 l メリット︓ l 企業全体のブランド確⽴と維持が容易に⼤⼿家電メーカー（進⾏中）デザインシステムデザインシステムデザインシステムデザインシステムデザインシステムデザインシステム企業事業部プロダクト事業部A 事業部B プロダクトA プロダクトB プロダクトC

Slide 50

Slide 50 text

50 l 基盤になるデザインシステムを作成・維持 l 上記を引き継ぐ、顧客単位にカスタマイズしたデザインシステムを保持 l システム単位にカスタマイズしたデザインシステムを作成・使⽤ l ITプロジェクトにデザインシステムを導⼊に伴う変更を加える必要がある l メリット︓最近のSierにおけるデザインに対する課題に対応できる l UIデザインの底上げ l フロント実装の⼯数低減中堅Sier（進⾏中）デザインシステムデザインシステムデザインシステムデザインシステムデザインシステムデザインシステム SIer 顧客システム顧客A 顧客B システムA システムB システムC

Slide 51

Slide 51 text

51 l 5年前からデザインシステムに興味を持って、デザイン案件で活⽤ l 4年前から、UXHubを製作開始 l 顧客にデザインシステムの価値を説明すると少しの費⽤追加でデザインシステムの作成まで頼まれる l それに全てのデザイン案件をデザインシステムの案件に変えて⾏く l 現在９割の案件がデザインシステムの納品となっている l 2020年中旬からデザインシステムをキーワードにした顧客からの問い合わせが増えた l デジタル庁からの追い⾵︓どんな効果があるのか︖ l 10⽉にUXHubの正式リリース予定︓4年間のベターをやっと外す︕ l 今ここ Fixelの現状

Slide 52

Slide 52 text

⑥ラップアップ

Slide 53

Slide 53 text

今⽇の内容のサマリー l デザインシステムはもう、当たり前の時代に︕ l スクラッチからデザイン・コーディングするのは、もうやめよう︕ l 今は、プロダクトの成⻑速度が早い l デザインチームが⼤きくなる l デザイナーとエンジニアの協業が⼤事になる l これらに対応するためのツールがデザインシステム l コードだけではなく、デザインも再利⽤しよう︕ l デザインシステムは、デザインのGithub l デザインシステムは、デザインを管理できる資産にする

Slide 54

Slide 54 text

今⽇の内容のサマリー l デザインシステムを意識したプロセスを作り、適⽤しよう︕ l エンジニアにデザインを教えようと頑張ることは⾮効率 l エンジニアの仕事が捗るツールであれば、エンジニアは喜んで使ってくれる l そのツールにデザインが適切に適⽤されていれば問題は解決（７割︕） l 残りの３割はデザインガイドラインとデザイナーの⽀援で対応（これが現実的） l これをプロセスとして定義して適⽤する l SIerや情シスのデザインに対する課題への解決策がデザインシステム︕ l デザインに対するシステム的アプローチがデザインシステム l ぜひ、興味を持ってください︕

Slide 55

Slide 55 text

最後に l デザインシステムに興味があるデザイナーやエンジニアを募集しております。 l 周りに興味のありそうな⽅に是⾮ご紹介ください。

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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