ゲームUI/UX勉強会予習資料「UI Discussion とは」

資料：

UI Discussion とは

森山 明宏 (ユーリカ株式会社代表/UXデザイナー) facebook akihiro.moriyama.ureka

2

筆者紹介

森山 明宏（もりやま あきひろ）

•UX Yokohama 代表

•ユーリカ株式会社代表, UXデザイナー

•2012年まで株式会社リコー総合デザインセンターにてユーザー調査・分析・改善提案を担当（見える化技法もここで習得）

•2012年5月にユーリカ株式会社設立

•主にWebサイト改善、UX人材育成に従事

•facebook akihiro.moriyama.ureka

3

UI Discussion とは

4

UI Discussion とは

•グリー株式会社で実施されている、UIデザイナー向けの社内勉強会、およびその手法 • グリーでは毎週1回開催、1時間/回、ゲーム2本/回

•既出ゲームのUIデザインについてレビューし、良い所・悪い所の傾向を知る

•目的 • UIの効果的な改善ポイント明確化 • 他社と自社ゲームの品質差の認識 • 改善思考力の強化

5

UI Discussion の手順

1. 調査するタイトルを選定する 2. 複数人でそれぞれプレイする 3. ｢Good｣ ｢Bad｣に関するコメントを挙げ、一覧表

をつくる 4. 「7つの評価視点」別に分類・集計し、割合を

調査する 5. 集計結果をディスカッションする

（1〜5を毎週繰り返して情報を蓄積）

6

UI Discussion の7つの評価視点

分類： 1. 見やすさ 2. わかりやすさ 3. 使いやすさ 4. 演出・音・アニメ 5. アート・世界観 6. 統一性 7. 仕様

•いわゆる「良いゲームの条件」

•UI Discussionでは、ゲームの良いと感じたところ・悪いと感じたところを見つけたら、左記7項目のいずれかに分類する。

•グリー社内でなんども実践を重ねるうちに、この7項目に落ち着いたとのこと。

7

UI Discussion の7つの評価視点

分類： 1. 見やすさ 2. わかりやすさ 3. 使いやすさ 4. 演出・音・アニメ 5. アート・世界観 6. 統一性 7. 仕様

ゲームに限らず全てのアプリに要求される要素

ゲームの楽しさの本質部分

UIデザイン以外でゲームの 楽しさに関わる部分

8

UI Discussion の結果まとめの例

引用元 https://www.slideshare.net/greeart/cedec2016ui-discussion-ui

9

UI Discussion で期待できる効果

育成面 • 知見拡張・トレンド把握 • 自他の品質差を実感・制作意欲向上 • チーム内の価値観を画一化

効率面 • デザイン作業時間（思考時間）短縮

• 改善思考力強化

• UIの効果的な改善ポイント（優先ポイント）明確化

10

グリー株式会社が UI Discussion を実践して 得た「Good UI Check Sheet」

引用元 https://www.slideshare.net/greeart/cedec2016ui-discussion-ui

11

グリー株式会社が UI Discussion を実践して得た「優先すべき改善ポイント」

Bad! と思われないために

×わかりやすさ ×使いやすさ

の問題を優先的に改善

Good! と思われるために

•わかりやすさ

•演出・音・アニメ

の品質を優先的に向上

•「UI Discussion」とは、グリー株式会社で実施されているUIデザイナー向けの社内勉強会、およびその手法

•既出ゲームのUIデザインについてレビューし、良い所・悪い所の傾向を知る

•目的 • UIの効果的な改善ポイント明確化 • 他社と自社ゲームの品質差の認識 • 改善思考力の強化

12

この章のまとめ

13

UI Discussion における 7つの評価視点

14

UI Discussion の7つの評価視点

分類： 1. 見やすさ 2. わかりやすさ 3. 使いやすさ 4. 演出・音・アニメ 5. アート・世界観 6. 統一性 7. 仕様

•いわゆる「良いゲームの条件」

•UI Discussionでは、ゲームの良いと感じたところ・悪いと感じたところを見つけたら、左記7項目のいずれかに分類する。

•グリー社内でなんども実践を重ねるうちに、この7項目に落ち着いたとのこと。

(再掲載)

15

UI Discussion の7つの評価視点

分類： 1. 見やすさ 2. わかりやすさ 3. 使いやすさ 4. 演出・音・アニメ 5. アート・世界観 6. 統一性 7. 仕様

ゲームに限らず全てのアプリに要求される要素

ゲームの楽しさの本質部分

UIデザイン以外でゲームの 楽しさに関わる部分

(再掲載)

画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）16

1. 見やすさ

○例) 重要なUI要素が大きく目立つ ○例) 見やすい配色

× 例) 読みづらいフォント × 例) 小さすぎて読めない文字 × 例) 行間の狭すぎる文章

良い例

悪い例 Game UI/UX

GameUI/UX

Game UI/UXGameUI|UX

GameUI/UX

17

2. わかりやすさ

○例) チュートリアルで、操作説明と試し操作が交互に行われる

○例) 一目で操作方法のわかるUI要素 ○例) 簡潔で充分な説明

× 例) UI要素の詰め込みすぎ × 例) 説明不足・無駄に長い説明 × 例) チュートリアル中のマーカーが

どこを指しているかわからない

良い例

悪い例

画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）

18

3. 使いやすさ

○例) よく使う機能がボタンとして常に画面上に配置されている

○例) よく使う機能(画面) を呼び出す手順が少ない

× 例) ボタンが小さすぎる × 例) ボタン同士の間隔が狭すぎる × 例) 他社では当たり前の機能が実装

されていない

良い例

悪い例

画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）

19

4. 演出・音・アニメ

○例) 感情の高まる演出 ○例) 季節や昼夜に応じた演出 ○例) タップ操作の際の動きが面白い ○例) 声優の起用により没入感向上

× 例) 演出不足・演出過剰

良い例

悪い例

画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）

20

5. アート・世界観

○例) 美麗なグラフィック ○例) 魅力的なキャラクター ○例) 独創的な世界設定

× 例) フォントがカッコ悪い × 例) システムメッセージが事務的 × 例) 一部のグラフィック以外手抜き

良い例

悪い例

画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）

No.972 プリンセスヴァルキリー

21

6. 統一性

○例) 各UI要素のデザインに統一性がある

○例) 〃 の操作の作法に統一性がある ○例) 〃 のモーションに統一性がある

× 例) 統一性の欠如

良い例

悪い例

画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）

22

7. 仕様 (≒ 実際にはUIデザイナーの担当範囲でないもの)

○例) 課金等の操作を要求するときには確認画面を出す

○例) バトルに負けるとキャラクターは死んだものとして扱われる

× 例) ロードの待ち時間が長すぎる × 例) 簡単すぎる・難しすぎる × 例) チュートリアルが長すぎて飽きる

良い例

悪い例

画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）

23

備考

•ゲームの面白さに関わるがUIデザインの範ちゅうでないものは7つの評価視点から省かれている

• 例）脚本

• 例）宣伝による期待感の醸成

• 例）SNSやYouTubeを用いたファンコミュニティの活性化

24

この章のまとめ

•UI Discussionでは、ゲームの良いと感じたところ・悪いと感じたところを見つけたら、下記7項目のいずれかに分類する。

•これらはいわば「良いゲームの条件」である。

• 演出・音・アニメ • アート・世界観 • 統一性 • 仕様

• 見やすさ • わかりやすさ • 使いやすさ

25

UI Discussion の進め方

26

UI Discussion の手順

1. 調査するタイトルを選定する 2. 複数人でそれぞれプレイする 3. ｢Good｣ ｢Bad｣に関するコメントを挙げ、一覧表

をつくる 4. 「7つの評価視点」別に分類・集計し、割合を

調査する 5. 集計結果をディスカッションする

（1〜5を毎週繰り返して情報を蓄積）

付箋紙を使って行えるよう 一部修正します。

(再掲載)

27

UI Discussion の手順

1. 調査するタイトルを選定する 2. 複数人でそれぞれプレイする 3. ｢Good｣ ｢Bad｣と感じた箇所を見つけたら付箋紙

に書く 記入項目： 1. ｢Good｣ or ｢Bad｣ 2. 分類 (7つの評価視点 3. 箇所 (どこが) 4. 考察 (なぜ)

4. 集計し、割合を調査する 5. 集計結果をディスカッションする

（1〜5を毎週繰り返して情報を蓄積）

28

付箋紙の書き方

[4]考察

[2]分類

[3]箇所

分類： 1. 見やすさ 2. わかりやすさ 3. 使いやすさ 4. 演出・音・アニメ 5. アート・世界観 6. 統一性 7. 仕様

システムメッセージの全部

メインユーザーである子供にも読める 漢字だけ使っている

[1]良いなら○, 悪いなら×

•もしも悪い点を指摘する場合は改善提案を2枚目の付箋に記述

•複数の分類項目にあてあまる箇所であっても、最も適切に思うもの１つを選択提案

指摘

○ わかりやすさ

29

模造紙への貼り方

良い 悪い見やすさ

わかり やすさ

使いやすさ

演出・音 ・アニメ

アート・ 世界観

統一性

仕様数を数えやすいよう分類毎1〜2行に並べる 数を数えやすいよう分類毎1〜2行に並べる

全く同じ内容のものは 重ねて貼る

30

模造紙への貼り方

良い 悪い見やすさ

わかり やすさ

使いやすさ

演出・音 ・アニメ

アート・ 世界観

統一性

仕様数を数えやすいよう分類毎1〜2列に並べる 数を数えやすいよう分類毎1〜2列に並べる

全く同じ内容のものは 重ねて貼る

すべて読み 他人の価値観が自分と

違うことに気づく

各項の数を数え ゲーム全体の傾向を

知る

31

集計後のディスカッション

•(良きにつけ悪しきにつけ) 特に強く印象に残ったもの

•Bad箇所の改善案

•取り入れるべき「他社では当たり前の機能」

•etc.

32

[EOF]