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デザインの品質を
2015/11/12 グリー株式会社 長﨑二郎
1. 自己紹介・ご挨拶
2. UIデザイン 効率についての課題
3. 課題に対しての取り組みと効果
4. GoodUIBadUI紹介
5. まとめ
6. 質疑応答
本日の流れ
1. 自己紹介・ご挨拶
2. UIデザイン 効率についての課題
3. 課題に対しての取り組みと効果
4. GoodUIBadUI紹介
5. まとめ
6. 質疑応答
Wright Flyer Studios 2
Art Group SeniorManager
UI UX Team Manager
長﨑 二郎
Jiro Nagasaki
プラットホーム
• コンシューマゲーム
• アーケードゲーム
• PCゲーム
• モバイルソーシャルゲーム
(Web/Native)
ジャンル
• アクション
• RPG
• アドベンチャー
• シュミレーション
• スポーツ
• ホラー
• ...
本セッションの概要
モバイルゲームUIデザインについて、
既出タイトルの検証結果を元に
効果的に品質を向上させる方法を解説します
※UIビジュアルデザイン寄りの内容となります
1. 自己紹介・ご挨拶
2. UIデザイン 効率についての課題
3. 課題に対しての取り組みと効果
4. GoodUIBadUI紹介
5. まとめ
6. 質疑応答
UIデザインに
携わっている方
どれくらいいらっしゃいますか?
なかなか大変ですよね…!
お疲れ様です!
レイアウト
SE
UIエフェクト
統一性
解り易さ
ビジュアルの
美しさ
UI
アニメーション
使い易さ
見易さ
心地良さ
可読性
レイアウト
SE
UIエフェクト
統一性
解り易さ
ビジュアルの
美しさ
UI
アニメーション
使い易さ
見易さ
心地良さ
特にどれが大事?
可読性
注意すべき事柄が多い
↓
あれもこれも全力でがんばる
↓
消耗する
気を付ける項目が多すぎて
やみくもにがんばると非効率
なんとか「注力ポイント」を
定めたい・・・
1. 自己紹介・ご挨拶
2. UIデザイン 効率についての課題
3. 課題に対しての取り組みと効果
4. GoodUIBadUI紹介
5. まとめ
6. 質疑応答
「注力ポイント」
「ユーザー視点で
認知度の高いポイント」
=
認知度の高い個所から
改善・ブラッシュアップ
↓
品質を効率的に
高められるのでは?
ユーザー視点に立って
認知度の高いポイントを
洗い出しその傾向をつかもう!
どのようにして?
?
とにかくゲームを沢山プレイして
情報収取し、傾向を導き出す!
認知度の高いポイントを
知る為に始めた試みが
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つの分類」にコメントを振り分ける
Good
コメント
Bad
コメント
③更に「7つの分類」にコメントを振り分ける
「7つの分類」とは?
演出
音
アニメ
アート
世界観
統一性
解り易さ見易さ使い易さ
仕様
UI Discussionのテスト運用時に挙がった
コメントから上記7つに精錬!個々のレビュー
コメントを網羅的に捉える!
③「Good」 「Bad」と「7つの分類」に
分けたコメントを1つのリストに記入
Good Bad
コメント入力例
DiscussionUI
分類 ①良い所 ②要因
「○○クエスト」 Goodコメント
分類 ①良い所 ②要因
「○○クエスト」 Goodコメント
良いと感じた
個所を記入!
分類 ①良い所 ②要因
「○○クエスト」 Goodコメント
良いと感じた
個所の要因を
記入!
分類 ①良い所 ②要因
「○○クエスト」 Goodコメント
7つの分類を
記入!
分類 ①良い所 ②要因
「○○クエスト」 Goodコメント
解り
易さ
使い
易さ
演出/音/
アニメ
アート
世界観
仕様
見易さ
統一性
7つの分類を
記入!
分類 ①課題 ②原因 ③解決案
「○○クエスト」 Badコメント
分類 ①課題 ②原因 ③解決案
「○○クエスト」 Badコメント
悪いと感じた
個所を記入!
分類 ①課題 ②原因 ③解決案
「○○クエスト」 Badコメント
悪いと感じた
個所の原因を
記入!
分類 ①課題 ②原因 ③解決案
「○○クエスト」 Badコメント
解り
易さ
使い
易さ
演出/音/
アニメ
アート
世界観
仕様
見易さ
統一性
7つの分類を
記入!
分類 ①課題 ②原因 ③解決案
「○○クエスト」 Badコメント
大
事
!
どうすれば
改善するかを
記入!
分類 ①良い所 ②要因
ロード画面の待ちが楽しい かわいいキャラクターが
アニメーションしている為
バトルが簡単にすぐ遊べる チュートリアルが解り易い為
ボタンが押しやすい 面積が大きい為
UI全体が世界観に合っていて
美しい
シンプルなデザイ...
分類 ①良い所 ②要因
ロード画面の待ちが楽しい かわいいキャラクターが
アニメーションしている為
バトルが簡単にすぐ遊べる チュートリアルが解り易い為
ボタンが押しやすい 面積が大きい為
UI全体が世界観に合っていて
美しい
シンプルなデザイ...
分類 ①良い所 ②要因
ロード画面の待ちが楽しい かわいいキャラクターが
アニメーションしている為
バトルが簡単にすぐ遊べる チュートリアルが解り易い為
ボタンが押しやすい 面積が大きい為
UI全体が世界観に合っていて
美しい
シンプルなデザイ...
分類 ①良い所 ②要因
ロード画面の待ちが楽しい かわいいキャラクターが
アニメーションしている為
バトルが簡単にすぐ遊べる チュートリアルが解り易い為
ボタンが押しやすい 面積が大きい為
UI全体が世界観に合っていて
美しい
シンプルなデザイ...
分類 ①課題 ②原因 ③解決案
ボタンで押せる所が
解らない
フラット過ぎてボタ
ンぽくないので
ボタンを出っ張ら
せて目立たせる
ボタンが押しづらい 小さすぎる為 大きさ調整
勝利画面が寂しい エフェクトが無い為 派手に演出する
画面の情報が...
分類 ①課題 ②原因 ③解決案
ボタンで押せる所が
解らない
フラット過ぎてボタ
ンぽくないので
ボタンを出っ張ら
せて目立たせる
ボタンが押しづらい 小さすぎる為 大きさ調整
勝利画面が寂しい エフェクトが無い為 派手に演出する
画面の情報が...
分類 ①課題 ②原因 ③解決案
ボタンで押せる所が
解らない
フラット過ぎてボタ
ンぽくないので
ボタンを出っ張ら
せて目立たせる
ボタンが押しづらい 小さすぎる為 大きさ調整
勝利画面が寂しい エフェクトが無い為 派手に演出する
画面の情報が...
分類 ①課題 ②原因 ③解決案
ボタンで押せる所が
解らない
フラット過ぎてボタ
ンぽくないので
ボタンを出っ張ら
せて目立たせる
ボタンが押しづらい 小さすぎる為 大きさ調整
勝利画面が寂しい エフェクトが無い為 派手に演出する
画面の情報が...
分類 ①課題 ②原因 ③解決案
ボタンで押せる所が
解らない
フラット過ぎてボタ
ンぽくないので
ボタンを出っ張ら
せて目立たせる
ボタンが押しづらい 小さすぎる為 大きさ調整
勝利画面が寂しい エフェクトが無い為 派手に演出する
画面の情報が...
方法③の説明でした
方法④に続きます
DiscussionUI
←今ココ
Goodコメント Badコメント
アート
世界観
演出
音
アニメ
使い易さ
統一性
使い易さ
解り易さ
④7つの分類別に集計し割合を調査する
演出
音
アニメ
アート
世界観
統一性
解り易さ
見易
さ
使い易さ
仕様
演出
音
アニメ
アー...
Goodコメント Badコメント
アート
世界観
演出
音
アニメ
使い易さ
統一性
使い易さ
解り易さ
④7つの分類別に集計し割合を調査する
演出
音
アニメ
アート
世界観
統一性
解り易さ
見易
さ
使い易さ
仕様
演出
音
アニメ
アー...
Good!
Bad…
Good!
⑤集計結果を元に、ディスカッションする
同じ空間でUIの良し悪しについて話し合う事で
スタッフの目線あわせや価値観の統一、育成に
もつなげられる!
①~⑤を毎週繰り返して情報を蓄積
①調査するタイトルを選定する
②複数人でそれぞれプレイする
③「Good」 「Bad」と「7つの分類」に
分けたコメントを1つのリストに記入
④7つの分類別に集計し割合を調査する
⑤集計結果をディスカッションする
得られた効果
育成面
効率面
DiscussionUI
毎週継続的にゲームをプレイする事で、
メンバーの研究意識向上、トレンド把握!
得られた効果:育成について
毎週継続的にゲームをプレイする事で、
メンバーの研究意識向上、トレンド把握!
他社と自社ゲームのUIデザインの
品質差を実感!競争意識が芽生えた!
得られた効果:育成について
他のメンバーと同じ空間でディスカッション
する事で、ジュニアメンバーのレビューコメ
ント精度が向上し、価値観を画一化!
毎週継続的にゲームをプレイする事で、
メンバーの研究意識向上、トレンド把握!
得られた効果:育成について
他社と自社ゲームの...
得られた効果:効率化について
メンバー間で共通言語が生まれ、
コミュニケーションが活性化!
デザイン作業のゴールに早く到達できた!
メンバー間で共通言語が生まれ、
コミュニケーションが活性化!
デザイン作業のゴールに早く到達できた!
得られた効果:効率化について
他社ゲームの課題について、修正案を考える事
で、改善思考力を強化!他者に指導を仰がずと
も課題解決できるようにな...
品質向上における注力ポイントが明確に
なる事で的を絞った作業に力を注ぐこと
が出来、作業を迷わず進められた!
メンバー間で共通言語が生まれ、
コミュニケーションが活性化!
デザイン作業のゴールに早く到達できた!
他社ゲームの課題について、修正案...
まとめ
既出ゲームのUIデザインについて
レビューし、ユーザー認知度の
高い分類の傾向を知ろう!
1. 自己紹介・ご挨拶
2. UIデザイン 効率についての課題
3. 課題に対しての取り組みと効果
4. GoodUIBadUI紹介
5. まとめ
6. 質疑応答
Good UI Bad UI 7つの分類に
コメントを分け、数が多かった
事象それぞれ10個を紹介
DiscussionUI
演出
音
アニメ
アート
世界観
統一性 解り易さ見易さ 使い易さ 仕様
Bad UI 10 Select
Good UI10 Select
Bad UI 10 Select
気を付けましょう!
Good UI10 Select
Bad UI 10 Select
気を付けましょう!
Good UI10 Select
模範にしましょう!
Bad UI
10 Select(378コメントを集計)
DiscussionUI
UIパーツの機能が不足している為使いづらい1 使い易さ
ユーザーは「進む」⇔「戻る」や「閉じる」操作
を繰り返してゲームを理解する。
それらの導線を見失わないように目立たせよう!
戻るボタンどこ?
閉じるボタン
どこ?
UIの文字の可読性が低い為見難い2 見易さ
はみ出してる!
UIの文字の可読性が低い為見難い2 見易さ
UIの文字の可読性が低い為見難い2 見易さ
はみ出してる!
小さすぎる!
UIの文字の可読性が低い為見難い2 見易さ
はみ出してる!
小さすぎる!
そこで改行?
UIの文字の可読性が低い為見難い2 見易さ
はみ出してる!
小さすぎる!
そこで改行?
書体
変わってる!
まずユーザーに何をしてもらいたいかを
明確に表示しよう。操作を少しずつ説明
したいね!
UIの画面用途や攻略についての説明が
不足している為解りにくい
3 解り易さ
UIの演出不足・演出過多により
ユーザーの感情を高めていない
4 演出/音/アニメ
ゲーム進行や獲得する要素の重要度を考慮し
て、適切に演出するよう心がけよう!
演出
過多!
演出
不足!
UIのビジュアル要素が整理されていない為解りにくい5
ごちゃごちゃ
している!
解り易さ
「解り易さ」「使い易さ」「ビジュアルの魅力」
この3つをバランスよく保つことが大事!
ごちゃごちゃ
している!
UIのビジュアルや文言が一般的でない為解りにくい
ガチャの事を
「ガチャ」
6 解り易さ
ガチャの事を
「ガチャ」
ガチャの事を
「召喚」
UIのビジュアルや文言が一般的でない為解りにくい6 解り易さ
ガチャの事を
「ガチャ」
ガチャの事を
「召喚」
ガチャの事を
「呼び出し」
UIのビジュアルや文言が一般的でない為解りにくい6 解り易さ
ガチャの事を
「ガチャ」
ガチャの事を
「召喚」
ガチャの事を
「呼び出し」×
UIのビジュアルや文言が一般的でない為解りにくい6 解り易さ
ガチャの事を
「ガチャ」
ガチャの事を
「召喚」
ガチャの事を
「呼び出し」×
UIのビジュアルや文言が一般的でない為解りにくい6 解り易さ
ゲームの世界観に則した文言で演出する事は大切
だけど、言葉のセレクトで一般性がないと解りに
くくなる!
UIが誤操作を招く為使いづらい7 使い易さ
主導線につながるボタン、特にゲーム攻略に
関連するボタンは、ユーザーテストを通じて
誤操作を十分検証し、改善しよう!
押しづらい!
UI全体のビジュアルやパーツデザイン・文字に
統一性や規則性がない
8 統一性
UI全体のビジュアルやパーツデザイン・文字に
統一性や規則性がない
8 統一性
色も形も
統一感がなく
バラバラ・・
UI全体のビジュアルやパーツデザイン・文字に
統一性や規則性がない
8 統一性
色も形も
統一感がなく
バラバラ・・
ボタンの
質感になんだか
違和感・・
フォントが
ここだけ
違う・・・
UI全体のビジュアルやパーツデザイン・文字に
統一性や規則性がない
8 統一性
色も形も
統一感がなく
バラバラ・・
ボタンの
質感になんだか
違和感・・
なぜ急に
縦書き・・・
UI全体のビジュアルやパーツデザイン・文字に
統一性や規則性がない
8 統一性
フォントが
ここだけ
違う・・・
色も形も
統一感がなく
バラバラ・・
ボタンの
質感になんだか
違和感・・
プログレスバーは必須!
加えてロード時間を「退屈と思わせない」
工夫が大切だね!
読み込み時間やロードが頻繁に起こる為
使いづらい
9 使い易さ
×
UIを構成している背景描写や装飾が過多、唐突10
装飾盛り
過ぎ!
見易さ
ついつい装飾やエフェクトを盛りたくなる
けど、企画意図に沿わない行き過ぎた表現
には注意しないとね!
見易さ
使い易さ
統一性
使い易さ
解り易さ
解り易さ演出/音/アニメ
解り易さ
見易さ使い易さ
① ② ③
④ ⑤
⑥
⑦
⑧
⑨
⑩
BadUI傾向
先ほどの10選で述べてきた
Bad UIの傾向
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
BadUI傾向
「使い易さ」(30.3%)
使い易さ
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
BadUI傾向
「解り易さ」(28.2%)
解り易さ
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
使い易さ
BadUI傾向
操作や画面遷移が快適でないとストレス
使い易さ
使い易さ使い易さ
使い易さ
BadUI傾向
「情報が認識できない」
「遊び方が分からない」はストレス
解り易さ
解り易さ解り易さ 解り易さ
BadUI傾向
BadUIは
使い難さ、解り難さを改善しよう!
解り易さ使い易さ
BadUI傾向
重要
度
概要 詳細
1 UIパーツの機能が不足している為使いづらい。 戻るボタン、もしくは戻り操作が難解で使いづらい。
閉じる・削除の操作が難解で使いづらい。タップして動くが機能し
ない機能過多、UIの機能不足。
2 UIの文字の可読性が低い...
重要
度
概要 詳細
1 UIパーツの機能が不足している為使いづらい。 戻るボタン、もしくは戻り操作が難解で使いづらい。
閉じる・削除の操作が難解で使いづらい。タップして動くが機能し
ない機能過多、UIの機能不足。
2 UIの文字の可読性が低い...
重要
度
概要 詳細
1 UIパーツの機能が不足している為使いづらい。 戻るボタン、もしくは戻り操作が難解で使いづらい。
閉じる・削除の操作が難解で使いづらい。タップして動くが機能し
ない機能過多、UIの機能不足。
2 UIの文字の可読性が低い...
重要
度
概要 詳細
1 UIパーツの機能が不足している為使いづらい。 戻るボタン、もしくは戻り操作が難解で使いづらい。
閉じる・削除の操作が難解で使いづらい。タップして動くが機能し
ない機能過多、UIの機能不足。
2 UIの文字の可読性が低い...
重要
度
概要 詳細
1 UIパーツの機能が不足している為使いづらい。 戻るボタン、もしくは戻り操作が難解で使いづらい。
閉じる・削除の操作が難解で使いづらい。タップして動くが機能し
ない機能過多、UIの機能不足。
2 UIの文字の可読性が低い...
Good UI
10 Select(230コメントを集計)
DiscussionUI
UIのビジュアルが統一され魅力的である
ウィンドウ メインボタン フォント
バナー
ゲージ
スライダー戻るボタン
閉じるボタン
タブ
プルダウン
メニュー
チェック
ボックス
インフィニット
インジケーター
スイッチ
ページャー
アイコン類
ア...
UIの操作感・挙動・演出の魅力により
ユーザー感情を高めている
2 演出/音/アニメ
ユーザーが端末に入力した際のデザインや挙動は
重要!心地よいビジュアルやアニメーションを
追及しよう!
爽快!
華やか!
UIの画面ごとの演出により
ユーザーの感情を高めている
3 演出/音/アニメ
派手に演出したり、没入感のあるログインボ
ーナスを用いてユーザーの気分を高めよう!
没入で
きる!
レベルアップ・収穫
の可否がわかりやす
い!
闘い方が
解り易
い!
UIの画面用途、ゲーム攻略についての説明が
解り易い
4 解り易さ
解りやす過ぎるぐらいの明快さで
ユーザーに遊び方や有益な情報を提供しよう!
UIを構成しているパーツや背景・装飾が
魅力的である
5 アート/世界観
キャラ・背景・UI・エフェクト等
全てのアート要素に統一感が出ると
製品としての一体感が増し、
アピールしやすいんだ!
サウンドの魅力によりユーザーの
感情を高めている
♪BGM ♪SE ♪ボイス
声優の声で
ゲームに
没入できる!
ドキドキワクワク
して気分が
盛り上がる!
ボタンを押すと
音が
気持ち良い!
感情 UP!
6 演出/音/アニメ
UIパーツの高い有用性により使い易い(その1)7
ボタン一つで
サクサク
切り替え!
使い易さ
同じ操作でも、複数の操作方法を用意する事
で、使い勝手がアップ!
スワイプで
も
拡縮!
UIパーツの高い有用性により使い易い(その2)7 使い易さ
同じ操作でも、複数の操作方法を用意する事
で、使い勝手がアップ!
UIパーツの高い有用性により使い易い(その2)7 使い易さ
同じ操作でも、複数の操作方法を用意する事
で、使い勝手がアップ!
UI全体の演出によりユーザーの感情を高めている8 演出/音/アニメ
ユーザーに長く遊んで頂く為には、
消費面やゲーム攻略外でのおもてなしが大事!
画面の遷移が容易である9 仕様
バトル
までが遠い
バトル
までが近い
最短の画面遷移で遊べるように導線を整理しよう!
×
文言の演出によりユーザーの感情を高めている10 演出/音/アニメ
×
文言の演出によりユーザーの感情を高めている10 演出/音/アニメ
形式的な文言の表示だけでは没入感も半減。
ユーザーがゲーム内世界に入り込んだよう
な気分にさせる文言をセレクトしよう!
♪BGM/SE/ボイス
演出/音/アニメ
使い易さ
Good UI傾向とまとめ
アート/世界観
① ② ③ ④
⑤ ⑥ ⑦
⑧
⑨
⑩
演出/音/アニメ 演出/音/アニメ 解り易さ
アート/世界観
アート/世界観 仕様 演出/音/アニメ
先ほどの10選で述べてきた
Good UIの傾向
Good UI傾向とまとめ
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
「演出・アニメ・音」(41.5%)
演出
音
アニメ
Good UI傾向とまとめ
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
「アート・世界観」(23.5%)
アート
世界観
© GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
Good UI傾向とまとめ
演出
音
アニメ
感情の推移をデザインしよう!
演出
音
アニメ
Good UI傾向とまとめ
♪BGM/SE/ボイス
演出/音/アニメ 演出/音/アニメ演出/音/アニメ 演出/音/アニメ
製品として「ビジュアルの一体感」が大事
アート
世界観
Good UI傾向とまとめ
アート/世界観 アート/世界観 アート/世界観
「演出・アニメ・音」
「アート・世界観」
を向上させると
Good UIになる!
演出
音
アニメ
Good UI傾向とまとめ
アート
世界観
重要
度
概要 詳細
1
UIのビジュアルが統一され魅力的である。 UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され
魅力的である。
異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的で...
重要
度
概要 詳細
1
UIのビジュアルが統一され魅力的である。 UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され
魅力的である。
異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的で...
重要
度
概要 詳細
1
UIのビジュアルが統一され魅力的である。 UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され
魅力的である。
異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的で...
重要
度
概要 詳細
1
UIのビジュアルが統一され魅力的である。 UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され
魅力的である。
異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的で...
重要
度
概要 詳細
1
UIのビジュアルが統一され魅力的である。 UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され
魅力的である。
異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的で...
1. 自己紹介・ご挨拶
2. UIデザイン 効率についての課題
3. 課題に対しての取り組みと効果
4. GoodUIBadUI紹介
5. まとめ
6. 質疑応答
BadUIを代表する
2分類
GoodUIを代表する
2分類
Bad UIを
改善するなら
この二つ!
演出
音
アニメ
アート
世界観
解り易さ 使い易さ
Good UIを
目指して品質を
高めるのであれば
この二つ!
コメント表やチェックシートを
活用して、UIをレビューしよう!
他のメンバーと同じ空間でディスカッション
する事で、ジュニアメンバーのレビューコメ
ント精度が向上し、価値観を画一化!
毎週継続的にゲームをプレイする事で、
メンバーの研究意識向上、トレンド把握!
他社と自社ゲームのUIデザインの
品質差を実感...
品質向上における注力ポイントが明確に
なる事で的を絞った作業に力を注ぐこと
が出来、作業を迷わず進められた!
メンバー間で共通言語が生まれ、
コミュニケーションが活性化!
デザイン作業のゴールに早く到達できた!
他社ゲームの課題について、修正案...
意見が集まる分類にこそ
品質改善・向上ポイントがある!
おさらい
とは、
育成促進+品質向上効率化の
二つが叶うスキームである!
DiscussionUI
を実践し、
ユーザーがどこに
注目しているのかを体感しよう!
注目ポイントを絞って作業し、
効率的に品質を高めよう!
まとめ
DiscussionUI
your Attention!Thanks for
ご清聴ありがとうございました!
応答質疑
Upcoming SlideShare
Loading in …5
×

Gcm#3 uiデザインの品質を効率的に向上させるには?

35,764 views

Published on

GREE Creators' Meetup#3
https://youtu.be/xkbk93k6H-U
【UIデザインの品質を効率的に向上させるには?】

Published in: Mobile
  • Be the first to comment

Gcm#3 uiデザインの品質を効率的に向上させるには?

  1. 1. 効率的に向上させるには? UIデザインの品質を 2015/11/12 グリー株式会社 長﨑二郎
  2. 2. 1. 自己紹介・ご挨拶 2. UIデザイン 効率についての課題 3. 課題に対しての取り組みと効果 4. GoodUIBadUI紹介 5. まとめ 6. 質疑応答 本日の流れ
  3. 3. 1. 自己紹介・ご挨拶 2. UIデザイン 効率についての課題 3. 課題に対しての取り組みと効果 4. GoodUIBadUI紹介 5. まとめ 6. 質疑応答
  4. 4. Wright Flyer Studios 2 Art Group SeniorManager UI UX Team Manager 長﨑 二郎 Jiro Nagasaki
  5. 5. プラットホーム • コンシューマゲーム • アーケードゲーム • PCゲーム • モバイルソーシャルゲーム (Web/Native) ジャンル • アクション • RPG • アドベンチャー • シュミレーション • スポーツ • ホラー • 知育 etc… 業務 • UIデザイン • 採用 • 育成 ゲームUI歴 15年目 経歴
  6. 6. 本セッションの概要 モバイルゲームUIデザインについて、 既出タイトルの検証結果を元に 効果的に品質を向上させる方法を解説します ※UIビジュアルデザイン寄りの内容となります
  7. 7. 1. 自己紹介・ご挨拶 2. UIデザイン 効率についての課題 3. 課題に対しての取り組みと効果 4. GoodUIBadUI紹介 5. まとめ 6. 質疑応答
  8. 8. UIデザインに 携わっている方 どれくらいいらっしゃいますか?
  9. 9. なかなか大変ですよね…! お疲れ様です!
  10. 10. レイアウト SE UIエフェクト 統一性 解り易さ ビジュアルの 美しさ UI アニメーション 使い易さ 見易さ 心地良さ 可読性
  11. 11. レイアウト SE UIエフェクト 統一性 解り易さ ビジュアルの 美しさ UI アニメーション 使い易さ 見易さ 心地良さ 特にどれが大事? 可読性
  12. 12. 注意すべき事柄が多い ↓ あれもこれも全力でがんばる ↓ 消耗する
  13. 13. 気を付ける項目が多すぎて やみくもにがんばると非効率 なんとか「注力ポイント」を 定めたい・・・
  14. 14. 1. 自己紹介・ご挨拶 2. UIデザイン 効率についての課題 3. 課題に対しての取り組みと効果 4. GoodUIBadUI紹介 5. まとめ 6. 質疑応答
  15. 15. 「注力ポイント」 「ユーザー視点で 認知度の高いポイント」 =
  16. 16. 認知度の高い個所から 改善・ブラッシュアップ ↓ 品質を効率的に 高められるのでは?
  17. 17. ユーザー視点に立って 認知度の高いポイントを 洗い出しその傾向をつかもう!
  18. 18. どのようにして? ?
  19. 19. とにかくゲームを沢山プレイして 情報収取し、傾向を導き出す!
  20. 20. 認知度の高いポイントを 知る為に始めた試みが
  21. 21. DiscussionUI
  22. 22. ③ UIの効果的な改善ポイント明確化 他社と自社ゲームの品質差の認識 改善思考力の強化 を目的とした会議体 DiscussionUI とは?
  23. 23. 簡単に言うと、 既出ゲームのUIデザインについて レビューし、良い所、悪い所の 傾向を知ろうという試みです Good? Bad?
  24. 24. 概要 DiscussionUI
  25. 25. 日程 :2015年6月末~実施中 メンバー:社内デザイナー(UIデザイナー以外も含む) 参加人数 :約15名(回によって変動) ディスカッション頻度:毎週1回(一回あたり1時間) 調査するゲーム :Nativeモバイルゲーム 調査するゲーム本数:毎週2本をレビュー 1タイトルのプレイの目安:チュートリアルとゲームサイクルを 2,3周プレイした状態 DiscussionUI
  26. 26. なぜ社内で? ↓
  27. 27. なぜ社内で? ↓ 他社調査の依頼も考えたが 情報がフィードバックされるのみ で、社内メンバーのナレッジ 蓄積に繋がらない
  28. 28. なぜ社内で? ↓ 他社調査の依頼も考えたが 情報がフィードバックされるのみ で、社内メンバーのナレッジ 蓄積に繋がらない ↓ 社内でやってみよう!
  29. 29. 具体的な手順は? DiscussionUI
  30. 30. ①~⑤を毎週繰り返して情報を蓄積 ①調査するタイトルを選定する ②複数人でそれぞれプレイする ③「Good」 「Bad」と「7つの分類」に 分けたコメントを1つのリストに記入 ④7つの分類別に集計し割合を調査する ⑤集計結果をディスカッションする
  31. 31. ①調査するタイトルを選定する 選定ポイント 1:UI自体の品質が高いゲームである 2:過去にレビューしたゲームのジャンルに 偏りがないタイトルである 3:トレンドタイトルである
  32. 32. ②複数人でそれぞれプレイする
  33. 33. Good コメント Bad コメント ③UIについての感想を「Good」 「Bad」 として一つのリストに記入
  34. 34. Good コメント Bad コメント ③更に「7つの分類」にコメントを振り分ける
  35. 35. Good コメント Bad コメント ③更に「7つの分類」にコメントを振り分ける
  36. 36. 「7つの分類」とは? 演出 音 アニメ アート 世界観 統一性 解り易さ見易さ使い易さ 仕様 UI Discussionのテスト運用時に挙がった コメントから上記7つに精錬!個々のレビュー コメントを網羅的に捉える!
  37. 37. ③「Good」 「Bad」と「7つの分類」に 分けたコメントを1つのリストに記入 Good Bad
  38. 38. コメント入力例 DiscussionUI
  39. 39. 分類 ①良い所 ②要因 「○○クエスト」 Goodコメント
  40. 40. 分類 ①良い所 ②要因 「○○クエスト」 Goodコメント 良いと感じた 個所を記入!
  41. 41. 分類 ①良い所 ②要因 「○○クエスト」 Goodコメント 良いと感じた 個所の要因を 記入!
  42. 42. 分類 ①良い所 ②要因 「○○クエスト」 Goodコメント 7つの分類を 記入!
  43. 43. 分類 ①良い所 ②要因 「○○クエスト」 Goodコメント 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 見易さ 統一性 7つの分類を 記入!
  44. 44. 分類 ①課題 ②原因 ③解決案 「○○クエスト」 Badコメント
  45. 45. 分類 ①課題 ②原因 ③解決案 「○○クエスト」 Badコメント 悪いと感じた 個所を記入!
  46. 46. 分類 ①課題 ②原因 ③解決案 「○○クエスト」 Badコメント 悪いと感じた 個所の原因を 記入!
  47. 47. 分類 ①課題 ②原因 ③解決案 「○○クエスト」 Badコメント 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 見易さ 統一性 7つの分類を 記入!
  48. 48. 分類 ①課題 ②原因 ③解決案 「○○クエスト」 Badコメント 大 事 ! どうすれば 改善するかを 記入!
  49. 49. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ
  50. 50. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ
  51. 51. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ
  52. 52. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ
  53. 53. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ
  54. 54. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ
  55. 55. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ
  56. 56. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ
  57. 57. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ
  58. 58. 方法③の説明でした 方法④に続きます DiscussionUI ←今ココ
  59. 59. Goodコメント Badコメント アート 世界観 演出 音 アニメ 使い易さ 統一性 使い易さ 解り易さ ④7つの分類別に集計し割合を調査する 演出 音 アニメ アート 世界観 統一性 解り易さ 見易 さ 使い易さ 仕様 演出 音 アニメ アート 世界観 統一性 解り易さ 見易 さ 使い易さ 仕様
  60. 60. Goodコメント Badコメント アート 世界観 演出 音 アニメ 使い易さ 統一性 使い易さ 解り易さ ④7つの分類別に集計し割合を調査する 演出 音 アニメ アート 世界観 統一性 解り易さ 見易 さ 使い易さ 仕様 演出 音 アニメ アート 世界観 統一性 解り易さ 見易 さ 使い易さ 仕様
  61. 61. Good! Bad… Good! ⑤集計結果を元に、ディスカッションする 同じ空間でUIの良し悪しについて話し合う事で スタッフの目線あわせや価値観の統一、育成に もつなげられる!
  62. 62. ①~⑤を毎週繰り返して情報を蓄積 ①調査するタイトルを選定する ②複数人でそれぞれプレイする ③「Good」 「Bad」と「7つの分類」に 分けたコメントを1つのリストに記入 ④7つの分類別に集計し割合を調査する ⑤集計結果をディスカッションする
  63. 63. 得られた効果 育成面 効率面 DiscussionUI
  64. 64. 毎週継続的にゲームをプレイする事で、 メンバーの研究意識向上、トレンド把握! 得られた効果:育成について
  65. 65. 毎週継続的にゲームをプレイする事で、 メンバーの研究意識向上、トレンド把握! 他社と自社ゲームのUIデザインの 品質差を実感!競争意識が芽生えた! 得られた効果:育成について
  66. 66. 他のメンバーと同じ空間でディスカッション する事で、ジュニアメンバーのレビューコメ ント精度が向上し、価値観を画一化! 毎週継続的にゲームをプレイする事で、 メンバーの研究意識向上、トレンド把握! 得られた効果:育成について 他社と自社ゲームのUIデザインの 品質差を実感!競争意識が芽生えた!
  67. 67. 得られた効果:効率化について メンバー間で共通言語が生まれ、 コミュニケーションが活性化! デザイン作業のゴールに早く到達できた!
  68. 68. メンバー間で共通言語が生まれ、 コミュニケーションが活性化! デザイン作業のゴールに早く到達できた! 得られた効果:効率化について 他社ゲームの課題について、修正案を考える事 で、改善思考力を強化!他者に指導を仰がずと も課題解決できるようになった!
  69. 69. 品質向上における注力ポイントが明確に なる事で的を絞った作業に力を注ぐこと が出来、作業を迷わず進められた! メンバー間で共通言語が生まれ、 コミュニケーションが活性化! デザイン作業のゴールに早く到達できた! 他社ゲームの課題について、修正案を考える事 で、改善思考力を強化!他者に指導を仰がずと も課題解決できるようになった! 得られた効果:効率化について
  70. 70. まとめ 既出ゲームのUIデザインについて レビューし、ユーザー認知度の 高い分類の傾向を知ろう!
  71. 71. 1. 自己紹介・ご挨拶 2. UIデザイン 効率についての課題 3. 課題に対しての取り組みと効果 4. GoodUIBadUI紹介 5. まとめ 6. 質疑応答
  72. 72. Good UI Bad UI 7つの分類に コメントを分け、数が多かった 事象それぞれ10個を紹介 DiscussionUI 演出 音 アニメ アート 世界観 統一性 解り易さ見易さ 使い易さ 仕様
  73. 73. Bad UI 10 Select Good UI10 Select
  74. 74. Bad UI 10 Select 気を付けましょう! Good UI10 Select
  75. 75. Bad UI 10 Select 気を付けましょう! Good UI10 Select 模範にしましょう!
  76. 76. Bad UI 10 Select(378コメントを集計) DiscussionUI
  77. 77. UIパーツの機能が不足している為使いづらい1 使い易さ ユーザーは「進む」⇔「戻る」や「閉じる」操作 を繰り返してゲームを理解する。 それらの導線を見失わないように目立たせよう! 戻るボタンどこ? 閉じるボタン どこ?
  78. 78. UIの文字の可読性が低い為見難い2 見易さ
  79. 79. はみ出してる! UIの文字の可読性が低い為見難い2 見易さ
  80. 80. UIの文字の可読性が低い為見難い2 見易さ はみ出してる! 小さすぎる!
  81. 81. UIの文字の可読性が低い為見難い2 見易さ はみ出してる! 小さすぎる! そこで改行?
  82. 82. UIの文字の可読性が低い為見難い2 見易さ はみ出してる! 小さすぎる! そこで改行? 書体 変わってる!
  83. 83. まずユーザーに何をしてもらいたいかを 明確に表示しよう。操作を少しずつ説明 したいね! UIの画面用途や攻略についての説明が 不足している為解りにくい 3 解り易さ
  84. 84. UIの演出不足・演出過多により ユーザーの感情を高めていない 4 演出/音/アニメ ゲーム進行や獲得する要素の重要度を考慮し て、適切に演出するよう心がけよう! 演出 過多! 演出 不足!
  85. 85. UIのビジュアル要素が整理されていない為解りにくい5 ごちゃごちゃ している! 解り易さ 「解り易さ」「使い易さ」「ビジュアルの魅力」 この3つをバランスよく保つことが大事! ごちゃごちゃ している!
  86. 86. UIのビジュアルや文言が一般的でない為解りにくい ガチャの事を 「ガチャ」 6 解り易さ
  87. 87. ガチャの事を 「ガチャ」 ガチャの事を 「召喚」 UIのビジュアルや文言が一般的でない為解りにくい6 解り易さ
  88. 88. ガチャの事を 「ガチャ」 ガチャの事を 「召喚」 ガチャの事を 「呼び出し」 UIのビジュアルや文言が一般的でない為解りにくい6 解り易さ
  89. 89. ガチャの事を 「ガチャ」 ガチャの事を 「召喚」 ガチャの事を 「呼び出し」× UIのビジュアルや文言が一般的でない為解りにくい6 解り易さ
  90. 90. ガチャの事を 「ガチャ」 ガチャの事を 「召喚」 ガチャの事を 「呼び出し」× UIのビジュアルや文言が一般的でない為解りにくい6 解り易さ ゲームの世界観に則した文言で演出する事は大切 だけど、言葉のセレクトで一般性がないと解りに くくなる!
  91. 91. UIが誤操作を招く為使いづらい7 使い易さ 主導線につながるボタン、特にゲーム攻略に 関連するボタンは、ユーザーテストを通じて 誤操作を十分検証し、改善しよう! 押しづらい!
  92. 92. UI全体のビジュアルやパーツデザイン・文字に 統一性や規則性がない 8 統一性
  93. 93. UI全体のビジュアルやパーツデザイン・文字に 統一性や規則性がない 8 統一性 色も形も 統一感がなく バラバラ・・
  94. 94. UI全体のビジュアルやパーツデザイン・文字に 統一性や規則性がない 8 統一性 色も形も 統一感がなく バラバラ・・ ボタンの 質感になんだか 違和感・・
  95. 95. フォントが ここだけ 違う・・・ UI全体のビジュアルやパーツデザイン・文字に 統一性や規則性がない 8 統一性 色も形も 統一感がなく バラバラ・・ ボタンの 質感になんだか 違和感・・
  96. 96. なぜ急に 縦書き・・・ UI全体のビジュアルやパーツデザイン・文字に 統一性や規則性がない 8 統一性 フォントが ここだけ 違う・・・ 色も形も 統一感がなく バラバラ・・ ボタンの 質感になんだか 違和感・・
  97. 97. プログレスバーは必須! 加えてロード時間を「退屈と思わせない」 工夫が大切だね! 読み込み時間やロードが頻繁に起こる為 使いづらい 9 使い易さ ×
  98. 98. UIを構成している背景描写や装飾が過多、唐突10 装飾盛り 過ぎ! 見易さ ついつい装飾やエフェクトを盛りたくなる けど、企画意図に沿わない行き過ぎた表現 には注意しないとね!
  99. 99. 見易さ 使い易さ 統一性 使い易さ 解り易さ 解り易さ演出/音/アニメ 解り易さ 見易さ使い易さ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ BadUI傾向
  100. 100. 先ほどの10選で述べてきた Bad UIの傾向 © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム BadUI傾向
  101. 101. 「使い易さ」(30.3%) 使い易さ © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム BadUI傾向
  102. 102. 「解り易さ」(28.2%) 解り易さ © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム 使い易さ BadUI傾向
  103. 103. 操作や画面遷移が快適でないとストレス 使い易さ 使い易さ使い易さ 使い易さ BadUI傾向
  104. 104. 「情報が認識できない」 「遊び方が分からない」はストレス 解り易さ 解り易さ解り易さ 解り易さ BadUI傾向
  105. 105. BadUIは 使い難さ、解り難さを改善しよう! 解り易さ使い易さ BadUI傾向
  106. 106. 重要 度 概要 詳細 1 UIパーツの機能が不足している為使いづらい。 戻るボタン、もしくは戻り操作が難解で使いづらい。 閉じる・削除の操作が難解で使いづらい。タップして動くが機能し ない機能過多、UIの機能不足。 2 UIの文字の可読性が低い為見難い。 文字の大きさ、色、効果、テキスト量、見切れ、改行、選定ミス、 ローカライズが原因で見難い。等 3 UIの画面用途、ゲーム攻略についての説明が 不足している為解りにくい。 UIの画面用途、ゲーム攻略についての説明が不足している為 解りにくい。 4 UIの演出不足・演出過多によりユーザーの 感情を高めていない。 リザルトで演出不足、コンボ連鎖、リンクで演出不足、 ゲームスタート時の演出不足、エフェクトで演出過多。 5 UIのビジュアル要素(UI、フォント、キャラ、背景) が整理されてない為解りにくい。 TOPまたはホーム画面の情報整理が出来ておらず解りにくい、 バナー情報整理が出来ておらず解りにくい。等 6 UIのビジュアルや文言が一般的でない為解りにくい。 アイコンデザイン、ボタンの色味、タブ機能、ソート機能、 ページャー機能、表示文言が一般的でない。等 7 UIが誤操作を招く為使いづらい。 ボタン同士の配置の問題で誤操作を起こす、 タップスワイプ操作の受付範囲の不備で誤操作を起こす。等 8 UI全体のビジュアルやパーツデザイン・文字に 統一性や規則性がない。 UIパーツに統一感とルールがない、UIパーツが統一され過ぎて 単調、アートのパーツ品質に統一感が無い。 9 UIの読み込み時間やロードが頻繁に起こる為 使いづらい。 背景、UIの装飾、ロゴ、エフェクト、UIウィンドウの デザインが過多。等 10 UIを構成している背景描写や装飾が過多、または唐突。 ロード時間が長い、頻繁に起こる、 すぐにゲームがシャットアウトする。頻繁に再起動する。等 BadUI 10Select Check sheet 解り易さ 統一性 使い易さ 演出/音/アニメ 見易さ 解り易さ 解り易さ 使い易さ 使い易さ 見易さ ※2015年11月時点UI Discussion
  107. 107. 重要 度 概要 詳細 1 UIパーツの機能が不足している為使いづらい。 戻るボタン、もしくは戻り操作が難解で使いづらい。 閉じる・削除の操作が難解で使いづらい。タップして動くが機能し ない機能過多、UIの機能不足。 2 UIの文字の可読性が低い為見難い。 文字の大きさ、色、効果、テキスト量、見切れ、改行、選定ミス、 ローカライズが原因で見難い。等 3 UIの画面用途、ゲーム攻略についての説明が 不足している為解りにくい。 UIの画面用途、ゲーム攻略についての説明が不足している為 解りにくい。 4 UIの演出不足・演出過多によりユーザーの 感情を高めていない。 リザルトで演出不足、コンボ連鎖、リンクで演出不足、 ゲームスタート時の演出不足、エフェクトで演出過多。 5 UIのビジュアル要素(UI、フォント、キャラ、背景) が整理されてない為解りにくい。 TOPまたはホーム画面の情報整理が出来ておらず解りにくい、 バナー情報整理が出来ておらず解りにくい。等 6 UIのビジュアルや文言が一般的でない為解りにくい。 アイコンデザイン、ボタンの色味、タブ機能、ソート機能、 ページャー機能、表示文言が一般的でない。等 7 UIが誤操作を招く為使いづらい。 ボタン同士の配置の問題で誤操作を起こす、 タップスワイプ操作の受付範囲の不備で誤操作を起こす。等 8 UI全体のビジュアルやパーツデザイン・文字に 統一性や規則性がない。 UIパーツに統一感とルールがない、UIパーツが統一され過ぎて 単調、アートのパーツ品質に統一感が無い。 9 UIの読み込み時間やロードが頻繁に起こる為 使いづらい。 背景、UIの装飾、ロゴ、エフェクト、UIウィンドウの デザインが過多。等 10 UIを構成している背景描写や装飾が過多、または唐突。 ロード時間が長い、頻繁に起こる、 すぐにゲームがシャットアウトする。頻繁に再起動する。等 BadUI 10Select Check sheet 解り易さ 統一性 使い易さ 演出/音/アニメ 見易さ 解り易さ 解り易さ 使い易さ 使い易さ 見易さ ※2015年11月時点UI Discussion 上から Badコメント 数が多い順
  108. 108. 重要 度 概要 詳細 1 UIパーツの機能が不足している為使いづらい。 戻るボタン、もしくは戻り操作が難解で使いづらい。 閉じる・削除の操作が難解で使いづらい。タップして動くが機能し ない機能過多、UIの機能不足。 2 UIの文字の可読性が低い為見難い。 文字の大きさ、色、効果、テキスト量、見切れ、改行、選定ミス、 ローカライズが原因で見難い。等 3 UIの画面用途、ゲーム攻略についての説明が 不足している為解りにくい。 UIの画面用途、ゲーム攻略についての説明が不足している為 解りにくい。 4 UIの演出不足・演出過多によりユーザーの 感情を高めていない。 リザルトで演出不足、コンボ連鎖、リンクで演出不足、 ゲームスタート時の演出不足、エフェクトで演出過多。 5 UIのビジュアル要素(UI、フォント、キャラ、背景) が整理されてない為解りにくい。 TOPまたはホーム画面の情報整理が出来ておらず解りにくい、 バナー情報整理が出来ておらず解りにくい。等 6 UIのビジュアルや文言が一般的でない為解りにくい。 アイコンデザイン、ボタンの色味、タブ機能、ソート機能、 ページャー機能、表示文言が一般的でない。等 7 UIが誤操作を招く為使いづらい。 ボタン同士の配置の問題で誤操作を起こす、 タップスワイプ操作の受付範囲の不備で誤操作を起こす。等 8 UI全体のビジュアルやパーツデザイン・文字に 統一性や規則性がない。 UIパーツに統一感とルールがない、UIパーツが統一され過ぎて 単調、アートのパーツ品質に統一感が無い。 9 UIの読み込み時間やロードが頻繁に起こる為 使いづらい。 背景、UIの装飾、ロゴ、エフェクト、UIウィンドウの デザインが過多。等 10 UIを構成している背景描写や装飾が過多、または唐突。 ロード時間が長い、頻繁に起こる、 すぐにゲームがシャットアウトする。頻繁に再起動する。等 BadUI 10Select Check sheet 解り易さ 統一性 使い易さ 演出/音/アニメ 見易さ 解り易さ 解り易さ 使い易さ 使い易さ 見易さ ※2015年11月時点UI Discussion 概要
  109. 109. 重要 度 概要 詳細 1 UIパーツの機能が不足している為使いづらい。 戻るボタン、もしくは戻り操作が難解で使いづらい。 閉じる・削除の操作が難解で使いづらい。タップして動くが機能し ない機能過多、UIの機能不足。 2 UIの文字の可読性が低い為見難い。 文字の大きさ、色、効果、テキスト量、見切れ、改行、選定ミス、 ローカライズが原因で見難い。等 3 UIの画面用途、ゲーム攻略についての説明が 不足している為解りにくい。 UIの画面用途、ゲーム攻略についての説明が不足している為 解りにくい。 4 UIの演出不足・演出過多によりユーザーの 感情を高めていない。 リザルトで演出不足、コンボ連鎖、リンクで演出不足、 ゲームスタート時の演出不足、エフェクトで演出過多。 5 UIのビジュアル要素(UI、フォント、キャラ、背景) が整理されてない為解りにくい。 TOPまたはホーム画面の情報整理が出来ておらず解りにくい、 バナー情報整理が出来ておらず解りにくい。等 6 UIのビジュアルや文言が一般的でない為解りにくい。 アイコンデザイン、ボタンの色味、タブ機能、ソート機能、 ページャー機能、表示文言が一般的でない。等 7 UIが誤操作を招く為使いづらい。 ボタン同士の配置の問題で誤操作を起こす、 タップスワイプ操作の受付範囲の不備で誤操作を起こす。等 8 UI全体のビジュアルやパーツデザイン・文字に 統一性や規則性がない。 UIパーツに統一感とルールがない、UIパーツが統一され過ぎて 単調、アートのパーツ品質に統一感が無い。 9 UIの読み込み時間やロードが頻繁に起こる為 使いづらい。 背景、UIの装飾、ロゴ、エフェクト、UIウィンドウの デザインが過多。等 10 UIを構成している背景描写や装飾が過多、または唐突。 ロード時間が長い、頻繁に起こる、 すぐにゲームがシャットアウトする。頻繁に再起動する。等 BadUI 10Select Check sheet 解り易さ 統一性 使い易さ 演出/音/アニメ 見易さ 解り易さ 解り易さ 使い易さ 使い易さ 見易さ ※2015年11月時点UI Discussion 詳細
  110. 110. 重要 度 概要 詳細 1 UIパーツの機能が不足している為使いづらい。 戻るボタン、もしくは戻り操作が難解で使いづらい。 閉じる・削除の操作が難解で使いづらい。タップして動くが機能し ない機能過多、UIの機能不足。 2 UIの文字の可読性が低い為見難い。 文字の大きさ、色、効果、テキスト量、見切れ、改行、選定ミス、 ローカライズが原因で見難い。等 3 UIの画面用途、ゲーム攻略についての説明が 不足している為解りにくい。 UIの画面用途、ゲーム攻略についての説明が不足している為 解りにくい。 4 UIの演出不足・演出過多によりユーザーの 感情を高めていない。 リザルトで演出不足、コンボ連鎖、リンクで演出不足、 ゲームスタート時の演出不足、エフェクトで演出過多。 5 UIのビジュアル要素(UI、フォント、キャラ、背景) が整理されてない為解りにくい。 TOPまたはホーム画面の情報整理が出来ておらず解りにくい、 バナー情報整理が出来ておらず解りにくい。等 6 UIのビジュアルや文言が一般的でない為解りにくい。 アイコンデザイン、ボタンの色味、タブ機能、ソート機能、 ページャー機能、表示文言が一般的でない。等 7 UIが誤操作を招く為使いづらい。 ボタン同士の配置の問題で誤操作を起こす、 タップスワイプ操作の受付範囲の不備で誤操作を起こす。等 8 UI全体のビジュアルやパーツデザイン・文字に 統一性や規則性がない。 UIパーツに統一感とルールがない、UIパーツが統一され過ぎて 単調、アートのパーツ品質に統一感が無い。 9 UIの読み込み時間やロードが頻繁に起こる為 使いづらい。 背景、UIの装飾、ロゴ、エフェクト、UIウィンドウの デザインが過多。等 10 UIを構成している背景描写や装飾が過多、または唐突。 ロード時間が長い、頻繁に起こる、 すぐにゲームがシャットアウトする。頻繁に再起動する。等 BadUI 10Select Check sheet 解り易さ 統一性 使い易さ 演出/音/アニメ 見易さ 解り易さ 解り易さ 使い易さ 使い易さ 見易さ ※2015年11月時点UI Discussion チェックボックス ※チェックが多い ほどBadUI!
  111. 111. Good UI 10 Select(230コメントを集計) DiscussionUI
  112. 112. UIのビジュアルが統一され魅力的である ウィンドウ メインボタン フォント バナー ゲージ スライダー戻るボタン 閉じるボタン タブ プルダウン メニュー チェック ボックス インフィニット インジケーター スイッチ ページャー アイコン類 アート/世界観 「かっこいい?」「かわいい?」 「シンプル?」「フラット? 」 多くの要素を同じテイストで統一しよう! 1
  113. 113. UIの操作感・挙動・演出の魅力により ユーザー感情を高めている 2 演出/音/アニメ ユーザーが端末に入力した際のデザインや挙動は 重要!心地よいビジュアルやアニメーションを 追及しよう!
  114. 114. 爽快! 華やか! UIの画面ごとの演出により ユーザーの感情を高めている 3 演出/音/アニメ 派手に演出したり、没入感のあるログインボ ーナスを用いてユーザーの気分を高めよう! 没入で きる!
  115. 115. レベルアップ・収穫 の可否がわかりやす い! 闘い方が 解り易 い! UIの画面用途、ゲーム攻略についての説明が 解り易い 4 解り易さ 解りやす過ぎるぐらいの明快さで ユーザーに遊び方や有益な情報を提供しよう!
  116. 116. UIを構成しているパーツや背景・装飾が 魅力的である 5 アート/世界観 キャラ・背景・UI・エフェクト等 全てのアート要素に統一感が出ると 製品としての一体感が増し、 アピールしやすいんだ!
  117. 117. サウンドの魅力によりユーザーの 感情を高めている ♪BGM ♪SE ♪ボイス 声優の声で ゲームに 没入できる! ドキドキワクワク して気分が 盛り上がる! ボタンを押すと 音が 気持ち良い! 感情 UP! 6 演出/音/アニメ
  118. 118. UIパーツの高い有用性により使い易い(その1)7 ボタン一つで サクサク 切り替え! 使い易さ 同じ操作でも、複数の操作方法を用意する事 で、使い勝手がアップ! スワイプで も 拡縮!
  119. 119. UIパーツの高い有用性により使い易い(その2)7 使い易さ 同じ操作でも、複数の操作方法を用意する事 で、使い勝手がアップ!
  120. 120. UIパーツの高い有用性により使い易い(その2)7 使い易さ 同じ操作でも、複数の操作方法を用意する事 で、使い勝手がアップ!
  121. 121. UI全体の演出によりユーザーの感情を高めている8 演出/音/アニメ ユーザーに長く遊んで頂く為には、 消費面やゲーム攻略外でのおもてなしが大事!
  122. 122. 画面の遷移が容易である9 仕様 バトル までが遠い バトル までが近い 最短の画面遷移で遊べるように導線を整理しよう! ×
  123. 123. 文言の演出によりユーザーの感情を高めている10 演出/音/アニメ ×
  124. 124. 文言の演出によりユーザーの感情を高めている10 演出/音/アニメ 形式的な文言の表示だけでは没入感も半減。 ユーザーがゲーム内世界に入り込んだよう な気分にさせる文言をセレクトしよう!
  125. 125. ♪BGM/SE/ボイス 演出/音/アニメ 使い易さ Good UI傾向とまとめ アート/世界観 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ 演出/音/アニメ 演出/音/アニメ 解り易さ アート/世界観 アート/世界観 仕様 演出/音/アニメ
  126. 126. 先ほどの10選で述べてきた Good UIの傾向 Good UI傾向とまとめ © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
  127. 127. 「演出・アニメ・音」(41.5%) 演出 音 アニメ Good UI傾向とまとめ © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム
  128. 128. 「アート・世界観」(23.5%) アート 世界観 © GREE, Inc. 分析・作成:グリー株式会社 UI/UXチーム Good UI傾向とまとめ 演出 音 アニメ
  129. 129. 感情の推移をデザインしよう! 演出 音 アニメ Good UI傾向とまとめ ♪BGM/SE/ボイス 演出/音/アニメ 演出/音/アニメ演出/音/アニメ 演出/音/アニメ
  130. 130. 製品として「ビジュアルの一体感」が大事 アート 世界観 Good UI傾向とまとめ アート/世界観 アート/世界観 アート/世界観
  131. 131. 「演出・アニメ・音」 「アート・世界観」 を向上させると Good UIになる! 演出 音 アニメ Good UI傾向とまとめ アート 世界観
  132. 132. 重要 度 概要 詳細 1 UIのビジュアルが統一され魅力的である。 UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され 魅力的である。 異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的である。等 2 UIの操作感・挙動・演出の魅力により ユーザーの感を高めている。 UIの挙動・エフェクト・画面効果・操作感、カメラワークの心地よさや迫力により ユーザーの感情を高めている。 3 UIの画面ごとの演出によりユーザーの感情 を高めてる。 ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの 魅力によりユーザーの感情を高めている。フィーバー/チャンスタイムの演出の魅力により ユーザーの感情を高めている。ガチャ関連の演出によりユーザーの感情を高めている。等 4 UIの画面用途、ゲーム攻略についての説明が 解り易い。 チュートリアルや遊び方が解り易い、収穫・アップグレードや解放が解り易い。等 5 UIを構成しているパーツや背景・装飾が 魅力的である。 UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的、 またはUI機能とビジュアルが世界観として一致していて魅力的。等 6 サウンドの魅力によりユーザーの感情を 高めている。 BGM/SE/ボイスによりユーザーの感情を高めている。 7 UIパーツの高い有用性により使い易い。 UIの機能が便利で使い易い。 8 UI全体の演出によりユーザーの感情を 高めている。 UI画面が常に動く、四季や時間ごとに演出やビジュアルを変え、 ユーザーの感情を高めている。等 9 画面の遷移が容易である。 目的の遷移が近い、画面ごとの機能の分類が明確で遷移に迷わない。 10 文言の演出によりユーザーの感情を 高めている。 文言の内容、フォントの演出によりユーザーの感情を高めている。 GoodUI 10Select Check sheet アート/世界観 使い易さ 仕様 演出/音/アニメ 演出/音/アニメ 解り易さ アート/世界観 演出/音/アニメ 演出/音/アニメ 演出/音/アニメ ※2015年11月時点UI Discussion
  133. 133. 重要 度 概要 詳細 1 UIのビジュアルが統一され魅力的である。 UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され 魅力的である。 異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的である。等 2 UIの操作感・挙動・演出の魅力により ユーザーの感を高めている。 UIの挙動・エフェクト・画面効果・操作感、カメラワークの心地よさや迫力により ユーザーの感情を高めている。 3 UIの画面ごとの演出によりユーザーの感情 を高めてる。 ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの 魅力によりユーザーの感情を高めている。フィーバー/チャンスタイムの演出の魅力により ユーザーの感情を高めている。ガチャ関連の演出によりユーザーの感情を高めている。等 4 UIの画面用途、ゲーム攻略についての説明が 解り易い。 チュートリアルや遊び方が解り易い、収穫・アップグレードや解放が解り易い。等 5 UIを構成しているパーツや背景・装飾が 魅力的である。 UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的、 またはUI機能とビジュアルが世界観として一致していて魅力的。等 6 サウンドの魅力によりユーザーの感情を 高めている。 BGM/SE/ボイスによりユーザーの感情を高めている。 7 UIパーツの高い有用性により使い易い。 UIの機能が便利で使い易い。 8 UI全体の演出によりユーザーの感情を 高めている。 UI画面が常に動く、四季や時間ごとに演出やビジュアルを変え、 ユーザーの感情を高めている。等 9 画面の遷移が容易である。 目的の遷移が近い、画面ごとの機能の分類が明確で遷移に迷わない。 10 文言の演出によりユーザーの感情を 高めている。 文言の内容、フォントの演出によりユーザーの感情を高めている。 GoodUI 10Select Check sheet アート/世界観 使い易さ 仕様 演出/音/アニメ 演出/音/アニメ 解り易さ アート/世界観 演出/音/アニメ 演出/音/アニメ 演出/音/アニメ ※2015年11月時点UI Discussion 上から Goodコメント 数が多い順
  134. 134. 重要 度 概要 詳細 1 UIのビジュアルが統一され魅力的である。 UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され 魅力的である。 異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的である。等 2 UIの操作感・挙動・演出の魅力により ユーザーの感を高めている。 UIの挙動・エフェクト・画面効果・操作感、カメラワークの心地よさや迫力により ユーザーの感情を高めている。 3 UIの画面ごとの演出によりユーザーの感情 を高めてる。 ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの 魅力によりユーザーの感情を高めている。フィーバー/チャンスタイムの演出の魅力により ユーザーの感情を高めている。ガチャ関連の演出によりユーザーの感情を高めている。等 4 UIの画面用途、ゲーム攻略についての説明が 解り易い。 チュートリアルや遊び方が解り易い、収穫・アップグレードや解放が解り易い。等 5 UIを構成しているパーツや背景・装飾が 魅力的である。 UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的、 またはUI機能とビジュアルが世界観として一致していて魅力的。等 6 サウンドの魅力によりユーザーの感情を 高めている。 BGM/SE/ボイスによりユーザーの感情を高めている。 7 UIパーツの高い有用性により使い易い。 UIの機能が便利で使い易い。 8 UI全体の演出によりユーザーの感情を 高めている。 UI画面が常に動く、四季や時間ごとに演出やビジュアルを変え、 ユーザーの感情を高めている。等 9 画面の遷移が容易である。 目的の遷移が近い、画面ごとの機能の分類が明確で遷移に迷わない。 10 文言の演出によりユーザーの感情を 高めている。 文言の内容、フォントの演出によりユーザーの感情を高めている。 GoodUI 10Select Check sheet アート/世界観 使い易さ 仕様 演出/音/アニメ 演出/音/アニメ 解り易さ アート/世界観 演出/音/アニメ 演出/音/アニメ 演出/音/アニメ ※2015年11月時点UI Discussion 概要
  135. 135. 重要 度 概要 詳細 1 UIのビジュアルが統一され魅力的である。 UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され 魅力的である。 異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的である。等 2 UIの操作感・挙動・演出の魅力により ユーザーの感を高めている。 UIの挙動・エフェクト・画面効果・操作感、カメラワークの心地よさや迫力により ユーザーの感情を高めている。 3 UIの画面ごとの演出によりユーザーの感情 を高めてる。 ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの 魅力によりユーザーの感情を高めている。フィーバー/チャンスタイムの演出の魅力により ユーザーの感情を高めている。ガチャ関連の演出によりユーザーの感情を高めている。等 4 UIの画面用途、ゲーム攻略についての説明が 解り易い。 チュートリアルや遊び方が解り易い、収穫・アップグレードや解放が解り易い。等 5 UIを構成しているパーツや背景・装飾が 魅力的である。 UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的、 またはUI機能とビジュアルが世界観として一致していて魅力的。等 6 サウンドの魅力によりユーザーの感情を 高めている。 BGM/SE/ボイスによりユーザーの感情を高めている。 7 UIパーツの高い有用性により使い易い。 UIの機能が便利で使い易い。 8 UI全体の演出によりユーザーの感情を 高めている。 UI画面が常に動く、四季や時間ごとに演出やビジュアルを変え、 ユーザーの感情を高めている。等 9 画面の遷移が容易である。 目的の遷移が近い、画面ごとの機能の分類が明確で遷移に迷わない。 10 文言の演出によりユーザーの感情を 高めている。 文言の内容、フォントの演出によりユーザーの感情を高めている。 GoodUI 10Select Check sheet アート/世界観 使い易さ 仕様 演出/音/アニメ 演出/音/アニメ 解り易さ アート/世界観 演出/音/アニメ 演出/音/アニメ 演出/音/アニメ ※2015年11月時点UI Discussion 詳細
  136. 136. 重要 度 概要 詳細 1 UIのビジュアルが統一され魅力的である。 UIのアートが統一され製品としてのまとまりがある、UIがシンプル・フラットで統一され 魅力的である。 異なる世界観のUIビジュアルをあえて共存させる事で新規性を生みだし魅力的である。等 2 UIの操作感・挙動・演出の魅力により ユーザーの感を高めている。 UIの挙動・エフェクト・画面効果・操作感、カメラワークの心地よさや迫力により ユーザーの感情を高めている。 3 UIの画面ごとの演出によりユーザーの感情 を高めてる。 ロード/ダウンロード画面の魅力によりユーザーの感情を高めている。ログインボーナスの 魅力によりユーザーの感情を高めている。フィーバー/チャンスタイムの演出の魅力により ユーザーの感情を高めている。ガチャ関連の演出によりユーザーの感情を高めている。等 4 UIの画面用途、ゲーム攻略についての説明が 解り易い。 チュートリアルや遊び方が解り易い、収穫・アップグレードや解放が解り易い。等 5 UIを構成しているパーツや背景・装飾が 魅力的である。 UIパーツ、アイコン、バナー、広告、マップイラスト、UI背景イラストが魅力的、 またはUI機能とビジュアルが世界観として一致していて魅力的。等 6 サウンドの魅力によりユーザーの感情を 高めている。 BGM/SE/ボイスによりユーザーの感情を高めている。 7 UIパーツの高い有用性により使い易い。 UIの機能が便利で使い易い。 8 UI全体の演出によりユーザーの感情を 高めている。 UI画面が常に動く、四季や時間ごとに演出やビジュアルを変え、 ユーザーの感情を高めている。等 9 画面の遷移が容易である。 目的の遷移が近い、画面ごとの機能の分類が明確で遷移に迷わない。 10 文言の演出によりユーザーの感情を 高めている。 文言の内容、フォントの演出によりユーザーの感情を高めている。 GoodUI 10Select Check sheet アート/世界観 使い易さ 仕様 演出/音/アニメ 演出/音/アニメ 解り易さ アート/世界観 演出/音/アニメ 演出/音/アニメ 演出/音/アニメ ※2015年11月時点UI Discussion チェックボックス ※チェックが多い ほどGoodUI!
  137. 137. 1. 自己紹介・ご挨拶 2. UIデザイン 効率についての課題 3. 課題に対しての取り組みと効果 4. GoodUIBadUI紹介 5. まとめ 6. 質疑応答
  138. 138. BadUIを代表する 2分類 GoodUIを代表する 2分類
  139. 139. Bad UIを 改善するなら この二つ! 演出 音 アニメ アート 世界観 解り易さ 使い易さ Good UIを 目指して品質を 高めるのであれば この二つ!
  140. 140. コメント表やチェックシートを 活用して、UIをレビューしよう!
  141. 141. 他のメンバーと同じ空間でディスカッション する事で、ジュニアメンバーのレビューコメ ント精度が向上し、価値観を画一化! 毎週継続的にゲームをプレイする事で、 メンバーの研究意識向上、トレンド把握! 他社と自社ゲームのUIデザインの 品質差を実感!競争意識が芽生えた! 育成効果
  142. 142. 品質向上における注力ポイントが明確に なる事で的を絞った作業に力を注ぐこと が出来、作業を迷わず進められた! メンバー間で共通言語が生まれ、 コミュニケーションが活性化! デザイン作業のゴールに早く到達できた! 他社ゲームの課題について、修正案を考える事 で、改善思考力を強化!他者に指導を仰がずと も課題解決できるようになった! 効率化効果
  143. 143. 意見が集まる分類にこそ 品質改善・向上ポイントがある! おさらい とは、 育成促進+品質向上効率化の 二つが叶うスキームである! DiscussionUI
  144. 144. を実践し、 ユーザーがどこに 注目しているのかを体感しよう! 注目ポイントを絞って作業し、 効率的に品質を高めよう! まとめ DiscussionUI
  145. 145. your Attention!Thanks for ご清聴ありがとうございました!
  146. 146. 応答質疑

×