ncdc-techseminer-20200219

業務システムのUX/UI改善のための
正しいアプローチとは︖
2 0 2 0 / 0 2 / 1 9
N C D C 株式会社
早津俊秀

View Slide

Copyright © NCDC Co., Ltd. All rights reserved.
プレゼンター紹介
早津俊秀
代表取締役/ビジネスアーキテクト
和歌⼭⼤学経済学部⾮常勤講師
元グロービス経営⼤学院客員准教授
2
⽇本電信電話にてエンジニア、新規ビジネス
プロデュースを経験後、HP，BEA、オラクル
等の外資系IT企業にてITコンサルタント、製
薬ベンチャーでのIT部⾨を統括。ベンチャー
⽀援等の後 NCDCを創業。
◉執筆
SOA サービス指向アーキテクチャ（翔泳社）
ビジネスはSOAで変⾰する（IDGジャパン）
スマートデバイス×業務システム導⼊ガイド（秀和システム）

View Slide

NCDCのサービス
l CX/UXと先端テクノロジーによってデジタルイノベーションを推進します
3
NCDC
CX/UX
デザイン
先端
テクノロジー
自社
サービス
• 新規サービス企画
• CX/UXデザインコンサルティング
• IoT/AI
• クラウドインテグレーション
• モバイル・Web先端技術
• モバイルプラットフォーム
[AppPot]の製造・販売
• IoTプラットフォーム
• [AppPot IoT]の製造・販売

View Slide

NCDCのサービスの特徴
4
ビジネスモデルのデザイン PoC・検証システム・インテグレーション
ワークショップ中⼼にビジネスモデル
からUXデザインまでを迅速に⾏いま
す。組織横断、会社横断のファシリ
テーションも得意です。
モックによる検証から現地検証まで、
PoCをその⽬的に応じて企画・実施
します
センサーから、AI、クラウド、
モバイルの標準技術まで、多
くのテクノロジーをインテグ
レーションします
ビジネスモデルの検討からデザインによる可視化、
先端テクノロジーの組み合わせでシステムを構築します

View Slide

UXとUXデザイン

View Slide

UXとUXデザイン
l UX
• User Experience
• 利⽤者の経験、製品・サービスを使⽤する際の印象や体験
l UXデザイン
• UXをデザインする。UXを設計する。UXを実現するための仕組みや
施策を考える
l 最適な「UX」を実現するために「UXデザイン」を⾏う
6

View Slide

UXの構成要素
7
http://www.jjg.net/elements/pdf/elements.pdf
UX
UI
（体験）
（使⽤性）
⽬的・ニーズ
機能
最近はUXとUIは分けて考える。
UIはUXを実現する⼀要素
少し古い時代の定義

View Slide

NCDCのUXデザインプロセス
8
⽬的の確認・
定義
ジャーニー
マップ
作成
ワイヤーフレーム
作成
ユーザーテスト
ペルソナ定義
UXフェーズ UIフェーズ
優先順位
機能抽出
UI
UX

View Slide

業務向けシステムのUX/UIプロセスは？
9
⽬的の確認・
定義
ジャーニー
マップ
作成
作成
ペルソナ定義
優先順位
機能抽出
システム
の⽬的
業務フロー
ターゲット
ユーザー
要件確定
作成
⼀
般
的
な
UX
デ
ザ
イ
ン
業
務
向
け
UX
デ
ザ
イ
ン
⼀般的な業務システム開発のプロセスと同じ

View Slide

NCDCのUXデザイン（ジャーニーマップ）
l ジャーニーマップ
• ペルソナになりきって、思考や⾏動のフローを可視化し、その時の
Insight（本⾳）を考えます。
業務フロー等、業務要件をヒアリング等によって定義すればよい
10

View Slide

NCDCのUXデザイン（ペルソナ）
l ペルソナ
• UXの視点で考えるため、「個の思考」を連想できるユーザーを定義
します
使⽤者が明確の場合がほとんどなので、ターゲットユーザー
として定義すればよい。
11

View Slide

業務向けシステムのUX/UIで重要なのは？
12
⽬的の確認・
定義
ジャーニー
マップ
作成
作成
ペルソナ定義
優先順位
機能抽出
システム
の⽬的
業務フロー
ターゲット
ユーザー
要件確定
作成
⼀
般
的
な
UX
デ
ザ
イ
ン
業
務
向
け
UX
デ
ザ
イ
ン
ここのベストプラクティス・
デザインパターンが重要

View Slide

業務向けUX / UIのポイント
l ⼀般的なUXデザインのプロセスに引っ張られてはいけない
l 業務向けならではのUIパターン・ベストプラクティスを
持つ
13

View Slide

業務向けUI特有のデザインパターン

View Slide

一覧表示
l 業務向けとしてはマージンとりすぎ
l ⼀画⾯での検索結果の表⽰が少なすぎ ☓
☓
15

View Slide

一覧表示
l ゆとりのあるマージンよりも⼀画⾯での表⽰量
l 検索結果をできるだけスクロールしないで表⽰ ○
○
16

View Slide

検索画面
l グーグルのような⾃由検索の機能がほしい︕
• しかし、検索結果はドキュメント検索ではなく、構造化された
データ項⽬だったりする
17
☓

View Slide

検索画面
l 業務で使う検索画⾯は項⽬ごとの検索フォームがあったほ
うが効果的な場合が多い
18
○

View Slide

装置のUIパターン
l UXデザインプロセスは使わない
l ⾮常に多くの操作を操作パターンで分類する→配置する
19

View Slide

業務向けUX / UIのポイント
l ⼀般的なUXデザインのプロセスに引っ張られてはいけない
l 業務向けならではのUIパターン・ベストプラクティスを
持つ
20

View Slide

より具体的なアプローチ

View Slide

Step1:ガイドラインを整備する
l カラー、フォント、フォーム、ボタンなど、UIを構成する要素を定義する
22

View Slide

Step1:ガイドラインを整備する
l カラー、フォント、フォーム、ボタンなど、UIを構成する要素を定義する
23

View Slide

Step2:デザインシステムを活用する
l 世界には公開されているデザインシステムが存在する
l 業務向けとしてIBM社やSalesforce社のものが参考になる
l HTML/CSSやReact/Vue向けのJava Script実装コードがセットになっている
IBM Carbon Design System
https://www.carbondesignsystem.com/
Salesforce.com Lightning Design System
https://www.lightningdesignsystem.com/
24

View Slide

l Salesforce.com Lightning Design System
25

View Slide

l IBM Carbon Design System
26

View Slide

Step3：自社のデザインシステムを作る・運用する
l ガイドライン、コンポーネントライブラリ（部品群）
を定義
l デザインシステムプラットフォームに登録、運⽤
l デザインシステムプラットフォーム
• Storybook
• Invision Design System Manager
• Specify
27

View Slide

デザインザインパートナーの選び⽅

View Slide

よくある問題「デザイナーがいない！」
l デザインがあまり重視されてこなかった業務システムの開発では、
デザイナーがほとんど関与せず、エンジニアが適当にデザインして
しまうことも多かったのではないかと思います。
l 近年、Webサービスやアプリの分野ではUX/UIデザインの重要性への認
識が⼀般的になり、業務システムの分野でもUX/UIデザインのニーズが
⾼まってきています。
l しかし、社内にデザイナーがいない場合どうするのか…
業務システムのデザ
インを外部に頼める
ものなのか︖
頼むといっても、誰に︖
WEB制作が主業務の
デザイン会社に頼ん
でもいいものか︖
29

View Slide

どのようなパートナーを探すべきか
l 結論からいうと、「業務システムの特性や、開発のこともよくわかって
いるデザイン会社」が望ましい。
l WEB制作会社などをあたれば、おそらく「⾒た⽬が整って美しい」
「今っぽい」画⾯デザインをつくってくれる会社はたくさんあります。
しかし、多⾯的に業務システムに最適なUX/UIを検討デザインできる
会社は実はそう多くない。
ü どんなユーザーがどう
いった⽬的で使うのか、
ユーザー像や業務フロー
の深い理解
ü ⾒た⽬の良し悪しだけで
なく実装や、他のシステ
ムとの結合まで想定した
課題の抽出
難しいのは、たとえば…
30

View Slide

システム開発の知見がUI検討時に役立った具体例①
その場合は、AWS側でサマリーデータをつくってからデータ
を渡せばデータ量を抑えられるので問題ないですよ。
必要であればAWS側の処理もアドバイスしますので、3年分
のデータを表⽰できるようにつくりましょう︕
本当はこの画⾯では3年分のデータをひとつのグラフにし
て表⽰したいんだけど、3年分のデータをAWSから引っ
張ってくると表⽰が遅くなったり、データ量が増えて
課⾦が⼼配になるのでやめました。
当社のデザイナー
＆エンジニア
お客さまの
画⾯設計担当者
31

View Slide

システム開発の知見がUI検討時に役立った具体例②
おそらく裏側でこういった処理をしてデータを引っ張ってく
ることになるのではないか︖
その場合、過去に似たような仕組みの実装をした経験から、
表⽰にかなり時間がかかってしまうリスクが考えられます。
要望にはできるだけ応えつつ、表⽰速度のリスクを回避して、
たとえばこういうUIに変えてはどうでしょうか︖
現場の話によると、膨⼤なデータの中からあれとそれと
これとを持ってきて１画⾯でに同時に表⽰する必要があ
る。
それを実現するためにこのようなワイヤーフレームにし
ました。
当社のデザイナー
＆エンジニア
お客さまの
画⾯設計担当者
32

View Slide

まとめ

View Slide

業務システムのUX/UI改善のための
正しいアプローチとは？
l ⼀般的なUXデザインプロセスに惑わされないこと
l UXとUIは完全に別物として考える
• 業務システムならではのUIパターンを考える
l ガイドラインからデザインシステムに⾄るまで、
UIパターンやUIコンポーネントを定義・運⽤する
l 業務向けのUIは実績が豊富で、実装技術がわかっている
会社をパートナーとして選ぶ
34

View Slide

View Slide

ncdc-techseminer-20200219

ncdc-techseminer-20200219

NCDC

More Decks by NCDC

Other Decks in Technology

Featured

Transcript