SHIFT EVOLVE Presents Vol.9 エンジニアのためのUXデザイン入門講座

SHIFT EVOLVE Presents Vol.9 「エンジニアのためのUXデザイン入門講座」で投影したスライド。

Transcript

1. SHIFT_EVOLVE エンジニアのための UXデザイン入門講座 1
2. ▪アジェンダ ・自己紹介 ・はじめに ・UXデザインが必要なワケ ・UXデザインの役割 ・UXデザインのやり方 2
3. ▪自己紹介 ・前職は損害保険会社のシステム子会社 ・エンジニアリング（メインフレーム開発、WebUI設計） ・品質管理（開発プロセス、UXプロセスの構築・整備、組織展開） ・インフラ（性能チューニング、セキュリティ対策） →いわゆる「便利屋」 ・現在、株式会社SHIFTのDAAE開発グループでUXディレクターを担当 ・日本科学技術連盟（品質管理系研究会）のソフトウェア品質管理研究会 でUX演習コースのサブリーダーを担当 3
4. はじめに 4
5. まずは参加者の意識・目線合わせ 5
6. エンジニアの大半はスマートフォンのユーザ 6
7. 時には使うアプリケーションに対してネガティブな評価をするときもある 7
8. 一方で、自分が作るシステムのユーザやお客様からお怒りの声をいただくこ ともある。 8
9. いざそういう評価を受けてても、どうしたらいいかわからないことも多い。 9
10. UXデザインの ・必要なワケ ・役割 ・やり方 その「悩み」を解決する方法として、UXデザインがある。 中でも今日は導入ということで、UXデザインの必要なワケ、役割、やり方を 取り上げる。 10
11. このセミナーを通じて、悩みを解決するための「入口、ヒント」をつかんで もらうことがゴール。 11
12. UXデザインの必要なワケ 最初はUXデザインの必要なワケの話。 12
13. 「UXが大事」というのは聞いていても、なぜ必要なのかを認識できている人 は少ない。 13
14. 狩野モデル なぜ必要なのかを狩野モデルを使って説明する 14
15. 出典：「狩野モデルと商品企画」https://www.juse.or.jp/departmental/point02/08.html 狩野モデル 顧客の求める品質をモデル化した考え方 → 魅力品質・一元的品質・当たり前品質 「これらのバランスをどう考えるか、また“顧客にとって”の魅力をどう創り込んでいけるか」 魅力品質： 不充足でも仕方がないが、充足されれば満足度 一元的品質： 不充足だと不満、充足されると満足 当たり前品質： 不充足だと不満、充足されても当たり前 （説明はスライド記載の内容） 具体例 テレビ 魅力的品質：3Dテレビ、ネットの動画も視聴可能、ステレオ 一元的品質：ディスプレイサイズ、高精細 当たり前品質：地デジ視聴、外部端子 15
16. ex) 携帯電話 わかりやすい「体験」の例として携帯電話を取りあげる。 ショルダー携帯：外でも電話応対ができるという「体験」 ガラケー：誰もが持っていて、いつでもコミュニケーションができるという 「体験」 スマホ：PCでしかできなかったことが外でもできるという「体験」 いずれも「体験」を提供した製品、サービスといえる。 だが、時間と組み合わせてみてみると違う側面が見える。 16
17. ex) 携帯電話 狩野モデル＋「時間」 モデルの曲線は時間経過に従って変化する＝コモディティ化 最初は電話が掛けられるだけで魅力だったのが、今はPCでやってたことがで きてもそれだけでは魅力ではない。 つまり、時間経過によって「魅力」が変わってきている。かつ、「魅力」が 作りづらくなってきている。 実際、スマートフォンの「魅力」を作ることは難しく、OSのサポートをやめ ることでユーザを追い立てるというアプローチすら取り始めている。 一度魅力的価値を作ったら終わりではなく、常に魅力的価値を追いかける必 要がある。そのためには、単に新しい機能を追加するのではなく、体験を作 る必要がある。 17
18. UXデザインの必要なワケ それは 「魅力」につなげるため このようにUXは「魅力」につなげるために必要なモノ。 19
19. 必要性の次には役割を説明 20
20. UXデザインの役割 21
21. V字モデル UXデザインの役割を説明するためにV字モデルを使用 22
22. V字モデル IT製品開発の手法の一種。いわゆるウォーターフォール型のシステム開発の流れを表したもの。 （説明は割愛） 23
23. V字モデルで表現されない（＝システム開発の範囲と思ってない）ところがあ る 24
24. ？ ？ このV字の上に何かがあって、そこから要求は「降って」きて、受入テスト後 にどこかに「出ていく」 25
25. この部分、システム開発の教科書であんまり触れないところではあるが、非 常に重要。 まず、左側の「要件定義の前」には、本当は「要求のようなものがある」が もので、システム開発ではそこに踏み込まない。 26
26. でも、「そこ」がスケジュール通りに出てこないからデスマーチになったり、 27
27. 要件追加、変更の嵐が起きる。 28
28. そして右側。せっかく頑張って作ってリリースしても、よくわからないうち にサービス終了、撤退。 こちらに関しても「誰かが決める」ことであって、「システム屋の仕事では ない」という認識が多い。 29
29. この上にある「何か」、左側と右側それぞれを仮に、「企画」と「市場評 価」と呼ぶ。 30
30. システム開発で定義する要件は企画から降ってきて、受入テストをしたあと は市場に出て評価をされるが、暗黙的に「システム開発の範疇じゃない」と 捉えられている。 31
31. にしては、システム開発は「企画」と「市場評価」に大きく左右されてしま う。 つまり、大事な部分が人任せにしてしまっていて、結果不安定なものになっ ている。 32
32. この部分まで含めて、しっかりさせるのがUXデザイン。 33
33. W字モデル 製造と検証を並走させることで品質をあげる考え方 UXデザインがどういう立ち位置なのかをW字モデルで説明する。 V字モデルの発展形のW字モデル製造と検証を並走させることで、品質を上げ るという考え方。 主に左側の工程と合わせてテスト設計をすることで、要件・仕様定義、設計 の精度を上げるというところがポイント（テストよりもバグの検出が早い）。 34
34. W字に「企画」と「市場評価」を置く。 35
35. これを評価するものとして、企画評価を加える。 36
36. UX デザイン UXデザインはプロジェクト全体を通してこれらすべての工程に対して、ユー ザの観点から、「企画に問題がないか、企画が正しく実現できるか」を確認 する役割。 実際には一人で最初から最後まですべての工程をカバーするケースは少なく、 途中からや部分的になることが多いが、企画から市場までどの工程でもUXデ ザインの観点で関与することができる。 37
37. ex)プロトタイプ 技術検証や問題点の洗い出しを行うために作成される試験用のプログラム ちょっと抽象的なので、具体例として「プロトタイプ」を使って説明する。 プロトタイプはエンジニアの方にはなじみがある単語で、技術的な検証や、 問題点を洗い出すために作る試験用のプログラムのこと。 スライドのイメージは車の写真ですが、実際の車を作る前に粘土とか木とか で空気抵抗を見るための試験用のモノ。物理的なプロダクトは量産に入る前 にプロトタイプを作って評価することが多い。 38
38. ex)プロトタイプ 技術検証や問題点の洗い出しを行うために作成される試験用のプログラム ・ホットモック ・コールドモック ・デザインプロトタイプ ・ペーパープロトタイプ プロトタイプという単語は結構厄介で、人によってイメージが違ったりする が、大きく4つ紹介する。 「ホットモック」：ぎりぎりホンモノではないけど、ホンモノのプログラム に近いプロトタイプ 「コールドモック」：一部ダミープログラムが入ってるけど、一応動くプロ トタイプ おそらくエンジニアの方にとっての「プロトタイプ」はこのどちらかだと思 われる。 これらについて、UXデザインではユーザ観点からの評価に使用する。 わかりやすい例で行くと、「ユーザビリティテスト」。「設計と同じかどう か」、「ちゃんと動作するかどうか」ではなく、「ちゃんとユーザが使える かどうか」を見る。 UXデザインではさらにデザインプロトタイプ、ペーパープロトタイプという のを作ることがあります。 39
39. デザインプロトタイプ デザインプロトタイプというのは、いわゆる「紙芝居」。それもリアルな紙 芝居のこと。 UIデザインの「設計」という観点もありますが、これを使ってある程度は ユーザビリティに問題がないかを見ることができる。 ホットモック、コールドモックと違って、プログラミングが不要なので、短 期間、低コストで作成が可能。 また、ツールによってはページごとにリンクを張ったりできるので、コール ドモックのように使うこともできる。 40
40. ペーパープロトタイプ さらにもう一段階抽象的なのがペーパープロトタイプ。 これは文字通り、紙にペンで書くプロトタイプのこと。 最近はリモートワークなので、なかなか手書きで実施することはないですが、 話を聞きながらその場でペンで書いて作成する。 「落書きと同じ」と思った方も多いと思いますが、これはデザインプロトよ りもさらに短期間、低コストで作れるうえ、実はこれ作るだけで、「これは アリか？ナシか？」というのはすぐわかる。 サンプルは実業務だといろいろあるので、担当してる研究会の演習で作った もので、紙に書かれているものの、スマホアプリを想定したもの。 実は、当初の「企画」の議論では、「あんな機能もあったほうがいい、こん な情報もあ ると便利」と画面にてんこ盛りの情報を載せようとしてたが、 いざA4の紙に書いてみて、スマホサイズに縮小コピーしてみたらとても使え ないことが一目で判明。 結果、「本当に必要なモノだけ残す」というアプローチに変わって、企画の 練り直しとなった。 41
41. 類似するものとして、ホワイトボードに書く「ポンチ絵」があるが、複数人 でワークしたり、編集の容易さから紙を使うことが多い。 人によっては「こんなのシステム開発じゃない」と感じるかもしれないが、 だまされたと思ってやってみると予想外にいい効果が出たりするのでおスス メ。 41
42. さっきのW字に戻って、4つのプロトタイプを配置してみる。 42
43. ペーパー ホット コールド デザイン マッピングするとこんな感じ（必ずこの工程で作るというわけではなく、 「何を確認、検証するか」次第で違うタイミングだったり、作らなかったり はある）。 他にも同様にプロジェクトを通じて実施するUXデザイン手法はあるが、今日 は導入なので手法の紹介は割愛。 43
44. UXデザインの役割 それは プロジェクトを通じて 「魅力的品質実現」の精度をあげる UXデザインの役割はプロジェクトを通じて「魅力的品質」が実現できるよう に精度をあげること。 44
45. 必要性、役割の次は、「何をするか」。 45
46. UXデザインのやり方 ということで、最後のテーマ、UXデザインのやり方の説明。 46
47. UXデザインのやり方 それは フレームワークを使う のがおすすめ これは先に答え発表。 それはフレームワークを使って実施するのがおススメ。 必ずしもフレームワークを使う必要はないが、フレームワークを使うと間違 えにくい。 47
48. UXデザインの 5段階モデル ここででてくるのがUX5段階モデル。 48
49. UXデザインの5段階モデル UXデザインの要素を５段階のレイヤに分類、整理したもの 出典：「UXデザインにおける5段階モデルとは」https://goodpatch.com/blog/elements-of-ux UXの5段階モデルはUXデザインの要素を5段階のレイヤに分類したもの。 このモデルは上下の構造になっている。 下から、戦略、要件、構造、骨格、表面の５層、それぞれにUXデザインの要 素を分類するもの。 この説明の絵にもヒントがあるが、このセミナーで触れた内容も踏まえると ピンとくる方もいるはず。 49
50. V字（W字）モデルの左側（を上下逆にしたもの）とリンクしている。 50
51. 上流 下流 つまり、5段階モデルは下から上に従って、システム開発の上流から下流の流 れを示している。 51
52. 変えやすいけど、付け焼刃になりやすい 根本解決に成りうるけど、変えづらい 上流 下流 さらにUXデザインでは、このモデルをこう捉える。 何かの課題に対してビジュアルデザイン、例えばボタンやラベルといった 「表面」を変えることはハードルが低いけど、問題の根本的な解決にはなら ず、付け焼き刃になりがち。 逆に「戦略」を変えることは根本解決になりうるけど、上に乗る4層すべてが やり直しになる。 この部分も「上流の要件を変えることはオオゴト」というシステム開発のセ オリーと一致する。 52
53. ・「カートに入れる」ボタンを目立たせよう ・商品写真の下に詳細な説明文をつけよう ・購入時に関連商品への導線をつけよう ・ターゲットを既存ユーザとし、関連商品の購入増を目指そう ・「プロのおススメ」機能をつけよう UXデザインでは・・・ ex)「ECサイト売り上げを改善したい」 少し具体的な例で補足説明。 「ECサイトの売り上げを改善したい」という、「企画」があったとして、UX デザインのアプローチ例を記載。 53
54. ・「カートに入れる」ボタンを目立たせよう ・商品写真の下に詳細な説明文をつけよう ・購入時に関連商品への導線をつけよう ・ターゲットを既存ユーザとし、関連商品の購入増を目指そう ・「プロのおススメ」機能をつけよう UXデザインでは・・・ ＝5層モデルにマッピング＝プロジェクトの「どこで何するか」わかる ex)「ECサイト売り上げを改善したい」 →それぞれの「改善策」を見つけるための手法が存在 どのレイヤにも（効果は別として）「改善方法」があるが、それぞれ違う手 法（UX手法、メソッド）を使って見つけることができる。 例えば、戦略のレイヤはペルソナ・シナリオ、骨格のレイヤはデザインプロ トタイプを使ったユーザビリティ検証etc。 これをちょっと違う見方で見てみると、新規開発であっても、既存システム のメンテナンスであっても、つまりどのレイヤからスタートしてもUXデザイ ンを取り入れることができる。 また、そのプロジェクトでどこまで時間とお金が掛けられるか、今、プロ ジェクトはどこまで進んでるかを考えつつ、どの改善方法をとるかを提案し て「企画実現の精度をあげる」いくというアプローチをします。 54
55. UXデザインのやり方 それは フレームワークを使う のがおすすめ このようにプロジェクトの状況と5層モデルを見ながら、UXデザインをやっ ていくというのがおすすめ。 55
56. で、次に気になるのはやはり具体的な作業として何やるのか。 56
57. To be continued それは次回以降。 57
58. 質疑応答 58
59. 59
60. Question エンジニアでもできますか？ Answer できます。 「UXデザイナー」のバックグラウンド …デザイナ、マーケッター、エンジニア、 テスター、人間工学、社会学、文化人類学 etc… よくある質問として「エンジニアでもUXデザインできるか」 言い換えると「UXデザインはエンジニアの仕事なのか」 答えはYes UXデザイナーはUXデザイナーとしてキャリアを始めるケースはあまりなくて、 様々なキャリアからUXデザイナーになるケースが多い 例えば、デザイナetc 変わり種としては文化人類学から転向というケースも ある（「市場にいるユーザがどういうことを考えて、何をしているか」の調 査は、「ある文化の人が何をしているか」の調査そのもの） 60
61. Question UI、ユーザビリティ、UXの違いは？ Answer UI：ユーザとシステムの接点 ユーザビリティ：「使いやすさ」の指標 UX：システム以外も含めた「体験」 【配布資料のみ】 よくある質問として「UI、ユーザビリティ、UXの違い」 答えは UI：ユーザとシステムの接点 →いいUI、悪いUIのどちらも含まれる ユーザビリティ：「使いやすさ」の指標 →高いユーザビリティ、低いユーザビリティがある UX：システム以外も含めた「体験」 →システムとの接点も含んだ全体を指す 61
62. ex)メッセージングアプリ UI： ボタン、色 ユーザビリティ： 操作ミスしないか、迷わないか UX： 新たなコミュニケーション手段 使うときの「気持ち」 【配布資料のみ】 メッセージングアプリの例で説明 UI：ボタンや画面の色合いといったもの ユーザビリティ：操作のミスをしないか、機能的に不足がないかといったも の UX：電話、メール、チャットと異なるコミュニケーションという「体験」 （ex.リアルタイム性、メッセージの「重み」）、それを使った時の「気持ち （ex.足跡（既読）機能）」まで含む 62