ゲームUI/UX勉強会予習資料「UI Discussion とは」
1 like917 views
IT勉強会サークルUX Yokohamaが月1回主催している「ゲームUI/UX勉強会」で使用している初回参加者向けの予習資料です。 ゲームUI/UX勉強会の詳細はUX Yokohama ホームページをご覧ください。 https://uxyokohama.amebaownd.com/ ゲームUI/UX勉強会は、グリー株式会社様の社内勉強会「UI Disccsion」を元にプログラムを構成しております。グリー株式会社様の資料も合わせてご参照ください。https://www.slideshare.net/greeart/gcm3-ui
![28
付箋紙の書き方
[4]考察
[2]分類
[3]箇所
分類：
1. 見やすさ
2. わかりやすさ
3. 使いやすさ
4. 演出・音・アニメ
5. アート・世界観
6. 統一性
7. 仕様
システムメッセージ
の全部
メインユーザーで
ある子供にも読める
漢字だけ使っている
[1]良いなら○, 悪いなら×
•もしも悪い点を指摘する場合は
改善提案を2枚目の付箋に記述
•複数の分類項目にあてあまる
箇所であっても、最も適切に
思うもの１つを選択提案
指摘
○ わかりやすさ](https://image.slidesharecdn.com/170621-supplement-ui-discussio-170622034741/85/UI-UX-UI-Discussion-28-320.jpg)
![32
[EOF]](https://image.slidesharecdn.com/170621-supplement-ui-discussio-170622034741/85/UI-UX-UI-Discussion-32-320.jpg)
ゲームUI/UX勉強会予習資料「UI Discussion とは」
- 1. 資料： UI Discussion とは 森山 明宏 (ユーリカ株式会社代表/UXデザイナー) facebook akihiro.moriyama.ureka
- 2. 2 筆者紹介 森山 明宏（もりやま あきひろ） •UX Yokohama 代表 •ユーリカ株式会社代表, UXデザイナー •2012年まで株式会社リコー総合デザインセン ターにてユーザー調査・分析・改善提案を担当 （見える化技法もここで習得） •2012年5月にユーリカ株式会社設立 •主にWebサイト改善、UX人材育成に従事 •facebook akihiro.moriyama.ureka
- 4. 4 UI Discussion とは •グリー株式会社で実施されている、UIデザイナー向けの 社内勉強会、およびその手法 • グリーでは毎週1回開催、1時間/回、ゲーム2本/回 •既出ゲームのUIデザインについてレビューし、良い所・ 悪い所の傾向を知る •目的 • UIの効果的な改善ポイント明確化 • 他社と自社ゲームの品質差の認識 • 改善思考力の強化
- 5. 5 UI Discussion の手順 1. 調査するタイトルを選定する 2. 複数人でそれぞれプレイする 3. ｢Good｣ ｢Bad｣に関するコメントを挙げ、一覧表 をつくる 4. 「7つの評価視点」別に分類・集計し、割合を 調査する 5. 集計結果をディスカッションする （1〜5を毎週繰り返して情報を蓄積）
- 6. 6 UI Discussion の7つの評価視点 分類： 1. 見やすさ 2. わかりやすさ 3. 使いやすさ 4. 演出・音・アニメ 5. アート・世界観 6. 統一性 7. 仕様 •いわゆる「良いゲームの条件」 •UI Discussionでは、ゲームの 良いと感じたところ・悪いと 感じたところを見つけたら、 左記7項目のいずれかに分類 する。 •グリー社内でなんども実践を 重ねるうちに、この7項目に 落ち着いたとのこと。
- 7. 7 UI Discussion の7つの評価視点 分類： 1. 見やすさ 2. わかりやすさ 3. 使いやすさ 4. 演出・音・アニメ 5. アート・世界観 6. 統一性 7. 仕様 ゲームに限らず全てのアプリ に要求される要素 ゲームの楽しさの本質部分 UIデザイン以外でゲームの 楽しさに関わる部分
- 8. 8 UI Discussion の結果まとめの例 引用元 https://www.slideshare.net/greeart/cedec2016ui-discussion-ui
- 9. 9 UI Discussion で期待できる効果 育成面 • 知見拡張・トレンド把握 • 自他の品質差を実感・制作意欲向上 • チーム内の価値観を画一化 効率面 • デザイン作業時間（思考時間）短縮 • 改善思考力強化 • UIの効果的な改善ポイント（優先ポイント）明確化
- 10. 10 グリー株式会社が UI Discussion を実践して 得た「Good UI Check Sheet」 引用元 https://www.slideshare.net/greeart/cedec2016ui-discussion-ui
- 11. 11 グリー株式会社が UI Discussion を 実践して得た「優先すべき改善ポイント」 Bad! と思われないために ×わかりやすさ ×使いやすさ の問題を優先的に改善 Good! と思われるために •わかりやすさ •演出・音・アニメ の品質を優先的に向上
- 12. •「UI Discussion」とは、グリー株式会社で実施されてい るUIデザイナー向けの社内勉強会、およびその手法 •既出ゲームのUIデザインについてレビューし、良い所・ 悪い所の傾向を知る •目的 • UIの効果的な改善ポイント明確化 • 他社と自社ゲームの品質差の認識 • 改善思考力の強化 12 この章のまとめ
- 14. 14 UI Discussion の7つの評価視点 分類： 1. 見やすさ 2. わかりやすさ 3. 使いやすさ 4. 演出・音・アニメ 5. アート・世界観 6. 統一性 7. 仕様 •いわゆる「良いゲームの条件」 •UI Discussionでは、ゲームの 良いと感じたところ・悪いと 感じたところを見つけたら、 左記7項目のいずれかに分類 する。 •グリー社内でなんども実践を 重ねるうちに、この7項目に 落ち着いたとのこと。 (再掲載)
- 15. 15 UI Discussion の7つの評価視点 分類： 1. 見やすさ 2. わかりやすさ 3. 使いやすさ 4. 演出・音・アニメ 5. アート・世界観 6. 統一性 7. 仕様 ゲームに限らず全てのアプリ に要求される要素 ゲームの楽しさの本質部分 UIデザイン以外でゲームの 楽しさに関わる部分 (再掲載)
- 16. 画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント） 16 1. 見やすさ ○例) 重要なUI要素が大きく目立つ ○例) 見やすい配色 × 例) 読みづらいフォント × 例) 小さすぎて読めない文字 × 例) 行間の狭すぎる文章 良い例 悪い例 Game UI/UX GameUI/UX Game UI/UX GameUI|UX GameUI/UX
- 17. 17 2. わかりやすさ ○例) チュートリアルで、操作説明と 試し操作が交互に行われる ○例) 一目で操作方法のわかるUI要素 ○例) 簡潔で充分な説明 × 例) UI要素の詰め込みすぎ × 例) 説明不足・無駄に長い説明 × 例) チュートリアル中のマーカーが どこを指しているかわからない 良い例 悪い例 画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）
- 18. 18 3. 使いやすさ ○例) よく使う機能がボタンとして常 に画面上に配置されている ○例) よく使う機能(画面) を呼び出す 手順が少ない × 例) ボタンが小さすぎる × 例) ボタン同士の間隔が狭すぎる × 例) 他社では当たり前の機能が実装 されていない 良い例 悪い例 画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）
- 19. 19 4. 演出・音・アニメ ○例) 感情の高まる演出 ○例) 季節や昼夜に応じた演出 ○例) タップ操作の際の動きが面白い ○例) 声優の起用により没入感向上 × 例) 演出不足・演出過剰 良い例 悪い例 画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）
- 20. 20 5. アート・世界観 ○例) 美麗なグラフィック ○例) 魅力的なキャラクター ○例) 独創的な世界設定 × 例) フォントがカッコ悪い × 例) システムメッセージが事務的 × 例) 一部のグラフィック以外手抜き 良い例 悪い例 画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント） No.972 プリンセスヴァルキリー
- 21. 21 6. 統一性 ○例) 各UI要素のデザインに統一性が ある ○例) 〃 の操作の作法に統一性がある ○例) 〃 のモーションに統一性がある × 例) 統一性の欠如 良い例 悪い例 画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）
- 22. 22 7. 仕様 (≒ 実際にはUIデザイナーの担当範囲でないもの) ○例) 課金等の操作を要求するときに は確認画面を出す ○例) バトルに負けるとキャラクター は死んだものとして扱われる × 例) ロードの待ち時間が長すぎる × 例) 簡単すぎる・難しすぎる × 例) チュートリアルが長すぎて飽きる 良い例 悪い例 画像引用元：iOSアプリ「パズル&ドラゴンズ」（ガンホー・オンライン・エンターテイメント）
- 23. 23 備考 •ゲームの面白さに関わるがUIデザインの範ちゅうでない ものは7つの評価視点から省かれている • 例）脚本 • 例）宣伝による期待感の醸成 • 例）SNSやYouTubeを用いたファンコミュニティの 活性化
- 24. 24 この章のまとめ •UI Discussionでは、ゲームの良いと感じたところ・悪い と感じたところを見つけたら、下記7項目のいずれかに 分類する。 •これらはいわば「良いゲームの条件」である。 • 演出・音・アニメ • アート・世界観 • 統一性 • 仕様 • 見やすさ • わかりやすさ • 使いやすさ
- 26. 26 UI Discussion の手順 1. 調査するタイトルを選定する 2. 複数人でそれぞれプレイする 3. ｢Good｣ ｢Bad｣に関するコメントを挙げ、一覧表 をつくる 4. 「7つの評価視点」別に分類・集計し、割合を 調査する 5. 集計結果をディスカッションする （1〜5を毎週繰り返して情報を蓄積） 付箋紙を使って行えるよう 一部修正します。 (再掲載)
- 27. 27 UI Discussion の手順 1. 調査するタイトルを選定する 2. 複数人でそれぞれプレイする 3. ｢Good｣ ｢Bad｣と感じた箇所を見つけたら付箋紙 に書く 記入項目： 1. ｢Good｣ or ｢Bad｣ 2. 分類 (7つの評価視点 3. 箇所 (どこが) 4. 考察 (なぜ) 4. 集計し、割合を調査する 5. 集計結果をディスカッションする （1〜5を毎週繰り返して情報を蓄積）
- 28. 28 付箋紙の書き方 [4]考察 [2]分類 [3]箇所 分類： 1. 見やすさ 2. わかりやすさ 3. 使いやすさ 4. 演出・音・アニメ 5. アート・世界観 6. 統一性 7. 仕様 システムメッセージ の全部 メインユーザーで ある子供にも読める 漢字だけ使っている [1]良いなら○, 悪いなら× •もしも悪い点を指摘する場合は 改善提案を2枚目の付箋に記述 •複数の分類項目にあてあまる 箇所であっても、最も適切に 思うもの１つを選択提案 指摘 ○ わかりやすさ
- 32. 32 [EOF]