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

元ITコンサルタントの⽬から⾒た
ITにおける今までのデザインとこれからのデザイン
SIer/情シス向け「ITとデザインは仲良し︕」シリーズ第1回
2020/08/26

View Slide

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

View Slide

3
今⽇のスピーカの紹介
3
ۚ ੒఩
3PZ,JN
69&OHJOFFS$&0PG'JYFM *OD
商社マン
プロダクト
オーナー
アプリ開発者/システムアーキテクト
UXデザイナー、サービスデザイナー
ΩϟϦΞ
5年 10年 10年
• 輸出業務
• BPR
• 企業再編TF
• J2EE
• Frame
work
設計
• SOAコンサルティング
• 業務システム設計・構築
• 企業システムインフラ設計・構築
• CMSコンサルティング
スマート
カタログ
ソリュー
ション開
発
• UX/UIデザイン
• 新規サービスデザイン・構築
• 業務システムと連携するスマ
ホ・タブレットアプリ開発
• 自社サービス開発
ITの目線で、デザインを⾒つめて来
ている
プログラマー ITコンサルタント/アーキテクト

View Slide

元ITコンサルタントの⽬から⾒た、ITにおける
l 今までのデザイン
l なぜデザインが注⽬されているか︖
l ⽇本企業のデザインに対する対応の現状
l それでも残る、デザインの活⽤に対する課題
l 最も根本的な問題︓デザインの成熟度
l これからのデザイン
l 海外でデザインに起きている変化︓デザインのシステム化
l 新しいヒーロー、「デザインシステム」の登場
l （ITらしく）パターンとパラメーターで分解して捉えるデザイン
l 次回以降の内容紹介

View Slide

今までのデザイン
なぜデザインが注⽬されているか︖

View Slide

6
⼯業商品のライフサイクル
6
新しい
他にない
多機能
⾼機能
⾼級感/信頼性
↕
安い
その他の
付加価値

View Slide

7
7
• 多くの商品がこの段階まで進んでいる
• 付加価値の提供のため、視点が商品から⼈に移る
AI/IoT Cloud
Computing
SNS, Game,
その他のサービス
ERP等パッケージ
App
⼯業商品のライフサイクル
新しい
他にない
多機能
⾼機能
⾼級感/信頼性
↕
安い
その他の
付加価値

View Slide

8
8
(私が考える)
⽕付け役の⼈と製品

View Slide

9
商品の価値基準が変わった
商品スペック使⽤者経験
＜

View Slide

10
新しい価値提供⼿段としてのデザイン
デザインがビジネスの成敗の
重要な要因となった

View Slide

11
業務システムにもデザインの波がやってくる
コンシューマライゼーション
※ コンシューマライゼーションとは、企業や官庁などの情報システムで、一般消費者向けのIT製品やサービスを導入・利用すること。
また、IT関連製品や技術の進歩・革新を一般消費者向け分野が主導し、企業向けIT分野がそれを後追いして取り込むようになる傾
向のこと。（IT用語辞典の定義から抜粋）

View Slide

12
ネットワークで繋がる世界
業務システムの一部が一般ユーザーに公開されることによって、
業務システムのUIに対する要件が変わってしまった
社員
トレーニングされている
長時間使用して慣れている
一般ユーザー
事前知識がない
たまにしか使わない
社員を前提に作成されたシステム

View Slide

13
SaaS
製品からサービスへ
• 購入からサブスクリプションの時代に移行
• 常に改善し、常にリリースする時代に
• タッチポイントが増え、UXはさらに大事になって行く

View Slide

14
l 機能・⾮機能要件だけでは対応できない課題
がある
l システムの要件定義の際からUXの要件を意
識して定義するようにする
業務システムにおいて「UXの要件」を新しく考慮する必要が⽣じた
UXの要件
機能要件
⾮機能要件
システム・サービスの要件
ü 分かりやすく、使いやすくする
ü 操作ミスを防⽌し、作業効率を上げる
ü ⼀貫した経験を提供し、ブランドを構築する
ü セキュリティーのリスクを下げる
ü ビジネスのコストを低減する
ü システム実装・改修費⽤を下げる

View Slide

15
l 技術の成熟によって、機能だけでは売れなくなった
l コンシューマライゼーションによって、システムに要求されるデザインの品質が⾼く
なった
l ユーザーの前提が変わった。
l トンレーニングなし、短時間の使⽤
l SaaSの普及
l 常に改善、改修
まとめ
ITを囲む環境が変わった

View Slide

⽇本企業のデザインに対する対応の現状

View Slide

17
⽇本の⼤⼿SIer、⼤企業のIT部⾨は今の変化にどう対応しているか︖
2011年 2019年
既存製品のデザイン
を改善してほしい
新規サービスを
⼀緒に考えてほしい
⾃社にUXデザインの⼈材を育て
たい・部署を作りたい
UXデザインの部署はできたけ
ど、あまり広がらない
DX
2020年
デザイン
システム導⼊

View Slide

18
1. デザインに対する適切な投資額が分かるようにする
2. デザインを活⽤するための新しいITプロセスを定義する
3. デザインの成果物をITに合わせて再定義する
4. エンジニアにUX/UIデザインの知識を教える
Fixelが情シスやSIerのデザイン導⼊・活⽤のために今までやって来たこと

View Slide

19
l 各プロジェクトでUXデザインに求めるものを明確にする
l 考慮すべきUXの特徴
l 達成すべきUXのレベル
l KGI/KPIを明確に定義し、ビジネス価値を考慮してデザインへの投資額を決める ⇒ ROI
の算出ができるようにする
1. デザインに対する適切な投資額が分かるようにする
UX Honey Comb
対象システムの特徴
を考慮して定義する
多くの業務システム
が求めるレベル

View Slide

20
反復
2.デザインを活⽤するための新しいITプロセスを定義する
コンテキスト分析
ジャーニーマップ
作成
メンタルモデル
分析
プロトタイプ作成ユーザーテスト
評価と改善
ゴールと範囲の
設定
分析フェーズ実証フェーズ
l プロジェクトのゴール・要件に応じて上記のプロセスを適切に調整
評価基準の検討
計画フェーズ
ペルソナ定義
UXデザインの⼀般的プロセス

View Slide

21
2.デザインを活⽤するための新しいITプロセスを定義する(・・・続き)
要件定義基本設計詳細設計実装テスト
コンテキスト分析
ジャーニーマップ
作成
メンタルモデル
分析
プロトタイプ作成ユーザーテスト
評価と改善
ゴールと範囲
の設定
評価基準の検
討
計画フェーズ
ペルソナ定義
UXデザイン × ウォータフォールプロセス
UX Driven Process

View Slide

22
UXデザイン × アジャイルプロセス
デザイン
実装
デザイン
基盤作成実装
デザイン
イテレーションイテレーションイテレーション
リリースリリース
テ
ス
ト
テ
ス
ト
デ
ザ
イ
ン
デ
ザ
イ
ン
コンテキス
ト分析
ジャーニー
マップ
作成
メンタルモ
デル
分析
プロトタイ
プ作成
ユーザーテ
スト
評価と改善
ゴールと
範囲の設
定
評価基準
の検討
計画フェー
ズ
ペルソナ定
義
プラニングフェーズ
実装フェーズ
2.デザインを活⽤するための新しいITプロセスを定義する(・・・続き)
UX Driven Process

View Slide

23
l UX/UIデザインの成果物からITが必要とする情報を抜け漏れなく伝えるための調整
l プロジェクト単位、あるいは企業単位でデザインとITのインタフェースとしての⽂書
の体系と内容を定義する
3. デザインの成果物をITに合わせて再定義する
IT
Project
UXD
⽤語と成果物を合わせる

View Slide

24
l
UXデザインは論理的な思考と⼈に対する理解が
あれば誰でもできる
l
ユーザーに対する理解・配慮がもっと⼤事
l
最初はUXデザイナーと⼀緒に経験を積み、⾃⽴して
⾏くように誘導する
l
美的センスが必要な部分はごく⼀部で、それは専
⾨家（ビジュアルデザイナー）に任せればいい
論理的思考が必要な部分
美的センスやツールのスキルが必要な部分
詳細は今後のウェビナーでお話しします。

View Slide

25
l
UIデザインの背景にある理論をビジュアル
デザインの基本要素と⽂法として説明
l
⼀定レベル以上のUIデザインを⾮デザイ
ナーでもできるようにする
l
デザインの成果物の評価やデザイナーとの
コミュニケーションを円滑にする
詳細は今後のウェビナーでお話しします。

View Slide

26
l 個別プロジェクトにおける効果は確認済み
l しかし、全社に広げるのは結構⼤変
l 既存の仕事のやり⽅、ITのプロセスを変えることには努⼒と費⽤が必要
l 専⾨家のサポートが必要
l デザインの学習には時間とコストがかかる
l エンジニアがやる気を出してくれない・・・
先述した対応策に対する振り返り
新しい武器であるデザインが、有効活⽤できていない

View Slide

それでも残る、デザインの活⽤に対する課題

View Slide

28
時間の経過に伴うデザイン品質の劣化
時間 vs デザイン
品質
時間
初回リリース
２回⽬リリース
３回⽬リリース
その場あたりの
改修・機能追加
初回デザインとは異なるデザインポリ
シーによってデザインされる
もう最初のデザインの思想
なんて誰も知らない
その場あたりの
改修・機能追加
カオス︕

View Slide

29
時間の経過に伴うデザイン品質の劣化
時間 vs デザイン
品質
時間
初回リリース
２回⽬リリース
３回⽬リリース
理想
現実
こうあって欲しいけど・・・

View Slide

30
l システム単位でデザインの品質がバラバラ
組織 vs デザイン
品質
システムA システムB システムC システムD

View Slide

31
l サービス単位に異なるスタイルのデザイン
組織 vs デザイン
品質
サービスA サービスB サービスC サービスD
UX品質の低下
ブランド構築失敗

View Slide

32
l 作ったデザインの品質を将来の改善・拡張においてどうやって保つか︖
l 複数のシステム（サービス）間のデザインの⼀貫性はどうやって保つか︖
l デザインを「作る」だけではなく、「管理する」、「共有する」、「再利⽤する」
ことへの考慮が必要
デザインの有効活⽤のための課題
プロダクトのライフサイクルを通して
⽀援するデザインのプラクティスが不在

View Slide

最も根本的な問題

View Slide

34
ITにおけるデザインの歴史は⽐較的に短い
建築
IT
デザイン
⼈間の⽂明
現在
大昔
あらゆる分野のデザイン
l ⼀つの分野の成熟には時間が必要。かつ、歴史は繰り返す
l 建築で築いた⼿法はITで活⽤されている。
l 例︓プロセス、モジュール、コンポーネント、OOP等
l ITにおけるデザインは⽐較的に歴史が短く、産業としてまだ成熟できてない
l ウェブサイトの制作はできるけど、ITシステムのスケールと速度に対応できていない
l 既製品の活⽤、⼤量⽣産ができておらず、オーダーメードの段階

View Slide

35
区分 IT デザイン
制作ツール IDE、各種エディタ Ps、Ai、Sketchなど
統合ツール各種UT、CIツールで⾃動化
履歴管理ツール Github、Subversionなど
共有ツール Github、Subversionなど
プロセス • ウォーターフォール
• アジャイル
• 実績・情報多数
• 汎⽤的UXデザインプロセス
• 標準的なUIデザインプロセスの不在
• 実績・情報不⾜
関連情報⽂書体系、管理体制が整っている。
資産管理ツールがある
共有/再利⽤ OSS（⽂化になっている）フリー素材、公開フォントなど
ITとデザインの作業環境の⽐較
デザインのツールは個⼈向け・制作にフォーカスしたものが多く、
組織として作業・共有・管理するためのツールが揃えていない

View Slide

36
• アジャイル
これらのツールがない状態で
ITプロジェクトが進められますか？

View Slide

37
• アジャイル
ITがデザインを活⽤するには
この間をどう埋めればいいか︖

View Slide

38
まとめ
ITにおけるデザインは、産業化への⻑い道のりに出たばかり
IT
デザイン
ビジネス

View Slide

これからのデザイン
海外のデザイン業界で今起きていること

View Slide

40
「これから」とは、時差を考慮した表現
l ⽇本では「これから」だけど、欧州では「今起きていること」
l ⽇本でも⼀部進んだ企業の中では「既に起きていること」
前置き
時差は、0.5~3年？
シリコンバレー日本

View Slide

41
求められる新しい⼈材像︓ユニコーンデザイナー
l レベル１ユニコーン︓デザインもコーディングもできる⼈
l レベル２ユニコーン︓レベル１＋ビジネス知識
シリコンバレーを中⼼に増えているユニコーン
l UXデザイナー
l UXリサーチャー
l UXエンジニア
l UXマネージャー
今時いけてる⼈材は、デザインとコーディングは
同時にできて当たり前
ユニコーンを探せ︕

View Slide

42
ユニコーン達によってデザインがITに急速に接近中︕
IT
デザイン
ビジネス
デザインを
システム親和的にするぜ︕
I’m CDO!

View Slide

43
UIデザインを「コンポーネント単位」でとらえる
“Atomic Design” という⼿法の登場
※Atomic Designの提案者
Brad Frost⽒
UI要素を「原⼦・分⼦・有機体
…」といった物理世界を構成する
仕組みにならって構造化・部品化。
それらを階層的に組み合わせるこ
とで、⼤きなコンポーネントや
ページを作成する。

View Slide

44
l 画⾯要素を①原⼦ ②分⼦ ③有機体 ④テンプレート ⑤ページの5段階で構成
l [原⼦ ➡ 分⼦ ➡ 有機体] の順でより具体的なUIコンポーネントになる
l テンプレート ︓ 複数画⾯へ展開するためのページレイアウトの枠組み
l ページ ︓ 具体的な内容が⼊った個別画⾯
Atomic Designの詳細

View Slide

45
ü Atomic Designの構造にならい、シンボルを⼊れ⼦構造で作る。
ü デザインの構造に合わせて、UIコンポーネントも実装する。
Atomic Designを使ったデザイン
Atomic
Design
粒度対象要素サンプル
デザイン
トークン Lv0
部品に紐づく⾊、太さ、フォント、
⾓丸などの属性
原子
Atoms
Lv1
これ以上分解できない
最⼩単位の部品
分子
Molecules
Lv2
原⼦を組み合わせて作る
様々な画⾯やコンテキストで利⽤
できる汎⽤性のある部品
有機体
Organisms
Lv3
複数の原⼦・分⼦で構成
⽐較的複雑な部品

نةٝ

5JUMF

View Slide

46
ü デザイン上の構造と、コード上の構造を共通化できる
ü デザインとコードを同じ粒度で再利⽤を進められる
ü デザイン修正の影響範囲を把握しやすく、システムの機能追
加・改善に伴うデザインの迅速な変更が可能になる
Atomic Designを⽤いるメリット
ITにおけるコンポーネント、モジュールの考え⽅

View Slide

47
ü デザイン上の構造と、コード上の構造を共通化できる
ü デザインとコードを同じ粒度で再利⽤を進められる
ü デザイン修正の影響範囲を把握しやすく、システムの機能追
加・改善に伴うデザインの迅速な変更が可能になる
Atomic Designを⽤いるメリット
ITにおけるコンポーネント、モジュールの考え⽅
再利⽤可能な部品の
数が増えると次は︖
カタログが欲しくなる︕

View Slide

48
新しいヒーローの登場
Design System

View Slide

49
デザインシステムとは
デザインシステム
デザインガイドライン
UIコンポーネント
（デザイン＆コード）
各種リソース
Design System Gallery

View Slide

50
l
3rd party サービスプロバイダー向けのデザインガイド
ラインを公開していたが、あまり効果がなかったのでデ
ザインシステムの提供に⽅針転換
l
Web、iOS、Android向けのデザインシステムを提供
l
実装技術に依存しない、UIコンポーネントを提供
l
Localization、markupやスタイルガイドラインまで提
供
例︓Salesforceのデザインシステム
Salesforce
Lightning Design System
https://www.lightningdesignsystem.com

View Slide

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

View Slide

52
デザインシステムの構成要素の例
Lightning Design System Carbon Design System

View Slide

53

View Slide

54
UIコンポーネント⼀覧

View Slide

55
エンジニア向け利⽤ガイド
Lightning Design System Carbon Design
System

View Slide

56
デザイントークン
Lightning Design System Carbon Design
System

View Slide

57
Alibabaのデザインシステム
その他のデザインシステム
ANT Design System
https://ant.design
U.S. Web Design Standards
https://standards.usa.gov
アメリカの政府機関のデザインシステム

View Slide

58
Githubに公開されたデザインシステム⼀覧
デザインシステムの⼀覧
Awesome Design Systems
https://github.com/alexpate/awesome-design-systems
Adele
https://adele.uxpin.com/
UXPinで運⽤するデザインシステム⼀覧
Adele
https://adele.uxpin.com/

View Slide

59
l デザインと実装に必要な情報が⼀箇所に︕
l デザインガイドラインによって、デザインの⽅
針とその背景の考え⽅などの共有ができるので、
関係者全員がデザインに対して共通の認識を持
つことができる
l デザインシステムのメリット︓
l デザイナー︓複数のデザイナーが⼀貫性のあるデザインを
効率よく作成できる
l エンジニア︓コードの再利⽤によって開発⽣産性と実装の
品質が上がる
l ビジネスパーソン︓デザインを具体化して管理できる資産
にする
デザインシステムの価値
（デザイン＆コード）
各種リソース

View Slide

60
デザインシステムを媒体にしたコラボレーション
デザイン
システム
ビジネス
パーソン
エンジニア
デザイナー
機能追加・改善の際に、
判断の基準になる︕
デザイン資産の
価値を定量化できる
再利⽤できる部品が
揃っている︕
企業活動におけるデザイン活⽤の基盤

View Slide

61
l 情シス
l 社内システムを分かりやすく、使いやすくできる
l システム間の使い勝⼿の⼀貫性を確保
l システム構築のコスト低減
l SIer
l 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上（２５％以上）
l ⼀貫性のあるデザインを⾼品質で提供することでお客様に対するサービス向上
l 他Sierに対する競争優位を占めることが可能になる
l サービスプロバイダー
l デザインの⼀貫性獲得によるブランド構築
l より迅速な改善・リリースが可能に
l リリースを重ねてもデザインの⼀貫性や品質が落ちない
l 今後のデザイントレンド変化に迅速に対応可能
各プレイヤーにおけるデザインシステムの価値

View Slide

62
Figma
l ブラウザーベース
l ウェブ経由の共有・権限管理
l 複数⼈の同時編集
l リアルタイムコメント機能
l バージョン管理
新しいツールの登場
動画

View Slide

63
• アジャイル
先述の資料

View Slide

64
制作ツール IDE、各種エディタ Figma、Ps、Ai、Sketchなど
統合ツール各種UT、CIツールで⾃動化 Figma
履歴管理ツール Github、Subversionなど Figma
共有ツール Github、Subversionなど Adobe Cloud、Figma、デザインシステム
• アジャイル
デザインの共同作業、デザインのシステム化を意識したツールの強化
欧州の今

View Slide

65
• アジャイル
ITがデザインを活⽤するには
この間をどう埋めればいいか︖
先述の資料

View Slide

66
区分 IT 連携デザイン
制作ツール IDE、各種エディター Figma、Ps、Ai、Sketchなど
統合ツール各種UT、CIツールで⾃動化ー Figma
履歴管理ツー
ル
Github、Subversionなどー Figma
• アジャイル
UX Driven
Process
共有ツール Github、Subversionなどデザイン
システム
Adobe Cloud、Figma
ITとデザインの連携をデザインシステムで⾏う
ITとデザインの間の溝が
埋まりつつある

View Slide

67
l キャリア傘下のIT企業
l 独⾃パッケージ製品にデザインシステムを適⽤、７つのプロダクトの中から３つに対して適⽤済み。
l フロントエンド実装の標準化の⼀環として実装のリファクタリングも⾏う
l 国内⼤⼿の保険会社
l 既存システムの統合・改善のプロジェクトでデザインシステム構築
l デザインの改善はもちろん、フロント実装のコスト削減・納期短縮
l 家電メーカー
l 全社向けのデザインシステム構築後、事業部単位、プロダクト単位に展開中
l 法律関連サービスプロバイダー
l デザインシステムで複数のサービス間のデザインの⼀貫性獲得
l フロントエンド実装の標準化とコスト低減
⽇本におけるデザインシステムの導⼊状況（Fixelの⽀援事例を中⼼に）

View Slide

68
l 初期コストがかかる
l デザインガイドの作成
l UIコンポーネントの洗い出しとコードの実装
l デザインシステム公開のためのサイト構築
l 継続的な運⽤が必要
l デザイナーとエンジニアで構成された専任のチームが必要
l デザインシステムの管理チームと個別プロジェクト間の配布とフィードバックのプロセス
定義が必要
デザインシステムの活⽤における課題
デザインシステムをスクラッチから作るのは難しい

View Slide

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

View Slide

70
Fixelにおけるデザインの捉え⽅
Patterns & Parameters

View Slide

71
Fixelの新しいアプローチ: デザインをパターンとパラメーターに分解して再利⽤する
71
変わらない部分：パターン
• 画面作成に必要な画面要素（UIコンポーネント）
• 各画面要素の挙動（テーブル、ボタン、バッヂ、入力フィル度など）
• 画面レイアウト、ナビゲーション、ダイアログなど

View Slide

72
72
変わらない部分：パターン
• 画面作成に必要な画面要素（UIコンポーネント）
• 各画面要素の挙動（テーブル、ボタン、バッヂ、入力フィル度など）
• 画面レイアウト、ナビゲーション、ダイアログなど

View Slide

73
73
変わる部分：パラメーター
• 主にビジュアルデザインに関連する部分（色、フォント、アイコン、サイズなど）
• トーンアンドマナー

View Slide

74
Fixelのデザインシステムの作成・運⽤⽀援サービス
74
UXHub
デザインシステムプラットフォーム
Fixel Design System
業務システム向け汎用的
デザインシステムのテンプレート
プロフェッショナルサービス
デザインシステム作成・運用支援
＋＋
②パラメーターをGUIで編集する
機能を提供
①パターンとパラメーターを
意識して作成された
③FDSとUXHub を⽤いて新しいデ
ザインシステムを作成、
必要な画⾯要素の追加

View Slide

75
l デザインシステムを短期・低コストで導⼊可能
l ⾞輪の再発明を辞める
l 各種ガイドの再利⽤
l UIコンポーネントのコードを再利⽤
l 画⾯レイアウトやナビゲーションなどのパターン化と再利⽤
l 独⾃性のあるデザインを簡単に⼊⼿
l デザイントークンを編集することで必要なデザインを作成
Fixelの取り組みのメリット
デザインをシステム化して活⽤する

View Slide

76
l ITにおけるデザインはまだ歴史が浅く、オーダーメードの段階
l アメリカを中⼼にデザインのシステム化が起きている
l アトミックデザイン、デザインシステムなど
l デザインの産業化に必要なデザインのツールも揃えつつある
l デザインシステムがSIerや情シスには有効である
l デザイン品質向上
l フロントエンド⽣産性向上及び費⽤低減
l デザインシステムをスクラッチから作るのは⼤変なので既存のものを再利⽤
l UXHub、Fixel Design SystemとFixelのコンサルティングを活⽤
l デザインを作るのではなく使う時代に︕
まとめ

View Slide

77
業務系のシステムこそ、最初の効果が出やすい︕
品質
時間
初回UXデザインプロジェクトの
効果が最も⼤きい
フェーズ#1 フェーズ#2
User eXperience

View Slide

78
景気衰退が予想され、システムへの予算が厳しくなった時にこそ、
l デザインのシステム化を進め、
l デザインの品質を維持しつつ、
l フロント実装のコスト低減（平均５０％減）
l リモートワークにも耐えられる、使いやすく分かりやすいシステムに︕
コロナ vs デザイン

View Slide

79
参考書籍︓

View Slide

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
その他、事例紹介など
今後の内容

View Slide

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

View Slide

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

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

Fixel Inc.

More Decks by Fixel Inc.

Other Decks in Programming

Featured

Transcript