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

元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」ウェビナーの資料です。

こんな方におすすめ
UI/UXデザインの社内展開に困っているUXデザインチームの方
デザインを有効活用する方法に悩んでいるITプロジェクトリーダー
デザインをより短期間で、より高品質で、より低価で入手して活用した方
新規サービスの展開にデザインが足かせになることを遅れているプロダクトオーナー
デザインを企業の資産としてきちんと管理し、運用したい管理者
技術だけでなく、デザインというもう一つの武器を手に入れたいエンジニア
デザイン費用を節約したいと思っている管理者

Transcript

1. 元ITコンサルタントの⽬から⾒た ITにおける今までのデザインとこれからのデザイン SIer/情シス向け「ITとデザインは仲良し︕」シリーズ第1回 2020/08/26
2. 2 今⽇のスピーカの紹介 2 ۚ ੒఩ 3PZ
   ,JN 69
   &OHJOFFS
   
   $&0
   PG
   'JYFM *OD 商社マン プログラマー ITコンサルタント/アーキテクト プロダクト オーナー アプリ開発者/システムアーキテクト UXデザイナー、サービスデザイナー グランスフィア株式会社 （現 GMOシステムコンサル ティング株式会社） 大林コーポレーション （株） BEA Japan Oracle Japan EMC Japan Agentec株式会社 Agentec株式会社 NCデザイン＆コンサルティング 株式会社 （現 NCDC株式会社） Agentec株 式会社 Fixel株式会社 ΩϟϦΞ 5年 10年 10年
3. 3 今⽇のスピーカの紹介 3 ۚ ੒఩ 3PZ
   ,JN 69
   &OHJOFFS
   
   $&0
   PG
   'JYFM *OD 商社マン プロダクト オーナー アプリ開発者/システムアーキテクト UXデザイナー、サービスデザイナー ΩϟϦΞ 5年 10年 10年 • 輸出業務 • BPR • 企業再編TF • J2EE • Frame work 設計 • SOAコンサルティング • 業務システム設計・構築 • 企業システムインフラ設計・構築 • CMSコンサルティング スマート カタログ ソリュー ション開 発 • UX/UIデザイン • 新規サービスデザイン・構築 • 業務システムと連携するスマ ホ・タブレットアプリ開発 • 自社サービス開発 ITの目線で、デザインを⾒つめて来 ている プログラマー ITコンサルタント/アーキテクト
4. 元ITコンサルタントの⽬から⾒た、ITにおける l 今までのデザイン l なぜデザインが注⽬されているか︖ l ⽇本企業のデザインに対する対応の現状 l それでも残る、デザインの活⽤に対する課題 l 最も根本的な問題︓デザインの成熟度 l これからのデザイン l 海外でデザインに起きている変化︓デザインのシステム化 l 新しいヒーロー、「デザインシステム」の登場 l （ITらしく）パターンとパラメーターで分解して捉えるデザイン l 次回以降の内容紹介
5. 今までのデザイン なぜデザインが注⽬されているか︖
6. 6 ⼯業商品のライフサイクル 6 新しい 他にない 多機能 ⾼機能 ⾼級感/信頼性 ↕ 安い その他の 付加価値
7. 7 7 • 多くの商品がこの段階まで進んでいる • 付加価値の提供のため、視点が商品から⼈に移る AI/IoT Cloud Computing SNS, Game, その他のサービス ERP等パッケージ App ⼯業商品のライフサイクル 新しい 他にない 多機能 ⾼機能 ⾼級感/信頼性 ↕ 安い その他の 付加価値
8. 8 8 (私が考える) ⽕付け役の⼈と製品
9. 9 商品の価値基準が変わった 商品スペック 使⽤者経験 ＜
10. 10 新しい価値提供⼿段としてのデザイン デザインがビジネスの成敗の 重要な要因となった
11. 11 業務システムにもデザインの波がやってくる コンシューマライゼーション ※ コンシューマライゼーションとは、企業や官庁などの情報システムで、一般消費者向けのIT製品やサービスを導入・利用すること。 また、IT関連製品や技術の進歩・革新を一般消費者向け分野が主導し、企業向けIT分野がそれを後追いして取り込むようになる傾 向のこと。（IT用語辞典の定義から抜粋）
12. 12 ネットワークで繋がる世界 業務システムの一部が一般ユーザーに公開されることによって、 業務システムのUIに対する要件が変わってしまった 社員 トレーニングされている 長時間使用して慣れている 一般ユーザー 事前知識がない たまにしか使わない 社員を前提に作成されたシステム
13. 13 SaaS 製品からサービスへ • 購入からサブスクリプションの時代に移行 • 常に改善し、常にリリースする時代に • タッチポイントが増え、UXはさらに大事になって行く
14. 14 l 機能・⾮機能要件だけでは対応できない課題 がある l システムの要件定義の際からUXの要件を意 識して定義するようにする 業務システムにおいて「UXの要件」を新しく考慮する必要が⽣じた UXの要件 機能要件 ⾮機能要件 システム・サービスの要件 ü 分かりやすく、使いやすくする ü 操作ミスを防⽌し、作業効率を上げる ü ⼀貫した経験を提供し、ブランドを構築する ü セキュリティーのリスクを下げる ü ビジネスのコストを低減する ü システム実装・改修費⽤を下げる
15. 15 l 技術の成熟によって、機能だけでは売れなくなった l コンシューマライゼーションによって、システムに要求されるデザインの品質が⾼く なった l ユーザーの前提が変わった。 l トンレーニングなし、短時間の使⽤ l SaaSの普及 l 常に改善、改修 まとめ ITを囲む環境が変わった
16. 今までのデザイン ⽇本企業のデザインに対する対応の現状
17. 17 ⽇本の⼤⼿SIer、⼤企業のIT部⾨は今の変化にどう対応しているか︖ 2011年 2019年 既存製品のデザイン を改善してほしい 新規サービスを ⼀緒に考えてほしい ⾃社にUXデザインの⼈材を育て たい・部署を作りたい UXデザインの部署はできたけ ど、あまり広がらない DX 2020年 デザイン システム導⼊
18. 18 1. デザインに対する適切な投資額が分かるようにする 2. デザインを活⽤するための新しいITプロセスを定義する 3. デザインの成果物をITに合わせて再定義する 4. エンジニアにUX/UIデザインの知識を教える Fixelが情シスやSIerのデザイン導⼊・活⽤のために今までやって来たこと
19. 19 l 各プロジェクトでUXデザインに求めるものを明確にする l 考慮すべきUXの特徴 l 達成すべきUXのレベル l KGI/KPIを明確に定義し、ビジネス価値を考慮してデザインへの投資額を決める ⇒ ROI の算出ができるようにする 1. デザインに対する適切な投資額が分かるようにする UX Honey Comb 対象システムの特徴 を考慮して定義する 多くの業務システム が求めるレベル
20. 20 反復 2.デザインを活⽤するための新しいITプロセスを定義する コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 プロトタイプ作成 ユーザーテスト 評価と改善 ゴールと範囲の 設定 分析フェーズ 実証フェーズ l プロジェクトのゴール・要件に応じて上記のプロセスを適切に調整 評価基準の検討 計画フェーズ ペルソナ定義 UXデザインの⼀般的プロセス
21. 21 2.デザインを活⽤するための新しいITプロセスを定義する(・・・続き) 要件定義 基本設計 詳細設計 実装 テスト コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 プロトタイプ作成 ユーザーテスト 評価と改善 ゴールと範囲 の設定 分析フェーズ 実証フェーズ 評価基準の検 討 計画フェーズ ペルソナ定義 UXデザイン × ウォータフォールプロセス UX Driven Process
22. 22 UXデザイン × アジャイルプロセス デザイン 実装 デザイン 基盤作成 実装 デザイン イテレーション イテレーション イテレーション リリース リリース テ ス ト テ ス ト デ ザ イ ン デ ザ イ ン コンテキス ト分析 ジャーニー マップ 作成 メンタルモ デル 分析 プロトタイ プ作成 ユーザーテ スト 評価と改善 ゴールと 範囲の設 定 分析フェーズ 実証フェーズ 評価基準 の検討 計画フェー ズ ペルソナ定 義 プラニングフェーズ 実装フェーズ 2.デザインを活⽤するための新しいITプロセスを定義する(・・・続き) UX Driven Process
23. 23 l UX/UIデザインの成果物からITが必要とする情報を抜け漏れなく伝えるための調整 l プロジェクト単位、あるいは企業単位でデザインとITのインタフェースとしての⽂書 の体系と内容を定義する 3. デザインの成果物をITに合わせて再定義する IT Project UXD ⽤語と成果物を合わせる
24. 24 l UXデザインは論理的な思考と⼈に対する理解が あれば誰でもできる l ユーザーに対する理解・配慮がもっと⼤事 l 最初はUXデザイナーと⼀緒に経験を積み、⾃⽴して ⾏くように誘導する l 美的センスが必要な部分はごく⼀部で、それは専 ⾨家（ビジュアルデザイナー）に任せればいい 4. エンジニアにUX/UIデザインの知識を教える 論理的思考が必要な部分 美的センスやツールのスキルが必要な部分 詳細は今後のウェビナーでお話しします。
25. 25 l UIデザインの背景にある理論をビジュアル デザインの基本要素と⽂法として説明 l ⼀定レベル以上のUIデザインを⾮デザイ ナーでもできるようにする l デザインの成果物の評価やデザイナーとの コミュニケーションを円滑にする 4. エンジニアにUX/UIデザインの知識を教える 詳細は今後のウェビナーでお話しします。
26. 26 l 個別プロジェクトにおける効果は確認済み l しかし、全社に広げるのは結構⼤変 l 既存の仕事のやり⽅、ITのプロセスを変えることには努⼒と費⽤が必要 l 専⾨家のサポートが必要 l デザインの学習には時間とコストがかかる l エンジニアがやる気を出してくれない・・・ 先述した対応策に対する振り返り 新しい武器であるデザインが、有効活⽤できていない
27. 今までのデザイン それでも残る、デザインの活⽤に対する課題
28. 28 時間の経過に伴うデザイン品質の劣化 時間 vs デザイン 品質 時間 初回リリース ２回⽬リリース ３回⽬リリース その場あたりの 改修・機能追加 初回デザインとは異なるデザインポリ シーによってデザインされる もう最初のデザインの思想 なんて誰も知らない その場あたりの 改修・機能追加 カオス︕
29. 29 時間の経過に伴うデザイン品質の劣化 時間 vs デザイン 品質 時間 初回リリース ２回⽬リリース ３回⽬リリース 理想 現実 こうあって欲しいけど・・・
30. 30 l システム単位でデザインの品質がバラバラ 組織 vs デザイン 品質 システムA システムB システムC システムD
31. 31 l サービス単位に異なるスタイルのデザイン 組織 vs デザイン 品質 サービスA サービスB サービスC サービスD UX品質の低下 ブランド構築失敗
32. 32 l 作ったデザインの品質を将来の改善・拡張においてどうやって保つか︖ l 複数のシステム（サービス）間のデザインの⼀貫性はどうやって保つか︖ l デザインを「作る」だけではなく、「管理する」、 「共有する」、「再利⽤する」 ことへの考慮が必要 デザインの有効活⽤のための課題 プロダクトのライフサイクルを通して ⽀援するデザインのプラクティスが不在
33. 今までのデザイン 最も根本的な問題
34. 34 ITにおけるデザインの歴史は⽐較的に短い 建築 IT デザイン ⼈間の⽂明 現在 大昔 あらゆる分野のデザイン l ⼀つの分野の成熟には時間が必要。かつ、歴史は繰り返す l 建築で築いた⼿法はITで活⽤されている。 l 例︓プロセス、モジュール、コンポーネント、OOP等 l ITにおけるデザインは⽐較的に歴史が短く、産業としてまだ成熟できてない l ウェブサイトの制作はできるけど、ITシステムのスケールと速度に対応できていない l 既製品の活⽤、⼤量⽣産ができておらず、オーダーメードの段階
35. 35 区分 IT デザイン 制作ツール IDE、各種エディタ Ps、Ai、Sketchなど 統合ツール 各種UT、CIツールで⾃動化 履歴管理ツール Github、Subversionなど 共有ツール Github、Subversionなど プロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜ 関連情報 ⽂書体系、管理体制が整っている。 資産管理ツールがある 共有/再利⽤ OSS（⽂化になっている） フリー素材、公開フォントなど ITとデザインの作業環境の⽐較 デザインのツールは個⼈向け・制作にフォーカスしたものが多く、 組織として作業・共有・管理するためのツールが揃えていない
36. 36 区分 IT デザイン 制作ツール IDE、各種エディタ Ps、Ai、Sketchなど 統合ツール 各種UT、CIツールで⾃動化 履歴管理ツール Github、Subversionなど 共有ツール Github、Subversionなど プロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜ 関連情報 ⽂書体系、管理体制が整っている。 資産管理ツールがある 共有/再利⽤ OSS（⽂化になっている） フリー素材、公開フォントなど ITとデザインの作業環境の⽐較 デザインのツールは個⼈向け・制作にフォーカスしたものが多く、 組織として作業・共有・管理するためのツールが揃えていない これらのツールがない状態で ITプロジェクトが進められますか？
37. 37 区分 IT デザイン 制作ツール IDE、各種エディタ Ps、Ai、Sketchなど 統合ツール 各種UT、CIツールで⾃動化 履歴管理ツール Github、Subversionなど 共有ツール Github、Subversionなど プロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜ 関連情報 ⽂書体系、管理体制が整っている。 資産管理ツールがある 共有/再利⽤ OSS（⽂化になっている） フリー素材、公開フォントなど ITとデザインの作業環境の⽐較 デザインのツールは個⼈向け・制作にフォーカスしたものが多く、 組織として作業・共有・管理するためのツールが揃えていない ITがデザインを活⽤するには この間をどう埋めればいいか︖
38. 38 まとめ ITにおけるデザインは、産業化への⻑い道のりに出たばかり IT デザイン ビジネス
39. これからのデザイン 海外のデザイン業界で今起きていること
40. 40 「これから」とは、時差を考慮した表現 l ⽇本では「これから」だけど、欧州では「今起きていること」 l ⽇本でも⼀部進んだ企業の中では「既に起きていること」 前置き 時差は、0.5~3年？ シリコンバレー 日本
41. 41 求められる新しい⼈材像︓ユニコーンデザイナー l レベル１ユニコーン︓デザインもコーディングもできる⼈ l レベル２ユニコーン︓レベル１＋ビジネス知識 シリコンバレーを中⼼に増えているユニコーン l UXデザイナー l UXリサーチャー l UXエンジニア l UXマネージャー 今時いけてる⼈材は、デザインとコーディングは 同時にできて当たり前 ユニコーンを探せ︕
42. 42 ユニコーン達によってデザインがITに急速に接近中︕ IT デザイン ビジネス デザインを システム親和的にするぜ︕ I’m CDO!
43. 43 UIデザインを「コンポーネント単位」でとらえる “Atomic Design” という⼿法の登場 ※Atomic Designの提案者 Brad Frost⽒ UI要素を「原⼦・分⼦・有機体 …」といった物理世界を構成する 仕組みにならって構造化・部品化。 それらを階層的に組み合わせるこ とで、⼤きなコンポーネントや ページを作成する。
44. 44 l 画⾯要素を①原⼦ ②分⼦ ③有機体 ④テンプレート ⑤ページ の5段階で構成 l [原⼦ ➡ 分⼦ ➡ 有機体] の順でより具体的なUIコンポーネントになる l テンプレート ︓ 複数画⾯へ展開するためのページレイアウトの枠組み l ページ ︓ 具体的な内容が⼊った個別画⾯ Atomic Designの詳細
45. 45 ü Atomic Designの構造にならい、シンボルを⼊れ⼦構造で作る。 ü デザインの構造に合わせて、UIコンポーネントも実装する。 Atomic Designを使ったデザイン Atomic Design 粒度 対象要素 サンプル デザイン トークン Lv0 部品に紐づく⾊、太さ、フォント、 ⾓丸などの属性 原子 Atoms Lv1 これ以上分解できない 最⼩単位の部品 分子 Molecules Lv2 原⼦を組み合わせて作る 様々な画⾯やコンテキストで利⽤ できる汎⽤性のある部品 有機体 Organisms Lv3 複数の原⼦・分⼦で構成 ⽐較的複雑な部品
    نةٝ 
       
        5JUMF
46. 46 ü デザイン上の構造と、コード上の構造を共通化できる ü デザインとコードを同じ粒度で再利⽤を進められる ü デザイン修正の影響範囲を把握しやすく、システムの機能追 加・改善に伴うデザインの迅速な変更が可能になる Atomic Designを⽤いるメリット ITにおけるコンポーネント、モジュールの考え⽅
47. 47 ü デザイン上の構造と、コード上の構造を共通化できる ü デザインとコードを同じ粒度で再利⽤を進められる ü デザイン修正の影響範囲を把握しやすく、システムの機能追 加・改善に伴うデザインの迅速な変更が可能になる Atomic Designを⽤いるメリット ITにおけるコンポーネント、モジュールの考え⽅ 再利⽤可能な部品の 数が増えると次は︖ カタログが欲しくなる︕
48. 48 新しいヒーローの登場 Design System
49. 49 デザインシステムとは デザインシステム デザインガイドライン UIコンポーネント （デザイン＆コード） 各種リソース Design System Gallery
50. 50 l 3rd party サービスプロバイダー向けのデザインガイド ラインを公開していたが、あまり効果がなかったのでデ ザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l 実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提 供 例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com
51. 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
52. 52 デザインガイドライン デザインシステムの構成要素の例 Lightning Design System Carbon Design System
53. 53 UIコンポーネント デザインシステムの構成要素の例 Lightning Design System Carbon Design System
54. 54 UIコンポーネント⼀覧 デザインシステムの構成要素の例 Lightning Design System Carbon Design System
55. 55 エンジニア向け利⽤ガイド デザインシステムの構成要素の例 Lightning Design System Carbon Design System
56. 56 デザイントークン デザインシステムの構成要素の例 Lightning Design System Carbon Design System
57. 57 Alibabaのデザインシステム その他のデザインシステム ANT Design System https://ant.design U.S. Web Design Standards https://standards.usa.gov アメリカの政府機関のデザインシステム
58. 58 Githubに公開されたデザインシステム⼀覧 デザインシステムの⼀覧 Awesome Design Systems https://github.com/alexpate/awesome-design-systems Adele https://adele.uxpin.com/ UXPinで運⽤するデザインシステム⼀覧 Adele https://adele.uxpin.com/
59. 59 l デザインと実装に必要な情報が⼀箇所に︕ l デザインガイドラインによって、デザインの⽅ 針とその背景の考え⽅などの共有ができるので、 関係者全員がデザインに対して共通の認識を持 つことができる l デザインシステムのメリット︓ l デザイナー︓複数のデザイナーが⼀貫性のあるデザインを 効率よく作成できる l エンジニア︓コードの再利⽤によって開発⽣産性と実装の 品質が上がる l ビジネスパーソン︓デザインを具体化して管理できる資産 にする デザインシステムの価値 デザインシステム デザインガイドライン UIコンポーネント （デザイン＆コード） 各種リソース
60. 60 デザインシステムを媒体にしたコラボレーション デザイン システム ビジネス パーソン エンジニア デザイナー 機能追加・改善の際に、 判断の基準になる︕ デザイン資産の 価値を定量化できる 再利⽤できる部品が 揃っている︕ 企業活動におけるデザイン活⽤の基盤
61. 61 l 情シス l 社内システムを分かりやすく、使いやすくできる l システム間の使い勝⼿の⼀貫性を確保 l システム構築のコスト低減 l SIer l 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上（２５％以上） l ⼀貫性のあるデザインを⾼品質で提供することでお客様に対するサービス向上 l 他Sierに対する競争優位を占めることが可能になる l サービスプロバイダー l デザインの⼀貫性獲得によるブランド構築 l より迅速な改善・リリースが可能に l リリースを重ねてもデザインの⼀貫性や品質が落ちない l 今後のデザイントレンド変化に迅速に対応可能 各プレイヤーにおけるデザインシステムの価値
62. 62 Figma l ブラウザーベース l ウェブ経由の共有・権限管理 l 複数⼈の同時編集 l リアルタイムコメント機能 l バージョン管理 新しいツールの登場 動画
63. 63 区分 IT デザイン 制作ツール IDE、各種エディタ Ps、Ai、Sketchなど 統合ツール 各種UT、CIツールで⾃動化 履歴管理ツール Github、Subversionなど 共有ツール Github、Subversionなど プロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜ 関連情報 ⽂書体系、管理体制が整っている。 資産管理ツールがある 共有/再利⽤ OSS（⽂化になっている） フリー素材、公開フォントなど ITとデザインの作業環境の⽐較 デザインのツールは個⼈向け・制作にフォーカスしたものが多く、 組織として作業・共有・管理するためのツールが揃えていない 先述の資料
64. 64 区分 IT デザイン 制作ツール IDE、各種エディタ Figma、Ps、Ai、Sketchなど 統合ツール 各種UT、CIツールで⾃動化 Figma 履歴管理ツール Github、Subversionなど Figma 共有ツール Github、Subversionなど Adobe Cloud、Figma、デザインシステム プロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜ 関連情報 ⽂書体系、管理体制が整っている。 資産管理ツールがある デザインシステム 共有/再利⽤ OSS（⽂化になっている） フリー素材、公開フォントなど デザインシステム ITとデザインの作業環境の⽐較 デザインの共同作業、デザインのシステム化を意識したツールの強化 欧州の今
65. 65 区分 IT デザイン 制作ツール IDE、各種エディタ Ps、Ai、Sketchなど 統合ツール 各種UT、CIツールで⾃動化 履歴管理ツール Github、Subversionなど 共有ツール Github、Subversionなど プロセス • ウォーターフォール • アジャイル • 実績・情報多数 • 汎⽤的UXデザインプロセス • 標準的なUIデザインプロセスの不在 • 実績・情報不⾜ 関連情報 ⽂書体系、管理体制が整っている。 資産管理ツールがある 共有/再利⽤ OSS（⽂化になっている） フリー素材、公開フォントなど ITとデザインの作業環境の⽐較 デザインのツールは個⼈向け・制作にフォーカスしたものが多く、 組織として作業・共有・管理するためのツールが揃えていない ITがデザインを活⽤するには この間をどう埋めればいいか︖ 先述の資料
66. 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とデザインの間の溝が 埋まりつつある
67. 67 l キャリア傘下のIT企業 l 独⾃パッケージ製品にデザインシステムを適⽤、７つのプロダクトの中から３つに対して適⽤済み。 l フロントエンド実装の標準化の⼀環として実装のリファクタリングも⾏う l 国内⼤⼿の保険会社 l 既存システムの統合・改善のプロジェクトでデザインシステム構築 l デザインの改善はもちろん、フロント実装のコスト削減・納期短縮 l 家電メーカー l 全社向けのデザインシステム構築後、事業部単位、プロダクト単位に展開中 l 法律関連サービスプロバイダー l デザインシステムで複数のサービス間のデザインの⼀貫性獲得 l フロントエンド実装の標準化とコスト低減 ⽇本におけるデザインシステムの導⼊状況（Fixelの⽀援事例を中⼼に）
68. 68 l 初期コストがかかる l デザインガイドの作成 l UIコンポーネントの洗い出しとコードの実装 l デザインシステム公開のためのサイト構築 l 継続的な運⽤が必要 l デザイナーとエンジニアで構成された専任のチームが必要 l デザインシステムの管理チームと個別プロジェクト間の配布とフィードバックのプロセス 定義が必要 デザインシステムの活⽤における課題 デザインシステムをスクラッチから作るのは難しい
69. 69 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
70. 70 Fixelにおけるデザインの捉え⽅ Patterns & Parameters
71. 71 Fixelの新しいアプローチ: デザインをパターンとパラメーターに分解して再利⽤する 71 変わらない部分：パターン • 画面作成に必要な画面要素（UIコンポーネント） • 各画面要素の挙動（テーブル、ボタン、バッヂ、入力フィル度など） • 画面レイアウト、ナビゲーション、ダイアログなど
72. 72 Fixelの新しいアプローチ: デザインをパターンとパラメーターに分解して再利⽤する 72 変わらない部分：パターン • 画面作成に必要な画面要素（UIコンポーネント） • 各画面要素の挙動（テーブル、ボタン、バッヂ、入力フィル度など） • 画面レイアウト、ナビゲーション、ダイアログなど
73. 73 Fixelの新しいアプローチ: デザインをパターンとパラメーターに分解して再利⽤する 73 変わる部分：パラメーター • 主にビジュアルデザインに関連する部分（色、フォント、アイコン、サイズなど） • トーンアンドマナー
74. 74 Fixelのデザインシステムの作成・運⽤⽀援サービス 74 UXHub デザインシステムプラットフォーム Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ ②パラメーターをGUIで編集する 機能を提供 ①パターンとパラメーターを 意識して作成された デザインシステム ③FDSとUXHub を⽤いて新しいデ ザインシステムを作成、 必要な画⾯要素の追加
75. 75 l デザインシステムを短期・低コストで導⼊可能 l ⾞輪の再発明を辞める l 各種ガイドの再利⽤ l UIコンポーネントのコードを再利⽤ l 画⾯レイアウトやナビゲーションなどのパターン化と再利⽤ l 独⾃性のあるデザインを簡単に⼊⼿ l デザイントークンを編集することで必要なデザインを作成 Fixelの取り組みのメリット デザインをシステム化して活⽤する
76. 76 l ITにおけるデザインはまだ歴史が浅く、オーダーメードの段階 l アメリカを中⼼にデザインのシステム化が起きている l アトミックデザイン、デザインシステムなど l デザインの産業化に必要なデザインのツールも揃えつつある l デザインシステムがSIerや情シスには有効である l デザイン品質向上 l フロントエンド⽣産性向上及び費⽤低減 l デザインシステムをスクラッチから作るのは⼤変なので既存のものを再利⽤ l UXHub、Fixel Design SystemとFixelのコンサルティングを活⽤ l デザインを作るのではなく使う時代に︕ まとめ
77. 77 業務系のシステムこそ、最初の効果が出やすい︕ 品質 時間 初回UXデザインプロジェクトの 効果が最も⼤きい フェーズ#1 フェーズ#2 User eXperience
78. 78 景気衰退が予想され、システムへの予算が厳しくなった時にこそ、 l デザインのシステム化を進め、 l デザインの品質を維持しつつ、 l フロント実装のコスト低減（平均５０％減） l リモートワークにも耐えられる、使いやすく分かりやすいシステムに︕ コロナ vs デザイン
79. 79 参考書籍︓
80. 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 その他、事例紹介など 今後の内容
81. MAKE DESIGN EASY SIer/情シスのデザインパートナー