古くて使いにくい業務システムを 使いやすく新しいデザインに刷新する! セミナー資料

2021年8月26日（木）14時に行ったセミナーの資料です。

Transcript

1. 2021/08/26 Fixel株式会社 COO宮崎和樹 古くて使いにくい業務システムを 使いやすく新しいデザインに刷新する︕ --- デザイン改善プロジェクトの具体的な成果や デザインの⻑期的な活⽤⽅法をご紹介
2. 2 l デザインの現状 l システムにおけるデザインの課題（500⼈以上のシステム責任者の声） l デザイン改善事例を通してUXデザインの効果紹介 l なぜ、業務システムは使いにくい︖ l デザイン会社に依頼したら解決できるのか︖ l UXデザインのプロジェクトはどうやってすすめる︖ l UXデザインプロジェクトの成果物（納品物）は何がある︖ l まとめ アジェンダ
3. 3 デザインに⼒をいれ成功している企業が増えてきている。
4. 4 デザインに⼒をいれ成功している企業が増えてきている。 ※引⽤︓Strainerウェブサイトより（2020年12⽉）
5. 5 デザインの⼒を経営に活かす動きも⽬⽴ってきた
6. 6 デザインの⼒を経営に活かす動きも⽬⽴ってきた
7. 7 IT・デジタルの世界でも同様 ユーザー視点で体験をデザインして、事業を強めている
8. 8 UXデザインは、特にデジタルプロダクトとの相性がよく 多くの企業で注⽬され実践されてきている 使う⼈にとって本当の意味で 「使えるモノ・使い続けたくなる設計がなされている」から良い ユーザ視点でものづくりすること UX Design 機能があるから良い。⾒た⽬がクールだから良い。ではない。
9. 9 同じような機能と価格で 競合と戦い続けることになる システムが原因で業務効率が悪い。 ⽣産性が低いままの状態。 デザインやUXデザインをやらなくても、製品やサービスは作れるが 以下のような弊害も⽣じる。 もし「UXデザイン」に取り組まないとどうなる︖ 良いもの・技術があっても うまくユーザに届けられない 開発の効率が悪いまま運⽤を するなど無駄が多く発⽣ 作ったのに誰も使わない機能がある 使い勝⼿が悪くてもガマン
10. 10 l システムの⾒た⽬が古いし、使いにくい l 単⾊で暗いイメージ l ユーザーが「怖くて触れないボタン」がある l 機能が⽭盾している l システムの使い⽅を教えるのが⼤変（マニュアルは5年前に更新が途絶えて。。。） l 多様なクライアント（特に声の⼤きい⼈）の依頼に答えて機能拡張し続けたら、シス テムがおかしくなった。 l どうにかしないといけないが、対応できないから⾒ないふりをしている。 l 開発を委託している会社にデザイン改善の話をしても、良い提案をしてくれない。 システムにおけるデザインの課題（500⼈以上のシステム責任者の声）
11. 11 l システムの⾒た⽬が古いし、使いにくい Ø サービス︓売上低下、競合に負ける Ø 社内システム︓効率が悪い（作業の時間が増えるだけ） l 単⾊で暗いイメージ Ø 気持ちの問題 ⾊使いなどによっては頭痛くなる l ユーザーが「怖くて触れないボタン」がある Ø 便利な機能も埋もれる システムにおけるデザインの課題→そのままにしておくと
12. 12 l 機能が⽭盾している Ø 使い込んだ⼈にしか分からないシステムになっていく l システムの使い⽅を教えるのが⼤変（マニュアルは5年前に更新が途絶えて。。。） Ø 教育コスト増⼤、離職率が上がる l 多様なクライアント（特に声の⼤きい⼈）の依頼に答えて機能拡張し続けたら、シス テムがおかしくなった。 Ø どんどん⽭盾したシステムになる l どうにかしないといけないが、対応できないから⾒ないふりをしている。 l 開発を委託している会社にデザイン改善の話をしても、良い提案をしてくれない。 Ø 臭いものにフタをしても、そのまま。いつも頭の⽚隅に課題として残る。 システムにおけるデザインの課題→そのままにしておくと
13. 事例紹介
14. 三越伊勢丹百貨店 企業データ ・業界︓百貨店 ・従業員数︓18,799⼈ ・売上︓1.2兆円（2019年） 解決したかった課題 ・顧客カルテは、バックヤードのPCか紙で管理していた。 ・カルテの管理を担当スタッフ依存から脱却 ・購買実績に基づきパーソナライズして提案をしたい 得られた効果 ・iPadアプリ利用により、顧客情報をスタッフ間で共有 ・お客さんとアプリで一緒に購買履歴などを確認→提案 →満足度アップ ・伊勢丹テンプレートデザインに対して、各店舗でカスタマイズ ・伊勢丹で好評だったので、三越にも展開
16. ヒューマンテクノロジーズ（ KING OF TIME ） 企業データ ・業界︓企業向けクラウド勤怠管理サービス ・従業員数︓39⼈ （2015年⽀援時） ・売上︓9億円（2015年⽀援時） 解決したかった課題 ・UI/UXの優れた他社サービスにコンペで負ける ・2004年にサービスイン以降⼤きなUXUIの変更していない。 →改善したいがデザインのことはよくわからない ・実は、過去に⾃社でUI/UXを⼩さく変えてみたら、ユーザから叱 られた。 得られた効果 ・単⽉の契約数が80％アップ ・売上は4年で約3倍に向上 ・Fixelの⽀援でデザイン部署の開設 ・デザイン改善で⾒た⽬は良くなったが⼀覧性が悪くなり改善依頼 →対応することで、既存ユーザも満⾜（B2Bならでは） Before After
17. ヒューマンテクノロジーズ（ KING OF TIME ） 企業データ ・業界︓企業向けクラウド勤怠管理サービス ・従業員数︓39⼈ （2015年⽀援時） ・売上︓9億円（2015年⽀援時） 解決したかった課題 ・UI/UXの優れた他社サービスにコンペで負ける ・2004年にサービスイン以降⼤きなUXUIの変更していない。 →改善したいがデザインのことはよくわからない ・実は、過去に⾃社でUI/UXを⼩さく変えてみたら、ユーザから叱 られた。 得られた効果 ・単月の契約数が80％アップ ・売上は4年で約3倍に向上 ・Fixelの支援でデザイン部署の開設 ・デザイン改善で見た目は良くなったが一覧性が悪くなり改善依頼 →対応することで、既存ユーザも満足（B2Bならでは） HT社サイトより引用：https://www.h-t.co.jp/recruit/company/
18. 18 メニューに強弱 がない トップ画⾯に なくてもよい 情報 ToDoが⼩さく てわかりずらい
19. 19 よく使う機能 はアクセスし やすい場所へ 配置 ToDoをシンプ ルで分かりや すくした 他の機能は 中へ隠した
20. 20 2回⽬の改善で情報の⼀覧性をあげ、業務効率を改善 Before After1 After2
21. 住友電工（ 楽々Workflow） 企業データ ・業界︓⾮鉄⾦属 ・従業員数︓272,796⼈ ・売上︓3兆1779億円 解決したかった課題 ・アメリカの関連会社へ本システムの導⼊を承諾させる（内部統 制） ・説得するためには、2週間でスマホとwebのデザイン改善 得られた効果 ・アメリカの関連会社が導⼊を決定 ・中国など他国への販売が加速 Before After
24. コールセンター 企業データ ・業界︓⾮公開 ・従業員数︓⾮公開 ・売上︓⾮公開 解決したかった課題 ・コール対応は複数システムを横断的に操作が必要 ・教育コストが⾼く離職率も悪化 ・システムが原因で1件あたりの処理時間が⻑い 得られた効果 ・1画⾯で動的に遷移する処理が可能に ・電話対応（4分）事後処理（4分） 合計8分を要していたが 電話対応（2分）事後処理（2分） 合計4分の半分に短縮 全体平均として4割の処理時間を削減 約1,000名のスタッフのうち、外部委託分を契約終了へ Before After
25. モータ制御 企業データ ・業界︓モータ ・従業員数︓3,000名 ・売上︓600億円 解決したかった課題 ・単軸制御から多軸制御にソフトウェアをアップグレードが必要 ・⾒た⽬が古い 得られた効果（具体的な数値等は⾮公開） ・単軸の操作感で多軸を制御を可能としてユーザを混乱させない ・時代に合った画⾯で古さを感じさせない Before After
26. 3DCADメーカ 企業データ ・業界︓3D CADメーカ ・従業員数︓数百名 ・売上︓⾮公開 解決したかった課題 ・アイコンから出来ることの想像が難しい ・ショートカットを覚えないと使いこなすのが難しい 得られた効果（具体的な数値等は⾮公開） ・メインメニューサブメニューの構成を⾒直して使いやすく ・アイコンにも程よく説明を追記して、ビギナーユーザをフォロー ・今⾵のデザインを取り⼊れて積極販売が出来るようになった Before After
27. 国内楽器メーカ（ギターマルチエフェクター） 企業データ ・業界︓楽器メーカー ・従業員数︓703⼈ ・売上︓⾮公開 解決したかった課題 ・ 競合に遅れずエフェクターのスマホアプリをリリースしたいが、 ノウハウが無く遅れた。後発であるならばUXデザインを 考慮したアプリにしたい。 ・ブランド感を損なわないアプリにしたい。 得られた効果（具体的な項⽬は⾮公開） ・デザインを標準化することで継続的に展開可能な デザイン基盤を構築 ・ギターを持ったまま、スマホでチューニングが容易なアプリで ⾼評価を得た。
28. 28 なぜ、業務システムは使いにくい︖
29. 29 答えは簡単 デザインや使いやすさを考慮しないで、機能を満たすボタンやラベルを エンジニアが配置しただけのシステムだから なぜ、業務システムは使いにくい︖
30. 30 デザイン会社選定で考慮しないといけないポイント l アプリケーションのデザインが出来るか → Webサイトとアプリケーションのデザインは別のモノ l 実装に使われているフロント実装のライブラリの制限などを理解してデザインが出来るか →例えばMFCで作られている場合は、デザインに制限がかかる l システムの制限制約を考慮した上で情報設計やデザイン出来るか →ユーザに便利な⼀覧画⾯をデザインしても、表⽰に1分かかるなら現実的ではない l 再現可能なロジカルなデザインを出来るか →業務システムは属⼈化せずに、確かな仕事が出来るためのロジックでデザインが必須 デザイン会社に依頼したら解決するの︖
31. 実際にどうやって進めるの︖
32. 32 UXデザインプロセス ※プロジェクトのゴール・状況に応じて上記のプロセスを適切に調整 反復 コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 ワイヤーフレーム 作成 ユーザーテスト 評価と改善 ゴールと 範囲の設定 評価基準の検討 ペルソナ定義 計画フェーズ 分析フェーズ 実証フェーズ プロトタイピング
33. 33 [UX Pyramid] ゴールと範囲の設定 ü プロジェクトの⽬的と対象範囲を明⽂化する ü UXデザインで達成すべき 使⽤者経験の特徴とレベルを決める ü 必要に応じてプロジェクトの範囲を⾒直す ゴールと 範囲の設定 計画フェーズ [UX Honeycomb]
34. 34 評価基準の検討 ü UXデザイン作業の成果を数字で測ることができる項⽬で定義する ü ⽐較のために現在のデータを取得し、⽬標値を定義する ü 必要なデータの取得ができていない場合は データ取得⽅法を追加することを検討 ü 価格変更や機能追加など、UXデザイン以外の影響要素を可能な限り分離した ⽅がより厳密な評価測定ができる 評価基準の検討 計画フェーズ
35. 35 ペルソナ定義 ü 対象ユーザー像を具体的に定義 ü ユーザーの視点で物事を考えるための⼿法 ü 必要に応じて複数のペルソナを定義して使う v メインペルソナ、サブペルソナ、アンチペルソナ、エクストリームペルソナ等 ü 定義の詳細度は製品特性に応じて決める v 業務システムの場合、ITリテラシー、年齢代、性別など、 かなり制限的な特徴の定義に留めることもあり ペルソナ定義 分析フェーズ [ユーザー] [ペルソナ] 佐藤さん 鈴⽊さん ⽞⼈さ ん A B C
36. 36 ペルソナの例 ペルソナ定義 分析フェーズ
37. 37 コンテキスト分析 ü ペルソナが対象商品に接する 動機、場所、環境などを確認する ü 主に制約条件や考慮すべき環境要因を確認して 後のUI設計に反映する v [例] 使⽤するデバイス、⼿袋で操作、操作時間、後続作業、 他の関連システムがある、など ü 後述するジャーニーマップ作成と並⾏可能 コンテキスト 分析 分析フェーズ 佐藤さん 鈴⽊さん ユーザーコンテキスト ユーザーコンテキスト 外部コンテキスト マーケット 競合 など
38. 38 ジャーニーマップ作成 ü ペルソナが対象商品に接する以前から接した後までの 接点を時系列で描写する ü ユーザーと商品間の接点を分析し、 ユーザーの⾏動を理解することが第⼀の⽬的 ü 綺麗なものを作成することより、 ⼿軽に作成して変更できるものにする ü 先のコンテキスト分析と、後述するメンタルモデルを 併記して作成することがある ジャーニーマップ 作成 分析フェーズ
39. 39 ジャーニーマップ作成 よく⾒かけるジャーニーマップの例 ジャーニーマップ 作成 分析フェーズ
40. 40 ジャーニーマップ作成 実⽤的なジャーニーマップの例 ジャーニーマップ 作成 分析フェーズ ポストイットを使い素早く検討︕ デジタル化して整理
41. 41 ジャーニーマップの例 ジャーニーマップ 作成 分析フェーズ 資料では⾮公開
42. 42 メンタルモデル分析 ü ペルソナが対象商品に接する際に何を感じて、 何を考えているかを定義して分析する ü 表⾯的な動機からより根本的な動機を探ることで 本当のニーズを⾒つけだす v 5 Why法に近い ü ペルソナの根本的な課題を解決する⼿段を検討する v イノベーションを起こし得るのはここ︕ ü リサーチを⾏い、定量的な分析をする⽅法もあるが、 多くの場合ジャーニーマップと併記しながら定性的 な分析を⾏う メンタルモデル 分析 分析フェーズ
43. 43 メンタルモデル分析 ü ペルソナが対象商品に接する際に何を感じて、 何を考えているかを定義して分析する メンタルモデル 分析 分析フェーズ 定量的な分析例 ジャーニーマップに併記して分析する例 ジャーニーマップ メンタルモデル
44. 44 ワイヤーフレーム作成・プロトタイピング ü 今までの作業で⽴てた仮説を検証するための必要最⼩限のUIを作る l 最初は紙とペンを使ったUIスケッチで ペーパープロトタイミングを⾏う l 最初はたくさんのアイデアを出して、 それを集約していくことを繰り返す l チーム内で簡易的なユーザーテストを繰り返しながら 短期間で成熟させて⾏く ü ある程度まとまった段階でユーザーテストで使えるプロトタイプにする ワイヤーフレーム 作成 実証フェーズ プロトタイピング
46. 46 ユーザーテスト ü 仮説検証と問題発⾒の場 l ⽬的として価値をユーザーに提供できているかを確認 l ペルソナに近いユーザーを招き、役割劇、発話⽅などで⾏ う (必要に応じて録画・録⾳を⾏う。専⾨機関に依頼する⽅法もある) l テストユーザーは社内など⾝近なところから探すのも⼿︕ l 課題を⾒つけ、分析を⾏い、対応策を考える ü UXデザインでも、最も⼤事なタスク︕ ユーザーテスト 実証フェーズ
47. 47 ユーザーテスト ü プロトタイピングツールを有効活⽤する l コードを書かなくてもユーザーに疑似体験をさせることができる l 迅速に新しい案を試すことができる ユーザーテスト 実証フェーズ
48. 48 評価と改善 ü ユーザーテストの結果を分析し、必要な対応を⾏う l 仮説の誤りがあった場合は新しい仮説に基づいて再度検 討を⾏う l ノイズと情報の区分が⼤事 l [最初に定義したゴールを達成できているか] で反復の 必要性を決める（※現実的には予算や時間という制約を考慮する） 評価と改善 実証フェーズ 反復 コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 ワイヤーフレーム 作成 ユーザーテスト 評価と改善 ゴールと 範囲の設定 評価基準の検討 ペルソナ定義 計画フェーズ 分析フェーズ 実証フェーズ プロトタイピング [反復して完成度を⾼める] 最初から満点を狙わない。それは不可能︕
49. 成果物はどんなものがあるの︖
50. 50 UIデザイン成果物の例 1. ビジュアルデザイン 画⾯デザインの仕上がりイメージ
51. 51 UIデザイン成果物の例 2. デザインガイドライン UIデザインの各部品ごとのデザイン仕様とルールをまとめたもの
52. 52 UIデザイン成果物の例 3. デザイン指⽰書 画⾯ごとのデザイン仕様（要素のサイズや⾊、余⽩など）を記したもの
53. 53 属⼈化しないために Design System
54. 54 l 3rd party サービスプロバイダー向けのデザインガイド ラインを公開していたが、あまり効果がなかったのでデ ザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l 実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提 供 例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com
55. 55 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
56. 56 デザインシステムとは デザインシステム デザインガイドライン UIコンポーネント （デザイン＆コード） 各種リソース
57. 57 デザインシステムを媒体にしたコラボレーション デザイン システム ビジネス パーソン エンジニア デザイナー 機能追加・改善の際に、 判断の基準になる︕ デザイン資産の 価値を定量化できる 再利⽤できる部品が 揃っている︕ 企業活動におけるデザイン活⽤の基盤
58. 58 l 情シス l 社内システムを分かりやすく、使いやすくできる l システム間の使い勝⼿の⼀貫性を確保 l システム構築のコスト低減 l SIer l 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上（２５％以上） l ⼀貫性のあるデザインを⾼品質で提供することでお客様に対するサービス向上 l 他Sierに対する競争優位を占めることが可能になる l サービスプロバイダー l デザインの⼀貫性獲得によるブランド構築 l より迅速な改善・リリースが可能に l リリースを重ねてもデザインの⼀貫性や品質が落ちない l 今後のデザイントレンド変化に迅速に対応可能 各プレイヤーにおけるデザインシステムの価値
59. 59 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
60. 60 なぜ今、UI/UXに投資すべきか︖ 品質 時間 初回UXデザインプロジェクトの 効果が最も⼤きい フェーズ 1 フェーズ 2 Quality of UX
61. 61 まとめ l 業務システムはデザインされていないから、使いやすくない l ユーザ⽬線で、少しだけでもデザインするだけで効果は絶⼤ l 開発のことを考慮しながらデザインしないと、絵に描いた餅になる。
62. MAKE DESIGN EASY