Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
-UIデザインの品質を効率的に向上させるには -
UI Discussionのススメ
2016/8/24 グリー株式会社 長﨑二郎
写真撮影、講演内容・画像のSNS投稿可
シャッター音等、周囲にご配慮下さい
資料、映像共に後日公開致します
1. 自己紹介
2. UIデザイン 課題に対する対策・効果
3. GoodUIBadUI紹介
4. まとめ
5. 質疑応答
本日の流れ
1. 自己紹介
2. UIデザイン 課題に対する対策・効果
3. GoodUIBadUI紹介
4. まとめ
5. 質疑応答
本日の流れ
■Wright Flyer Studios
NT Production
■ Art Group
SeniorManager
■ UI UX Team
Manager
Lead UI Designer
長﨑 二郎
Jiro Nagasaki
プラットホーム
• コンシューマゲーム
• アーケードゲーム
• PCゲーム
• モバイルソーシャルゲーム
(Web/Native)
ジャンル
• アクション
• RPG
• アドベンチャー
• シュミレーション
• スポーツ
• ホラー
• ...
本セッションの概要
モバイルゲームUIデザインについて、
既出タイトルの検証結果を元に
効果的に品質を向上させるポイントを
解説します
※UIビジュアルデザイン寄りの内容となります
1. 自己紹介
2. UIデザイン 課題に対する対策・効果
3. GoodUIBadUI紹介
4. まとめ
5. 質疑応答
本日の流れ
UIデザインに
携わっている方
どれくらいいらっしゃいますか?
レイアウト SE
UIエフェクト
統一性
解り易さ
ビジュアルの
美しさ
UI
アニメーション
使い易さ
見易さ
心地良さ
可読性
注意すべき事柄が多い
注意すべき事柄が多い
↓
あれもこれも全力でがんばる
注意すべき事柄が多い
↓
あれもこれも全力でがんばる
↓
消耗する
気を付ける項目が多すぎて
やみくもにがんばると非効率
なんとか「注力ポイント」を
定めたい・・・
「注力ポイント」
「ユーザー視点で
認知度の高いポイント」
=
認知度の高い個所から
改善・ブラッシュアップ
↓
品質を効率的に
高められるのでは?
どのようにして
ユーザー視点で認知度の高い
ポイントを洗い出す?
?
とにかくゲームを沢山プレイして
情報収取し、傾向を導き出す!
ユーザー認知度の
高いポイントを知りたい
UIデザインの品質を
効率的に高めたい
DiscussionUI
③ UIの効果的な改善ポイント明確化
他社と自社ゲームの品質差の認識
改善思考力の強化
を目的とした会議体
DiscussionUI とは?
簡単に言うと、
既出ゲームのUIデザインについて
レビューし、良い所、悪い所の
傾向を知ろうという試みです
Good? Bad?
詳細
DiscussionUI
実施期間:2015年6月末~実施中
メンバー:社内デザイナー(UIデザイナー以外も含む)
参加人数 :約15名(回によって変動)
ディスカッション頻度:毎週1回(一回あたり1時間)
調査するゲーム :Nativeモバイルゲーム
調査するゲーム本...
なぜ社内で?
↓
他社調査の依頼も考えたが
情報がフィードバックされるのみ
で、社内メンバーのナレッジ
蓄積に繋がらない
↓
社内でやってみよう!
具体的な手順は?
DiscussionUI
①~⑤を毎週繰り返して情報を蓄積
①調査するタイトルを選定する
②複数人でそれぞれプレイする
③「Good」 「Bad」と「7つの分類」に
分けたコメントを1つのリストに記入
④7つの分類別に集計し割合を調査する
⑤集計結果をディスカッションする
①調査するタイトルを選定する
選定ポイント
1:UI自体の品質が高いゲームである
2:過去にレビューしたゲームのジャンルに
偏りがないタイトルである
3:トレンドタイトルである
②複数人でそれぞれプレイする
Good
コメント
Bad
コメント
③UIについての感想を「Good」 「Bad」
として一つのリストに記入
Good
コメント
Bad
コメント
③更に「7つの分類」にコメントを振り分ける
「7つの分類」とは?
演出
音
アニメ
アート
世界観
統一性
解り易さ見易さ使い易さ
仕様
UI Discussionのテスト運用時に挙がった
コメントから上記7つに精錬!個々のレビュー
コメントを網羅的に捉える!
③「Good」 「Bad」と「7つの分類」に
分けたコメントを1つのリストに記入
Good Bad
コメント入力例
DiscussionUI
分類 ①良い所 ②要因
ロード画面の待ちが楽しい かわいいキャラクターが
アニメーションしている為
バトルが簡単にすぐ遊べる チュートリアルが解り易い為
ボタンが押しやすい 面積が大きい為
UI全体が世界観に合っていて
美しい
シンプルなデザイ...
分類 ①良い所 ②要因
ロード画面の待ちが楽しい かわいいキャラクターが
アニメーションしている為
バトルが簡単にすぐ遊べる チュートリアルが解り易い為
ボタンが押しやすい 面積が大きい為
UI全体が世界観に合っていて
美しい
シンプルなデザイ...
分類 ①良い所 ②要因
ロード画面の待ちが楽しい かわいいキャラクターが
アニメーションしている為
バトルが簡単にすぐ遊べる チュートリアルが解り易い為
ボタンが押しやすい 面積が大きい為
UI全体が世界観に合っていて
美しい
シンプルなデザイ...
分類 ①良い所 ②要因
ロード画面の待ちが楽しい かわいいキャラクターが
アニメーションしている為
バトルが簡単にすぐ遊べる チュートリアルが解り易い為
ボタンが押しやすい 面積が大きい為
UI全体が世界観に合っていて
美しい
シンプルなデザイ...
分類 ①課題 ②原因 ③解決案
ボタンで押せる所が
解らない
フラット過ぎてボタ
ンぽくないので
ボタンを出っ張ら
せて目立たせる
ボタンが押しづらい 小さすぎる為 大きさ調整
勝利画面が寂しい エフェクトが無い為 派手に演出する
画面の情報が...
分類 ①課題 ②原因 ③解決案
ボタンで押せる所が
解らない
フラット過ぎてボタ
ンぽくないので
ボタンを出っ張ら
せて目立たせる
ボタンが押しづらい 小さすぎる為 大きさ調整
勝利画面が寂しい エフェクトが無い為 派手に演出する
画面の情報が...
分類 ①課題 ②原因 ③解決案
ボタンで押せる所が
解らない
フラット過ぎてボタ
ンぽくないので
ボタンを出っ張ら
せて目立たせる
ボタンが押しづらい 小さすぎる為 大きさ調整
勝利画面が寂しい エフェクトが無い為 派手に演出する
画面の情報が...
分類 ①課題 ②原因 ③解決案
ボタンで押せる所が
解らない
フラット過ぎてボタ
ンぽくないので
ボタンを出っ張ら
せて目立たせる
ボタンが押しづらい 小さすぎる為 大きさ調整
勝利画面が寂しい エフェクトが無い為 派手に演出する
画面の情報が...
分類 ①課題 ②原因 ③解決案
ボタンで押せる所が
解らない
フラット過ぎてボタ
ンぽくないので
ボタンを出っ張ら
せて目立たせる
ボタンが押しづらい 小さすぎる為 大きさ調整
勝利画面が寂しい エフェクトが無い為 派手に演出する
画面の情報が...
方法③の説明でした
方法④に続きます
DiscussionUI
←今ココ
Goodコメント Badコメント
アート
世界観
演出
音
アニメ
使い易さ
統一性
使い易さ
解り易さ
④7つの分類別に集計し割合を調査する
演出
音
アニメ
アート
世界観
統一性
解り易さ
見易
さ
使い易さ
仕様
演出
音
アニメ
アー...
⑤集計結果を元に、ディスカッションする
同じ空間でUIの良し悪しについて話し合う事で
スタッフの目線あわせや価値観の統一、育成に
もつなげる事ができる!
①~⑤を毎週繰り返して情報を蓄積
①調査するタイトルを選定する
②複数人でそれぞれプレイする
③「Good」 「Bad」と「7つの分類」に
分けたコメントを1つのリストに記入
④7つの分類別に集計し割合を調査する
⑤集計結果をディスカッションする
得られた効果
育成面
効率面
DiscussionUI
得られた効果
育成面
効率面
DiscussionUI
自分のレビューについて自信が無い場合
でも、別メンバーの生の意見も聞く事で、
納得感が高まった!価値観を画一化!
普段ゲームをやる機会が増えた!
知見拡張、トレンド把握!
得られた効果:育成面について
他社と自社ゲームのUIデザインの
品質差を...
得られた効果
育成面
効率面
DiscussionUI
品質向上における注力ポイントが明確に
なり、作業優先度を絞りやすくなった!
結果 マイルストーンごとに質の高いUIを
無駄なく製作することができた!
制作時、過去にレビューした質の高いUIを参照
することによって思考に費やす時間を短縮化。
結果...
まとめ
既出ゲームのUIデザインについて
レビューし、ユーザー認知度の
高い分類の傾向を知ろう!
1. 自己紹介
2. UIデザイン 課題に対する対策・効果
3. GoodUIBadUI紹介
4. まとめ
5. 質疑応答
本日の流れ
Good UI Bad UI 7つの分類に
コメントを分け、数が多かった
事象それぞれ10個を紹介
DiscussionUI
演出
音
アニメ
アート
世界観
統一性 解り易さ見易さ 使い易さ 仕様
100Title
2832Comment
Bad UI 10 Select
気を付けましょう!
Good UI 10 Select
模範にしましょう!
Bad UI
10 Select
(100タイトル:1866コメントを集計)
DiscussionUI
UIの演出不足・演出過多により
ユーザーの感情を高めていない
1 演出/音/アニメ
ゲーム進行や獲得する要素の重要度を考慮し
て、適切に演出するよう心がけよう!
演出
不足!
演出
不足!
UIの演出不足・演出過多により
ユーザーの感情を高めていない
1 演出/音/アニメ
ゲーム進行や獲得する要素の重要度を考慮し
て、適切に演出するよう心がけよう!
演出
過多!
演出
不足!
× ×
UIの文字の可読性が低い為見難い2 見易さ
はみ出してる!
小さすぎる!
そこで改行?
書体
変わってる!
UIパーツの機能が不足している為使いづらい3 使い易さ
ユーザーは「進む」⇔「戻る」や「閉じる」操作
を繰り返して遷移を理解する。
ボタンの色、位置を工夫して目立たせよう!
戻るボタンどこ?
閉じるボタン
どこ?
UIパーツの機能が不足している為使いづらい3 使い易さ
他のゲームであたりまえのように実装されている
機能が無いと、使いにくく感じる
UIのビジュアル要素が整理されていない為解りにくい4
ごちゃごちゃ
している!
解り易さ
「解り易さ」「使い易さ」「ビジュアルの魅力」
この3つをバランスよく保つことが大事!
ごちゃごちゃ
している!
ごちゃごちゃ
している!
まずユーザーに何をしてもらいたいかを
明確に表示しよう。操作を少しずつ説明
したいね!
UIの画面用途や攻略についての説明が
不足している為解りにくい
5 解り易さ
UIの画面用途や攻略についての説明が
不足している為解りにくい
5 解り易さ
「チュートリアルの解りにくさ」とは?
・「チュートリアル後何をするのかが」わからない
・「マーカーがどこを指しているかが」わからない
・「説明文章が長文過ぎて」わから...
UIが誤操作を招く為使いづらい6 使い易さ
押しづらい!
主導線につながるボタン、特にゲーム攻略に
関連するボタンは、ユーザーテストを通じて
誤操作を十分検証し、改善しよう!
画面を触ってみないと機能がわからないUIは
ストレス!「スクロールできそう」や「タップで
きそう」をビジュアルで解りやすく伝えよう!
UIのビジュアルから操作方法や機能が予測できない為
解りにくい
7 解り易さ
UI(ビジュアル外)仕様に課題があり遊びずらい8 仕様
バトル
までが遠い
UI(ビジュアル外)仕様に課題があり遊びずらい8 仕様
どの画面までが遠い?
・「ホーム画面」までが遠い
・「ガチャ画面」までが遠い
・「クエスト選択・マップ画面」までが遠い
・「リザルト画面開始・終了」までが遠い
・「バトル開始画面」までが遠...
ガチャの事を
「ガチャ」
ガチャの事を
「召喚」
ガチャの事を
「呼び出し」×
UIのビジュアルや文言が一般的でない為解りにくい9 解り易さ
ゲームの世界観に則した文言で演出する事は大切
だけど、言葉のセレクトで一般性がないと解りに
くくなる!
UIのビジュアル品質が低いアート/世界観10
ビジュアルが全てではないが
絵的な魅力や質の高さが必要!
背景が簡素で
殺風景!
フォントが
ダサい!
グラフィックが
劣化している!
ボタンが
矩形ばかりで
単調!
使い易さ
解り易さ
解り易さ
演出/音/アニメ
解り易さ
見易さ 使い易さ
① ② ③
④ ⑤ ⑥
⑦ ⑧ ⑨ ⑩
BadUI傾向
アート/世界観解り易さ
仕様
先ほどの10選で述べてきた
Bad UIの傾向
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
BadUI傾向
「解り易さ」(30.3%)
解り易さ
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
BadUI傾向
「使い易さ」(23.1%)
使い易さ
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
BadUI傾向
解り易さ
遊び方がわからない」
「情報が認識できない」はストレス
解り易さ解り易さ
解り易さ
解り易さ
BadUI傾向
操作や画面遷移が快適でないとストレス
使い易さ
使い易さ
使い易さ
BadUI傾向
BadUIは
解り難さ、使い難さを改善しよう!
解り易さ 使い易さ
BadUI傾向
Good UI
10 Select
(100タイトル:966コメントを集計)
DiscussionUI
爽快!
華やか!
UIの画面ごとの演出により
ユーザーの感情を高めている
1 演出/音/アニメ
派手に演出したり、没入感のあるログインボ
ーナスを用いてユーザーの気分を高めよう!
ユーザーに長く遊んで頂く為には、
消費面やゲーム攻略外でのおもてなしが大事!
UIの画面ごとの演出により
ユーザーの感情を高めている
1 演出/音/アニメ
春
夏
秋
冬
UIの操作感・挙動・演出の魅力により
ユーザー感情を高めている
2 演出/音/アニメ
ユーザーが端末に入力した際のデザインや挙動は
重要!心地よいビジュアルやアニメーションを
追及しよう!
UIの操作感・挙動・演出の魅力により
ユーザー感情を高めている
2 演出/音/アニメ
UIの演出を伴うカメラワークでもユーザー感情を
高めることは出来る!
ズームインアウト
が心地よい!!
カメラ
演出が
良い!
闘い方が
解り易
い!
UIの画面用途、ゲーム攻略についての説明が
解り易い
3 解り易さ
解りやす過ぎるぐらいの明快さで
ユーザーに遊び方や有益な情報を提供しよう!
レベルアップ・収穫
の可否がわかりやす
い!
短い時間で
理解できる
簡潔さ!
UIの画面用途、ゲーム攻略についての説明が
解り易い
3 解り易さ
簡
文言が
簡潔で
解り易い!
押すべきボタ
ンをハイライ
トして強調!
ストーリーと
チュートリをうま
く絡めている!
挿絵の魅力で
興味を...
UIのビジュアルが統一され魅力的である
ウィンドウ メインボタン フォント
バナー
ゲージ
スライダー戻るボタン
閉じるボタン
タブ
プルダウン
メニュー
チェック
ボックス
インフィニット
インジケーター
スイッチ
ページャー
アイコン類
ア...
「まとまりがある」 とは?
・「落ち着いた雰囲気」でまとまっている
・「かわいい雰囲気」でまとまっている
・「優しい雰囲気」でまとまっている
・「綺麗な雰囲気」でまとまっている
・「かっこいい雰囲気」でまとまっている
・「ゲームに合った世界観」...
UIパーツの高い有用性により使い易い5 使い易さ
同じ操作でも、複数の操作方法を用意する事
で、使い勝手がアップ!
UIパーツの高い有用性により使い易い5 使い易さ
クエストやバトルが自動化、倍速可能なる事
で、ゲームサイクルが時短化!
オートで
簡単
バトル!
倍速で
時短!
計画的に
遊べる!
UIを構成しているパーツや背景・装飾が
魅力的である
6 アート/世界観
UIパーツを制作する際は、
個々のパーツ自体の品質を高めると同時に
画面全体で調和するように、制作しよう!
バナーが
魅力的
アイコンが
魅力的
UIパーツが
魅力的
サウンドの魅力によりユーザーの
感情を高めている
♪BGM ♪SE ♪ボイス
声優の声で
ゲームに
没入できる!
ドキドキワクワク
して気分が
盛り上がる!
ボタンを押すと
音が
気持ち良い!
感情 UP!
7 演出/音/アニメ
UIの仕様によりゲームが遊びやすい8 仕様
バトル
までが遠い
バトル
までが近い
最短の画面遷移で遊べるように導線を整理しよう!
×
「遷移が近いと良い画面」 とは?
・「ホーム画面」までの遷移が近い
・「強化・合成」までの遷移が近い
・「ガチャ画面・ガチャ結果」までの遷移が近い
・「バトル画面・パズル画面」までの遷移が近い
UIの仕様によりゲームが遊びやすい8 仕様
UIビジュアルと機能が一致していて使い易い9 使い易さ
ビジュアルで機能が予測できるUIデザインで
誤操作を減らすことができる!「スクロール
できそう」や「タップできそう」をビジュア
ルで解りやすく伝えよう!
UIの文字の可読性が高い為見易い
ユーザーに長く遊んで頂く為には、
消費面やゲーム攻略外でのおもてなしが大事!
10 見易さ
×
文字が
見難い!
文字が
見易い
♪BGM/SE/ボイス
演出/音/アニメ
使い易さ
Good UI傾向
① ② ③ ④
⑤ ⑥ ⑦
⑧ ⑨
演出/音/アニメ演出/音/アニメ
解り易さ
アート/世界観
仕様
アート/世界観
使い易さ
⑩
見易さ
先ほどの10選で述べてきた
Good UIの傾向
Good UI傾向
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
「演出・音・アニメ」(41.6%)
演出
音
アニメ
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
Good UI傾向
「解り易さ」(17.5%)
解り易さ
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
演出
音
アニメ
Good UI傾向
「使い易さ」 (14.8%)
「アート・世界観」(14.5%)
アート
世界観
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
演出
音
アニメ
Good UI傾向
解り易さ
使い易さ
感情の推移をデザインしよう!
演出
音
アニメ
♪BGM/SE/ボイス
演出/音/アニメ 演出/音/アニメ演出/音/アニメ
Good UI傾向
わかりやすさをとことん追求しよう!
解り易さ
Good UI傾向
解り易さ解り易さ 解り易さ
簡
解り易さ
「演出・アニメ・音」
「解り易さ」
を向上させると
Good UIになる!
演出
音
アニメ
Good UI傾向
重要度 概要 詳細
1
演出
音
アニメ
UIの画面ごとの演出によりユーザーの感情を
高めてる
ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの魅力により
ユーザーの感情を高めている。フィーバー/チャンスタイム...
重要度 概要 詳細
1
演出
音
アニメ
UIの画面ごとの演出によりユーザーの感情を
高めてる
ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの魅力により
ユーザーの感情を高めている。フィーバー/チャンスタイム...
重要度 概要 詳細
1
演出
音
アニメ
UIの画面ごとの演出によりユーザーの感情を
高めてる
ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの魅力により
ユーザーの感情を高めている。フィーバー/チャンスタイム...
重要度 概要 詳細
1
演出
音
アニメ
UIの画面ごとの演出によりユーザーの感情を
高めてる
ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの魅力により
ユーザーの感情を高めている。フィーバー/チャンスタイム...
重要度 概要 詳細
1
演出
音
アニメ
UIの画面ごとの演出によりユーザーの感情を
高めてる
ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの魅力により
ユーザーの感情を高めている。フィーバー/チャンスタイム...
重要度 概要 詳細
1
演出
音
アニメ
UIの演出不足・演出過多によりユーザーの感情を高め
ていない
ゲームクリア、ガチャ、レベルアップなど、ユーザー称賛時の演出不足。
ゲームスタート時の演出不足、音による感情想起不足、エフェクトで演出過多。...
1. 自己紹介
2. UIデザイン 課題に対する対策・効果
3. GoodUIBadUI紹介
4. まとめ
5. 質疑応答
本日の流れ
BadUIを代表する
2分類
GoodUIを代表する
2分類
解り易さ
Bad UIを
改善するなら
この二つ!
演出
音
アニメ
解り易さ 使い易さ
Good UIを
目指して品質を
高めるのであれば
この二つ!
コメント表やチェックシートを
活用して、UIをレビューしよう!
今後の展望
DiscussionUI
今後の展望
①100タイトルレビューの達成
②Good/Badコメント数
上位10タイトル
下位10タイトル
から導き出される共通項や
傾向を洗い出す!
よくあるご質問
DiscussionUI
解を得る事よりも考えることが大事なので、
その場で解決策を決めきる必要はない。
着地しない議論は次週に向けてメンバーに調べてもらう
か、ファシリテーターが持ち帰って一般的に、もしくは業界
的に何がスタンダードなのかを調べることもある。
Q
A
...
UIチェックシートを、自社制作のタイトルに当てはめて検証
していくという試みはやっているのか?
100タイトルなど、まとまったコメント数の集計をもとにし
たチェックシートは最近出来上がったばかりなので、
これから実績を積んでいく予定。 将来的に...
UIチェックシートを活用しつつ 自分でUIを作るとなった時
にバイブルみたいになってしまう懸念はないのか?
UIは厳密にいうとゲームの種類やターゲットによって正
解も様々なので、明確に言えない部分がある。
チェックシートがすべての解ではないと思...
意見が集まる分類にこそ
品質改善・向上ポイントがある!
まとめ
とは、
品質向上効率化+育成促進の
二つが叶うスキームである!
DiscussionUI
を実践し、
ユーザーがどこに
注目しているのかを体感しよう!
注目ポイントを絞って作業し、
効率的に品質を高めよう!
まとめ
DiscussionUI
your Attention!Thanks for
ご清聴ありがとうございました!
【CEDEC2016】Ui discussionのススメ  uiデザインの品質を効率的に向上させるには
Upcoming SlideShare
Loading in …5
×

【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには

5,920 views

Published on

CEDEC2016で講演した内容のスライドです。

Published in: Design
  • Be the first to comment

【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには

  1. 1. -UIデザインの品質を効率的に向上させるには - UI Discussionのススメ 2016/8/24 グリー株式会社 長﨑二郎
  2. 2. 写真撮影、講演内容・画像のSNS投稿可 シャッター音等、周囲にご配慮下さい 資料、映像共に後日公開致します
  3. 3. 1. 自己紹介 2. UIデザイン 課題に対する対策・効果 3. GoodUIBadUI紹介 4. まとめ 5. 質疑応答 本日の流れ
  4. 4. 1. 自己紹介 2. UIデザイン 課題に対する対策・効果 3. GoodUIBadUI紹介 4. まとめ 5. 質疑応答 本日の流れ
  5. 5. ■Wright Flyer Studios NT Production ■ Art Group SeniorManager ■ UI UX Team Manager Lead UI Designer 長﨑 二郎 Jiro Nagasaki
  6. 6. プラットホーム • コンシューマゲーム • アーケードゲーム • PCゲーム • モバイルソーシャルゲーム (Web/Native) ジャンル • アクション • RPG • アドベンチャー • シュミレーション • スポーツ • ホラー • 知育 etc… 業務 • UIデザイン • 採用 • 育成 ゲームUI歴 16年目 経歴
  7. 7. 本セッションの概要 モバイルゲームUIデザインについて、 既出タイトルの検証結果を元に 効果的に品質を向上させるポイントを 解説します ※UIビジュアルデザイン寄りの内容となります
  8. 8. 1. 自己紹介 2. UIデザイン 課題に対する対策・効果 3. GoodUIBadUI紹介 4. まとめ 5. 質疑応答 本日の流れ
  9. 9. UIデザインに 携わっている方 どれくらいいらっしゃいますか?
  10. 10. レイアウト SE UIエフェクト 統一性 解り易さ ビジュアルの 美しさ UI アニメーション 使い易さ 見易さ 心地良さ 可読性
  11. 11. 注意すべき事柄が多い
  12. 12. 注意すべき事柄が多い ↓ あれもこれも全力でがんばる
  13. 13. 注意すべき事柄が多い ↓ あれもこれも全力でがんばる ↓ 消耗する
  14. 14. 気を付ける項目が多すぎて やみくもにがんばると非効率 なんとか「注力ポイント」を 定めたい・・・
  15. 15. 「注力ポイント」 「ユーザー視点で 認知度の高いポイント」 =
  16. 16. 認知度の高い個所から 改善・ブラッシュアップ ↓ 品質を効率的に 高められるのでは?
  17. 17. どのようにして ユーザー視点で認知度の高い ポイントを洗い出す? ?
  18. 18. とにかくゲームを沢山プレイして 情報収取し、傾向を導き出す!
  19. 19. ユーザー認知度の 高いポイントを知りたい UIデザインの品質を 効率的に高めたい
  20. 20. DiscussionUI
  21. 21. ③ UIの効果的な改善ポイント明確化 他社と自社ゲームの品質差の認識 改善思考力の強化 を目的とした会議体 DiscussionUI とは?
  22. 22. 簡単に言うと、 既出ゲームのUIデザインについて レビューし、良い所、悪い所の 傾向を知ろうという試みです Good? Bad?
  23. 23. 詳細 DiscussionUI
  24. 24. 実施期間:2015年6月末~実施中 メンバー:社内デザイナー(UIデザイナー以外も含む) 参加人数 :約15名(回によって変動) ディスカッション頻度:毎週1回(一回あたり1時間) 調査するゲーム :Nativeモバイルゲーム 調査するゲーム本数:毎週2本をレビュー(117タイトル) 1タイトルのプレイの目安:チュートリアルとゲームサイクルを 2,3周プレイした状態 DiscussionUI 2016年8月24日現在
  25. 25. なぜ社内で? ↓ 他社調査の依頼も考えたが 情報がフィードバックされるのみ で、社内メンバーのナレッジ 蓄積に繋がらない ↓ 社内でやってみよう!
  26. 26. 具体的な手順は? DiscussionUI
  27. 27. ①~⑤を毎週繰り返して情報を蓄積 ①調査するタイトルを選定する ②複数人でそれぞれプレイする ③「Good」 「Bad」と「7つの分類」に 分けたコメントを1つのリストに記入 ④7つの分類別に集計し割合を調査する ⑤集計結果をディスカッションする
  28. 28. ①調査するタイトルを選定する 選定ポイント 1:UI自体の品質が高いゲームである 2:過去にレビューしたゲームのジャンルに 偏りがないタイトルである 3:トレンドタイトルである
  29. 29. ②複数人でそれぞれプレイする
  30. 30. Good コメント Bad コメント ③UIについての感想を「Good」 「Bad」 として一つのリストに記入
  31. 31. Good コメント Bad コメント ③更に「7つの分類」にコメントを振り分ける
  32. 32. 「7つの分類」とは? 演出 音 アニメ アート 世界観 統一性 解り易さ見易さ使い易さ 仕様 UI Discussionのテスト運用時に挙がった コメントから上記7つに精錬!個々のレビュー コメントを網羅的に捉える!
  33. 33. ③「Good」 「Bad」と「7つの分類」に 分けたコメントを1つのリストに記入 Good Bad
  34. 34. コメント入力例 DiscussionUI
  35. 35. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ
  36. 36. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ 良いと感じた 個所を記入!
  37. 37. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ 良いと感じた 個所の要因を 記入!
  38. 38. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ 7つの分類を 記入!
  39. 39. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ
  40. 40. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ 悪いと感じた 個所を記入!
  41. 41. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ 悪いと感じた 個所の原因を 記入!
  42. 42. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ 7つの分類を 記入!
  43. 43. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ どうすれば 改善するかを 記入!
  44. 44. 方法③の説明でした 方法④に続きます DiscussionUI ←今ココ
  45. 45. Goodコメント Badコメント アート 世界観 演出 音 アニメ 使い易さ 統一性 使い易さ 解り易さ ④7つの分類別に集計し割合を調査する 演出 音 アニメ アート 世界観 統一性 解り易さ 見易 さ 使い易さ 仕様 演出 音 アニメ アート 世界観 統一性 解り易さ 見易 さ 使い易さ 仕様
  46. 46. ⑤集計結果を元に、ディスカッションする 同じ空間でUIの良し悪しについて話し合う事で スタッフの目線あわせや価値観の統一、育成に もつなげる事ができる!
  47. 47. ①~⑤を毎週繰り返して情報を蓄積 ①調査するタイトルを選定する ②複数人でそれぞれプレイする ③「Good」 「Bad」と「7つの分類」に 分けたコメントを1つのリストに記入 ④7つの分類別に集計し割合を調査する ⑤集計結果をディスカッションする
  48. 48. 得られた効果 育成面 効率面 DiscussionUI
  49. 49. 得られた効果 育成面 効率面 DiscussionUI
  50. 50. 自分のレビューについて自信が無い場合 でも、別メンバーの生の意見も聞く事で、 納得感が高まった!価値観を画一化! 普段ゲームをやる機会が増えた! 知見拡張、トレンド把握! 得られた効果:育成面について 他社と自社ゲームのUIデザインの 品質差を実感!制作意欲が向上した!
  51. 51. 得られた効果 育成面 効率面 DiscussionUI
  52. 52. 品質向上における注力ポイントが明確に なり、作業優先度を絞りやすくなった! 結果 マイルストーンごとに質の高いUIを 無駄なく製作することができた! 制作時、過去にレビューした質の高いUIを参照 することによって思考に費やす時間を短縮化。 結果デザイン作業のゴールに早く到達できた! 他社ゲームの課題について修正案を考える事で、 改善思考力を強化!結果他者に指導を仰がず とも課題解決できるようになった! 得られた効果:効率面について
  53. 53. まとめ 既出ゲームのUIデザインについて レビューし、ユーザー認知度の 高い分類の傾向を知ろう!
  54. 54. 1. 自己紹介 2. UIデザイン 課題に対する対策・効果 3. GoodUIBadUI紹介 4. まとめ 5. 質疑応答 本日の流れ
  55. 55. Good UI Bad UI 7つの分類に コメントを分け、数が多かった 事象それぞれ10個を紹介 DiscussionUI 演出 音 アニメ アート 世界観 統一性 解り易さ見易さ 使い易さ 仕様
  56. 56. 100Title 2832Comment
  57. 57. Bad UI 10 Select 気を付けましょう! Good UI 10 Select 模範にしましょう!
  58. 58. Bad UI 10 Select (100タイトル:1866コメントを集計) DiscussionUI
  59. 59. UIの演出不足・演出過多により ユーザーの感情を高めていない 1 演出/音/アニメ ゲーム進行や獲得する要素の重要度を考慮し て、適切に演出するよう心がけよう! 演出 不足! 演出 不足!
  60. 60. UIの演出不足・演出過多により ユーザーの感情を高めていない 1 演出/音/アニメ ゲーム進行や獲得する要素の重要度を考慮し て、適切に演出するよう心がけよう! 演出 過多! 演出 不足! × ×
  61. 61. UIの文字の可読性が低い為見難い2 見易さ はみ出してる! 小さすぎる! そこで改行? 書体 変わってる!
  62. 62. UIパーツの機能が不足している為使いづらい3 使い易さ ユーザーは「進む」⇔「戻る」や「閉じる」操作 を繰り返して遷移を理解する。 ボタンの色、位置を工夫して目立たせよう! 戻るボタンどこ? 閉じるボタン どこ?
  63. 63. UIパーツの機能が不足している為使いづらい3 使い易さ 他のゲームであたりまえのように実装されている 機能が無いと、使いにくく感じる
  64. 64. UIのビジュアル要素が整理されていない為解りにくい4 ごちゃごちゃ している! 解り易さ 「解り易さ」「使い易さ」「ビジュアルの魅力」 この3つをバランスよく保つことが大事! ごちゃごちゃ している! ごちゃごちゃ している!
  65. 65. まずユーザーに何をしてもらいたいかを 明確に表示しよう。操作を少しずつ説明 したいね! UIの画面用途や攻略についての説明が 不足している為解りにくい 5 解り易さ
  66. 66. UIの画面用途や攻略についての説明が 不足している為解りにくい 5 解り易さ 「チュートリアルの解りにくさ」とは? ・「チュートリアル後何をするのかが」わからない ・「マーカーがどこを指しているかが」わからない ・「説明文章が長文過ぎて」わからない ・「チュートリアルの時間が長すぎて」わからない ・「説明を受けた所をすぐ復習できず」わからない
  67. 67. UIが誤操作を招く為使いづらい6 使い易さ 押しづらい! 主導線につながるボタン、特にゲーム攻略に 関連するボタンは、ユーザーテストを通じて 誤操作を十分検証し、改善しよう!
  68. 68. 画面を触ってみないと機能がわからないUIは ストレス!「スクロールできそう」や「タップで きそう」をビジュアルで解りやすく伝えよう! UIのビジュアルから操作方法や機能が予測できない為 解りにくい 7 解り易さ
  69. 69. UI(ビジュアル外)仕様に課題があり遊びずらい8 仕様 バトル までが遠い
  70. 70. UI(ビジュアル外)仕様に課題があり遊びずらい8 仕様 どの画面までが遠い? ・「ホーム画面」までが遠い ・「ガチャ画面」までが遠い ・「クエスト選択・マップ画面」までが遠い ・「リザルト画面開始・終了」までが遠い ・「バトル開始画面」までが遠い ・「ログボ・プレゼント受け取り終了」までが遠い
  71. 71. ガチャの事を 「ガチャ」 ガチャの事を 「召喚」 ガチャの事を 「呼び出し」× UIのビジュアルや文言が一般的でない為解りにくい9 解り易さ ゲームの世界観に則した文言で演出する事は大切 だけど、言葉のセレクトで一般性がないと解りに くくなる!
  72. 72. UIのビジュアル品質が低いアート/世界観10 ビジュアルが全てではないが 絵的な魅力や質の高さが必要! 背景が簡素で 殺風景! フォントが ダサい! グラフィックが 劣化している! ボタンが 矩形ばかりで 単調!
  73. 73. 使い易さ 解り易さ 解り易さ 演出/音/アニメ 解り易さ 見易さ 使い易さ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ BadUI傾向 アート/世界観解り易さ 仕様
  74. 74. 先ほどの10選で述べてきた Bad UIの傾向 © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム BadUI傾向
  75. 75. 「解り易さ」(30.3%) 解り易さ © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム BadUI傾向
  76. 76. 「使い易さ」(23.1%) 使い易さ © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム BadUI傾向 解り易さ
  77. 77. 遊び方がわからない」 「情報が認識できない」はストレス 解り易さ解り易さ 解り易さ 解り易さ BadUI傾向
  78. 78. 操作や画面遷移が快適でないとストレス 使い易さ 使い易さ 使い易さ BadUI傾向
  79. 79. BadUIは 解り難さ、使い難さを改善しよう! 解り易さ 使い易さ BadUI傾向
  80. 80. Good UI 10 Select (100タイトル:966コメントを集計) DiscussionUI
  81. 81. 爽快! 華やか! UIの画面ごとの演出により ユーザーの感情を高めている 1 演出/音/アニメ 派手に演出したり、没入感のあるログインボ ーナスを用いてユーザーの気分を高めよう!
  82. 82. ユーザーに長く遊んで頂く為には、 消費面やゲーム攻略外でのおもてなしが大事! UIの画面ごとの演出により ユーザーの感情を高めている 1 演出/音/アニメ 春 夏 秋 冬
  83. 83. UIの操作感・挙動・演出の魅力により ユーザー感情を高めている 2 演出/音/アニメ ユーザーが端末に入力した際のデザインや挙動は 重要!心地よいビジュアルやアニメーションを 追及しよう!
  84. 84. UIの操作感・挙動・演出の魅力により ユーザー感情を高めている 2 演出/音/アニメ UIの演出を伴うカメラワークでもユーザー感情を 高めることは出来る! ズームインアウト が心地よい!! カメラ 演出が 良い!
  85. 85. 闘い方が 解り易 い! UIの画面用途、ゲーム攻略についての説明が 解り易い 3 解り易さ 解りやす過ぎるぐらいの明快さで ユーザーに遊び方や有益な情報を提供しよう! レベルアップ・収穫 の可否がわかりやす い!
  86. 86. 短い時間で 理解できる 簡潔さ! UIの画面用途、ゲーム攻略についての説明が 解り易い 3 解り易さ 簡 文言が 簡潔で 解り易い! 押すべきボタ ンをハイライ トして強調! ストーリーと チュートリをうま く絡めている! 挿絵の魅力で 興味を惹く! 次の操作をポイ ンターの見た目 と動きで誘導! 音声・映像の 補足でわかり やすい! 復習機能で わかりやす い! 「チュートリアルの解り易さ」とは?
  87. 87. UIのビジュアルが統一され魅力的である ウィンドウ メインボタン フォント バナー ゲージ スライダー戻るボタン 閉じるボタン タブ プルダウン メニュー チェック ボックス インフィニット インジケーター スイッチ ページャー アイコン類 アート/世界観 「かっこいい?」「かわいい?」 「シンプル?」「フラット? 」 多くの要素を同じテイストで統一しよう! 4
  88. 88. 「まとまりがある」 とは? ・「落ち着いた雰囲気」でまとまっている ・「かわいい雰囲気」でまとまっている ・「優しい雰囲気」でまとまっている ・「綺麗な雰囲気」でまとまっている ・「かっこいい雰囲気」でまとまっている ・「ゲームに合った世界観」でまとまっている UIのビジュアルが統一され魅力的であるアート/世界観4
  89. 89. UIパーツの高い有用性により使い易い5 使い易さ 同じ操作でも、複数の操作方法を用意する事 で、使い勝手がアップ!
  90. 90. UIパーツの高い有用性により使い易い5 使い易さ クエストやバトルが自動化、倍速可能なる事 で、ゲームサイクルが時短化! オートで 簡単 バトル! 倍速で 時短! 計画的に 遊べる!
  91. 91. UIを構成しているパーツや背景・装飾が 魅力的である 6 アート/世界観 UIパーツを制作する際は、 個々のパーツ自体の品質を高めると同時に 画面全体で調和するように、制作しよう! バナーが 魅力的 アイコンが 魅力的 UIパーツが 魅力的
  92. 92. サウンドの魅力によりユーザーの 感情を高めている ♪BGM ♪SE ♪ボイス 声優の声で ゲームに 没入できる! ドキドキワクワク して気分が 盛り上がる! ボタンを押すと 音が 気持ち良い! 感情 UP! 7 演出/音/アニメ
  93. 93. UIの仕様によりゲームが遊びやすい8 仕様 バトル までが遠い バトル までが近い 最短の画面遷移で遊べるように導線を整理しよう! ×
  94. 94. 「遷移が近いと良い画面」 とは? ・「ホーム画面」までの遷移が近い ・「強化・合成」までの遷移が近い ・「ガチャ画面・ガチャ結果」までの遷移が近い ・「バトル画面・パズル画面」までの遷移が近い UIの仕様によりゲームが遊びやすい8 仕様
  95. 95. UIビジュアルと機能が一致していて使い易い9 使い易さ ビジュアルで機能が予測できるUIデザインで 誤操作を減らすことができる!「スクロール できそう」や「タップできそう」をビジュア ルで解りやすく伝えよう!
  96. 96. UIの文字の可読性が高い為見易い ユーザーに長く遊んで頂く為には、 消費面やゲーム攻略外でのおもてなしが大事! 10 見易さ × 文字が 見難い! 文字が 見易い
  97. 97. ♪BGM/SE/ボイス 演出/音/アニメ 使い易さ Good UI傾向 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ 演出/音/アニメ演出/音/アニメ 解り易さ アート/世界観 仕様 アート/世界観 使い易さ ⑩ 見易さ
  98. 98. 先ほどの10選で述べてきた Good UIの傾向 Good UI傾向 © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
  99. 99. 「演出・音・アニメ」(41.6%) 演出 音 アニメ © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム Good UI傾向
  100. 100. 「解り易さ」(17.5%) 解り易さ © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム 演出 音 アニメ Good UI傾向
  101. 101. 「使い易さ」 (14.8%) 「アート・世界観」(14.5%) アート 世界観 © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム 演出 音 アニメ Good UI傾向 解り易さ 使い易さ
  102. 102. 感情の推移をデザインしよう! 演出 音 アニメ ♪BGM/SE/ボイス 演出/音/アニメ 演出/音/アニメ演出/音/アニメ Good UI傾向
  103. 103. わかりやすさをとことん追求しよう! 解り易さ Good UI傾向 解り易さ解り易さ 解り易さ 簡
  104. 104. 解り易さ 「演出・アニメ・音」 「解り易さ」 を向上させると Good UIになる! 演出 音 アニメ Good UI傾向
  105. 105. 重要度 概要 詳細 1 演出 音 アニメ UIの画面ごとの演出によりユーザーの感情を 高めてる ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの魅力により ユーザーの感情を高めている。フィーバー/チャンスタイムの演出の魅力によりユーザーの 感情を高めている。ガチャ関連の演出によりユーザーの感情を高めている。等 2 演出 音 アニメ UIの操作感・挙動・演出の魅力によりユーザーの 感を高めている UIの挙動・エフェクト・画面効果・操作感、カメラワークの心地よさや迫力により、 ユーザーの感情を高めている。 3 解り易さ UIの画面用途、ゲーム攻略についての説明が 解り易い チュートリアルや遊び方が解り易い、収穫・アップグレードや解放が解り易い。 回数/時間制限、残量/所持数/必要数/達成数/上限/下限等の表記が解り易い。等 4 アート世 界観 UIのビジュアルが統一され魅力的である UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され魅力的である。 異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的である。等 5 使い易さ UIパーツの高い有用性により使い易い 同操作で、複数操作方法が実装され、使い易い。自動バトルボタン、倍速バトルボタンがゲーム を攻略する上で使い易い。残バッテリーや時計表示が実装されていて使い易い。等 6 アート 世界観 UIを構成しているパーツや背景・装飾が 魅力的である UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的である。 またはUI機能とビジュアルが世界観として一致していて魅力的。等 7 演出 音 アニメ サウンドの魅力によりユーザーの感情を 高めている BGM/SE/ボイスによりユーザーの感情を高めている。 8 仕様 UIの仕様によりゲームが遊びやすい ホーム画面までの遷移が近い、バトルまでの遷移が近い、ガチャまでの遷移が近いなど、 目的の遷移が近い。またはゲームのプレイスタイルによって機能変更が出来て遊びやすい。等 9 使い易さ UIビジュアルと機能が一致していて使い易い タッパブル・スワイパブルかどうかがビジュアルから予測できる。快適且つ直観的に移動、 遷移ができる。等 10 見易さ UIの文字の可読性が高い為見易い 適切な文字の大きさ、色、文量、で表示されている。可読性の高いフォントを選定し、表示している。 Good UI 10 Select Check sheet ※2016年8月時点UI Discussion
  106. 106. 重要度 概要 詳細 1 演出 音 アニメ UIの画面ごとの演出によりユーザーの感情を 高めてる ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの魅力により ユーザーの感情を高めている。フィーバー/チャンスタイムの演出の魅力によりユーザーの 感情を高めている。ガチャ関連の演出によりユーザーの感情を高めている。等 2 演出 音 アニメ UIの操作感・挙動・演出の魅力によりユーザーの 感を高めている UIの挙動・エフェクト・画面効果・操作感、カメラワークの心地よさや迫力により、 ユーザーの感情を高めている。 3 解り易さ UIの画面用途、ゲーム攻略についての説明が 解り易い チュートリアルや遊び方が解り易い、収穫・アップグレードや解放が解り易い。 回数/時間制限、残量/所持数/必要数/達成数/上限/下限等の表記が解り易い。等 4 アート世 界観 UIのビジュアルが統一され魅力的である UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され魅力的である。 異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的である。等 5 使い易さ UIパーツの高い有用性により使い易い 同操作で、複数操作方法が実装され、使い易い。自動バトルボタン、倍速バトルボタンがゲーム を攻略する上で使い易い。残バッテリーや時計表示が実装されていて使い易い。等 6 アート 世界観 UIを構成しているパーツや背景・装飾が 魅力的である UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的である。 またはUI機能とビジュアルが世界観として一致していて魅力的。等 7 演出 音 アニメ サウンドの魅力によりユーザーの感情を 高めている BGM/SE/ボイスによりユーザーの感情を高めている。 8 仕様 UIの仕様によりゲームが遊びやすい ホーム画面までの遷移が近い、バトルまでの遷移が近い、ガチャまでの遷移が近いなど、 目的の遷移が近い。またはゲームのプレイスタイルによって機能変更が出来て遊びやすい。等 9 使い易さ UIビジュアルと機能が一致していて使い易い タッパブル・スワイパブルかどうかがビジュアルから予測できる。快適且つ直観的に移動、 遷移ができる。等 10 見易さ UIの文字の可読性が高い為見易い 適切な文字の大きさ、色、文量、で表示されている。可読性の高いフォントを選定し、表示している。 Good UI 10 Select Check sheet ※2016年8月時点UI Discussion 上から Goodコメント 数が多い順
  107. 107. 重要度 概要 詳細 1 演出 音 アニメ UIの画面ごとの演出によりユーザーの感情を 高めてる ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの魅力により ユーザーの感情を高めている。フィーバー/チャンスタイムの演出の魅力によりユーザーの 感情を高めている。ガチャ関連の演出によりユーザーの感情を高めている。等 2 演出 音 アニメ UIの操作感・挙動・演出の魅力によりユーザーの 感を高めている UIの挙動・エフェクト・画面効果・操作感、カメラワークの心地よさや迫力により、 ユーザーの感情を高めている。 3 解り易さ UIの画面用途、ゲーム攻略についての説明が 解り易い チュートリアルや遊び方が解り易い、収穫・アップグレードや解放が解り易い。 回数/時間制限、残量/所持数/必要数/達成数/上限/下限等の表記が解り易い。等 4 アート世 界観 UIのビジュアルが統一され魅力的である UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され魅力的である。 異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的である。等 5 使い易さ UIパーツの高い有用性により使い易い 同操作で、複数操作方法が実装され、使い易い。自動バトルボタン、倍速バトルボタンがゲーム を攻略する上で使い易い。残バッテリーや時計表示が実装されていて使い易い。等 6 アート 世界観 UIを構成しているパーツや背景・装飾が 魅力的である UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的である。 またはUI機能とビジュアルが世界観として一致していて魅力的。等 7 演出 音 アニメ サウンドの魅力によりユーザーの感情を 高めている BGM/SE/ボイスによりユーザーの感情を高めている。 8 仕様 UIの仕様によりゲームが遊びやすい ホーム画面までの遷移が近い、バトルまでの遷移が近い、ガチャまでの遷移が近いなど、 目的の遷移が近い。またはゲームのプレイスタイルによって機能変更が出来て遊びやすい。等 9 使い易さ UIビジュアルと機能が一致していて使い易い タッパブル・スワイパブルかどうかがビジュアルから予測できる。快適且つ直観的に移動、 遷移ができる。等 10 見易さ UIの文字の可読性が高い為見易い 適切な文字の大きさ、色、文量、で表示されている。可読性の高いフォントを選定し、表示している。 Good UI 10 Select Check sheet ※2016年8月時点UI Discussion 概要
  108. 108. 重要度 概要 詳細 1 演出 音 アニメ UIの画面ごとの演出によりユーザーの感情を 高めてる ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの魅力により ユーザーの感情を高めている。フィーバー/チャンスタイムの演出の魅力によりユーザーの 感情を高めている。ガチャ関連の演出によりユーザーの感情を高めている。等 2 演出 音 アニメ UIの操作感・挙動・演出の魅力によりユーザーの 感を高めている UIの挙動・エフェクト・画面効果・操作感、カメラワークの心地よさや迫力により、 ユーザーの感情を高めている。 3 解り易さ UIの画面用途、ゲーム攻略についての説明が 解り易い チュートリアルや遊び方が解り易い、収穫・アップグレードや解放が解り易い。 回数/時間制限、残量/所持数/必要数/達成数/上限/下限等の表記が解り易い。等 4 アート世 界観 UIのビジュアルが統一され魅力的である UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され魅力的である。 異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的である。等 5 使い易さ UIパーツの高い有用性により使い易い 同操作で、複数操作方法が実装され、使い易い。自動バトルボタン、倍速バトルボタンがゲーム を攻略する上で使い易い。残バッテリーや時計表示が実装されていて使い易い。等 6 アート 世界観 UIを構成しているパーツや背景・装飾が 魅力的である UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的である。 またはUI機能とビジュアルが世界観として一致していて魅力的。等 7 演出 音 アニメ サウンドの魅力によりユーザーの感情を 高めている BGM/SE/ボイスによりユーザーの感情を高めている。 8 仕様 UIの仕様によりゲームが遊びやすい ホーム画面までの遷移が近い、バトルまでの遷移が近い、ガチャまでの遷移が近いなど、 目的の遷移が近い。またはゲームのプレイスタイルによって機能変更が出来て遊びやすい。等 9 使い易さ UIビジュアルと機能が一致していて使い易い タッパブル・スワイパブルかどうかがビジュアルから予測できる。快適且つ直観的に移動、 遷移ができる。等 10 見易さ UIの文字の可読性が高い為見易い 適切な文字の大きさ、色、文量、で表示されている。可読性の高いフォントを選定し、表示している。 Good UI 10 Select Check sheet ※2016年8月時点UI Discussion 詳細
  109. 109. 重要度 概要 詳細 1 演出 音 アニメ UIの画面ごとの演出によりユーザーの感情を 高めてる ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの魅力により ユーザーの感情を高めている。フィーバー/チャンスタイムの演出の魅力によりユーザーの 感情を高めている。ガチャ関連の演出によりユーザーの感情を高めている。等 2 演出 音 アニメ UIの操作感・挙動・演出の魅力によりユーザーの 感を高めている UIの挙動・エフェクト・画面効果・操作感、カメラワークの心地よさや迫力により、 ユーザーの感情を高めている。 3 解り易さ UIの画面用途、ゲーム攻略についての説明が 解り易い チュートリアルや遊び方が解り易い、収穫・アップグレードや解放が解り易い。 回数/時間制限、残量/所持数/必要数/達成数/上限/下限等の表記が解り易い。等 4 アート世 界観 UIのビジュアルが統一され魅力的である UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され魅力的である。 異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的である。等 5 使い易さ UIパーツの高い有用性により使い易い 同操作で、複数操作方法が実装され、使い易い。自動バトルボタン、倍速バトルボタンがゲーム を攻略する上で使い易い。残バッテリーや時計表示が実装されていて使い易い。等 6 アート 世界観 UIを構成しているパーツや背景・装飾が 魅力的である UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的である。 またはUI機能とビジュアルが世界観として一致していて魅力的。等 7 演出 音 アニメ サウンドの魅力によりユーザーの感情を 高めている BGM/SE/ボイスによりユーザーの感情を高めている。 8 仕様 UIの仕様によりゲームが遊びやすい ホーム画面までの遷移が近い、バトルまでの遷移が近い、ガチャまでの遷移が近いなど、 目的の遷移が近い。またはゲームのプレイスタイルによって機能変更が出来て遊びやすい。等 9 使い易さ UIビジュアルと機能が一致していて使い易い タッパブル・スワイパブルかどうかがビジュアルから予測できる。快適且つ直観的に移動、 遷移ができる。等 10 見易さ UIの文字の可読性が高い為見易い 適切な文字の大きさ、色、文量、で表示されている。可読性の高いフォントを選定し、表示している。 Good UI 10 Select Check sheet ※2016年8月時点UI Discussion チェックボックス ※チェックが多い ほどGoodUI!
  110. 110. 重要度 概要 詳細 1 演出 音 アニメ UIの演出不足・演出過多によりユーザーの感情を高め ていない ゲームクリア、ガチャ、レベルアップなど、ユーザー称賛時の演出不足。 ゲームスタート時の演出不足、音による感情想起不足、エフェクトで演出過多。 2 演出 音 アニメ UIの文字の可読性が低い為見難い 文字の大きさ、色、効果、テキスト量、見切れ、改行、選定ミス、文字詰め、文字間隔、 ローカライズが要因で見難い。等 3 解り易さ UIパーツの機能が不足している為使いづらい 戻るボタン、もしくは戻り操作が難解で使いづらい。 閉じる・削除の操作が難解で使いづらい。オート、スキップ、倍速機能の不足、一括決定、一括選択、一括購入、お まかせ編成機能の不足。UIパーツの機能過多または機能不足。等 4 アート 世界観 UIのビジュアル要素(UI、フォント、キャラクター画像、 背景)が整理されてない為解りにくい TOPまたはホーム画面、ガチャ画面、お知らせ画面、デッキ編成、 ステージセレクト画面の情報整理が出来ておらず解りにくい。等 5 使い易さ UIの画面用途、ゲーム攻略についての説明が不足して いる為解りにくい ボタン同士の配置の問題で誤操作が発生する。キャラクター移動時に誤操作、 タップスワイプ操作の受付範囲の不備で誤操作を起こす。等 6 アート 世界観 UIが誤操作を招く為使いづらい UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的である。 またはUI機能とビジュアルが世界観として一致していて魅力的。等 7 演出 音 アニメ UIのビジュアルから操作方法や機能が予測できない為 解りにくい タッパブル、スクローラブルなのかがビジュアルから予測できない、バトル・パズル時の操作方法がわからない、ボタ ンビジュアルから遷移先が予測できない。等 8 仕様 UIの仕様に課題があり遊びずらい 目的の遷移・操作・閲覧までの遷移が遠い、または無駄な遷移がある。 ホーム画面、リザルト画面、クエスト選択画面までの遷移が多い。等 9 使い易さ UIビジュアルや文言が一般的でない為解りにくい 「はい・いいえ」ボタン色や配置が一般的でない、文言表記、アイコンデザインが一般的でない。等 10 見易さ UIのビジュアル品質が低い UIを構成する要素のビジュアルが手抜きに見え、品質が低い。UI全体が矩形で構成されていて単調、 バナーが魅力的ではない。等 Bad UI 10 Select Check sheet ※2016年8月時点UI Discussion
  111. 111. 1. 自己紹介 2. UIデザイン 課題に対する対策・効果 3. GoodUIBadUI紹介 4. まとめ 5. 質疑応答 本日の流れ
  112. 112. BadUIを代表する 2分類 GoodUIを代表する 2分類
  113. 113. 解り易さ Bad UIを 改善するなら この二つ! 演出 音 アニメ 解り易さ 使い易さ Good UIを 目指して品質を 高めるのであれば この二つ!
  114. 114. コメント表やチェックシートを 活用して、UIをレビューしよう!
  115. 115. 今後の展望 DiscussionUI
  116. 116. 今後の展望 ①100タイトルレビューの達成 ②Good/Badコメント数 上位10タイトル 下位10タイトル から導き出される共通項や 傾向を洗い出す!
  117. 117. よくあるご質問 DiscussionUI
  118. 118. 解を得る事よりも考えることが大事なので、 その場で解決策を決めきる必要はない。 着地しない議論は次週に向けてメンバーに調べてもらう か、ファシリテーターが持ち帰って一般的に、もしくは業界 的に何がスタンダードなのかを調べることもある。 Q A Q&A ジュニアメンバー、シニアメンバー混合でディスカ ッションをしているという事だが、 改善案を議論するも、なかなか解が出ない場合、 もしくは 解決策が複数出すぎてどれが正しいのかわから ないといったことがある が、そういう時は どうするのか?
  119. 119. UIチェックシートを、自社制作のタイトルに当てはめて検証 していくという試みはやっているのか? 100タイトルなど、まとまったコメント数の集計をもとにし たチェックシートは最近出来上がったばかりなので、 これから実績を積んでいく予定。 将来的にはチェックシ ートを軸に、広い組織や沢山の人数で評価する上での 軸になればよいと考えている。 Q A Q&A
  120. 120. UIチェックシートを活用しつつ 自分でUIを作るとなった時 にバイブルみたいになってしまう懸念はないのか? UIは厳密にいうとゲームの種類やターゲットによって正 解も様々なので、明確に言えない部分がある。 チェックシートがすべての解ではないと思ってる。 チェックシートはあくまで客観的な目安程度に受け取って ほしい。 Q A Q&A
  121. 121. 意見が集まる分類にこそ 品質改善・向上ポイントがある! まとめ とは、 品質向上効率化+育成促進の 二つが叶うスキームである! DiscussionUI
  122. 122. を実践し、 ユーザーがどこに 注目しているのかを体感しよう! 注目ポイントを絞って作業し、 効率的に品質を高めよう! まとめ DiscussionUI
  123. 123. your Attention!Thanks for ご清聴ありがとうございました!

×