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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アーキテクチャの変遷とフロント実装のトレンド 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の標準化・フレームワークの成熟 • サーバーサイドがシンプルになったことで、再利用性 が上がる。かつサーバレス等のシンプルなアーキテク チャが可能に

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

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

装置のUX/UI応用例 35

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

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

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

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

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

まとめ 41

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

[email protected] www.ncdc.co.jp