「情シス/SIer必見！デザインシステムを活用してデザインを課題から武器にする！」セミナー資料

2021年3月5日（金）15時に行ったセミナーの資料です。
#デザインシステム

Transcript

1. 『デザインシステム』で、 デザインを課題から武器に変える︕ SIer/情シス向け「ITとデザインは仲良し︕」シリーズ 第4回 2021/03/05
2. 2 今⽇のスピーカの紹介 2 ۚ ੒఩ 3PZ
   ,JN 69
   &OHJOFFS
   
   $&0
   PG
   'JYFM *OD 商社マン プログラマー ITコンサルタント/アーキテクト プロダクト オーナー アプリ開発者/システムアーキテクト UXデザイナー、サービスデザイナー グランスフィア株式会社 （現 GMOシステムコンサル ティング株式会社） 大林コーポレーション （株） BEA Japan Oracle Japan EMC Japan Agentec株式会社 NCデザイン＆コンサルティング 株式会社 （現 NCDC株式会社） Fixel株式会社 ΩϟϦΞ 5年 10年 10年
3. 3 今⽇のスピーカの紹介 3 ۚ ੒఩ 3PZ
   ,JN 69
   &OHJOFFS
   
   $&0
   PG
   'JYFM *OD 営業 テクノロジー デザイン 経営 ΩϟϦΞ 5年 10年 10年 ある程度は、俯瞰できます︕ ΩϟϦΞ
4. 対象︓ l Sierのエンジニア、プロジェクトマネージャー l 企業内の情シス、デザインチームの⽅ l ITプロジェクトに関わるITコンサルタント、デザイン会社の⽅ l ⾃社サービスを持っている組織の関係者 l その他、デザインやテクノロジーのコラボレーションに興味がる全ての⽅
5. 話す内容 l ITプロジェクトにおけるデザインの課題 l 「デザインシステム」の紹介 l UXHubを使った「デザインシステム」の作成と運⽤ l 「デザインシステム」が変えるITプロジェクトとデザインの新しい付き合い⽅
6. ITプロジェクトにおけるデザインの課題
7. プロセス定義の不在 l （⽇本の）ITがデザインを意識し始めたのは⽐較的に最近 l ウォーターフォール⼿法にも、アジャイル⼿法にも、デザインのことは触れていない 要件定義 基本設計 詳細設計 実装 テスト
8. プロセス定義の不在 l （⽇本の）ITがデザインを意識し始めたのは⽐較的に最近 l ウォーターフォール⼿法にも、アジャイル⼿法にも、デザインのことは触れていない 要件定義 基本設計 詳細設計 実装 テスト デザイン 現状︖
9. システム要件定義 UX要件に対する意識の不在 l (エクセルで作った)機能要件と⾮機能要件の⼀覧にはユーザーへの考慮はない l UX要件を考慮せずに作ったシステムのUXが良くなるのは不可能︕ 機能要件 ⾮機能要件
10. UX要件定義 システム要件定義 機能要件 ⾮機能要件 UX要件に対する意識の不在 l (エクセルで作った)機能要件と⾮機能要件の⼀覧にはユーザーへの考慮はない l UX要件を考慮せずに作ったシステムのUXが良くなるのは不可能︕
11. UX要件定義 システム要件定義 機能要件 ⾮機能要件 理想を描 いて、 それを 実現する︕ UX要件に対する意識の不在 l (エクセルで作った)機能要件と⾮機能要件の⼀覧にはユーザーへの考慮はない l UX要件を考慮せずに作ったシステムのUXが良くなるのは不可能︕
12. デザインを考慮したプロセス再定義が必要 UXデザイン X ウォーターフォールのプロセスの例 要件定義 基本設計 詳細設計 実装 テスト UXデザイン UIデザイン ビジュアル デザイン UXデザイン デザイン システム ※アジャイル手法とデザインの関係に対しては前回の資料を参照
13. デザイ ナー Handoverの課題 l デザインがデザイナーからエンジニアに渡され、実装される際に発⽣するコストと 品質低下の問題 よろしく︕ エンジ ニア 追加タスク （涙） CSS HTM L JavaScript React Vue.js PM 費⽤!! デザイン ガイド ライン
14. デザイ ナー 社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙 何で読んでく れないの︖ エンジ ニア 興味ないし PM 予算が⾜り ないよ デザイン ガイド ライン デザイン ガイド ライン デザイン ガイド ライン
15. デザイ ナー 社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙 何で読んでく れないの︖ エンジ ニア 興味ないし PM 予算が⾜り ないよ デザイン ガイド ライン デザイン ガイド ライン デザイン ガイド ライン UXデザインのUXがダメ︕
16. デザイ ナー 社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙 何で読んでく れないの︖ エンジ ニア 興味ないし PM 予算が⾜り ないよ デザイン ガイド ライン デザイン ガイド ライン デザイン ガイド ライン UXデザインのUXがダメ︕ デザインを課題にしてどうする︖
17. デザイ ナー 社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙 何で読んでく れないの︖ エンジ ニア 興味ないし PM 予算が⾜り ないよ デザイン ガイド ライン デザイン ガイド ライン デザイン ガイド ライン UXデザインのUXがダメ︕ デザインを課題にしてどうする︖ デザインを武器にしてあげれば︖ 課 題
18. デザインを武器にする 『デザインシステム』の紹介
19. 良いお知らせ︓デザインはシステムを学習中︕ Atomic Design Design System DesignOps CBD Library DevOps Component Based Development World of IT World of Design
20. 20 UIデザインを「コンポーネント単位」でとらえる “Atomic Design” という⼿法の登場 ※Atomic Designの提案者 Brad Frost⽒ UI要素を「原⼦・分⼦・有機体 …」といった物理世界を構成する 仕組みにならって構造化・部品化。 それらを階層的に組み合わせるこ とで、⼤きなコンポーネントや ページを作成する。
21. 21 l 画⾯要素を①原⼦ ②分⼦ ③有機体 ④テンプレート ⑤ページ の5段階で構成 l [原⼦ ➡ 分⼦ ➡ 有機体] の順でより具体的なUIコンポーネントになる l テンプレート ︓ 複数画⾯へ展開するためのページレイアウトの枠組み l ページ ︓ 具体的な内容が⼊った個別画⾯ Atomic Designの詳細
22. 22 ü デザイン上の構造と、コード上の構造を共通化できる ü デザインとコードを同じ粒度で再利⽤を進められる ü デザイン修正の影響範囲を把握しやすく、システムの機能追 加・改善に伴うデザインの迅速な変更が可能になる Atomic Designを⽤いるメリット ITにおけるコンポーネント、モジュールの考え⽅
23. 23 ü デザイン上の構造と、コード上の構造を共通化できる ü デザインとコードを同じ粒度で再利⽤を進められる ü デザイン修正の影響範囲を把握しやすく、システムの機能追 加・改善に伴うデザインの迅速な変更が可能になる Atomic Designを⽤いるメリット ITにおけるコンポーネント、モジュールの考え⽅ 再利⽤可能な部品の 数が増えると次は︖ カタログが欲しくなる︕
24. 24 新しいヒーローの登場 Design System
25. 25 デザインシステムとは デザインシステム デザインガイドライン UIコンポーネント （デザイン＆コード） 各種リソース Design System Gallery
26. 26 l 3rd party サービスプロバイダー向けのデザインガイド ラインを公開していたが、あまり効果がなかったのでデ ザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l 実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提 供 例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com
27. 27 l Bluemix、Watson向けのデザインシステム作成後、 全社向けのデザインシステムに発展 l SketchファイルによるUI Design KitとComponent Library Kitを提供 l Vanila.jsとReact.js、Vue.js、AngularJS向けの実装 を提供 例︓IBMのデザインシステム IBM Carbon Design System http://carbondesignsystem.com
28. 28 デザインガイドライン デザインシステムの構成要素の例 Lightning Design System Carbon Design System
29. 29 UIコンポーネント デザインシステムの構成要素の例 Lightning Design System Carbon Design System
30. 30 UIコンポーネント⼀覧 デザインシステムの構成要素の例 Lightning Design System Carbon Design System
31. 31 エンジニア向け利⽤ガイド デザインシステムの構成要素の例 Lightning Design System Carbon Design System
32. 32 デザイントークン デザインシステムの構成要素の例 Lightning Design System Carbon Design System
33. 33 Alibabaのデザインシステム その他のデザインシステム ANT Design System https://ant.design U.S. Web Design Standards https://standards.usa.gov アメリカの政府機関のデザインシステム
34. 34 Githubに公開されたデザインシステム⼀覧 デザインシステムの⼀覧 Awesome Design Systems https://github.com/alexpate/awesome-design-systems Adele https://adele.uxpin.com/ UXPinで運⽤するデザインシステム⼀覧 Adele https://adele.uxpin.com/
35. 35 l デザインと実装に必要な情報が⼀箇所に︕ l デザインの⽅針とその背景の考え⽅などの共有 ができるので、関係者全員がデザインに対して 共通の認識を持つことができる l デザインシステムのメリット︓ l デザイナー︓複数のデザイナーが⼀貫性のあるデザインを 効率よく作成できる l エンジニア︓コードの再利⽤によって開発⽣産性と実装の 品質が上がる l ビジネスパーソン︓デザインを具体化して管理できる資産 にする デザインシステムの価値 デザインシステム デザインガイドライン UIコンポーネント （デザイン＆コード） 各種リソース
36. 『UXHub』を使った 『デザインシステム』の作成と運⽤
37. 37 l 初期コストがかかる l デザインガイドの作成 l UIコンポーネントの洗い出しとコードの実装 l デザインシステム公開のためのサイト構築 l 継続的な運⽤が必要 l デザイナーとエンジニアで構成された専任のチームが必要 l デザインシステムの管理チームと個別プロジェクト間の配布とフィードバックのプロセス 定義が必要 デザインシステムの活⽤における課題 デザインシステムをスクラッチから作るのは難しい
38. 38 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
39. 39 Fixelにおけるデザインの捉え⽅ Patterns & Parameters
40. 40 Fixelの新しいアプローチ: デザインをパターンとパラメーターに分解して再利⽤する 40 変わらない部分：パターン • 画面作成に必要な画面要素（UIコンポーネント） • 各画面要素の挙動（テーブル、ボタン、バッヂ、入力フィル度など） • 画面レイアウト、ナビゲーション、ダイアログなど
41. 41 Fixelの新しいアプローチ: デザインをパターンとパラメーターに分解して再利⽤する 41 変わらない部分：パターン • 画面作成に必要な画面要素（UIコンポーネント） • 各画面要素の挙動（テーブル、ボタン、バッヂ、入力フィル度など） • 画面レイアウト、ナビゲーション、ダイアログなど
42. 42 Fixelの新しいアプローチ: デザインをパターンとパラメーターに分解して再利⽤する 42 変わる部分：パラメーター • 主にビジュアルデザインに関連する部分（色、フォント、アイコン、サイズなど） • トーンアンドマナー
43. 43 Fixelのデザインシステムの作成・運⽤⽀援サービス 43 UXHub デザインシステムプラットフォーム Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ ②パラメーターをGUIで編集する 機能を提供 ①パターンとパラメーターを 意識して作成された デザインシステム ③FDSとUXHub を⽤いて新しいデ ザインシステムを作成、 必要な画⾯要素の追加
44. 44 44 UXHubデモ画面 （資料には未添付）
45. 45 l デザインシステムを短期・低コストで導⼊可能 l ⾞輪の再発明を辞める l 各種ガイドの再利⽤ l UIコンポーネントのコードを再利⽤ l 画⾯レイアウトやナビゲーションなどのパターン化と再利⽤ l 独⾃性のあるデザインを簡単に⼊⼿ l デザイントークンを編集することで必要なデザインを作成 Fixelの取り組みのメリット デザインをシステム化して活⽤する
46. 『デザインシステム』が変える ITプロジェクトとデザインの新しい付き合い⽅
47. デザイ ナー 社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙 何で読んでく れないの︖ エンジ ニア 興味ないし PM 予算が⾜り ないよ デザイン ガイド ライン デザイン ガイド ライン デザイン ガイド ライン
48. デザイ ナー 社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙 何で読んでく れないの︖ エンジ ニア 興味ないし PM 予算が⾜り ないよ デザイン ガイド ライン デザイン ガイド ライン デザイン ガイド ライン デザインを課題にしてどうする︖
49. デザイ ナー 社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙 どうぞ、 ご⾃由に︕ エンジ ニア 再利⽤できる モジュール︕ PM ⽣産性向上で コスト低減︕ 💕 💕 エン ジニ ア デザインシステムチーム プロジェクト現場 デザインも （他社より） 良くなる︕
50. デザイ ナー 社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙 どうぞ、 ご⾃由に︕ エンジ ニア 再利⽤できる モジュール︕ PM ⽣産性向上で コスト低減︕ 💕 💕 エン ジニ ア デザインシステムチーム プロジェクト現場 デザインも 良くなる︕ デザインを課題から武器に変える 『デザインシステム』
51. 51 デザインシステムを媒体にしたコラボレーション デザイン システム ビジネス パーソン エンジニア デザイナー 機能追加・改善の際に、 判断の基準になる︕ デザイン資産の 価値を定量化できる 再利⽤できる部品が 揃っている︕ 企業活動におけるデザイン活⽤の基盤
52. 52 l 情シス l 社内システムを分かりやすく、使いやすくできる l システム間の使い勝⼿の⼀貫性を確保 l システム構築のコスト低減 l SIer l 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上（２５％以上） l ⼀貫性のあるデザインを⾼品質で提供することでお客様に対するサービス向上 l 他Sierに対する競争優位を占めることが可能になる l サービスプロバイダー l デザインの⼀貫性獲得によるブランド構築 l より迅速な改善・リリースが可能に l リリースを重ねてもデザインの⼀貫性や品質が落ちない l 今後のデザイントレンド変化に迅速に対応可能 各プレイヤーにおけるデザインシステムの価値
53. 53 l キャリア傘下のIT企業 l 独⾃パッケージ製品にデザインシステムを適⽤、７つのプロダクトの中から３つに対して適⽤済み。 l フロントエンド実装の標準化の⼀環として実装のリファクタリングも⾏う l 国内⼤⼿の保険会社 l 既存システムの統合・改善のプロジェクトでデザインシステム構築 l デザインの改善はもちろん、フロント実装のコスト削減・納期短縮 l 家電メーカー l 全社向けのデザインシステム構築後、事業部単位、プロダクト単位に展開中 l 法律関連サービスプロバイダー l デザインシステムで複数のサービス間のデザインの⼀貫性獲得 l フロントエンド実装の標準化とコスト低減 ⽇本における『デザインシステム』の導⼊状況（Fixelの⽀援事例を中⼼に）
54. 54 l キャリア傘下のIT企業 l 独⾃パッケージ製品にデザインシステムを適⽤、７つのプロダクトの中から３つに対して適⽤済み。 l フロントエンド実装の標準化の⼀環として実装のリファクタリングも⾏う l 国内⼤⼿の保険会社 l 既存システムの統合・改善のプロジェクトでデザインシステム構築 l デザインの改善はもちろん、フロント実装のコスト削減・納期短縮 l 家電メーカー l 全社向けのデザインシステム構築後、事業部単位、プロダクト単位に展開中 l 法律関連サービスプロバイダー l デザインシステムで複数のサービス間のデザインの⼀貫性獲得 l フロントエンド実装の標準化とコスト低減 ⽇本における『デザインシステム』の導⼊状況（Fixelの⽀援事例を中⼼に） 2020年から 『デザインシステム』の問い合わせが 急増中!!
55. 55 l 機能要件、⾮機能要件 ＋UX要件 l デザインのタスクと融合した、新しいITプロセスを定義 l デザインシステムを活⽤することでデザインを課題から武器に変える l デザインシステム作成と運⽤にはUXHubを使うのがベストプラクティス︕ まとめ
56. 56 l デザインシステムの作り⽅ l 新規システムの場合 l 既存システムの場合 l デザインシステムの運⽤と展開 l デザインシステムチーム内でのデザイナーとエンジニアのコラボレーション l デザインシステムチームとITプロジェクトチームのコラボレーション l デザインシステム X ITプロジェクト l デザインシステム X IT組織 l DesignOps + DevOps = ServiceOps 次回以降の内容（想定）
57. 最後に
58. 58 業務系のシステムこそ、最初の効果が出やすい︕ 品質 時間 初回UXデザインプロジェクトの 効果が最も⼤きい フェーズ#1 フェーズ#2 User eXperience
59. 59 参考書籍︓
60. 60 他のデザインシステム⽤のソリューション︓ https://www.invisionapp.com/design-system-manager https://www.uxpin.com/merge
61. MAKE DESIGN EASY ”Make Design Easy!” Logical Design n ⽬的と⽅針が明確で、定量 的に評価できるデザイン n 明確なロジックで構成され、 誰でも再現と拡張ができる デザイン Reusable Design n リリース時だけではなく、 プロダクトのライフサイク ル全般を⽀えられるデザイ ン n 他のプロダクトや企業全体 に展開できるデザイン Scalable Design n ⼤規模なシステム、迅速に成 ⻑するサービスを⽀えられる デザイン n デザイナーとエンジニアで構 成された⼤きい組織でも効率 的に活⽤できるデザイン
62. MAKE DESIGN EASY SIer/情シスのデザインパートナー Q&A
63. MAKE DESIGN EASY SIer/情シスのデザインパートナー ありがとうございました︕ アンケート記⼊のお願い