元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」

Slide 1

Slide 1 text

元ITコンサルタントの⽬から⾒た ITにおける今までのデザインとこれからのデザイン SIer/情シス向け「ITとデザインは仲良し︕」シリーズ第1回 2020/08/26

Slide 2

Slide 2 text

2 今⽇のスピーカの紹介 2 ۚ ੒఩ 3PZ,JN 69&OHJOFFS$&0PG'JYFM *OD 商社マンプログラマー ITコンサルタント/アーキテクトプロダクトオーナーアプリ開発者/システムアーキテクト UXデザイナー、サービスデザイナーグランスフィア株式会社（現 GMOシステムコンサルティング株式会社）大林コーポレーション（株） BEA Japan Oracle Japan EMC Japan Agentec株式会社 Agentec株式会社 NCデザイン＆コンサルティング株式会社（現 NCDC株式会社） Agentec株式会社 Fixel株式会社 ΩϟϦΞ 5年 10年 10年

Slide 3

Slide 3 text

3 今⽇のスピーカの紹介 3 ۚ ੒఩ 3PZ,JN 69&OHJOFFS$&0PG'JYFM *OD 商社マンプロダクトオーナーアプリ開発者/システムアーキテクト UXデザイナー、サービスデザイナー ΩϟϦΞ 5年 10年 10年 • 輸出業務 • BPR • 企業再編TF • J2EE • Frame work 設計 • SOAコンサルティング • 業務システム設計・構築 • 企業システムインフラ設計・構築 • CMSコンサルティングスマートカタログソリューション開発 • UX/UIデザイン • 新規サービスデザイン・構築 • 業務システムと連携するスマホ・タブレットアプリ開発 • 自社サービス開発 ITの目線で、デザインを⾒つめて来ているプログラマー ITコンサルタント/アーキテクト

Slide 4

Slide 4 text

元ITコンサルタントの⽬から⾒た、ITにおける l 今までのデザイン l なぜデザインが注⽬されているか︖ l ⽇本企業のデザインに対する対応の現状 l それでも残る、デザインの活⽤に対する課題 l 最も根本的な問題︓デザインの成熟度 l これからのデザイン l 海外でデザインに起きている変化︓デザインのシステム化 l 新しいヒーロー、「デザインシステム」の登場 l （ITらしく）パターンとパラメーターで分解して捉えるデザイン l 次回以降の内容紹介

Slide 5

Slide 5 text

今までのデザインなぜデザインが注⽬されているか︖

Slide 6

Slide 6 text

6 ⼯業商品のライフサイクル 6 新しい他にない多機能⾼機能⾼級感/信頼性 ↕ 安いその他の付加価値

Slide 7

Slide 7 text

7 7 • 多くの商品がこの段階まで進んでいる • 付加価値の提供のため、視点が商品から⼈に移る AI/IoT Cloud Computing SNS, Game, その他のサービス ERP等パッケージ App ⼯業商品のライフサイクル新しい他にない多機能⾼機能⾼級感/信頼性 ↕ 安いその他の付加価値

Slide 8

Slide 8 text

8 8 (私が考える) ⽕付け役の⼈と製品

Slide 9

Slide 9 text

9 商品の価値基準が変わった商品スペック使⽤者経験＜

Slide 10

Slide 10 text

10 新しい価値提供⼿段としてのデザインデザインがビジネスの成敗の重要な要因となった

Slide 11

Slide 11 text

11 業務システムにもデザインの波がやってくるコンシューマライゼーション ※ コンシューマライゼーションとは、企業や官庁などの情報システムで、一般消費者向けのIT製品やサービスを導入・利用すること。また、IT関連製品や技術の進歩・革新を一般消費者向け分野が主導し、企業向けIT分野がそれを後追いして取り込むようになる傾向のこと。（IT用語辞典の定義から抜粋）

Slide 12

Slide 12 text

12 ネットワークで繋がる世界業務システムの一部が一般ユーザーに公開されることによって、業務システムのUIに対する要件が変わってしまった社員トレーニングされている長時間使用して慣れている一般ユーザー事前知識がないたまにしか使わない社員を前提に作成されたシステム

Slide 13

Slide 13 text

13 SaaS 製品からサービスへ • 購入からサブスクリプションの時代に移行 • 常に改善し、常にリリースする時代に • タッチポイントが増え、UXはさらに大事になって行く

Slide 14

Slide 14 text

14 l 機能・⾮機能要件だけでは対応できない課題がある l システムの要件定義の際からUXの要件を意識して定義するようにする業務システムにおいて「UXの要件」を新しく考慮する必要が⽣じた UXの要件機能要件⾮機能要件システム・サービスの要件 ü 分かりやすく、使いやすくする ü 操作ミスを防⽌し、作業効率を上げる ü ⼀貫した経験を提供し、ブランドを構築する ü セキュリティーのリスクを下げる ü ビジネスのコストを低減する ü システム実装・改修費⽤を下げる

Slide 15

Slide 15 text

15 l 技術の成熟によって、機能だけでは売れなくなった l コンシューマライゼーションによって、システムに要求されるデザインの品質が⾼くなった l ユーザーの前提が変わった。 l トンレーニングなし、短時間の使⽤ l SaaSの普及 l 常に改善、改修まとめ ITを囲む環境が変わった

Slide 16

Slide 16 text

今までのデザイン⽇本企業のデザインに対する対応の現状

Slide 17

Slide 17 text

17 ⽇本の⼤⼿SIer、⼤企業のIT部⾨は今の変化にどう対応しているか︖ 2011年 2019年既存製品のデザインを改善してほしい新規サービスを⼀緒に考えてほしい⾃社にUXデザインの⼈材を育てたい・部署を作りたい UXデザインの部署はできたけど、あまり広がらない DX 2020年デザインシステム導⼊

Slide 18

Slide 18 text

18 1. デザインに対する適切な投資額が分かるようにする 2. デザインを活⽤するための新しいITプロセスを定義する 3. デザインの成果物をITに合わせて再定義する 4. エンジニアにUX/UIデザインの知識を教える Fixelが情シスやSIerのデザイン導⼊・活⽤のために今までやって来たこと

Slide 19

Slide 19 text

19 l 各プロジェクトでUXデザインに求めるものを明確にする l 考慮すべきUXの特徴 l 達成すべきUXのレベル l KGI/KPIを明確に定義し、ビジネス価値を考慮してデザインへの投資額を決める ⇒ ROI の算出ができるようにする 1. デザインに対する適切な投資額が分かるようにする UX Honey Comb 対象システムの特徴を考慮して定義する多くの業務システムが求めるレベル

Slide 20

Slide 20 text

20 反復 2.デザインを活⽤するための新しいITプロセスを定義するコンテキスト分析ジャーニーマップ作成メンタルモデル分析プロトタイプ作成ユーザーテスト評価と改善ゴールと範囲の設定分析フェーズ実証フェーズ l プロジェクトのゴール・要件に応じて上記のプロセスを適切に調整評価基準の検討計画フェーズペルソナ定義 UXデザインの⼀般的プロセス

Slide 21

Slide 21 text

21 2.デザインを活⽤するための新しいITプロセスを定義する(・・・続き) 要件定義基本設計詳細設計実装テストコンテキスト分析ジャーニーマップ作成メンタルモデル分析プロトタイプ作成ユーザーテスト評価と改善ゴールと範囲の設定分析フェーズ実証フェーズ評価基準の検討計画フェーズペルソナ定義 UXデザイン × ウォータフォールプロセス UX Driven Process

Slide 22

Slide 22 text

22 UXデザイン × アジャイルプロセスデザイン実装デザイン基盤作成実装デザインイテレーションイテレーションイテレーションリリースリリーステストテストデザインデザインコンテキスト分析ジャーニーマップ作成メンタルモデル分析プロトタイプ作成ユーザーテスト評価と改善ゴールと範囲の設定分析フェーズ実証フェーズ評価基準の検討計画フェーズペルソナ定義プラニングフェーズ実装フェーズ 2.デザインを活⽤するための新しいITプロセスを定義する(・・・続き) UX Driven Process

Slide 23

Slide 23 text

23 l UX/UIデザインの成果物からITが必要とする情報を抜け漏れなく伝えるための調整 l プロジェクト単位、あるいは企業単位でデザインとITのインタフェースとしての⽂書の体系と内容を定義する 3. デザインの成果物をITに合わせて再定義する IT Project UXD ⽤語と成果物を合わせる

Slide 24

Slide 24 text

24 l UXデザインは論理的な思考と⼈に対する理解があれば誰でもできる l ユーザーに対する理解・配慮がもっと⼤事 l 最初はUXデザイナーと⼀緒に経験を積み、⾃⽴して⾏くように誘導する l 美的センスが必要な部分はごく⼀部で、それは専⾨家（ビジュアルデザイナー）に任せればいい 4. エンジニアにUX/UIデザインの知識を教える論理的思考が必要な部分美的センスやツールのスキルが必要な部分詳細は今後のウェビナーでお話しします。

Slide 25

Slide 25 text

25 l UIデザインの背景にある理論をビジュアルデザインの基本要素と⽂法として説明 l ⼀定レベル以上のUIデザインを⾮デザイナーでもできるようにする l デザインの成果物の評価やデザイナーとのコミュニケーションを円滑にする 4. エンジニアにUX/UIデザインの知識を教える詳細は今後のウェビナーでお話しします。

Slide 26

Slide 26 text

26 l 個別プロジェクトにおける効果は確認済み l しかし、全社に広げるのは結構⼤変 l 既存の仕事のやり⽅、ITのプロセスを変えることには努⼒と費⽤が必要 l 専⾨家のサポートが必要 l デザインの学習には時間とコストがかかる l エンジニアがやる気を出してくれない・・・先述した対応策に対する振り返り新しい武器であるデザインが、有効活⽤できていない

Slide 27

Slide 27 text

今までのデザインそれでも残る、デザインの活⽤に対する課題

Slide 28

Slide 28 text

28 時間の経過に伴うデザイン品質の劣化時間 vs デザイン品質時間初回リリース２回⽬リリース３回⽬リリースその場あたりの改修・機能追加初回デザインとは異なるデザインポリシーによってデザインされるもう最初のデザインの思想なんて誰も知らないその場あたりの改修・機能追加カオス︕

Slide 29

Slide 29 text

29 時間の経過に伴うデザイン品質の劣化時間 vs デザイン品質時間初回リリース２回⽬リリース３回⽬リリース理想現実こうあって欲しいけど・・・

Slide 30

Slide 30 text

30 l システム単位でデザインの品質がバラバラ組織 vs デザイン品質システムA システムB システムC システムD

Slide 31

Slide 31 text

31 l サービス単位に異なるスタイルのデザイン組織 vs デザイン品質サービスA サービスB サービスC サービスD UX品質の低下ブランド構築失敗

Slide 32

Slide 32 text

32 l 作ったデザインの品質を将来の改善・拡張においてどうやって保つか︖ l 複数のシステム（サービス）間のデザインの⼀貫性はどうやって保つか︖ l デザインを「作る」だけではなく、「管理する」、「共有する」、「再利⽤する」ことへの考慮が必要デザインの有効活⽤のための課題プロダクトのライフサイクルを通して⽀援するデザインのプラクティスが不在

Slide 33

Slide 33 text

今までのデザイン最も根本的な問題

Slide 34

Slide 34 text

34 ITにおけるデザインの歴史は⽐較的に短い建築 IT デザイン⼈間の⽂明現在大昔あらゆる分野のデザイン l ⼀つの分野の成熟には時間が必要。かつ、歴史は繰り返す l 建築で築いた⼿法はITで活⽤されている。 l 例︓プロセス、モジュール、コンポーネント、OOP等 l ITにおけるデザインは⽐較的に歴史が短く、産業としてまだ成熟できてない l ウェブサイトの制作はできるけど、ITシステムのスケールと速度に対応できていない l 既製品の活⽤、⼤量⽣産ができておらず、オーダーメードの段階

Slide 35

Slide 35 text

35 区分 IT デザイン制作ツール IDE、各種エディタ Ps、Ai、Sketchなど統合ツール各種UT、CIツールで⾃動化履歴管理ツール Github、Subversionなど共有ツール Github、Subversionなどプロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜関連情報⽂書体系、管理体制が整っている。資産管理ツールがある共有/再利⽤ OSS（⽂化になっている）フリー素材、公開フォントなど ITとデザインの作業環境の⽐較デザインのツールは個⼈向け・制作にフォーカスしたものが多く、組織として作業・共有・管理するためのツールが揃えていない

Slide 36

Slide 36 text

36 区分 IT デザイン制作ツール IDE、各種エディタ Ps、Ai、Sketchなど統合ツール各種UT、CIツールで⾃動化履歴管理ツール Github、Subversionなど共有ツール Github、Subversionなどプロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜関連情報⽂書体系、管理体制が整っている。資産管理ツールがある共有/再利⽤ OSS（⽂化になっている）フリー素材、公開フォントなど ITとデザインの作業環境の⽐較デザインのツールは個⼈向け・制作にフォーカスしたものが多く、組織として作業・共有・管理するためのツールが揃えていないこれらのツールがない状態で ITプロジェクトが進められますか？

Slide 37

Slide 37 text

37 区分 IT デザイン制作ツール IDE、各種エディタ Ps、Ai、Sketchなど統合ツール各種UT、CIツールで⾃動化履歴管理ツール Github、Subversionなど共有ツール Github、Subversionなどプロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜関連情報⽂書体系、管理体制が整っている。資産管理ツールがある共有/再利⽤ OSS（⽂化になっている）フリー素材、公開フォントなど ITとデザインの作業環境の⽐較デザインのツールは個⼈向け・制作にフォーカスしたものが多く、組織として作業・共有・管理するためのツールが揃えていない ITがデザインを活⽤するにはこの間をどう埋めればいいか︖

Slide 38

Slide 38 text

38 まとめ ITにおけるデザインは、産業化への⻑い道のりに出たばかり IT デザインビジネス

Slide 39

Slide 39 text

これからのデザイン海外のデザイン業界で今起きていること

Slide 40

Slide 40 text

40 「これから」とは、時差を考慮した表現 l ⽇本では「これから」だけど、欧州では「今起きていること」 l ⽇本でも⼀部進んだ企業の中では「既に起きていること」前置き時差は、0.5~3年？シリコンバレー日本

Slide 41

Slide 41 text

41 求められる新しい⼈材像︓ユニコーンデザイナー l レベル１ユニコーン︓デザインもコーディングもできる⼈ l レベル２ユニコーン︓レベル１＋ビジネス知識シリコンバレーを中⼼に増えているユニコーン l UXデザイナー l UXリサーチャー l UXエンジニア l UXマネージャー今時いけてる⼈材は、デザインとコーディングは同時にできて当たり前ユニコーンを探せ︕

Slide 42

Slide 42 text

42 ユニコーン達によってデザインがITに急速に接近中︕ IT デザインビジネスデザインをシステム親和的にするぜ︕ I’m CDO!

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

45 ü Atomic Designの構造にならい、シンボルを⼊れ⼦構造で作る。 ü デザインの構造に合わせて、UIコンポーネントも実装する。 Atomic Designを使ったデザイン Atomic Design 粒度対象要素サンプルデザイントークン Lv0 部品に紐づく⾊、太さ、フォント、⾓丸などの属性原子 Atoms Lv1 これ以上分解できない最⼩単位の部品分子 Molecules Lv2 原⼦を組み合わせて作る様々な画⾯やコンテキストで利⽤できる汎⽤性のある部品有機体 Organisms Lv3 複数の原⼦・分⼦で構成⽐較的複雑な部品 نةٝ 5JUMF

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

51 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 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

62 Figma l ブラウザーベース l ウェブ経由の共有・権限管理 l 複数⼈の同時編集 l リアルタイムコメント機能 l バージョン管理新しいツールの登場動画

Slide 63

Slide 63 text

63 区分 IT デザイン制作ツール IDE、各種エディタ Ps、Ai、Sketchなど統合ツール各種UT、CIツールで⾃動化履歴管理ツール Github、Subversionなど共有ツール Github、Subversionなどプロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜関連情報⽂書体系、管理体制が整っている。資産管理ツールがある共有/再利⽤ OSS（⽂化になっている）フリー素材、公開フォントなど ITとデザインの作業環境の⽐較デザインのツールは個⼈向け・制作にフォーカスしたものが多く、組織として作業・共有・管理するためのツールが揃えていない先述の資料

Slide 64

Slide 64 text

64 区分 IT デザイン制作ツール IDE、各種エディタ Figma、Ps、Ai、Sketchなど統合ツール各種UT、CIツールで⾃動化 Figma 履歴管理ツール Github、Subversionなど Figma 共有ツール Github、Subversionなど Adobe Cloud、Figma、デザインシステムプロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜関連情報⽂書体系、管理体制が整っている。資産管理ツールがあるデザインシステム共有/再利⽤ OSS（⽂化になっている）フリー素材、公開フォントなどデザインシステム ITとデザインの作業環境の⽐較デザインの共同作業、デザインのシステム化を意識したツールの強化欧州の今

Slide 65

Slide 65 text

65 区分 IT デザイン制作ツール IDE、各種エディタ Ps、Ai、Sketchなど統合ツール各種UT、CIツールで⾃動化履歴管理ツール Github、Subversionなど共有ツール Github、Subversionなどプロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜関連情報⽂書体系、管理体制が整っている。資産管理ツールがある共有/再利⽤ OSS（⽂化になっている）フリー素材、公開フォントなど ITとデザインの作業環境の⽐較デザインのツールは個⼈向け・制作にフォーカスしたものが多く、組織として作業・共有・管理するためのツールが揃えていない ITがデザインを活⽤するにはこの間をどう埋めればいいか︖ 先述の資料

Slide 66

Slide 66 text

66 区分 IT 連携デザイン制作ツール IDE、各種エディター Figma、Ps、Ai、Sketchなど統合ツール各種UT、CIツールで⾃動化ー Figma 履歴管理ツール Github、Subversionなどー Figma プロセス • ウォーターフォール • アジャイル • 実績・情報多数 UX Driven Process • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜共有ツール Github、Subversionなどデザインシステム Adobe Cloud、Figma 関連情報⽂書体系、管理体制が整っている。資産管理ツールがある共有/再利⽤ OSS（⽂化になっている）フリー素材、公開フォントなど ITとデザインの作業環境の⽐較 ITとデザインの連携をデザインシステムで⾏う ITとデザインの間の溝が埋まりつつある

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

76 l ITにおけるデザインはまだ歴史が浅く、オーダーメードの段階 l アメリカを中⼼にデザインのシステム化が起きている l アトミックデザイン、デザインシステムなど l デザインの産業化に必要なデザインのツールも揃えつつある l デザインシステムがSIerや情シスには有効である l デザイン品質向上 l フロントエンド⽣産性向上及び費⽤低減 l デザインシステムをスクラッチから作るのは⼤変なので既存のものを再利⽤ l UXHub、Fixel Design SystemとFixelのコンサルティングを活⽤ l デザインを作るのではなく使う時代に︕ まとめ

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

78 景気衰退が予想され、システムへの予算が厳しくなった時にこそ、 l デザインのシステム化を進め、 l デザインの品質を維持しつつ、 l フロント実装のコスト低減（平均５０％減） l リモートワークにも耐えられる、使いやすく分かりやすいシステムに︕ コロナ vs デザイン

Slide 79

Slide 79 text

79 参考書籍︓

Slide 80

Slide 80 text

80 l ⾮デザイナーの為の l UXデザイン l ビジュアルデザイン l UIデザイン l サービスデザイン l プロトタイピング l 業務システムのデザイン l デザインとITをマージしたUX Driven Processes l デザインを囲むコミュニケーション l 適切なフィードバック⽅法 l デザインへのインプット l ITへのアウトプット l デザインのROI l UXHubとFixel Design Systemの詳細 l その他、事例紹介など今後の内容

Slide 81

Slide 81 text

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