ncdc_UXSession20200521

2020/05/21 弊社主催のウェビナー資料です。
--------------------------------------------
【セミナー内容】
多くのユーザーが優れたUI（ユーザインターフェース）を備えたプロダクトや、それらの使用を通じて得られるUX（ユーザーエクスペリエンス）に慣れてしまった今、UX/UIデザインの観点を持たずにつくられた製品は、ユーザの満足度が低下していく危機に直面しています。

従来は機能要件だけを満たせばよしとされていた業務システムの分野においても、UXというキーワード・概念が一般化してきた最近では状況が変わりつつあります。
開発側（ベンダー側）でも、ユーザ側でも「このシステムはユーザにとって使いにくのでないか」「UXデザインの観点を取り入れて設計するべきではないか」といった意見が出ることが増えているようです。

当社へのお問い合わせでも「社内システムのUX/UIを改善したい」「自社で改善に取り組んだがうまくいっていない」というご相談が急増しています。
こうしたご相談を受けて実際にコンサルティングをはじめてみると、既存システムのUX/UIが良くないことに加えて、改善のアプローチにも問題があるケースが多いようです。

そこで、今回のセミナーでは、UX/UI改善の豊富な実績を持つ当社が考える「業務システムのUX/UI改善」のための正しいアプローチについてお伝えします。
また、フロントエンド、バックエンド両面の技術トレンドを踏まえて、UX/UI改善プロジェクトではどのような実装技術を選択すべきかや、デザイン資産を効率的に管理するための手法として最近注目されている「デザインシステム」についても解説します。

（一般的な業務システムだけでなく、装置向けソフトウェアのUX/UI改善にも役立てていただける内容です。）
※本セミナーは2020年2月19日に実施したセミナーのアップデート版です。一部同セミナーと重複する内容もあります。

Transcript

1. 業務システムのU X/ U I改善に取り組むための
   正しいアプローチと技術トレンド
   2020/05/21
   NCDC株式会社
   

   View Slide

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

   View Slide

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

   View Slide

4. NCDCのサービスの特徴
   l ビジネスモデルの検討からデザインによる可視化、先端テクノロジーの組み合わせで
   システムを構築します
   4
   ビジネスモデルのデザイン UXデザイン/PoC システム・インテグレーション
   ITアーキテクチャのデザイン リファレンス実装
   DX推進のための組織デザイン
   

   View Slide

5. UXとUXデザイン そしてUIデザイン
   

   View Slide

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

   View Slide

7. UXとUIの関係 その１
   l ユーザーの体験（UX）は一連の活動の中で多岐にわたる
   7
   UX
   UI Operation UI System
   

   View Slide

8. UXとUIの関係 その２
   l 一つのシステムの中でのユーザーの体験（UX）という考え方もある
   8
   UX UX
   UI U
   I
   

   View Slide

9. 「業務システムのUX/UIの正しいアプローチ」のポイント①
   l 施策やプロジェクトで対象としているUX/UIの定義を関係者で明確にする
   l UXの定義は抽象度が高い。時代によって、文脈によって、人によって解釈・
   ディスカッションポイントが異なる場合が多い
   l その結果、UIの定義も曖昧になりがち
   9
   

   View Slide

10. NCDCのUXデザインプロセス
    ⽬的の確認・
    定義
    ジャーニー
    マップ
    作成
    ワイヤーフレーム
    作成
    ユーザーテスト
    ペルソナ定義
    優先順位
    機能抽出
    UXデザインフェーズ UIデザインフェーズ
    UX
    UI Operation UI System
    NCDCのUXデザインプロセスはこちら寄り
    その１
    UX UX
    UI U
    I
    業務向けUX/UIはこちら寄り
    その２
    10
    

    View Slide

11. NCDCのUXデザインプロセス
    UXデザインフェーズ UIデザインフェーズ
    UXとUIの違いが大切。
    つまり
    「機能」なのか「画面表現」
    なのか？
    ⽬的の確認・
    定義
    ジャーニー
    マップ
    作成
    ワイヤーフレーム
    作成
    ユーザーテスト
    ペルソナ定義
    優先順位
    機能抽出
    UX UX
    UI U
    I
    業務向けUX/UIはこちら寄り
    その２
    11
    

    View Slide

12. 業務システムでよく聞くUX/UIの課題
    「外回りの時に検索するので、マップ表示してタップ
    したら商談メモが見れるといいですね」
    「受注No.から出荷状況まで見れると良いのですが、
    このシステムでは出荷状況は見られないので、受注
    No.から倉庫担当者を検索してメモ。次に出荷システ
    ムから担当者を検索して日付の合致する顧客を探
    すしかないんです」
    使用者の「使い勝手」に対する声
    機能面の課題→UXの課題
    機能面の課題→UXの課題
    課題はどこか？
    12
    

    View Slide

13. 業務システムでよく聞くUX/UIの課題
    「UIが使いにくい！！」
    「月末に使用するのですが、毎回操作手順がわ
    からなくなって資料やわかる人を探します」
    「「保存」と「確定」と「申請」のボタンの違
    いがわかりにくく、本来「申請」まで必要なの
    に「確定」のままにしている場合が多い」
    「入力項目が多く、かつ、途中保存ができないので、
    一からやり直しになることが多くて大変です」
    「検索するとなぜか欲しい情報が1件も出てこないの
    で検索を使わず目視で探してます」
    「検索結果のソートがあれば便利なのですが・・・」
    使用者の「使い勝手」に対する声 課題はどこか？
    画面表現の課題→UIの課題
    画面表現の課題→UIの課題
    機能面の課題→UXの課題
    機能面の課題→UXの課題
    機能面の課題→UXの課題
    13
    

    View Slide

14. 「業務システムのUX/UIの正しいアプローチ」のポイント②
    l 課題及び意識すべき対象は「機能面」（UX）なのか？
    「画面表現」（UI）なのか？を明確に
    l 業務システムのUX/UIを正しく実現するためには、「機能面」の検討時点
    から使用性（UX/UI）に関する機能を定義しておく必要がある
    l 業務システムはUIの裏側にビジネスロジックが隠れている。ビジネスロジックの出来が
    UXに大きく影響を与える
    14
    

    View Slide

15. 業 務 シ ス テ ム の UX/ UI プ ロ ジ ェ ク ト
    UXデ ザ イ ン フ ェ ー ズ
    

    View Slide

16. UXデザインフェーズでの正しいアプローチ
    l 機能を抽出することがUXデザインフェーズでの目的
    l 一般的なUXデザインのプロセスにこだわらなくても良い
    16
    ⽬的の確認・
    定義
    ジャーニー
    マップ
    作成
    ワイヤーフレーム
    作成
    ユーザーテスト
    ペルソナ定義
    優先順位
    機能抽出
    UXデザインフェーズ UIデザインフェーズ
    システム利用者 業務フロー
    機能一覧
    機能仕様
    画面仕様を詳細
    レベルで定義
    • 表示件数上限設定
    • 検索補助、入力補助
    • ソート、フィルタ
    • 一次保存
    • CSV出力、CSV読み込み
    • ・・・
    • ・・・
    管理画面も
    どうするか？
    

    View Slide

17. 具体的な２つのアプローチ
    l 画面詳細仕様をどこかで定義しない限り実現はされない
    l 要件定義時に定義して進めるパターン
    l 要件定義時に定義するのは無理なので、使用性が低くても早めにリ
    リースし、ユーザの評価を受けて改善を繰り返すパターン
    17
    要件定義フェーズで画面詳細仕様まで定義する
    要件定義フェーズでは画面詳細は
    定義しない
    リリース後、改善要望を
    集約してから改修
    リリース後、改善要望
    を集約してから改修
    この時点では
    使用性は低いこ
    とを受け入れる
    

    View Slide

18. 「業務システムのUX/UIの正しいアプローチ」のポイント ③
    l 使用性に大きく影響を与えるUXデザインフェーズ（機能定義フェーズ）
    において「画面詳細仕様」まで定義することが必要
    →定義していないものは実装されない
    l 「画面詳細仕様」をいつ、どうやって定義するかは２つのアプローチに
    大別される。
    どちらを採用するのかは「使用者」、「発注元」、「開発委託先」含め、
    合意形成が必要。
    l 発注元、開発委託先、共にUX/UIを重視した業務システムを初めて構築する
    場合は特に注意が必要
    18
    

    View Slide

19. 業 務 シ ス テ ム の UX/ UI プ ロ ジ ェ ク ト
    UI デ ザ イ ン フ ェ ー ズ
    

    View Slide

20. 業務向けシステムのUIデザインフェーズで重要なのは？
    20
    ⽬的の確認・
    定義
    ジャーニー
    マップ
    作成
    ワイヤーフレーム
    作成
    ユーザーテスト
    ペルソナ定義
    優先順位
    機能抽出
    UXデザインフェーズ UIデザインフェーズ
    業務システムならではの
    実装工数含めたパターンや
    ベストプラクティスを
    もっておくと良い
    

    View Slide

21. 一覧表示パターン
    l コンシューマ向けの一般的なデザインの常識がNGの場合がある
    • マージン（隙間）が多く、実線が少なく、
    おしゃれでスッキリしたUI
    • 情報量が多く、実線も多く、古臭いごちゃごちゃ
    したUIだが、一画面でできることが多い
    21
    

    View Slide

22. よくある検索＆結果一覧表示（NG例）
    • マージン（隙間）が多く、実線が少なく、
    おしゃれでスッキリしたUI
    • しかし、表示件数が少なく、多くの業務をこ
    なすためには何度もページを遷移させないと
    いけない
    22
    

    View Slide

23. よくある検索＆結果一覧表示（Good例）
    • おしゃれでスッキリしたUIでありながら、表示件数も多く、
    実行できる機能も多く実現できている
    23
    

    View Slide

24. 業務システムの使用性で議論になるパターン
    l 使用性は高くなるが実装工数がかかる場合もある。費用対効果を考える必要あり
    24
    入力フォームの中で検索する
    ダイアログ画面がポップアッ
    プしてくるタイプ
    入力文字単位で絞り込み
    ソート 列を非表示 列順を入れ替え
    列の非表示状態を
    ブラウザ単位で保存しておきたい？
    列の非表示状態を
    ユーザー単位で保存しておきたい？
    

    View Slide

25. 「業務システムのUX/UIの正しいアプローチ」のポイント ④
    l 業務向けシステム特有のUIのルールやパターンを理解しておく
    l 利便性の高いUI部品（検索等）は実装工数もかかることに注意。
    利便性と工数のバランスが大切。
    25
    

    View Slide

26. デザインシステムの活用
    26
    

    View Slide

27. 従来よく使っていたのは「デザイン指示書」
    l いままでは多くの場合、カラー、フォント、フォーム、ボタンなど、UIを構成す
    る要素を「デザイン指示書」として開発に引き継いでいた
    27
    

    View Slide

28. これからは「デザインシステム」を活用する
    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/
    28
    

    View Slide

29. 公開されているデザインシステムの例
    l Salesforce.com Lightning Design System
    l IBM Carbon Design System
    29
    

    View Slide

30. 自社用のデザインシステムを作ることも可能
    l ガイドライン、コンポーネントライブラリ（部品群）
    を定義
    l デザインシステムプラットフォームに登録、運用
    l Storybook
    l Invision Design System Manager
    l Specify
    30
    

    View Slide

31. フロント実装のトレンド
    31
    

    View Slide

32. アーキテクチャの変遷とフロント実装のトレンド
    l アーキテクチャ大変革期なので、SPAでUX/UIの優れた、アーキテクチャ
    としても優れたシステムへ
    32
    ホストコンピューター クラサバ MVC SPA
    サーバー：Fat
    クライアント：Thin
    サーバー：Thin
    クライアント：Fat
    サーバー：Fat
    クライアント：Thin
    サーバー：Thin
    クライアント：Fat
    ダム端末
    ダム端末
    VB,C++ ,Notes PHP, Java, .Net
    React,Vue.js
    • Windows95
    • LAN化
    • 一人一台に
    • Internet
    • クライアント配
    布の手間をブラ
    ウザ利用で解決
    90年代 2000年代 2015年〜
    • スマホのネイティブアプリ登場でクライアントリッチ/
    サーバーシンプル（API）に
    • HTML5/JavaScriptの標準化・フレームワークの成熟
    • サーバーサイドがシンプルになったことで、再利用性
    が上がる。かつサーバレス等のシンプルなアーキテク
    チャが可能に
    

    View Slide

33. 装置のUIについてのアプローチ
    33
    

    View Slide

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

    View Slide

35. 装置のUX/UI応用例
    35
    

    View Slide

36. デザインザインパートナーの選び方
    36
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. まとめ
    41
    

    View Slide

42. 業務システムのUX/UI改善に取り組むための正しいアプローチと技術トレンド
    l 課題及び意識すべき対象は「機能面」（UX）なのか？「画面表現」（UI）なのか？を
    明確に
    l 使用性に大きく影響を与えるUXデザインフェーズ（機能定義フェーズ）において
    「画面詳細仕様」も定義しないと実装されない
    l 「画面詳細仕様」をいつ、どうやって定義するかは２つのアプローチの大別される。どちらを
    採用するのかは「使用者」、「発注元」、「開発委託先」含め、合意形成が必要
    l 業務向けシステム特有のUIのルールやパターンを理解しておく
    l 利便性の高いUI部品（検索等）は実装工数もかかることに注意。利便性と工数のバラ
    ンスが大切。解決するためにはデザインシステムを構築することも有効な手段
    l 技術の大きな転換期なので、最適なUX/UIはSPAを検討すべき
    42
    

    View Slide

43. info@ncdc.co.jp
    www.ncdc.co.jp
    

    View Slide