デザインシステムを活⽤して、 デザイン品質と開発⽣産性を⾶躍的にあげる︕ SIer/情シス向け「ITとデザインは仲良し︕」シリーズ 第8回 2021/10/28

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

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

今⽇話す内容 ① SIerと情シスが持つデザインの課題と今までの対応 ② 「デザインの課題」とは具体的に何か︖ ③ ミッシングリンク︓デザイン実装の課題 ④ デザインから実装までのプロセス ⑤ Fixelが提案する、さらに進化したプロセス ⑥ ラップアップ

① SIerと情シスが持つ デザインの課題と今までの対応

6 l toCで始まったデザインへの関⼼はやがてtoBやtoEの分野にも波及 l 使いやすく、わかりやすいはもはや「当たり前」の要件に l ただ機能するだけのシステムではバリューが出せない時代に l SIerや情シスのデザインへの対応が必要となった デザインへの要求が強くなっている

7 l 社内に作ったデザインチームはエンジニアチームへの展開に苦労している l デザインが新しいコスト要素になっている l デザインとITの融合が起きていない l デザインのROIが⾒出せていない 今までの対応はあまり有効ではなかった https://speakerdeck.com/fixel_admin/yuan-itkonsarutantofalsemu-karajian-ta- itniokerujin-madefalsedezaintokorekarafalsedezain 過去資料

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

② SIerと情シスが持つ 「デザインの課題」とは具体的には何か︖

10 l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの要件定義、デザインの実施、デザインの実装を既存のITプロセスに 挿⼊する必要がある ITのプロセスにおける「デザインの⽋落」 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao 過去資料 過去資料 過去資料

11 l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの要件定義、デザインの実施、デザインの実装を既存のITプロセスに 挿⼊する必要がある ITのプロセスにおける「デザインの⽋落」 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao 過去資料 過去資料

12 l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの要件定義、デザインの実施、デザインの実装を既存のITプロセスに 挿⼊する必要がある ITのプロセスにおける「デザインの⽋落」 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao 過去資料 過去資料 過去資料

13 l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの要件定義、デザインの実施、デザインの実装を既存のITプロセスに 挿⼊する必要がある ITのプロセスにおける「デザインの⽋落」 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao 過去資料

14 l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの要件定義、デザインの実施、デザインの実装を既存のITプロセスに 挿⼊する必要がある ITのプロセスにおける「デザインの⽋落」 https://speakerdeck.com/fixel_admin/sierbi-jian-dezainsisutemuwohuo-yong- sitedezainwoke-ti-karawu-qi-nisuru-seminazi-liao 過去資料 今⽇の話は ここ︕

③ ミッシングリンク デザイン実装の課題

16 l ハンドオーバーの課題 l ハンドオーバーとは︓デザイナーの成果物をエンジニアに渡して、作業できるよ うにすること l デザイン作業中の情報が⼤部⽋落した状態で渡されることが多い l 実装の課題 l デザインの実装に⼯数が無駄にかかる l 理想はデザインがそのままコードになることであるが・・・今は無理 l フロント実装コードの再利⽤性が低い l アーキテクチャ設計（⾒た⽬とロジックの分離）がきちんとできていない l デザインと実装の間に品質の差が⽣じる l フロント実装に慣れてないエンジニアが多い デザイン実装の課題とは︖

17 デザイン実装における失敗事例の紹介 デパートの「I社」 事例紹介 ワークフロー「S社」 事例紹介 未公開 未公開

④ デザインから実装へのプロセス

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 ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ③ 上記の制作物を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインをもらって実装するまでのプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン ベース 作成 システム デザイン 実装準備 実装

21 ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ③ 上記の制作物を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインをもらって実装するまでのプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン ベース 作成 システム デザイン 実装準備 実装 どのように実装する かの計画を⽴てる

22 ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ③ 上記の制作物を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインをもらって実装するまでのプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン ベース 作成 システム デザイン 実装準備 実装 システム実装の前に 準備作業が必要

23 システム システム システム ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ③ 上記の制作物を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインをもらって実装するまでのプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン ベース 作成 デザイン 実装準備 実装 この作業をシステム 単位で⾏う（汗）

24 システム デザインシステムがある場合のプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 デザイン システム デザインシステムが 代わりになる ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ② デザインシステムを作成する ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う

25 システム デザインシステムがある場合のプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 デザイン システム デザインシステムが 代わりになる ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ② デザインシステムを作成する ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザイン分析は⼿軽に、 フロント実装準備は 不要になる︕

26 システム システム システム デザインシステムがある場合のプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 デザイン システム 複数のシステムで 再利⽤できる ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ② デザインシステムを作成する ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインシステムが 代わりになる デザイン分析は⼿軽に、 フロント実装準備は 不要になる︕

27 システム システム システム ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ② デザインシステムを作成する ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う デザインシステムがある場合のプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 デザイン システム デザインシステムの 実装と管理の ⼯数が必要

28 システム システム システム デザインシステムがある場合のプロセス UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 デザイン システム デザインシステムの 実装と管理の ⼯数が必要 複数のシステムに展開すると、 全部同じ⾒た⽬になる︖ （メリットでありデメリットでもある） ① デザインの成果物をもらい、デザイン実装のための分析を⾏う ② 実装のベースとなるCSS/HTMLとUIのコンポーネントの作る ② デザインシステムを作成する ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う

29 デザインシステムの活⽤に対する課題の実例 機器メーカー 「M社」事例紹介 SIer「N社」 事例紹介 未公開 未公開

⑤ UXHubを活⽤した デザインから実装へのプロセス

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

32 ① テンプレート(Fixel Deisgn System)からデザインシステムを作成 ② 対象プロダクトのデザインに合わせてカスタマイズ l GUIから、またはFigmaからデザイントークンを修正 ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う UXHubがある場合のプロセス システム UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 UXHub FDS

33 ① テンプレート(Fixel Deisgn System)からデザインシステムを作成 ② 対象プロダクトのデザインに合わせてカスタマイズ l GUIから、またはFigmaからデザイントークンを修正 ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う UXHubがある場合のプロセス システム UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 UXHub FDS ⼿軽︕

34 ① テンプレート(Fixel Deisgn System)からデザインシステムを作成 ② 対象プロダクトのデザインに合わせてカスタマイズ l GUIから、またはFigmaからデザイントークンを修正 ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う UXHubがある場合のプロセス システム UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 UXHub FDS デザインと実装の ⼿間は最⼩限︕ コーディング不要︕ ⼿軽︕

35 システム システム ① 既存デザインシステムを複製して新しいデザインシステムを作成 ② 対象プロダクトのデザインに合わせてカスタマイズ l GUIから、またはFigmaからデザイントークンを修正 ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う UXHubがある場合のプロセス システム UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 UXHub FDS デザインと実装の ⼿間は最⼩限︕ コーディング不要︕ ⼿軽︕ 上記の①と②を⾏うだけで 複数システムに展開可能

36 システム システム ① 既存デザインシステムを複製して新しいデザインシステムを作成 ② 対象プロダクトのデザインに合わせてカスタマイズ l GUIから、またはFigmaからデザイントークンを修正 ③ 上記を⽤いて、対象プロダクトの各画⾯の実装を⾏う UXHubがある場合のプロセス システム UI デザイン 各画⾯ 実装 デザイン 分析 UX デザイン デザイン 実装準備 実装 UXHub FDS デザインと実装の ⼿間は最⼩限︕ コーディング不要︕ ⼿軽︕ 上記の①と②を⾏うだけで 複数システムに展開可能 システム単位に異なる デザインを⼿軽に適⽤

37 デモ UXHubがある場合のプロセス デザインシステム作成から活用、運用までのプロセス ①UXHubとFDSの紹介 ②Figmaによるデザイン変更 ③UXHubへインポートしてデザイントークン更新 ④ プロジェクトコードへの反映

⑦ ラップアップ

今⽇の内容のサマリー l 既存のITのプロセスにはそもそも「デザイン」という要素が⽋落していた l デザインの課題とはより具体的には以下の３つに定義でき、これらをITプロセスに 融合させる必要がある l デザインの要件定義（UXデザイン） l デザインの実施（UIデザイン） l デザインの実装 l デザインの実装には改善の余地が多い

今⽇の内容のサマリー l デザインシステムを導⼊することで実装の品質と効率が上がる l ただし、デザインシステムの活⽤にも課題はある l デザインシステム構築と運⽤の⼯数がかかる l 静的なデザインシステムは複数のシステムに対応することが困難 l Fixelが提供するUXHubとFixel Design Systemを活⽤することで解決︕ l Figmaとのシームレスな連携 l GUIでデザイントークンを編集してカスタマイズ l アセットダウンロードでプロジェクトに反映（ノーコード︕） l 複数のシステムに⼿軽に展開できるデザインの実現︕

41 費⽤（暫定） • 無料： • デザインシステム１個、 • 編集者２人まで • 有料 • 月間1,500円/編集者〜 • 0円/閲覧者 ※企業ユーザーは別途相談 UXHub デザインシステムプラットフォーム • 無料！ Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 初期デザインシステム作成：100万円~ • 更新・拡張：100,000/人日 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ 11⽉4⽇ 正式リリース

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

最後に l デザインシステムに興味があるデザイナーを募集しております。 l 業務システムのUX/UIデザインに興味があるデザイナーを募集しています。 l 周りに興味のありそうな⽅に、 是⾮ご紹介ください。 l 申し込みは弊社のウェブサイトから お願いします︕ https://fixel.co.jp/blog/recruit-20210929/

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