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

Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.

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

CEDEC2013

Aug 21, 2013

Takahiro YAMAGUCHIUX DesignerCommon Development Gr.a.k.a. SG-SWAT team RebornSocial Game Business Head OfficeDeNA Co., Ltd.

13年8月22日木曜日


今日お話ししたいこと

2

・なぜ「１年間」の話なのか・DeNA SGにおけるUX Designerの役割

・誤解されるUXデザイン・クリエイティブの結果を測定する

・ABテストではかるもの・ UX Designしやすい仕組み・UX Designerにできること

SG：ソーシャルゲームの略称13年8月22日木曜日


ちなみに・・・

3

このスライドは講演後にSlideShareにup予定です。

Twitter上で#CEDEC あたりで検索いただけると

URL見つけられると思います



まとめ

4

・全ては仮説ありきだよ・設計したなら評価しようよ

・サービスと同様に、一緒に働く仲間の心も動かそうよ



ここで確認。

5



SG開発経験者の方

6



UXの専門家の方

7



自己紹介

8

山口隆広(@hiro93n)SG-SWATりぼん UX Designer2010/8にDeNA入社。福島県出身32歳。

SGプランナー→SG女子ゲー全般プランナー→SG-SWATで自称SG UX Designer最近やっと自称がとれてきたっぽい。



なぜ「１年間」の話なのか・DeNA 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


http://creator.dena.jp/

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。自信もって進めましょう。




・誤解されるUXデザイン

クリエイティブの結果を測定する・ABテストではかるもの

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

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チェックシートの一例




・誤解されるUXデザイン・クリエイティブの結果を

測定する


72



ABテストで測るもの

73

イベントへの動線は画像があった方がいいのかなくてもいいのか



ABテストで測るもの

74

イベントへの動線は画像があった方がいいのか

なくてもいいのか、だけではない



ABテストで本来確かめるもの

75

画像の有無に至ったユーザ仮説、ユーザ像が思い通りだったのかを確かめる



短期的な正解と応用力

76

AかBか

AのシナリオかBのシナリオか

事象としては理解できるが、因果は分からないまま。

テスト単体だけでなく、サービスデザインの糧になる



テスト案の切り口

77



追求されるABテスト

78

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



追求か、実践か

79

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

いい結果出たとして、その運用に実現性はある？続けられる？？



追求か、実践か

80

月４回イベント出し分けるバナー各10パターン

↓これまでの制作工数×10

定常改修に工数使った方が全体的に筋がいいのでは…？





測定する・ABテストではかるもの

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

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担当

従業員

登録

情報絞り込み

テスト履歴記録

協力依頼

調査依頼

事業部担当13年8月22日木曜日


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

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%に縮小





測定する・ABテストではかるもの

・UX Designしやすい仕組み

UX Designerにできること

102



UX Designerにできること

103

誰よりもユーザの方を向いたサービス設計の推進と仕組み作り。

ゲームデザインやものづくりにチームの時間が取られる中で

ユーザに喜ばれる観点を死守していく。



SGのUX Design領域

104

GUI

IA

Service

Analysis(定性)

Analysis(定量)

ユーザに喜ばれる観点を生み出し続ける職種



まとめ

105

・全ては仮説ありきだよ・設計したなら評価しようよ

・サービスと同様に、一緒に働く仲間の心も動かそうよ



今日はこれでおしまい

106

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