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

デザインシステムの活用でこんなにも変わる！
デザインシステムを活用した新しいプロセスのご提案

Transcript

1. デザインシステムの活⽤でこんなにも変わる︕ デザインシステムを活⽤した新しいプロセスのご提案 SIer/情シス向け「ITとデザインは仲良し︕」シリーズ 第6回 2021/09/16
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プロセス ③ デザインシステムの作成と運⽤における課題 ④ Fixelの提案するデザインシステムとの付き合い⽅ ⑤ デザインシステムの事例紹介 ⑥ ラップアップ
5. ① デザインシステムとは︖
6. デジタル庁の呟きが話題に︕ https://digital-gov.note.jp/n/n78f6a2f82e48
7. デジタル庁の⾔う、デザインシステムとは︖
8. デジタル庁が⾔う、デザインシステムの構成
9. デジタル庁が⾔う、デザインシステムの構成
10. デジタル庁様、 誠にありがとうございます︕
11. デジタル庁 Fixelが⾔う、デザインシステム https://speakerdeck.com/fixel_admin
12. Fixelが⾔う、デザインシステムの構成
13. Fixelが⾔う、デザインシステムの構成 ITの観点では、 これが結構⼤事︕
14. 14 デザインガイドライン デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
15. 15 UIコンポーネント デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
16. 16 UIコンポーネント⼀覧 デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
17. 17 エンジニア向け利⽤ガイド デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
18. 18 デザイントークン デザインシステムの構成要素の例 Lightning Design System Carbon Design System 前回の資料から抜粋
19. 19 デザインシステムの適⽤例 Salesforce Lightning Design System https://www.lightningdesignsystem.com 複数のサービスプロバイダーから 提供するUXを統⼀する⼿段として デザインシステムを活⽤
20. 20 デザインシステムの適⽤例 IBM Carbon Design System http://carbondesignsystem.com 全社レベルのデザインシステムを プロダクト単位にテーマを変えて 適⽤する
21. 21 デザインシステムの適⽤例 各国政府のデザインシステム アメリカ イギリス シンガポール
22. ②デザインシステムを含めたITプロセス
23. 23 再び、過去の資料から抜粋
24. 24 再び、過去の資料から抜粋 フロント実装の前に、デザイン システムが⽤意されていること が理想的
25. 25 担当 ビジネスモデル検証 デザイン・実装準備 実装 ビジネス デザイン デザイン ＆ テック テック 新規サービス（システム）作成時のプロセス① UXデザイン UIデザイン ビジュアルデザイン デザインシステム作成 開発基盤準備 フィジビリティテスト プロトタイプ作成 バックエンド開発 フロントエンド開発 ビジネスモデル作成・検証 デザインシステムを先に制作 してからフロント開発に⼊る l フロントエンドの開発までに時間がかかるが、その後のフロントエンド実装の効率化によって挽回 出来る。
26. 26 担当 ビジネスモデル検証 デザイン・実装準備 実装 ビジネス デザイン デザイン ＆ テック テック 新規サービス作成時のプロセス② UXデザイン UIデザイン ビジュアルデザイン デザインシステム作成 開発基盤準備 フィジビリティテスト プロトタイプ作成 バックエンド開発 フロントエンド開発 ビジネスモデル作成・検証 フロントエンドを実装しつつ、 デザインシステムを同時に作成 する l フロントエンドの開発の負荷が増えるが、将来の開発の効率化ができる
27. 27 担当 UX/UIデザイン改善 デザイン・実装準備 実装 ビジネス デザイン デザイン ＆ テック テック 既存サービス（システム）の改善時のプロセス UXデザイン UIデザイン ビジュアルデザイン デザインシステム作成 フロント実装の標準化 既存UI要素の分析 バックエンド開発 フロントエンド開発 改善の⽬的・KPIの検討 l 既存UI要素の分析から改善、標準化を⾏い、それをデザインシステムとしてまとめ、フロントエン ド開発に繋げる。開発効率が向上し、⻑期的な品質を維持できる基盤ができる
28. ③デザインシステム作成と運営における課題
29. 再び、デジタル庁の資料によると、
30. 再び、デジタル庁の資料によると、 どちらも、結構⼤きい企業ですよね
31. 31 担当 UX/UIデザイン改善 デザイン・実装準備 実装 ビジネス デザイン デザイン ＆ テック テック 既存サービス（システム）の改善時のプロセス UXデザイン UIデザイン ビジュアルデザイン デザインシステム作成 フロント実装の標準化 既存UI要素の分析 バックエンド開発 フロントエンド開発 改善の⽬的・KPIの検討 l 既存UI要素の分析から改善、標準化を⾏い、それをデザインシステムとしてまとめ、フロントエン ド開発に繋げる。開発効率が向上し、⻑期的な品質を維持できる基盤ができる このタスクの中を 覗いてみると…
32. 32 配布ツールの作成 デザインシステム作成と運⽤におけるハードル 成功事例の作成と共有 UIコンポーネント作成 デザインガイドライン 作成 デザイン改善と標準化 既存プロダクト分析 公開⽤サイト作成・運⽤ デザインシステム プロジェクト 提供 フィードバック デザインシステム作成 デザインシステム公開 デザインシステム運⽤ 更新 エバンジェリスト活動
33. 33 配布ツールの作成 デザインシステム作成と運⽤におけるハードル 成功事例の作成と共有 UIコンポーネント作成 デザインガイドライン 作成 デザイン改善と標準化 既存プロダクト分析 公開⽤サイト作成・運⽤ デザインシステム プロジェクト 提供 フィードバック デザインシステム作成 デザインシステム公開 デザインシステム運⽤ 更新 エバンジェリスト活動
34. 34 l 初期コストがかかる l デザインガイドラインの作成 l UIコンポーネントの洗い出しとコードの実装 l デザインシステム公開のためのサイト構築 l 既存のデザインと実装のプロセスを変える必要がある l 継続的な運⽤（更新）が必要 l デザイナーとエンジニアで構成された専任のチームが必要 l デザインシステムの管理チームと個別プロジェクト間の配布とフィードバックのプロセス 定義が必要 デザインシステムの活⽤における課題 デザインシステムをスクラッチから作るのは難しい 前回の資料から抜粋
35. ④Fixelの提案する デザインシステムとの付き合い⽅
36. 36 5年前からデザインシステムを作って来ていると、 いつも同じことを 繰り返している・ ・・
37. 37 怠けるための知恵を作り出す︕ テンプレートに して再利⽤しよう ︕ デザインシステムのテンプレート
38. 38 ⾞輪の再発明はやめる︕ 公開と運⽤のための 基盤と必要だね︕ デザインシステムのテンプレート デザインシステム 公開・運⽤基盤 権限管理 配布ツール コミュニケーション⽀援 版管理
39. 39 道具だけでは不⼗分︕ 知識の伝達と経験豊かな 専⾨家の⽀援も必要だね 。 デザインシステムのテンプレート デザインシステム 公開・運⽤基盤 権限管理 配布ツール コミュニケーション⽀援 版管理 プロフェッショナル サービス UX/UIデザイン ガイドライン作成 UIコンポーネント作成 運⽤⽀援
40. 40 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステムカスタマイズ • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo 前回の資料から抜粋
41. 41 配布ツールの作成 デザインシステム作成と運⽤におけるハードル 成功事例の作成と共有 UIコンポーネント作成 デザインガイドライン 作成 デザイン改善と標準化 既存プロダクト分析 公開⽤サイト作成・運⽤ デザインシステム プロジェクト 提供 フィードバック デザインシステム製作 デザインシステム公開 デザインシステム運⽤ 更新 エバンジェリスト活動
42. 42 カスタマイズ するだけ︕ Fixelのデザインシステム作成と運⽤に対する⽀援 プロジェクト 提供 フィードバック デザインシステム製作 デザインシステム公開 デザインシステム運⽤ 更新 既存プロダクト分析 独⾃ デザイン システム
43. 43 カスタマイズ するだけ︕ Fixelのデザインシステム作成と運⽤に対する⽀援 プロジェクト 提供 フィードバック デザインシステム製作 デザインシステム公開 デザインシステム運⽤ 更新 既存プロダクト分析 独⾃ デザイン システム
44. 44 demo オンラインデモ
45. 45 他のデザインシステム⽤のソリューション︓ https://www.invisionapp.com/design-system-manager https://www.uxpin.com/merge 前回の資料から抜粋
46. ⑤デザインシステムの事例紹介
47. 47 l コールセンターシステムのデザインシステム 作成 l 業務の特徴を考慮した複雑なUIコンポーネン トをデザインシステム制作チームから作成・ 提供 l 汎⽤的なUIコンポーネントと画⾯テンプレー トの提供と再利⽤ l メリット︓ l デザインシステム作成によるフロント実装 の品質向上及び⼯数低減 l 再利⽤可能なUI部品が管理できる資産とし て残る オリックス⽣命保険（完了）
48. 48 l B2Bサービスプロバイダ l 既存サービスのデザイン改善に伴い、デザインシステムを作 成して運⽤ l サービスの改修・機能追加の際に、デザインシステムのUIコ ンポーネントを再利⽤して⼯数低減及びデザインの⼀貫性維 持 l 新しいUI部品が必要な場合は、デザインシステムに追加後、 プロダクトに適⽤するプロセスを構築 l パッケージソフトベンダー l 複数の外注開発会社によって製作された複数のソフトのUIを 改善・統⼀する際にデザインシステムを作成 l フロント実装技術もUIコンポーネントを作成しながら標準化 l １つのソフトに適⽤し、それをテーマとして変更・展開して 複数のソフトに適⽤ l メリット︓ l 複数のソフト、⻑期に渡るデザインの⼀貫性を⼿に⼊れる B2Bサービスプロバイダ及びパッケージソフトベンダー（完了）
49. 49 l 全社規模のデザインシステムを作成中 l 企業全体のデザインシステムの定義から、事業 部、プロダクト単位のデザインシステムに展開 l 上位階層のデザインシステムを複製して下位階層のデザ インシステムを作成することで制作負荷を低減 l 上位階層のデザインシステムに変更してはいけない部分 を指定することで企業としてのブランドを維持する l 下位階層でのカスタマイズで独⾃性を出す l 上記プロセスに合わせた組織構造と作業プロセ スの定義が必要 l メリット︓ l 企業全体のブランド確⽴と維持が容易に ⼤⼿家電メーカー（進⾏中） デザイン システム デザイン システム デザイン システム デザイン システム デザイン システム デザイン システム 企業 事業部 プロダクト 事業部A 事業部B プロダクトA プロダクトB プロダクトC
50. 50 l 基盤になるデザインシステムを作成・維持 l 上記を引き継ぐ、顧客単位にカスタマイズし たデザインシステムを保持 l システム単位にカスタマイズしたデザインシ ステムを作成・使⽤ l ITプロジェクトにデザインシステムを導⼊に伴 う変更を加える必要がある l メリット︓最近のSierにおけるデザインに対す る課題に対応できる l UIデザインの底上げ l フロント実装の⼯数低減 中堅Sier（進⾏中） デザイン システム デザイン システム デザイン システム デザイン システム デザイン システム デザイン システム SIer 顧客 システム 顧客A 顧客B システムA システムB システムC
51. 51 l 5年前からデザインシステムに興味を持って、デザイン案件で活⽤ l 4年前から、UXHubを製作開始 l 顧客にデザインシステムの価値を説明すると少しの費⽤追加でデザインシステムの作 成まで頼まれる l それに全てのデザイン案件をデザインシステムの案件に変えて⾏く l 現在９割の案件がデザインシステムの納品となっている l 2020年中旬からデザインシステムをキーワードにした顧客からの問い合わせが増え た l デジタル庁からの追い⾵︓どんな効果があるのか︖ l 10⽉にUXHubの正式リリース予定︓4年間のベターをやっと外す︕ l 今ここ Fixelの現状
52. ⑥ラップアップ
53. 今⽇の内容のサマリー l デザインシステムはもう、当たり前の時代に︕ l スクラッチからデザイン・コーディングするのは、もうやめよう︕ l 今は、プロダクトの成⻑速度が早い l デザインチームが⼤きくなる l デザイナーとエンジニアの協業が⼤事になる l これらに対応するためのツールがデザインシステム l コードだけではなく、デザインも再利⽤しよう︕ l デザインシステムは、デザインのGithub l デザインシステムは、デザインを管理できる資産にする
54. 今⽇の内容のサマリー l デザインシステムを意識したプロセスを作り、適⽤しよう︕ l エンジニアにデザインを教えようと頑張ることは⾮効率 l エンジニアの仕事が捗るツールであれば、エンジニアは喜んで使ってくれる l そのツールにデザインが適切に適⽤されていれば問題は解決（７割︕） l 残りの３割はデザインガイドラインとデザイナーの⽀援で対応（これが現実的） l これをプロセスとして定義して適⽤する l SIerや情シスのデザインに対する課題への解決策がデザインシステム︕ l デザインに対するシステム的アプローチがデザインシステム l ぜひ、興味を持ってください︕
55. 最後に l デザインシステムに興味があるデザイナーやエンジニアを募集しております。 l 周りに興味のありそうな⽅に是⾮ご紹介ください。
56. MAKE DESIGN EASY SIer/情シスのデザインパートナー Q&A
57. MAKE DESIGN EASY SIer/情シスのデザインパートナー ありがとうございました︕ アンケート記⼊のお願い