Slide 1

Slide 1 text

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

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年 11年

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

⑦ ラップアップ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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