Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Fixel Inc.
October 28, 2021

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

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

Fixel Inc.

October 28, 2021
Tweet

More Decks by Fixel Inc.

Other Decks in Design

Transcript

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

    View Slide

  2. 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年

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. ⑦ ラップアップ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide