SIer / 情シス向け「 IT とデザインは仲良し ！ 」シリーズ 第 8 回

SIerのデザインに関する悩みを解消：デザインシステムを活用してデザイン品質と開発生産性を飛躍的に上げる！

Transcript

1. デザインシステムを活⽤して、 デザイン品質と開発⽣産性を⾶躍的にあげる︕ SIer/情シス向け「ITとデザインは仲良し︕」シリーズ 第8回 2021/10/28
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年 11年
3. 3 今⽇のスピーカの紹介 3 ۚ ੒఩ 3PZ
   ,JN 69
   &OHJOFFS
   
   $&0
   PG
   'JYFM *OD 営業 テクノロジー UX/UIデザイン 経営 5年 10年 10年 ある程度は、俯瞰できます︕
4. 今⽇話す内容 ① SIerと情シスが持つデザインの課題と今までの対応 ② 「デザインの課題」とは具体的に何か︖ ③ ミッシングリンク︓デザイン実装の課題 ④ デザインから実装までのプロセス ⑤ Fixelが提案する、さらに進化したプロセス ⑥ ラップアップ
5. ① SIerと情シスが持つ デザインの課題と今までの対応
6. 6 l toCで始まったデザインへの関⼼はやがてtoBやtoEの分野にも波及 l 使いやすく、わかりやすいはもはや「当たり前」の要件に l ただ機能するだけのシステムではバリューが出せない時代に l SIerや情シスのデザインへの対応が必要となった デザインへの要求が強くなっている
7. 7 l 社内に作ったデザインチームはエンジニアチームへの展開に苦労している l デザインが新しいコスト要素になっている l デザインとITの融合が起きていない l デザインのROIが⾒出せていない 今までの対応はあまり有効ではなかった https://speakerdeck.com/fixel_admin/yuan-itkonsarutantofalsemu-karajian-ta- itniokerujin-madefalsedezaintokorekarafalsedezain 過去資料
8. 8 1. デザインをエンジニアの視点で再解析して教える（エンジニアに優しいデザイン） 2. デザインとITを融合した新しいプロセスの提案 3. デザインシステムを活⽤して、デザインを課題でなく、ITの有効な道具にする 既存の課題に対するFixelのアプローチ https://speakerdeck.com/fixel_admin/sierbi-jian- dezainsisutemuwohuo-yong-sitedezainwoke-ti-karawu-qi-nisuru- seminazi-liao 過去資料 過去資料 過去資料 https://speakerdeck.com/fixel_admin/qing- sisuxiang-ke-it-todezainhazhong-liang-si-sirizu-di-6- hui https://speakerdeck.com/fixel_admin/siernizai-ji-jing-yan- falsearudezainagajiao-eru-enzinianimoli-jie-dekiru- dezainfalseli-falserozitukuwoming-kasu-4013dc12-7fd4- 4814-ab79-5c3d14b4c90f
9. ② SIerと情シスが持つ 「デザインの課題」とは具体的には何か︖
10. 10 l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの要件定義、デザインの実施、デザインの実装を既存のITプロセスに 挿⼊する必要がある ITのプロセスにおける「デザインの⽋落」 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao 過去資料 過去資料 過去資料
11. 11 l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの要件定義、デザインの実施、デザインの実装を既存のITプロセスに 挿⼊する必要がある ITのプロセスにおける「デザインの⽋落」 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao 過去資料 過去資料
12. 12 l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの要件定義、デザインの実施、デザインの実装を既存のITプロセスに 挿⼊する必要がある ITのプロセスにおける「デザインの⽋落」 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao 過去資料 過去資料 過去資料
13. 13 l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの要件定義、デザインの実施、デザインの実装を既存のITプロセスに 挿⼊する必要がある ITのプロセスにおける「デザインの⽋落」 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao 過去資料
14. 14 l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの要件定義、デザインの実施、デザインの実装を既存のITプロセスに 挿⼊する必要がある ITのプロセスにおける「デザインの⽋落」 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao 過去資料 今⽇の話は ここ︕
15. ③ ミッシングリンク デザイン実装の課題
16. 16 l ハンドオーバーの課題 l ハンドオーバーとは︓デザイナーの成果物をエンジニアに渡して、作業できるよ うにすること l デザイン作業中の情報が⼤部⽋落した状態で渡されることが多い l 実装の課題 l デザインの実装に⼯数が無駄にかかる l 理想はデザインがそのままコードになることであるが・・・今は無理 l フロント実装コードの再利⽤性が低い l アーキテクチャ設計（⾒た⽬とロジックの分離）がきちんとできていない l デザインと実装の間に品質の差が⽣じる l フロント実装に慣れてないエンジニアが多い デザイン実装の課題とは︖
17. 17 デザイン実装における失敗事例の紹介 デパートの「I社」 事例紹介 ワークフロー「S社」 事例紹介 未公開 未公開
18. ④ デザインから実装へのプロセス
19. 19 l デザインの成果物はエンジニアから⼤変使い難いもの l デザインの成果物をもらい、改めて実装のための設計書を書くことになる l ⾮効率と品質劣化の原因︕ 前提︓デザインと実装という完全に別の世界︕ https://speakerdeck.com/fixel_admin/yuan-itkonsarutantofalsemu-karajian-ta- itniokerujin-madefalsedezaintokorekarafalsedezain 過去資料 過去資料 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao
20. 20 ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ③ 上記の制作物を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインをもらって実装するまでのプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン ベース 作成 システム デザイン 実装準備 実装
21. 21 ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ③ 上記の制作物を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインをもらって実装するまでのプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン ベース 作成 システム デザイン 実装準備 実装 どのように実装する かの計画を⽴てる
22. 22 ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ③ 上記の制作物を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインをもらって実装するまでのプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン ベース 作成 システム デザイン 実装準備 実装 システム実装の前に 準備作業が必要
23. 23 システム システム システム ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ③ 上記の制作物を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインをもらって実装するまでのプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン ベース 作成 デザイン 実装準備 実装 この作業をシステム 単位で⾏う（汗）
24. 24 システム デザインシステムがある場合のプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 デザイン システム デザインシステムが 代わりになる ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ② デザインシステムを作成する ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う
25. 25 システム デザインシステムがある場合のプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 デザイン システム デザインシステムが 代わりになる ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ② デザインシステムを作成する ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザイン分析は⼿軽に、 フロント実装準備は 不要になる︕
26. 26 システム システム システム デザインシステムがある場合のプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 デザイン システム 複数のシステムで 再利⽤できる ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ② デザインシステムを作成する ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインシステムが 代わりになる デザイン分析は⼿軽に、 フロント実装準備は 不要になる︕
27. 27 システム システム システム ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ② デザインシステムを作成する ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインシステムがある場合のプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 デザイン システム デザインシステムの 実装と管理の ⼯数が必要
28. 28 システム システム システム デザインシステムがある場合のプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 デザイン システム デザインシステムの 実装と管理の ⼯数が必要 複数のシステムに展開すると、 全部同じ⾒た⽬になる︖ （メリットでありデメリットでもある） ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ② デザインシステムを作成する ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う
29. 29 デザインシステムの活⽤に対する課題の実例 機器メーカー 「M社」事例紹介 SIer「N社」 事例紹介 未公開 未公開
30. ⑤ UXHubを活⽤した デザインから実装へのプロセス
31. 31 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステムカスタマイズ • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
32. 32 ① テンプレート(Fixel Deisgn System)からデザインシステムを作成 ② 対象プロダクトのデザインに合わせてカスタマイズ l GUIから、またはFigmaからデザイントークンを修正 ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う UXHubがある場合のプロセス システム UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 UXHub FDS
33. 33 ① テンプレート(Fixel Deisgn System)からデザインシステムを作成 ② 対象プロダクトのデザインに合わせてカスタマイズ l GUIから、またはFigmaからデザイントークンを修正 ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う UXHubがある場合のプロセス システム UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 UXHub FDS ⼿軽︕
34. 34 ① テンプレート(Fixel Deisgn System)からデザインシステムを作成 ② 対象プロダクトのデザインに合わせてカスタマイズ l GUIから、またはFigmaからデザイントークンを修正 ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う UXHubがある場合のプロセス システム UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 UXHub FDS デザインと実装の ⼿間は最⼩限︕ コーディング不要︕ ⼿軽︕
35. 35 システム システム ① 既存デザインシステムを複製して新しいデザインシステムを作成 ② 対象プロダクトのデザインに合わせてカスタマイズ l GUIから、またはFigmaからデザイントークンを修正 ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う UXHubがある場合のプロセス システム UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 UXHub FDS デザインと実装の ⼿間は最⼩限︕ コーディング不要︕ ⼿軽︕ 上記の①と②を⾏うだけで 複数システムに展開可能
36. 36 システム システム ① 既存デザインシステムを複製して新しいデザインシステムを作成 ② 対象プロダクトのデザインに合わせてカスタマイズ l GUIから、またはFigmaからデザイントークンを修正 ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う UXHubがある場合のプロセス システム UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 UXHub FDS デザインと実装の ⼿間は最⼩限︕ コーディング不要︕ ⼿軽︕ 上記の①と②を⾏うだけで 複数システムに展開可能 システム単位に異なる デザインを⼿軽に適⽤
37. 37 デモ UXHubがある場合のプロセス デザインシステム作成から活用、運用までのプロセス ①UXHubとFDSの紹介 ②Figmaによるデザイン変更 ③UXHubへインポートしてデザイントークン更新 ④ プロジェクトコードへの反映
38. ⑦ ラップアップ
39. 今⽇の内容のサマリー l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの課題とはより具体的には以下の３つに定義でき、これらをITプロセスに 融合させる必要がある l デザインの要件定義（UXデザイン） l デザインの実施（UIデザイン） l デザインの実装 l デザインの実装には改善の余地が多い
40. 今⽇の内容のサマリー l デザインシステムを導⼊することで実装の品質と効率が上がる l ただし、デザインシステムの活⽤にも課題はある l デザインシステム構築と運⽤の⼯数がかかる l 静的なデザインシステムは複数のシステムに対応することが困難 l Fixelが提供するUXHubとFixel Design Systemを活⽤することで解決︕ l Figmaとのシームレスな連携 l GUIでデザイントークンを編集してカスタマイズ l アセットダウンロードでプロジェクトに反映（ノーコード︕） l 複数のシステムに⼿軽に展開できるデザインの実現︕
41. 41 費⽤（暫定） • 無料： • デザインシステム１個、 • 編集者２人まで • 有料 • 月間1,500円/編集者〜 • 0円/閲覧者 ※企業ユーザーは別途相談 UXHub デザインシステムプラットフォーム • 無料！ Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 初期デザインシステム作成：100万円~ • 更新・拡張：100,000/人日 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ 11⽉4⽇ 正式リリース
42. MAKE DESIGN EASY SIer/情シスのデザインパートナー Q&A
43. 最後に l デザインシステムに興味があるデザイナーを募集しております。 l 業務システムのUX/UIデザインに興味があるデザイナーを募集しています。 l 周りに興味のありそうな⽅に、 是⾮ご紹介ください。 l 申し込みは弊社のウェブサイトから お願いします︕ https://fixel.co.jp/blog/recruit-20210929/
44. MAKE DESIGN EASY SIer/情シスのデザインパートナー ありがとうございました︕ アンケート記⼊のお願い