Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
270
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
230
SHIFT EVOLVE Presents Vol.9 エンジニアのためのUXデザイン入門講座
kazuharumurakami
0
690
Other Decks in Business
See All in Business
ポート株式会社_会社紹介資料(2025/06/13更新)
portpr
1
2.3k
c-slide_サービス紹介資料テンプレート
coneinc
0
420
会社紹介資料
mhrp
0
240
私が変えてきたこと、変えなかったこと
akatsuki174
2
270
株式会社 Laboro.AI 会社紹介資料
laboroai2016
0
930
ベタートラップと夏
mosa_siru
8
2.9k
CSRレポート2025_ギークス株式会社
geechs
PRO
0
570
株式会社kubellパートナー 会社説明資料 (MINAGINE事業版)
kubell_partner
2
130
【Progmat】Monthly-ST-Market-Report-2025-Jun.
progmat
0
150
ChillStack会社紹介資料
chillstack
0
350
Sales Marker Culture book
salesmarker
PRO
35
56k
M3 Career Culture Deck(セールス&コンサルティング職)
m3c
1
280k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Rails Girls Zürich Keynote
gr2m
94
14k
Optimizing for Happiness
mojombo
379
70k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Making Projects Easy
brettharned
116
6.3k
Designing Experiences People Love
moore
142
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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