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

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

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 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上(25%以上) l ⼀貫性のあるデザインを⾼品質で提供することでお客様に対するサービス向上 l 他Sierに対する競争優位を占めることが可能になる l サービスプロバイダー l デザインの⼀貫性獲得によるブランド構築 l より迅速な改善・リリースが可能に l リリースを重ねてもデザインの⼀貫性や品質が落ちない l 今後のデザイントレンド変化に迅速に対応可能 各プレイヤーにおけるデザインシステムの価値

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

54 l キャリア傘下のIT企業 l 独⾃パッケージ製品にデザインシステムを適⽤、7つのプロダクトの中から3つに対して適⽤済み。 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/情シスのデザインパートナー ありがとうございました︕ アンケート記⼊のお願い