Tweet
Tweet

Slide 1

Slide 1 text

2021/08/26 Fixel株式会社 COO宮崎和樹 古くて使いにくい業務システムを 使いやすく新しいデザインに刷新する︕ --- デザイン改善プロジェクトの具体的な成果や デザインの⻑期的な活⽤⽅法をご紹介

Slide 2

Slide 2 text

2 l デザインの現状 l システムにおけるデザインの課題（500⼈以上のシステム責任者の声） l デザイン改善事例を通してUXデザインの効果紹介 l なぜ、業務システムは使いにくい︖ l デザイン会社に依頼したら解決できるのか︖ l UXデザインのプロジェクトはどうやってすすめる︖ l UXデザインプロジェクトの成果物（納品物）は何がある︖ l まとめ アジェンダ

Slide 3

Slide 3 text

3 デザインに⼒をいれ成功している企業が増えてきている。

Slide 4

Slide 4 text

4 デザインに⼒をいれ成功している企業が増えてきている。 ※引⽤︓Strainerウェブサイトより（2020年12⽉）

Slide 5

Slide 5 text

5 デザインの⼒を経営に活かす動きも⽬⽴ってきた

Slide 6

Slide 6 text

6 デザインの⼒を経営に活かす動きも⽬⽴ってきた

Slide 7

Slide 7 text

7 IT・デジタルの世界でも同様 ユーザー視点で体験をデザインして、事業を強めている

Slide 8

Slide 8 text

8 UXデザインは、特にデジタルプロダクトとの相性がよく 多くの企業で注⽬され実践されてきている 使う⼈にとって本当の意味で 「使えるモノ・使い続けたくなる設計がなされている」から良い ユーザ視点でものづくりすること UX Design 機能があるから良い。⾒た⽬がクールだから良い。ではない。

Slide 9

Slide 9 text

9 同じような機能と価格で 競合と戦い続けることになる システムが原因で業務効率が悪い。 ⽣産性が低いままの状態。 デザインやUXデザインをやらなくても、製品やサービスは作れるが 以下のような弊害も⽣じる。 もし「UXデザイン」に取り組まないとどうなる︖ 良いもの・技術があっても うまくユーザに届けられない 開発の効率が悪いまま運⽤を するなど無駄が多く発⽣ 作ったのに誰も使わない機能がある 使い勝⼿が悪くてもガマン

Slide 10

Slide 10 text

10 l システムの⾒た⽬が古いし、使いにくい l 単⾊で暗いイメージ l ユーザーが「怖くて触れないボタン」がある l 機能が⽭盾している l システムの使い⽅を教えるのが⼤変（マニュアルは5年前に更新が途絶えて。。。） l 多様なクライアント（特に声の⼤きい⼈）の依頼に答えて機能拡張し続けたら、シス テムがおかしくなった。 l どうにかしないといけないが、対応できないから⾒ないふりをしている。 l 開発を委託している会社にデザイン改善の話をしても、良い提案をしてくれない。 システムにおけるデザインの課題（500⼈以上のシステム責任者の声）

Slide 11

Slide 11 text

11 l システムの⾒た⽬が古いし、使いにくい Ø サービス︓売上低下、競合に負ける Ø 社内システム︓効率が悪い（作業の時間が増えるだけ） l 単⾊で暗いイメージ Ø 気持ちの問題 ⾊使いなどによっては頭痛くなる l ユーザーが「怖くて触れないボタン」がある Ø 便利な機能も埋もれる システムにおけるデザインの課題→そのままにしておくと

Slide 12

Slide 12 text

12 l 機能が⽭盾している Ø 使い込んだ⼈にしか分からないシステムになっていく l システムの使い⽅を教えるのが⼤変（マニュアルは5年前に更新が途絶えて。。。） Ø 教育コスト増⼤、離職率が上がる l 多様なクライアント（特に声の⼤きい⼈）の依頼に答えて機能拡張し続けたら、シス テムがおかしくなった。 Ø どんどん⽭盾したシステムになる l どうにかしないといけないが、対応できないから⾒ないふりをしている。 l 開発を委託している会社にデザイン改善の話をしても、良い提案をしてくれない。 Ø 臭いものにフタをしても、そのまま。いつも頭の⽚隅に課題として残る。 システムにおけるデザインの課題→そのままにしておくと

Slide 13

Slide 13 text

事例紹介

Slide 14

Slide 14 text

三越伊勢丹百貨店 企業データ ・業界︓百貨店 ・従業員数︓18,799⼈ ・売上︓1.2兆円（2019年） 解決したかった課題 ・顧客カルテは、バックヤードのPCか紙で管理していた。 ・カルテの管理を担当スタッフ依存から脱却 ・購買実績に基づきパーソナライズして提案をしたい 得られた効果 ・iPadアプリ利用により、顧客情報をスタッフ間で共有 ・お客さんとアプリで一緒に購買履歴などを確認→提案 →満足度アップ ・伊勢丹テンプレートデザインに対して、各店舗でカスタマイズ ・伊勢丹で好評だったので、三越にも展開

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

ヒューマンテクノロジーズ（ KING OF TIME ） 企業データ ・業界︓企業向けクラウド勤怠管理サービス ・従業員数︓39⼈ （2015年⽀援時） ・売上︓9億円（2015年⽀援時） 解決したかった課題 ・UI/UXの優れた他社サービスにコンペで負ける ・2004年にサービスイン以降⼤きなUXUIの変更していない。 →改善したいがデザインのことはよくわからない ・実は、過去に⾃社でUI/UXを⼩さく変えてみたら、ユーザから叱 られた。 得られた効果 ・単⽉の契約数が80％アップ ・売上は4年で約3倍に向上 ・Fixelの⽀援でデザイン部署の開設 ・デザイン改善で⾒た⽬は良くなったが⼀覧性が悪くなり改善依頼 →対応することで、既存ユーザも満⾜（B2Bならでは） Before After

Slide 17

Slide 17 text

ヒューマンテクノロジーズ（ 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/

Slide 18

Slide 18 text

18 メニューに強弱 がない トップ画⾯に なくてもよい 情報 ToDoが⼩さく てわかりずらい

Slide 19

Slide 19 text

19 よく使う機能 はアクセスし やすい場所へ 配置 ToDoをシンプ ルで分かりや すくした 他の機能は 中へ隠した

Slide 20

Slide 20 text

20 2回⽬の改善で情報の⼀覧性をあげ、業務効率を改善 Before After1 After2

Slide 21

Slide 21 text

住友電工（ 楽々Workflow） 企業データ ・業界︓⾮鉄⾦属 ・従業員数︓272,796⼈ ・売上︓3兆1779億円 解決したかった課題 ・アメリカの関連会社へ本システムの導⼊を承諾させる（内部統 制） ・説得するためには、2週間でスマホとwebのデザイン改善 得られた効果 ・アメリカの関連会社が導⼊を決定 ・中国など他国への販売が加速 Before After

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

コールセンター 企業データ ・業界︓⾮公開 ・従業員数︓⾮公開 ・売上︓⾮公開 解決したかった課題 ・コール対応は複数システムを横断的に操作が必要 ・教育コストが⾼く離職率も悪化 ・システムが原因で1件あたりの処理時間が⻑い 得られた効果 ・1画⾯で動的に遷移する処理が可能に ・電話対応（4分）事後処理（4分） 合計8分を要していたが 電話対応（2分）事後処理（2分） 合計4分の半分に短縮 全体平均として4割の処理時間を削減 約1,000名のスタッフのうち、外部委託分を契約終了へ Before After

Slide 25

Slide 25 text

モータ制御 企業データ ・業界︓モータ ・従業員数︓3,000名 ・売上︓600億円 解決したかった課題 ・単軸制御から多軸制御にソフトウェアをアップグレードが必要 ・⾒た⽬が古い 得られた効果（具体的な数値等は⾮公開） ・単軸の操作感で多軸を制御を可能としてユーザを混乱させない ・時代に合った画⾯で古さを感じさせない Before After

Slide 26

Slide 26 text

3DCADメーカ 企業データ ・業界︓3D CADメーカ ・従業員数︓数百名 ・売上︓⾮公開 解決したかった課題 ・アイコンから出来ることの想像が難しい ・ショートカットを覚えないと使いこなすのが難しい 得られた効果（具体的な数値等は⾮公開） ・メインメニューサブメニューの構成を⾒直して使いやすく ・アイコンにも程よく説明を追記して、ビギナーユーザをフォロー ・今⾵のデザインを取り⼊れて積極販売が出来るようになった Before After

Slide 27

Slide 27 text

国内楽器メーカ（ギターマルチエフェクター） 企業データ ・業界︓楽器メーカー ・従業員数︓703⼈ ・売上︓⾮公開 解決したかった課題 ・ 競合に遅れずエフェクターのスマホアプリをリリースしたいが、 ノウハウが無く遅れた。後発であるならばUXデザインを 考慮したアプリにしたい。 ・ブランド感を損なわないアプリにしたい。 得られた効果（具体的な項⽬は⾮公開） ・デザインを標準化することで継続的に展開可能な デザイン基盤を構築 ・ギターを持ったまま、スマホでチューニングが容易なアプリで ⾼評価を得た。

Slide 28

Slide 28 text

28 なぜ、業務システムは使いにくい︖

Slide 29

Slide 29 text

29 答えは簡単 デザインや使いやすさを考慮しないで、機能を満たすボタンやラベルを エンジニアが配置しただけのシステムだから なぜ、業務システムは使いにくい︖

Slide 30

Slide 30 text

30 デザイン会社選定で考慮しないといけないポイント l アプリケーションのデザインが出来るか → Webサイトとアプリケーションのデザインは別のモノ l 実装に使われているフロント実装のライブラリの制限などを理解してデザインが出来るか →例えばMFCで作られている場合は、デザインに制限がかかる l システムの制限制約を考慮した上で情報設計やデザイン出来るか →ユーザに便利な⼀覧画⾯をデザインしても、表⽰に1分かかるなら現実的ではない l 再現可能なロジカルなデザインを出来るか →業務システムは属⼈化せずに、確かな仕事が出来るためのロジックでデザインが必須 デザイン会社に依頼したら解決するの︖

Slide 31

Slide 31 text

実際にどうやって進めるの︖

Slide 32

Slide 32 text

32 UXデザインプロセス ※プロジェクトのゴール・状況に応じて上記のプロセスを適切に調整 反復 コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 ワイヤーフレーム 作成 ユーザーテスト 評価と改善 ゴールと 範囲の設定 評価基準の検討 ペルソナ定義 計画フェーズ 分析フェーズ 実証フェーズ プロトタイピング

Slide 33

Slide 33 text

33 [UX Pyramid] ゴールと範囲の設定 ü プロジェクトの⽬的と対象範囲を明⽂化する ü UXデザインで達成すべき 使⽤者経験の特徴とレベルを決める ü 必要に応じてプロジェクトの範囲を⾒直す ゴールと 範囲の設定 計画フェーズ [UX Honeycomb]

Slide 34

Slide 34 text

34 評価基準の検討 ü UXデザイン作業の成果を数字で測ることができる項⽬で定義する ü ⽐較のために現在のデータを取得し、⽬標値を定義する ü 必要なデータの取得ができていない場合は データ取得⽅法を追加することを検討 ü 価格変更や機能追加など、UXデザイン以外の影響要素を可能な限り分離した ⽅がより厳密な評価測定ができる 評価基準の検討 計画フェーズ

Slide 35

Slide 35 text

35 ペルソナ定義 ü 対象ユーザー像を具体的に定義 ü ユーザーの視点で物事を考えるための⼿法 ü 必要に応じて複数のペルソナを定義して使う v メインペルソナ、サブペルソナ、アンチペルソナ、エクストリームペルソナ等 ü 定義の詳細度は製品特性に応じて決める v 業務システムの場合、ITリテラシー、年齢代、性別など、 かなり制限的な特徴の定義に留めることもあり ペルソナ定義 分析フェーズ [ユーザー] [ペルソナ] 佐藤さん 鈴⽊さん ⽞⼈さ ん A B C

Slide 36

Slide 36 text

36 ペルソナの例 ペルソナ定義 分析フェーズ

Slide 37

Slide 37 text

37 コンテキスト分析 ü ペルソナが対象商品に接する 動機、場所、環境などを確認する ü 主に制約条件や考慮すべき環境要因を確認して 後のUI設計に反映する v [例] 使⽤するデバイス、⼿袋で操作、操作時間、後続作業、 他の関連システムがある、など ü 後述するジャーニーマップ作成と並⾏可能 コンテキスト 分析 分析フェーズ 佐藤さん 鈴⽊さん ユーザーコンテキスト ユーザーコンテキスト 外部コンテキスト マーケット 競合 など

Slide 38

Slide 38 text

38 ジャーニーマップ作成 ü ペルソナが対象商品に接する以前から接した後までの 接点を時系列で描写する ü ユーザーと商品間の接点を分析し、 ユーザーの⾏動を理解することが第⼀の⽬的 ü 綺麗なものを作成することより、 ⼿軽に作成して変更できるものにする ü 先のコンテキスト分析と、後述するメンタルモデルを 併記して作成することがある ジャーニーマップ 作成 分析フェーズ

Slide 39

Slide 39 text

39 ジャーニーマップ作成 よく⾒かけるジャーニーマップの例 ジャーニーマップ 作成 分析フェーズ

Slide 40

Slide 40 text

40 ジャーニーマップ作成 実⽤的なジャーニーマップの例 ジャーニーマップ 作成 分析フェーズ ポストイットを使い素早く検討︕ デジタル化して整理

Slide 41

Slide 41 text

41 ジャーニーマップの例 ジャーニーマップ 作成 分析フェーズ 資料では⾮公開

Slide 42

Slide 42 text

42 メンタルモデル分析 ü ペルソナが対象商品に接する際に何を感じて、 何を考えているかを定義して分析する ü 表⾯的な動機からより根本的な動機を探ることで 本当のニーズを⾒つけだす v 5 Why法に近い ü ペルソナの根本的な課題を解決する⼿段を検討する v イノベーションを起こし得るのはここ︕ ü リサーチを⾏い、定量的な分析をする⽅法もあるが、 多くの場合ジャーニーマップと併記しながら定性的 な分析を⾏う メンタルモデル 分析 分析フェーズ

Slide 43

Slide 43 text

43 メンタルモデル分析 ü ペルソナが対象商品に接する際に何を感じて、 何を考えているかを定義して分析する メンタルモデル 分析 分析フェーズ 定量的な分析例 ジャーニーマップに併記して分析する例 ジャーニーマップ メンタルモデル

Slide 44

Slide 44 text

44 ワイヤーフレーム作成・プロトタイピング ü 今までの作業で⽴てた仮説を検証するための必要最⼩限のUIを作る l 最初は紙とペンを使ったUIスケッチで ペーパープロトタイミングを⾏う l 最初はたくさんのアイデアを出して、 それを集約していくことを繰り返す l チーム内で簡易的なユーザーテストを繰り返しながら 短期間で成熟させて⾏く ü ある程度まとまった段階でユーザーテストで使えるプロトタイプにする ワイヤーフレーム 作成 実証フェーズ プロトタイピング

Slide 45

Slide 45 text

45

Slide 46

Slide 46 text

46 ユーザーテスト ü 仮説検証と問題発⾒の場 l ⽬的として価値をユーザーに提供できているかを確認 l ペルソナに近いユーザーを招き、役割劇、発話⽅などで⾏ う (必要に応じて録画・録⾳を⾏う。専⾨機関に依頼する⽅法もある) l テストユーザーは社内など⾝近なところから探すのも⼿︕ l 課題を⾒つけ、分析を⾏い、対応策を考える ü UXデザインでも、最も⼤事なタスク︕ ユーザーテスト 実証フェーズ

Slide 47

Slide 47 text

47 ユーザーテスト ü プロトタイピングツールを有効活⽤する l コードを書かなくてもユーザーに疑似体験をさせることができる l 迅速に新しい案を試すことができる ユーザーテスト 実証フェーズ

Slide 48

Slide 48 text

48 評価と改善 ü ユーザーテストの結果を分析し、必要な対応を⾏う l 仮説の誤りがあった場合は新しい仮説に基づいて再度検 討を⾏う l ノイズと情報の区分が⼤事 l [最初に定義したゴールを達成できているか] で反復の 必要性を決める（※現実的には予算や時間という制約を考慮する） 評価と改善 実証フェーズ 反復 コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 ワイヤーフレーム 作成 ユーザーテスト 評価と改善 ゴールと 範囲の設定 評価基準の検討 ペルソナ定義 計画フェーズ 分析フェーズ 実証フェーズ プロトタイピング [反復して完成度を⾼める] 最初から満点を狙わない。それは不可能︕

Slide 49

Slide 49 text

成果物はどんなものがあるの︖

Slide 50

Slide 50 text

50 UIデザイン成果物の例 1. ビジュアルデザイン 画⾯デザインの仕上がりイメージ

Slide 51

Slide 51 text

51 UIデザイン成果物の例 2. デザインガイドライン UIデザインの各部品ごとのデザイン仕様とルールをまとめたもの

Slide 52

Slide 52 text

52 UIデザイン成果物の例 3. デザイン指⽰書 画⾯ごとのデザイン仕様（要素のサイズや⾊、余⽩など）を記したもの

Slide 53

Slide 53 text

53 属⼈化しないために Design System

Slide 54

Slide 54 text

54 l 3rd party サービスプロバイダー向けのデザインガイド ラインを公開していたが、あまり効果がなかったのでデ ザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l 実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提 供 例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

56 デザインシステムとは デザインシステム デザインガイドライン UIコンポーネント （デザイン＆コード） 各種リソース

Slide 57

Slide 57 text

57 デザインシステムを媒体にしたコラボレーション デザイン システム ビジネス パーソン エンジニア デザイナー 機能追加・改善の際に、 判断の基準になる︕ デザイン資産の 価値を定量化できる 再利⽤できる部品が 揃っている︕ 企業活動におけるデザイン活⽤の基盤

Slide 58

Slide 58 text

58 l 情シス l 社内システムを分かりやすく、使いやすくできる l システム間の使い勝⼿の⼀貫性を確保 l システム構築のコスト低減 l SIer l 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上（２５％以上） l ⼀貫性のあるデザインを⾼品質で提供することでお客様に対するサービス向上 l 他Sierに対する競争優位を占めることが可能になる l サービスプロバイダー l デザインの⼀貫性獲得によるブランド構築 l より迅速な改善・リリースが可能に l リリースを重ねてもデザインの⼀貫性や品質が落ちない l 今後のデザイントレンド変化に迅速に対応可能 各プレイヤーにおけるデザインシステムの価値

Slide 59

Slide 59 text

59 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo

Slide 60

Slide 60 text

60 なぜ今、UI/UXに投資すべきか︖ 品質 時間 初回UXデザインプロジェクトの 効果が最も⼤きい フェーズ 1 フェーズ 2 Quality of UX

Slide 61

Slide 61 text

61 まとめ l 業務システムはデザインされていないから、使いやすくない l ユーザ⽬線で、少しだけでもデザインするだけで効果は絶⼤ l 開発のことを考慮しながらデザインしないと、絵に描いた餅になる。

Slide 62

Slide 62 text

MAKE DESIGN EASY