ncdc-techseminer-20200219

2020年2月19日開催の弊社セミナー資料です。
-------------------------------
【セミナー内容】
ユーザーがiPhoneに代表される先進的で優れたUI（ユーザインターフェース）や、そうしたプロダクトを通じて得られるUX（ユーザーエクスペリエンス）に慣れてしまった今、UX/UIデザインの観点を持たず機能要件だけを満たしてつくられた製品は、その価値が大きく損なわれています。
業務システムの分野においても、従来はUX/UIデザインを重視せず機能要件だけを満たすシステムが多く使われてきましたが、UXというキーワード・概念が一般化してきた最近では状況が変わりつつあります。
開発側（ベンダー側）でも、ユーザ側でも「このシステムはユーザにとって使いにくのでないか」「UXデザインの観点を取り入れるきではないか」といった意見が出ることが増えているようです。

当社へのご相談でも「社内システムのUX/UIを改善したい」「社内で改善に取り組んでみたが、行き詰まっている」といった悩みが急増しています。
そうしたケースでは、実際にコンサルティングをはじめてみると、既存システムのUX/UIが良くないことに加えて、それをどう評価し、どう変えるべきかを検討する改善のアプローチにも問題があるケースが多いようです。
そこで、今回のセミナーでは、UX/UI改善の豊富な実績を持つ当社が考える「業務システムのUX/UI改善」のための正しいアプローチについてお伝えします。
（一般的な業務システムだけでなく、装置向けソフトウェアのUX/UI改善にも役立てていただける内容です。）

また、優れたUX/UIデザインを構築し、効率的に管理するための手法として最近注目されている「デザインシステム」についても、その基本的な考え方や有用性について解説します。

Transcript

1. 業務システムのUX/UI改善のための 正しいアプローチとは︖ 2 0 2 0 / 0 2 / 1 9 N C D C 株 式 会 社 早 津 俊 秀
2. Copyright © NCDC Co., Ltd. All rights reserved. プレゼンター紹介 早津 俊秀 代表取締役/ビジネスアーキテクト 和歌⼭⼤学経済学部 ⾮常勤講師 元グロービス経営⼤学院 客員准教授 2 ⽇本電信電話にてエンジニア、新規ビジネス プロデュースを経験後、HP，BEA、オラクル 等の外資系IT企業にてITコンサルタント、製 薬ベンチャーでのIT部⾨を統括。ベンチャー ⽀援等の後 NCDCを創業。 ◉執筆 SOA サービス指向アーキテクチャ（翔泳社） ビジネスはSOAで変⾰する（IDGジャパン） スマートデバイス×業務システム導⼊ガイド（秀和システム）
3. Copyright © NCDC Co., Ltd. All rights reserved. NCDCのサービス l CX/UXと先端テクノロジーによってデジタルイノベーションを推進します 3 NCDC CX/UX デザイン 先端 テクノロジー 自社 サービス • 新規サービス企画 • CX/UXデザインコンサルティング • IoT/AI • クラウドインテグレーション • モバイル・Web先端技術 • モバイルプラットフォーム [AppPot]の製造・販売 • IoTプラットフォーム • [AppPot IoT]の製造・販売
4. Copyright © NCDC Co., Ltd. All rights reserved. NCDCのサービスの特徴 4 ビジネスモデルのデザイン PoC・検証 システム・インテグレーション ワークショップ中⼼にビジネスモデル からUXデザインまでを迅速に⾏いま す。組織横断、会社横断のファシリ テーションも得意です。 モックによる検証から現地検証まで、 PoCをその⽬的に応じて企画・実施 します センサーから、AI、クラウド、 モバイルの標準技術まで、多 くのテクノロジーをインテグ レーションします ビジネスモデルの検討からデザインによる可視化、 先端テクノロジーの組み合わせでシステムを構築します
5. UXとUXデザイン
6. Copyright © NCDC Co., Ltd. All rights reserved. UXとUXデザイン l UX • User Experience • 利⽤者の経験、製品・サービスを使⽤する際の印象や体験 l UXデザイン • UXをデザインする。UXを設計する。UXを実現するための仕組みや 施策を考える l 最適な「UX」を実現するために「UXデザイン」を⾏う 6
7. Copyright © NCDC Co., Ltd. All rights reserved. UXの構成要素 7 http://www.jjg.net/elements/pdf/elements.pdf UX UI （体験） （使⽤性） ⽬的・ニーズ 機能 最近はUXとUIは分けて考える。 UIはUXを実現する⼀要素 少し古い時代の定義
8. Copyright © NCDC Co., Ltd. All rights reserved. NCDCのUXデザインプロセス 8 ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 UXフェーズ UIフェーズ 優先順位 機能抽出 UI UX
9. Copyright © NCDC Co., Ltd. All rights reserved. 業務向けシステムのUX/UIプロセスは？ 9 ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 UXフェーズ UIフェーズ 優先順位 機能抽出 システム の⽬的 業務フロー ターゲット ユーザー 要件確定 ワイヤーフレーム 作成 ユーザーテスト ⼀ 般 的 な UX デ ザ イ ン 業 務 向 け UX デ ザ イ ン ⼀般的な業務システム開発のプロセスと同じ
10. Copyright © NCDC Co., Ltd. All rights reserved. NCDCのUXデザイン（ジャーニーマップ） l ジャーニーマップ • ペルソナになりきって、思考や⾏動のフローを可視化し、その時の Insight（本⾳）を考えます。 業務フロー等、業務要件をヒアリング等によって定義すればよい 10
11. Copyright © NCDC Co., Ltd. All rights reserved. NCDCのUXデザイン（ペルソナ） l ペルソナ • UXの視点で考えるため、「個の思考」を連想できるユーザーを定義 します 使⽤者が明確の場合がほとんどなので、ターゲットユーザー として定義すればよい。 11
12. Copyright © NCDC Co., Ltd. All rights reserved. 業務向けシステムのUX/UIで重要なのは？ 12 ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 UXフェーズ UIフェーズ 優先順位 機能抽出 システム の⽬的 業務フロー ターゲット ユーザー 要件確定 ワイヤーフレーム 作成 ユーザーテスト ⼀ 般 的 な UX デ ザ イ ン 業 務 向 け UX デ ザ イ ン ここのベストプラクティス・ デザインパターンが重要
13. Copyright © NCDC Co., Ltd. All rights reserved. 業務向けUX / UIのポイント l ⼀般的なUXデザインのプロセスに引っ張られてはいけない l 業務向けならではのUIパターン・ベストプラクティスを 持つ 13
14. 業務向けUI特有のデザインパターン
15. Copyright © NCDC Co., Ltd. All rights reserved. 一覧表示 l 業務向けとしてはマージンとりすぎ l ⼀画⾯での検索結果の表⽰が少なすぎ ☓ ☓ 15
16. Copyright © NCDC Co., Ltd. All rights reserved. 一覧表示 l ゆとりのあるマージンよりも⼀画⾯での表⽰量 l 検索結果をできるだけスクロールしないで表⽰ ◦ ◦ 16
17. Copyright © NCDC Co., Ltd. All rights reserved. 検索画面 l グーグルのような⾃由検索の機能がほしい︕ • しかし、検索結果はドキュメント検索ではなく、構造化された データ項⽬だったりする 17 ☓
18. Copyright © NCDC Co., Ltd. All rights reserved. 検索画面 l 業務で使う検索画⾯は項⽬ごとの検索フォームがあったほ うが効果的な場合が多い 18 ◦
19. Copyright © NCDC Co., Ltd. All rights reserved. 装置のUIパターン l UXデザインプロセスは使わない l ⾮常に多くの操作を操作パターンで分類する→配置する 19
20. Copyright © NCDC Co., Ltd. All rights reserved. 業務向けUX / UIのポイント l ⼀般的なUXデザインのプロセスに引っ張られてはいけない l 業務向けならではのUIパターン・ベストプラクティスを 持つ 20
21. より具体的なアプローチ
22. Copyright © NCDC Co., Ltd. All rights reserved. Step1:ガイドラインを整備する l カラー、フォント、フォーム、ボタンなど、UIを構成する要素を定義する 22
23. Copyright © NCDC Co., Ltd. All rights reserved. Step1:ガイドラインを整備する l カラー、フォント、フォーム、ボタンなど、UIを構成する要素を定義する 23
24. Copyright © NCDC Co., Ltd. All rights reserved. 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
25. Copyright © NCDC Co., Ltd. All rights reserved. Step2:デザインシステムを活用する l Salesforce.com Lightning Design System 25
26. Copyright © NCDC Co., Ltd. All rights reserved. Step2:デザインシステムを活用する l IBM Carbon Design System 26
27. Copyright © NCDC Co., Ltd. All rights reserved. Step3：自社のデザインシステムを作る・運用する l ガイドライン、コンポーネントライブラリ（部品群） を定義 l デザインシステムプラットフォームに登録、運⽤ l デザインシステムプラットフォーム • Storybook • Invision Design System Manager • Specify 27
28. デザインザインパートナーの選び⽅
29. Copyright © NCDC Co., Ltd. All rights reserved. よくある問題「デザイナーがいない！」 l デザインがあまり重視されてこなかった業務システムの開発では、 デザイナーがほとんど関与せず、エンジニアが適当にデザインして しまうことも多かったのではないかと思います。 l 近年、Webサービスやアプリの分野ではUX/UIデザインの重要性への認 識が⼀般的になり、業務システムの分野でもUX/UIデザインのニーズが ⾼まってきています。 l しかし、社内にデザイナーがいない場合どうするのか… 業務システムのデザ インを外部に頼める ものなのか︖ 頼むといっても、誰に︖ WEB制作が主業務の デザイン会社に頼ん でもいいものか︖ 29
30. Copyright © NCDC Co., Ltd. All rights reserved. どのようなパートナーを探すべきか l 結論からいうと、「業務システムの特性や、開発のこともよくわかって いるデザイン会社」が望ましい。 l WEB制作会社などをあたれば、おそらく「⾒た⽬が整って美しい」 「今っぽい」画⾯デザインをつくってくれる会社はたくさんあります。 しかし、多⾯的に業務システムに最適なUX/UIを検討デザインできる 会社は実はそう多くない。 ü どんなユーザーがどう いった⽬的で使うのか、 ユーザー像や業務フロー の深い理解 ü ⾒た⽬の良し悪しだけで なく実装や、他のシステ ムとの結合まで想定した 課題の抽出 難しいのは、たとえば… 30
31. Copyright © NCDC Co., Ltd. All rights reserved. システム開発の知見がUI検討時に役立った具体例① その場合は、AWS側でサマリーデータをつくってからデータ を渡せばデータ量を抑えられるので問題ないですよ。 必要であればAWS側の処理もアドバイスしますので、3年分 のデータを表⽰できるようにつくりましょう︕ 本当はこの画⾯では3年分のデータをひとつのグラフにし て表⽰したいんだけど、3年分のデータをAWSから引っ 張ってくると表⽰が遅くなったり、データ量が増えて 課⾦が⼼配になるのでやめました。 当社のデザイナー ＆エンジニア お客さまの 画⾯設計担当者 31
32. Copyright © NCDC Co., Ltd. All rights reserved. システム開発の知見がUI検討時に役立った具体例② おそらく裏側でこういった処理をしてデータを引っ張ってく ることになるのではないか︖ その場合、過去に似たような仕組みの実装をした経験から、 表⽰にかなり時間がかかってしまうリスクが考えられます。 要望にはできるだけ応えつつ、表⽰速度のリスクを回避して、 たとえばこういうUIに変えてはどうでしょうか︖ 現場の話によると、膨⼤なデータの中からあれとそれと これとを持ってきて１画⾯でに同時に表⽰する必要があ る。 それを実現するためにこのようなワイヤーフレームにし ました。 当社のデザイナー ＆エンジニア お客さまの 画⾯設計担当者 32
33. まとめ
34. Copyright © NCDC Co., Ltd. All rights reserved. 業務システムのUX/UI改善のための 正しいアプローチとは？ l ⼀般的なUXデザインプロセスに惑わされないこと l UXとUIは完全に別物として考える • 業務システムならではのUIパターンを考える l ガイドラインからデザインシステムに⾄るまで、 UIパターンやUIコンポーネントを定義・運⽤する l 業務向けのUIは実績が豊富で、実装技術がわかっている 会社をパートナーとして選ぶ 34
35. Copyright © NCDC Co., Ltd. All rights reserved. 35 ご相談はお気軽に︕ info@ncdc.co.jp www.ncdc.co.jp