CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話

Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
ソーシャルゲームの開発現場
でUXについて思いっきりあが
いてみた１年間の話。
CEDEC2013
Aug 21, 2013
Takahiro YAMAGUCHI
UX Designer
Common Development Gr.
a.k.a. SG-SWAT team Reborn
Social Game Business Head Oﬃce
DeNA Co., Ltd.
13年8月22日木曜日

今日お話ししたいこと
2
・なぜ「１年間」の話なのか
・DeNA SGにおけるUX Designerの役割
・誤解されるUXデザイン
・クリエイティブの結果を測定する
・ABテストではかるもの
・ UX Designしやすい仕組み
・UX Designerにできること
SG：ソーシャルゲームの略称

ちなみに・・・
3
このスライドは講演後に
SlideShareにup予定です。
Twitter上で
#CEDEC あたりで検索いただけると
URL見つけられると思います

まとめ
4
・全ては仮説ありきだよ
・設計したなら評価しようよ
・サービスと同様に、一緒に働く仲間の
心も動かそうよ

ここで確認。
5

SG開発経験者の方
6

UXの専門家の方
7

自己紹介
8
山口隆広(@hiro93n)
SG-SWATりぼん UX Designer
2010/8にDeNA入社。福島県出身32歳。
SGプランナー→SG女子ゲー全般プランナー→
SG-SWATで自称SG UX Designer
最近やっと自称がとれてきたっぽい。

なぜ「１年間」の話なのか
9

１年前
10

11
最近UI/UXってよく聞くし
セッション探して聞いてみるか
気楽な気持ちでみなとみらいへ

12

13
UX系セッション、10件越え

14
え…もしやウチだけ遅れてる!?
CEDEC2012で衝撃を受ける

後塵を拝すとはこのこと
15
来年はそちら側に立つ！

全てはCEDEC2012から
16
いいライバルを見つけると
いい執念につながります

DeNA SGにおける
UX Designerの役割
17

これまでやってきたこと
18
・UX設計ノウハウの開発
SGで何がおいしいの？どうすればいいの？
・UX測定基盤の構築
定量/定性分析でUX改善を「測れる」状態へ
・SGタイトルのUX改善
つくった道具は本当に使えるのか立証

最近やっていること
19
・内製ブラウザSGのUI改修
解決すべき課題を洗い出す手法として使えるのか
・ECなど、他事業でのUX評価手法導入
SGのノウハウは他事業でも使えるのか
・よりサービスデザインに突っ込んだ適用
UXサービスデザインで事業成功させたい

SGのUX Design領域
20
GUI
IA
Service
Analysis
(定性)
Analysis
(定量)
デザイナー・プランナー・アナリストを横断

UI/UX Designerじゃないの？
21
UIグラフィックだけつくる人
という意図ならば、明確に違います。
利用するシナリオから考えると
単なるUIでは収まりません。

他サービスも含めた領域の例
22
DeNA CreatorBlogをご覧ください
http://creator.dena.jp

SGにおけるUX Design
23
インターフェースデザイン

24

25
ゲームデザイン
インタラクションデザイン

26
ゲームデザイン
インタラクションデザイン
おもしろさ
きもちよさわかりやすさ

プランナーのゲームデザイン
27
自分(30代男性)の面白いことを突き詰めて
考えて、絶対にこれは面白いぞ！と思える
情熱が持てるかどうか

UX Designerはどうする？
28
30代男性に受けるモチーフを
ヒアリングして探してくる

29
30代男性に受けるモチーフを
ヒアリングして探してくる

30
30代男性の中でも、そのゲームを楽しむで
あろう趣味思考のユーザシナリオ仮説を立
て、ヒアリング等から検証する。
モチーフはシナリオの中のひとつ。背景ま
でわかると、他の事象にも応用できる。

それってどういうこと？
31
自分たちが思った通りの面白さと
ユーザが感じている面白さのギャップを
埋めるプロセス。
ユーザに答えを求めるプロセスではない。

ユーザ中心設計とずれない？
32
ユーザは自分の欲しい物を気づかない。
ぱっと聞かれても、言葉にできないはず。

有名どころのあるあるすれ違い
33
・（無料でくれるなら）ほしい
・（見た目なら）かっこいい（でも家で実
際に使うなら要らない）
・（健康を気にするなら）ヘルシーな商品
が欲しい（でも実際に食べたいのはジャン
キーなハンバーガー）

結局どういう人なのか
34
ビジネス・運営都合すぎず、ユーザの最終
防衛線としてサービスを作り上げる人。
その手段として、UIデザインや
インタラクションデザイン、
ユーザ分析も領域に含まれる。

自己矛盾にならないよう
35
ビジネス責任とプロダクト責任を両立する
と、中途半端に守ってしまうことも。
尖るためには責任を分けた方がよい。

誤解されるUXデザイン
36

急にUXデザインが来たので
37
「ユーザのことを考えて、って
今までも普通に考えてきたがな」
「そーいう感覚は企画はもってるから
今更やんなくていいいよ」

黒船来航
38
それはおいしいのか？
理屈ではなく、結果を出して理解を得る

手段と目的
39
UXデザインを導入すること
が目的になってはいけない。

変化のコストを超えるメリット
40
UXデザインによって救えるものがあれば
それから救って事例を作ろう

時期成長期安定期低迷期
成長状態何をやっても伸
びる状態
成長一段落した
状態。踊り場
反転の手を打た
ねば、と焦る状
態
運営心境自分を信じてれ
ば大丈夫
次の仕込みを考
えなきゃ
できることは全
部やらなきゃ…
でも時間が…
UX Designerの
出せる価値
企画者の熱意の
方が勝る
あり。客観視す
る時期
大いにあり。一
番の課題を特定
プロダクトの時期と体感価値
41

わかりやすい価値
42
ユーザの求めているものと
今提供しているものとのギャップを
チームと一緒に言語化＆施策化する

最初の見え方はリサーチャー
43
皆がもやっと思っていることを仮説化し
調査により立証してみる

でも、いざやるぞ！となると
こんな懸念を出されがち
44

言いなり？定性調査への懸念
45
「ユーザの言いなりでプロダクトつくるの
ってプロなの？」
「プロダクトのことは自分がいちばん良く
知ってる。今更調査とかいらない」

正解を聞くための手段
46

正解を聞くための手段…？
47

×正解を聞くための手段
○仮説を検証するための手段
48

言いなり？定性調査
49
こちらが想定した面白さが
思った通りに伝わったのかを
定性調査で聞いてみる。
思った通りであれば、それはそれでOK。
自信もって進めましょう。

クリエイティブの結果を
測定する
50

ユーザシナリオを立てるフロー
51
定性ヒアリング
（アイトラッキングを
含める場合あり）
ペルソナ化
バリュー
シナリオ化
要望の引き出し

定性ヒアリングの事前準備
52
・これを経て何を知りたいかを決める
・プレイして頂く場合、どんなタスクをお
願いするかを決める
・どんなことが起こりそうかを予想し、事
前に質問を準備しておく

設計なき調査は悪！
ダメ！ゼッタイ！！
53

営業アポイントと同じ
54
できるかぎり予想してのぞむ。
その上で予想外な回答を頂けたら
自分の仮説と何が異なっていたかを深堀る
準備なしで顧客を来訪しても
「何しにきたの？」で終わりますよね

55
利用しているプラグマティックペルソナシートの一例

56
利用しているバリューシナリオシートの一例

これだけだとこうなる
57
いやいや、一部の意見でしょ。
そんなの聞くわけ？

定性分析における確からしさ
58
0%
12.5%
25.0%
37.5%
50.0%
62.5%
75.0%
87.5%
100.0%
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
被験者数と確実性(Nielsenらの提唱によるデータ)
５人だと84.4％で
不具合発見できうる

定量分析による裏取り
59
定性意見に裏打ちされた
ユーザ行動はなされているのか？

アクションとの紐付け
60
このボタンが
分かりづらい
この機能、多分要
らないと思う
アクセス数は少ない？
新規/既存で差がある？
直前にどのページを見
ている人が多い？
繰り返し使う？1度しか
使わない？

定量調査についてももちろん
事前に設計しておく
61

UIの評価の理解を得る
62
狙ったことが狙った通りなのか？
何が効いていて、何が想定だったのか。
定性的な反応と
定量的なアクションで判断する

UIとは衛生要因
63
それをきっかけでは選ばないが
それが悪いことがきっかけで
嫌いになる可能性がある要因

身の回りの衛生要因の例
64
服装に自由がきくアルバイト先
→メインで選ぶ要因：お給料がいい！仕事が楽しい
トイレのキレイなデパート
→メインで選ぶ要因：品ぞろえがいい、お得感
店員さんにやさしい彼氏
→メインで選ぶ要因：人それぞれ

評価できないものは伸ばせない
65
いいUIだったの？

UIをどう評価するか
66
評価できる、すなわち、評価軸がある。

SGにおける４つの評価軸
67
・ユーザの期待に応える(まよわない)
・存在を意識させない(ストレスがない）
・ルールが統一されており、予想できる
・ユーザーの使用シーンを想定している

だってゲームなんだもん。
68
ゲームなんだから説明なんて読みたくない
ゲームなんだから直感的に理解したい
ゲームなんだから外でも当然遊びたい

もちろん
69
ゲームなんだからわくわくしたい！
（全部が全部理屈で説明できなくてOK）

だいじな「慣れ」
70
フィーチャーフォンに慣れてきた人に
とって使いやすいのか？
リッチなUIを目指したけど、これって今と
比べてジャンプし過ぎではないか？
一般的には古かったり普通だったりするも
のでも、ユーザにとって不幸ならやめる

QAチェック時にレビューする
71
上記は社内で利用しているUXQAチェックシートの一例

・クリエイティブの結果を
測定する
72

ABテストで測るもの
73
イベントへの動線は
画像があった方がいいのか
なくてもいいのか

ABテストで測るもの
74
イベントへの動線は
画像があった方がいいのか
なくてもいいのか、だけではない

ABテストで本来確かめるもの
75
画像の有無に至ったユーザ仮説、
ユーザ像が思い通りだったのかを確かめる

短期的な正解と応用力
76
AかBか
Aのシナリオか
Bのシナリオか
事象としては理解でき
るが、因果は分からな
いまま。
テスト単体だけでな
く、サービスデザイン
の糧になる

テスト案の切り口
77

追求されるABテスト
78
入会時期別に好みは違うはずだから
全パターン出し分けてテストしよう！

追求か、実践か
79
入会時期別に好みは違うはずだから
全パターン出し分けてテストしよう！
いい結果出たとして、その運用に
実現性はある？続けられる？？

追求か、実践か
80
月４回イベント
出し分けるバナー各10パターン
↓
これまでの制作工数×10
定常改修に工数使った方が
全体的に筋がいいのでは…？

測定する
UX Designしやすい仕組み
81

情報設計だけで議論する
82

ありがちUIの作り方を変える
83

やらかしてしまうUI開発
84
グラフィックツールでワイヤー制作。
気づくと豪華なGUIまで作りきっている
↓
グラフィックとしては完成しているせいで
見た目の話に終始する
↓
後々見ると情報設計が考慮されておらず
作り込んだものも全部やり直し

やらかしてしまうUI開発
85
グラフィックツールでワイヤー制作。
気づくと豪華なGUIまで作りきっている
↓
グラフィックとしては完成しているせいで
見た目の話に終始する
↓
後々見ると情報設計が考慮されておらず
作り込んだものも全部やり直し
ここに
罠が
ある

Cacoo×ワイヤーフレーム
86

作り込めない
87
情報設計とGUIはツールから分ける
↓
文字と図形のワイヤーで分かりやすさと必
要機能の優先順位を議論する
↓
GUIで大きく覆る確率が大幅低下。
UIデザイナーの時間も作り込みに使える。

さくっとプロトレビューできる
環境を作る
88

レビューを後倒しにするリスク
89
・βで分かる「分かりづらさ」
・βで出てくる「そもそも論」
・ターゲットに合うか分からない「UI」
結果、覆る仕様、迫りくる納期。

プロトレビューの障壁
90
・途中であれこれ言われて覆されたくない
・人によって言うことがまちまち
・レビュアーを集めるのがたいへん。準備
も大変。今そこに工数かけられない

手間なくさくっとできればよい
91
全社員の中でユーザテストやアンケートに
協力してもらえる人のリストを作り
テストしたい時に使えるようなDBを提供
↓
明日やりたい！にも対応できる状態へ。
SG以外の事業部でも利用できている。

ユーザテストDBの情報例
92
・氏名/性別/年齢層
・所属事業部
・普段利用している端末(FP/Android/iOS)
・サービス利用経験など。
更に絞り込みたい場合はGoogleフォームで
追加アンケートを実施。

DBの運用イメージ
93
被験者DB
各事業部
被験者DB担当
従業員
登録
情報
絞り込み
テスト履歴
記録
協力依頼
調査依頼
事業部担当

動線定量分析できる
ツールを導入する
94

時期タグ導入負荷学習負荷応用性
Adobe
Analytics
(旧Site
Catalyst)
ページ別にタグ
設計が必要
機能多く高め。
利用経験あるメ
ンバーは少な
い。
ユーザ属性をデ
ータとして持て
る。細かな出し
分けも可能
Google
Analytics
Premium
全ページ統一タ
グで良い
機能少なく低
め。経験者も多
く情報も多い
細かなユーザ属
性は持てない
導入ツールと相性
95
UX改修ありきでの導入がほとんど。
UX Designerの武器として活用

社内向け資料の展開
96
運用を統一し、サポート負荷を最小化

SGの場合
97
・定常的にではなく、施策投入前提で現状把
握や施策評価をすることがメイン
・施策によっては個別アクションをイベント
として取得することもある
・Google Analyticsは設定カスタマイズし
対応している

生のGoogleAnalytics課題
98

そのままでは利用できない
99
実は件数上限の壁がある(74999)。
これを超えたものはすべてother化
↓
ユーザid別にURLがあると
対策しないとまず無理

不要なものをフィルタで集約
100

見たい部分はより深く
101
諸々整理す
ることで、
otherは全体
の4%に縮小

測定する
・UX Designしやすい仕組み
UX Designerにできること
102

UX Designerにできること
103
誰よりもユーザの方を向いた
サービス設計の推進と仕組み作り。
ゲームデザインやものづくりに
チームの時間が取られる中で
ユーザに喜ばれる観点を死守していく。

SGのUX Design領域
104
GUI
IA
Service
Analysis
(定性)
Analysis
(定量)
ユーザに喜ばれる観点を生み出し続ける職種

まとめ
105
・全ては仮説ありきだよ
・設計したなら評価しようよ
・サービスと同様に、一緒に働く仲間の
心も動かそうよ

今日はこれでおしまい
106
ご清聴ありがとうございました
（全てのイラスト：モバゲーチャットスタンプより引用）

CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話

More Related Content

CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話