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 1つのソフトに適⽤し、それをテーマとして変更・展開して 複数のソフトに適⽤ 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 現在9割の案件がデザインシステムの納品となっている 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 そのツールにデザインが適切に適⽤されていれば問題は解決(7割︕) l 残りの3割はデザインガイドラインとデザイナーの⽀援で対応(これが現実的) 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/情シスのデザインパートナー ありがとうございました︕ アンケート記⼊のお願い