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

Slide 1

Slide 1 text

『デザインシステム』で、デザインを課題から武器に変える︕ SIer/情シス向け「ITとデザインは仲良し︕」シリーズ第4回 2021/03/05

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デザイン＆コンサルティング株式会社（現 NCDC株式会社） Fixel株式会社 ΩϟϦΞ 5年 10年 10年

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

対象︓ l Sierのエンジニア、プロジェクトマネージャー l 企業内の情シス、デザインチームの⽅ l ITプロジェクトに関わるITコンサルタント、デザイン会社の⽅ l ⾃社サービスを持っている組織の関係者 l その他、デザインやテクノロジーのコラボレーションに興味がる全ての⽅

Slide 5

Slide 5 text

話す内容 l ITプロジェクトにおけるデザインの課題 l 「デザインシステム」の紹介 l UXHubを使った「デザインシステム」の作成と運⽤ l 「デザインシステム」が変えるITプロジェクトとデザインの新しい付き合い⽅

Slide 6

Slide 6 text

ITプロジェクトにおけるデザインの課題

Slide 7

Slide 7 text

プロセス定義の不在 l （⽇本の）ITがデザインを意識し始めたのは⽐較的に最近 l ウォーターフォール⼿法にも、アジャイル⼿法にも、デザインのことは触れていない要件定義基本設計詳細設計実装テスト

Slide 8

Slide 8 text

プロセス定義の不在 l （⽇本の）ITがデザインを意識し始めたのは⽐較的に最近 l ウォーターフォール⼿法にも、アジャイル⼿法にも、デザインのことは触れていない要件定義基本設計詳細設計実装テストデザイン現状︖

Slide 9

Slide 9 text

システム要件定義 UX要件に対する意識の不在 l (エクセルで作った)機能要件と⾮機能要件の⼀覧にはユーザーへの考慮はない l UX要件を考慮せずに作ったシステムのUXが良くなるのは不可能︕ 機能要件⾮機能要件

Slide 10

Slide 10 text

UX要件定義システム要件定義機能要件⾮機能要件 UX要件に対する意識の不在 l (エクセルで作った)機能要件と⾮機能要件の⼀覧にはユーザーへの考慮はない l UX要件を考慮せずに作ったシステムのUXが良くなるのは不可能︕

Slide 11

Slide 11 text

UX要件定義システム要件定義機能要件⾮機能要件理想を描いて、それを実現する︕ UX要件に対する意識の不在 l (エクセルで作った)機能要件と⾮機能要件の⼀覧にはユーザーへの考慮はない l UX要件を考慮せずに作ったシステムのUXが良くなるのは不可能︕

Slide 12

Slide 12 text

デザインを考慮したプロセス再定義が必要 UXデザイン X ウォーターフォールのプロセスの例要件定義基本設計詳細設計実装テスト UXデザイン UIデザインビジュアルデザイン UXデザインデザインシステム ※アジャイル手法とデザインの関係に対しては前回の資料を参照

Slide 13

Slide 13 text

デザイナー Handoverの課題 l デザインがデザイナーからエンジニアに渡され、実装される際に発⽣するコストと品質低下の問題よろしく︕ エンジニア追加タスク（涙） CSS HTM L JavaScript React Vue.js PM 費⽤!! デザインガイドライン

Slide 14

Slide 14 text

デザイナー社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙何で読んでくれないの︖ エンジニア興味ないし PM 予算が⾜りないよデザインガイドラインデザインガイドラインデザインガイドライン

Slide 15

Slide 15 text

デザイナー社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙何で読んでくれないの︖ エンジニア興味ないし PM 予算が⾜りないよデザインガイドラインデザインガイドラインデザインガイドライン UXデザインのUXがダメ︕

Slide 16

Slide 16 text

デザイナー社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙何で読んでくれないの︖ エンジニア興味ないし PM 予算が⾜りないよデザインガイドラインデザインガイドラインデザインガイドライン UXデザインのUXがダメ︕ デザインを課題にしてどうする︖

Slide 17

Slide 17 text

デザイナー社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙何で読んでくれないの︖ エンジニア興味ないし PM 予算が⾜りないよデザインガイドラインデザインガイドラインデザインガイドライン UXデザインのUXがダメ︕ デザインを課題にしてどうする︖ デザインを武器にしてあげれば︖ 課題

Slide 18

Slide 18 text

デザインを武器にする『デザインシステム』の紹介

Slide 19

Slide 19 text

良いお知らせ︓デザインはシステムを学習中︕ Atomic Design Design System DesignOps CBD Library DevOps Component Based Development World of IT World of Design

Slide 20

Slide 20 text

20 UIデザインを「コンポーネント単位」でとらえる “Atomic Design” という⼿法の登場 ※Atomic Designの提案者 Brad Frost⽒ UI要素を「原⼦・分⼦・有機体 …」といった物理世界を構成する仕組みにならって構造化・部品化。それらを階層的に組み合わせることで、⼤きなコンポーネントやページを作成する。

Slide 21

Slide 21 text

21 l 画⾯要素を①原⼦ ②分⼦ ③有機体 ④テンプレート ⑤ページの5段階で構成 l [原⼦ ➡ 分⼦ ➡ 有機体] の順でより具体的なUIコンポーネントになる l テンプレート ︓ 複数画⾯へ展開するためのページレイアウトの枠組み l ページ ︓ 具体的な内容が⼊った個別画⾯ Atomic Designの詳細

Slide 22

Slide 22 text

22 ü デザイン上の構造と、コード上の構造を共通化できる ü デザインとコードを同じ粒度で再利⽤を進められる ü デザイン修正の影響範囲を把握しやすく、システムの機能追加・改善に伴うデザインの迅速な変更が可能になる Atomic Designを⽤いるメリット ITにおけるコンポーネント、モジュールの考え⽅

Slide 23

Slide 23 text

23 ü デザイン上の構造と、コード上の構造を共通化できる ü デザインとコードを同じ粒度で再利⽤を進められる ü デザイン修正の影響範囲を把握しやすく、システムの機能追加・改善に伴うデザインの迅速な変更が可能になる Atomic Designを⽤いるメリット ITにおけるコンポーネント、モジュールの考え⽅再利⽤可能な部品の数が増えると次は︖ カタログが欲しくなる︕

Slide 24

Slide 24 text

24 新しいヒーローの登場 Design System

Slide 25

Slide 25 text

25 デザインシステムとはデザインシステムデザインガイドライン UIコンポーネント（デザイン＆コード）各種リソース Design System Gallery

Slide 26

Slide 26 text

26 l 3rd party サービスプロバイダー向けのデザインガイドラインを公開していたが、あまり効果がなかったのでデザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l 実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提供例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

28 デザインガイドラインデザインシステムの構成要素の例 Lightning Design System Carbon Design System

Slide 29

Slide 29 text

29 UIコンポーネントデザインシステムの構成要素の例 Lightning Design System Carbon Design System

Slide 30

Slide 30 text

30 UIコンポーネント⼀覧デザインシステムの構成要素の例 Lightning Design System Carbon Design System

Slide 31

Slide 31 text

31 エンジニア向け利⽤ガイドデザインシステムの構成要素の例 Lightning Design System Carbon Design System

Slide 32

Slide 32 text

32 デザイントークンデザインシステムの構成要素の例 Lightning Design System Carbon Design System

Slide 33

Slide 33 text

33 Alibabaのデザインシステムその他のデザインシステム ANT Design System https://ant.design U.S. Web Design Standards https://standards.usa.gov アメリカの政府機関のデザインシステム

Slide 34

Slide 34 text

34 Githubに公開されたデザインシステム⼀覧デザインシステムの⼀覧 Awesome Design Systems https://github.com/alexpate/awesome-design-systems Adele https://adele.uxpin.com/ UXPinで運⽤するデザインシステム⼀覧 Adele https://adele.uxpin.com/

Slide 35

Slide 35 text

35 l デザインと実装に必要な情報が⼀箇所に︕ l デザインの⽅針とその背景の考え⽅などの共有ができるので、関係者全員がデザインに対して共通の認識を持つことができる l デザインシステムのメリット︓ l デザイナー︓複数のデザイナーが⼀貫性のあるデザインを効率よく作成できる l エンジニア︓コードの再利⽤によって開発⽣産性と実装の品質が上がる l ビジネスパーソン︓デザインを具体化して管理できる資産にするデザインシステムの価値デザインシステムデザインガイドライン UIコンポーネント（デザイン＆コード）各種リソース

Slide 36

Slide 36 text

『UXHub』を使った『デザインシステム』の作成と運⽤

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

39 Fixelにおけるデザインの捉え⽅ Patterns & Parameters

Slide 40

Slide 40 text

40 Fixelの新しいアプローチ: デザインをパターンとパラメーターに分解して再利⽤する 40 変わらない部分：パターン • 画面作成に必要な画面要素（UIコンポーネント） • 各画面要素の挙動（テーブル、ボタン、バッヂ、入力フィル度など） • 画面レイアウト、ナビゲーション、ダイアログなど

Slide 41

Slide 41 text

41 Fixelの新しいアプローチ: デザインをパターンとパラメーターに分解して再利⽤する 41 変わらない部分：パターン • 画面作成に必要な画面要素（UIコンポーネント） • 各画面要素の挙動（テーブル、ボタン、バッヂ、入力フィル度など） • 画面レイアウト、ナビゲーション、ダイアログなど

Slide 42

Slide 42 text

42 Fixelの新しいアプローチ: デザインをパターンとパラメーターに分解して再利⽤する 42 変わる部分：パラメーター • 主にビジュアルデザインに関連する部分（色、フォント、アイコン、サイズなど） • トーンアンドマナー

Slide 43

Slide 43 text

43 Fixelのデザインシステムの作成・運⽤⽀援サービス 43 UXHub デザインシステムプラットフォーム Fixel Design System 業務システム向け汎用的デザインシステムのテンプレートプロフェッショナルサービスデザインシステム作成・運用支援＋＋ ②パラメーターをGUIで編集する機能を提供 ①パターンとパラメーターを意識して作成されたデザインシステム ③FDSとUXHub を⽤いて新しいデザインシステムを作成、必要な画⾯要素の追加

Slide 44

Slide 44 text

44 44 UXHubデモ画面（資料には未添付）

Slide 45

Slide 45 text

45 l デザインシステムを短期・低コストで導⼊可能 l ⾞輪の再発明を辞める l 各種ガイドの再利⽤ l UIコンポーネントのコードを再利⽤ l 画⾯レイアウトやナビゲーションなどのパターン化と再利⽤ l 独⾃性のあるデザインを簡単に⼊⼿ l デザイントークンを編集することで必要なデザインを作成 Fixelの取り組みのメリットデザインをシステム化して活⽤する

Slide 46

Slide 46 text

『デザインシステム』が変える ITプロジェクトとデザインの新しい付き合い⽅

Slide 47

Slide 47 text

Slide 48

Slide 48 text

デザイナー社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙何で読んでくれないの︖ エンジニア興味ないし PM 予算が⾜りないよデザインガイドラインデザインガイドラインデザインガイドラインデザインを課題にしてどうする︖

Slide 49

Slide 49 text

デザイナー社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙どうぞ、ご⾃由に︕ エンジニア再利⽤できるモジュール︕ PM ⽣産性向上でコスト低減︕ 💕 💕 エンジニアデザインシステムチームプロジェクト現場デザインも（他社より）良くなる︕

Slide 50

Slide 50 text

デザイナー社内のデザインチームの必然的な悩み l 頑張って作成したデザインガイドラインやデザインを活⽤してくれない︕涙どうぞ、ご⾃由に︕ エンジニア再利⽤できるモジュール︕ PM ⽣産性向上でコスト低減︕ 💕 💕 エンジニアデザインシステムチームプロジェクト現場デザインも良くなる︕ デザインを課題から武器に変える『デザインシステム』

Slide 51

Slide 51 text

51 デザインシステムを媒体にしたコラボレーションデザインシステムビジネスパーソンエンジニアデザイナー機能追加・改善の際に、判断の基準になる︕ デザイン資産の価値を定量化できる再利⽤できる部品が揃っている︕ 企業活動におけるデザイン活⽤の基盤

Slide 52

Slide 52 text

52 l 情シス l 社内システムを分かりやすく、使いやすくできる l システム間の使い勝⼿の⼀貫性を確保 l システム構築のコスト低減 l SIer l 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上（２５％以上） l ⼀貫性のあるデザインを⾼品質で提供することでお客様に対するサービス向上 l 他Sierに対する競争優位を占めることが可能になる l サービスプロバイダー l デザインの⼀貫性獲得によるブランド構築 l より迅速な改善・リリースが可能に l リリースを重ねてもデザインの⼀貫性や品質が落ちない l 今後のデザイントレンド変化に迅速に対応可能各プレイヤーにおけるデザインシステムの価値

Slide 53

Slide 53 text

53 l キャリア傘下のIT企業 l 独⾃パッケージ製品にデザインシステムを適⽤、７つのプロダクトの中から３つに対して適⽤済み。 l フロントエンド実装の標準化の⼀環として実装のリファクタリングも⾏う l 国内⼤⼿の保険会社 l 既存システムの統合・改善のプロジェクトでデザインシステム構築 l デザインの改善はもちろん、フロント実装のコスト削減・納期短縮 l 家電メーカー l 全社向けのデザインシステム構築後、事業部単位、プロダクト単位に展開中 l 法律関連サービスプロバイダー l デザインシステムで複数のサービス間のデザインの⼀貫性獲得 l フロントエンド実装の標準化とコスト低減⽇本における『デザインシステム』の導⼊状況（Fixelの⽀援事例を中⼼に）

Slide 54

Slide 54 text

54 l キャリア傘下のIT企業 l 独⾃パッケージ製品にデザインシステムを適⽤、７つのプロダクトの中から３つに対して適⽤済み。 l フロントエンド実装の標準化の⼀環として実装のリファクタリングも⾏う l 国内⼤⼿の保険会社 l 既存システムの統合・改善のプロジェクトでデザインシステム構築 l デザインの改善はもちろん、フロント実装のコスト削減・納期短縮 l 家電メーカー l 全社向けのデザインシステム構築後、事業部単位、プロダクト単位に展開中 l 法律関連サービスプロバイダー l デザインシステムで複数のサービス間のデザインの⼀貫性獲得 l フロントエンド実装の標準化とコスト低減⽇本における『デザインシステム』の導⼊状況（Fixelの⽀援事例を中⼼に） 2020年から『デザインシステム』の問い合わせが急増中!!

Slide 55

Slide 55 text

55 l 機能要件、⾮機能要件＋UX要件 l デザインのタスクと融合した、新しいITプロセスを定義 l デザインシステムを活⽤することでデザインを課題から武器に変える l デザインシステム作成と運⽤にはUXHubを使うのがベストプラクティス︕ まとめ

Slide 56

Slide 56 text

56 l デザインシステムの作り⽅ l 新規システムの場合 l 既存システムの場合 l デザインシステムの運⽤と展開 l デザインシステムチーム内でのデザイナーとエンジニアのコラボレーション l デザインシステムチームとITプロジェクトチームのコラボレーション l デザインシステム X ITプロジェクト l デザインシステム X IT組織 l DesignOps + DevOps = ServiceOps 次回以降の内容（想定）

Slide 57

Slide 57 text

最後に

Slide 58

Slide 58 text

58 業務系のシステムこそ、最初の効果が出やすい︕ 品質時間初回UXデザインプロジェクトの効果が最も⼤きいフェーズ#1 フェーズ#2 User eXperience

Slide 59

Slide 59 text

59 参考書籍︓

Slide 60

Slide 60 text

60 他のデザインシステム⽤のソリューション︓ https://www.invisionapp.com/design-system-manager https://www.uxpin.com/merge

Slide 61

Slide 61 text

MAKE DESIGN EASY ”Make Design Easy!” Logical Design n ⽬的と⽅針が明確で、定量的に評価できるデザイン n 明確なロジックで構成され、誰でも再現と拡張ができるデザイン Reusable Design n リリース時だけではなく、プロダクトのライフサイクル全般を⽀えられるデザイン n 他のプロダクトや企業全体に展開できるデザイン Scalable Design n ⼤規模なシステム、迅速に成⻑するサービスを⽀えられるデザイン n デザイナーとエンジニアで構成された⼤きい組織でも効率的に活⽤できるデザイン

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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