$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SHIFT EVOLVE Presents Events Vol.11 エンジニアのためのUX...
Search
kazuharumurakami
February 04, 2022
Business
0
280
SHIFT EVOLVE Presents Events Vol.11 エンジニアのためのUXデザイン基礎講座~戦略編~
SHIFT EVOLVE Presents Events Vol.11 「エンジニアのためのUXデザイン基礎講座~戦略編~」で投影したスライド。
kazuharumurakami
February 04, 2022
Tweet
Share
More Decks by kazuharumurakami
See All by kazuharumurakami
SHIFT EVOLVE Presents Events Vol.14 エンジニアのためのUXデザイン講座「ストーリーボードで学ぶUXデザイン」
kazuharumurakami
0
240
SHIFT EVOLVE Presents Vol.9 エンジニアのためのUXデザイン入門講座
kazuharumurakami
0
720
Other Decks in Business
See All in Business
CREALを知る
creal
PRO
0
1.3k
三井物産グループのデジタル証券〜名古屋・プライムオフィス〜徹底解説セミナー
c0rp_mdm
PRO
0
1.8k
PdMによるLiveバイブコーディング〜プロトタイプ開発実践〜
kakumaeda
2
570
TORICO Ethereum_companydeck_20251217
torico
0
460
BtoB SaaSにおける新規事業開発プロセス(ミライ塾ヒトコマ講座)
miyashino
0
260
イークラウド会社紹介 ~挑戦で、つながる社会へ~
ecrowd
1
4.1k
らんみるぷろじぇくと採用情報
ranmil
0
200
Corporate Story (GA technologies Co., Ltd.)
gatechnologies
0
410
Corporate Info
yuzo
0
920
Speee_2025年9月期 通期決算説明資料
speee_pr
0
970
サムコ株式会社 第47期第1四半期決算概要
tsuchihashi
0
140
キャンバスエッジ株式会社 会社説明資料
canvasedge
0
2.9k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
70k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Scaling GitHub
holman
464
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Become a Pro
speakerdeck
PRO
31
5.7k
Raft: Consensus for Rubyists
vanstee
141
7.2k
Visualization
eitanlees
150
16k
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Transcript
SHIFT_EVOLVE エンジニアのための UXデザイン基礎講座 ~戦略編~ 1
▪アジェンダ ・自己紹介 ・前回の復習 ・UXデザインにおける「戦略」 2
▪自己紹介 ・前職は損害保険会社のシステム子会社 ・エンジニアリング(メインフレーム開発、WebUI設計) ・品質管理(開発プロセス、UXプロセスの構築・整備、組織展開) ・インフラ(性能チューニング、セキュリティ対策) →いわゆる「便利屋」 ・現在、株式会社SHIFTのDAAE開発グループでUXディレクターを担当 ・日本科学技術連盟(品質管理系研究会)のソフトウェア品質管理研究会 でUX演習コースのサブリーダーを担当 3
前回の復習 4
UXデザインの必要なワケ それは 「魅力」につなげるため 前回は「UXデザインの必要なワケ」を狩野モデルを使って「魅力につなげる ため」であることを説明しました。 5
UXデザインの役割 プロジェクトを通じて 「魅力的品質実現」の精度をあげる さらに「UXデザインの役割」をV字モデル、W字モデル、さらにその上に あって両モデルで表現されていない「企画」、「市場評価」を説明して、魅 力的品質実現の精度を上げるという話をしました。 6
UXデザインのやり方 フレームワークを使う 3つ目として「UXデザインのやり方」についてUXデザインの5段階モデルの 説明をしました。UXデザインのメソッドは各レイヤーにマッピングすること ができて、段階に応じて使い分けるという話をしました。 7
UXデザインにおける 「戦略」 今日の本題の「UXデザインにおける戦略」の話をします。 8
UXデザインにおける「戦略」 ・ユーザーの需要 ・サイトの目的 UX=User Experience 先ほどの復習にも出てきた「5段階モデル」の戦略レイヤーを見るとユー ザーの需要とサイトの目的とあります。 まずユーザーの需要についてですが、UXデザインの中で一番重要な要素です。 9
みなさんは自分が開発、関与しているシステム、サービスのユーザーを知っ てますか? 10
①しょっちゅう会ってる、話してる ②会ったことある、話したことある ③知ってはいる(けど会ったことない、話したことない) ④誰か知らないし、興味ない みなさんにとって「ユーザー」は・・・ (上記アンケートの結果、大半が③でした) 11
問いを変えて、皆さんに自分が「人にあげるプレゼントで悩んでるから相談 に乗ってほしい」と相談したとします。 皆さんはそれに対してどう反応しますか? 「誰にあげるの?」、「なぜあげるの?」といった疑問を持つ方が大半だと 思います。 プレゼントを「自分が人に提供するもの」として考えた場合、必ず「誰にな ぜあげるのか?」を考えますが、同じ「自分が人に提供するもの」であるシ ステム、サービスになるとなぜかその発想が抜けてしまうことがあります。 ここが抜け落ちないようにするのがUXデザインです。 12
UXデザインにおける「戦略」 ・ユーザーの需要 ・サイトの目的 ex.業務アプリ、通販サイト →普通は決まっている 5層モデルのもう片方、サイトの目的についてですが、このモデルの絵は 「Webサービス」を前提とした絵になっているため、「サイト」という言葉 が使われてます。 そのため、サイトは「サービス、システム」と置き換えてみてください。例 えば、業務アプリとか、通販サイトとか、「何を提供するか」になります。
これらについては、通常のプロジェクトではすでに決まってることが多いと 思います。 13
UXデザインにおける「戦略」 ・ユーザーの需要 ・サイトの目的 「新たなサービスの構築」 「ビジネスアイデア創出」 →実施頻度が低いので 今回の対象からは除外 気になる方は「デザインシンキング」、「デザイン思考」で検索 ただ、一から考える必要があるケースがあります。 例えば、新たなサービスを構築したり、ビジネスアイデアの創出をしたりす
る場合です。 これらについては実施頻度が低いことから、今回の説明の対象からは除外し ます。 テーマとしては丸1日使っても説明しきれないくらい、大きく、面白いとこ ろなので、気になる方は「デザインシンキング」、「デザイン思考」で検索 してみてください。 14
ユーザーの需要 ユーザーの需要についての説明ですが、まず「ユーザー」について説明しま す。 15
UXデザインでは・・・・ 「ペルソナ」というユーザを作る ユーザー UXデザインでは「ペルソナ」というユーザーを作ります。 16
・年齢、性別、リテラシー(≒知識、経験)、 サービス利用頻度etcで分類して作成する仮想の 「具体的な」ユーザー ・インタビュー、アンケート等の調査を通じて 作り上げる(「なんちゃってペルソナ」) →ペルソナを作ると、「誰のためのサービスか」 について関係者の目線が揃う ◆ペルソナ ペルソナは年齢や性別、リテラシー、サービス利用頻度などでユーザーを分 類して作る具体的なユーザーです。
分類する際にインタビューやアンケート等の調査を通じて情報を集めて作り 上げますが、コスト、スケジュールの面で難しい場合は「なんちゃってペル ソナ」を作ることもあります。 ただ、「なんちゃってペルソナ」を作る場合、好き勝手に作っていいわけで はなく、関係者間で「こういうユーザーいるよね」の合意が取れるくらい、 具体的かつ実在する可能性が高いペルソナにする必要があります。 ペルソナを作ると、関係者間で「誰のためのサービスなのか」についての目 線が揃います。 17
Q.ペルソナを1人に決めきれません。 A.複数のペルソナを作って、優先順位を決める。 ◆ペルソナ 事例.業務システムの構築プロジェクト ペルソナを説明すると、「1人に決めきれない」という質問を受けることが あります。 ペルソナは「1人」にしなければならないというわけではなく、複数作って もかまいません。ただ、その場合は各ペルソナに優先順位を設定してくださ い。 複数ペルソナを設定した事例として、自分の前職の経験をお話しします。
当時、ペルソナという言葉は使いませんでしたが、今から思うとペルソナそ のものだったと思います。 18
◆登場人物 ・Aさん:システム部門の女性ベテラン社員、プロマネ。 ・Sさん:業務部門の部門⾧。男性。 →AさんはもともとSさんの1年後輩という関係(当時のシステム子会社の社⾧とSさんが同期) ◆状況 ・大規模な業務システム再構築プロジェクト ・システム部門、業務部門合わせて10人程度のチーム ・機能設計コンセプトを 「1回に1つずつ、丁寧に手続き」or「1回で複数、効率的に手続き」のどちらに するかで議論が紛糾。
→でもどちらの意見も「ユーザーはこっちのほうが便利なはず」と思考。 そのプロジェクトの状況を説明します。 主な登場人物は2人いて、AさんとSさんです。自分はAさんの下で働いてい ました。 業務そのものの刷新も含む大規模なシステム改定で、業務部門もかなりパ ワーを割いたプロジェクトでした。 そのプロジェクトで実際にシステム開発を進めるにあたって、最初にコンセ プトを決めたんですが、その際に2つのコンセプトが出て議論になりました。 どちらも「ユーザー」という単語を使ってますが、議論は平行線のまま、と いう状況でAさんが発言しました。 19
Aさんのような「事務のスペシャリスト」 このシステムのユーザーには2種類のユーザーがいて、1人は私のような、 事務を全部理解していて、毎日事務仕事をしている「事務のスペシャリス ト」 20
Sさんのような「エグゼクティブ」 もう1人はSさんのような、全体の取りまとめをするようなエグゼクティブな ユーザー 21
◆ニーズの整理 ・事務のスペシャリスト →1日に何十、何百と手続きする ・エグゼクティブ →普段は手続きしないけど、重要顧客に対しては自分でやりたい ◆優先順位付け ・実際の業務の大半は「事務のスペシャリスト」が担っている →まずは「事務のスペシャリスト」を優先して作るべき 機能設計コンセプトを「1回で複数、効率的に手続き」に定める。 それぞれにニーズがありますが、今回のプロジェクトでは「事務のスペシャ
リスト」を前提として設計すべきです。 その発言がもとになって、コンセプトを「1回で複数、効率的に手続き」に定 めました。 22
「この機能、Aさんは受け入れる? 」 「この機能はSさんしか使わないから いったん見送り!」 この議論以降、 この議論以降、メンバーは「Aさん、Sさんならどう思うか?」という発想を 持つようになりました。 23
◆「裏」のポイント ・事務のスペシャリスト=Aさん向けに作る だけではなく、 エグゼクティブ=Sさんを忘れたわけではない もとても重要 ★「Sさんのニーズが反映されていないのは『考慮漏れ』ではなく、 『今回のプロジェクトでは優先順位が低い』ため」と言うと説明しやすい ・事務のスペシャリストとエグゼクティブではなく、Aさん、Sさんとしたことで 「使ってるときの顔が浮かぶ」 ★具体的シーンがわかると、単なるシステム開発ではなく、サービス開発になる
この議論は実は裏にポイントがありました。 1つ目はAさんだけでなく、Sさんがいることを明示したことです。 複数のペルソナを作った場合に優先順位をつける話をしましたが、この時もA さん、Sさんとペルソナを作ったうえでAさんを選択しました。 その結果、メンバー内やチーム外から「Sさん向けの機能を付けたほうが良い のではないか?」という議論が出ても、「ニーズがあるのはわかっているが、 今回のプロジェクトでは優先順位が下」として説明することができました。 2つ目は、システムを設計、開発する際に使ってるユーザの顔が浮かぶよう になったことです。 その結果、システムを作っているのではなく、サービスを作っているという 意識になり、よりユーザーの視点に立った開発をすることができました。 前述のように、「ペルソナ」という単語こそ使ってませんでしたが、ユー ザーを具体的に想定することでプロジェクトに好影響が出た事例になります。 24
◆ペルソナ WRKSHP ToolGuide Persona https://shop.wrkshp.tools/wrkshp-tool-guide-persona テンプレートの例 ・ちなみに、テンプレートに沿って作るとGood ペルソナを作るにあたってはテンプレートに従って作るのが作りやすいです。 テンプレートはいろいろあるので、探してみてください。 どのテンプレートもそうですが、写真を加えると想像している以上にペルソ
ナを具体化する効果があるのでおススメです。 25
◆ペルソナ 日科技連 SQIP研究会 2007年度成果報告 第四分科会 付録 https://www.juse.or.jp/sqip/workshop/report/attachs/2007/4_appendix.pdf 事例.ペルソナイメージ ペルソナの事例についてですが、さすがに業務に関連するものは公開が難し いので、自分が所属している研究会で作成したペルソナを紹介します。
写真のプリントサービスを題材にした演習だったため、前述のプロフィール 的な内容だけでなく、インターネットの利用状況やデジカメの使い方等につ いても記載しています。 26
ユーザーの需要 次に需要についての説明です。 27
UXデザインでは・・・・ 需要 ユーザーの「行動」を調査して 「カスタマージャーニーマップ」 を作る UXデザインではユーザーの行動を調査してカスタマージャーニーマップを作 ります。 28
・サービスを通して、ユーザー(ペルソナ)の 行動、感情、思考を時系列に並べる ①まずAsIsを記載 → 「問題」を特定する ②次にToBeを記載 → 「解決策」の仮説を立てる ◆カスタマージャーニーマップ カスタマージャーニーマップはサービスを通して、ユーザーの行動、感情、
思考を時系列に並べます。 まず、現状、AsIsを記載して、問題を特定します。 その次にToBeを記載します。ToBeは解決策の仮説になり、5段階モデルの 戦略のレイヤーと要件のレイヤーにまたがるため、今日は①のAsIsを取り上 げます 29
Q.どうやってAsIsを調べるの? A.アンケート、インタビュー、観察etc...、様々な 手法がある ◆カスタマージャーニーマップ ・アジア文化圏における生活とテクノロジーの関係 把握のために、文化人類学者を登用、アジア各国に 2年間派遣、調査を実施。 事例:エスノグラフィ(「アジアを知る」(intel)) AsIsを記載するにあたって、どうやって調べるかが問題になります。 調べるためにはアンケートやインタビュー、実際にユーザーが使っていると
ころを見る「観察」といった複数の手法がありますが、事例として「エスノ グラフィ」という手法を紹介します。 エスノグラフィは「民族誌」という意味の学術用語で、人間社会の現象の質 的説明を表現する記述の一種ですが、UXデザインの中でも使われます。 実際にユーザーの近くに行き、同じように生活する中でどのように使われて いるかを把握するという手法です。 有名な事例として、インテルが非アメリカ、ヨーロッパ文化圏に商圏を広げ るために2000年代前半にアジア各国に文化人類学者を2年間派遣して実施した ものがありますが、古い資料ということもあり配布資料としては割愛します。 このように⾧期、広範にわたってコストをかけて実施している会社もありま す。 30
Q.どうやって記述するの? A.固定フォーマットはないが、以下のような記載が 一般的。 ・上部にペルソナと目的を記載 ・縦軸:ユーザーの行動、思考、感情、課題 ・横軸:サービス利用の手前から、利用後まで →時系列に従って、縦軸要素がどう移り変わるか を記載。 ◆カスタマージャーニーマップ カスタマージャーニーマップの記述方法ですが、ペルソナと同様、固定の
フォーマットはありません。 一般的に、ペルソナと目的を記載し、縦軸にペルソナの行動、思考、感情、 課題を記載、横軸にサービス利用の手前から利用後までの時系列を配置して、 縦軸要素の移り変わりを記載します。 31
事例:Starbucks Experience Map https://theoperationsblog.com/wp-content/uploads/2011/09/experiencemap1.pdf 事例としてStarbucks Experience Mapを紹介します。 10年以上前のものですが、今見ても参考になると思います。 セミナーでは自分が翻訳した日本語版を紹介しましたが、使われている英語 も簡易ですし、翻訳と言ってもWebの翻訳サービスを使っただけなので、配
布資料とはせずにファイルのURLを記載しておきます。 また、Starbucks Experience Mapで検索すると様々な考察を見ることができ るので、そちらも併せてみてみることをお勧めします。 32
UXデザインにおける「戦略」 それは、 ペルソナ と カスタマージャーニー を通じて ユーザーを知ること 最後に、UXデザインにおける戦略とは、ペルソナとカスタマージャーニー マップを通じてユーザーを知ること になります。
戦略編の内容は以上になります。 33
To be continued 次回は要件編(予定)です。 34
質疑応答 35