【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
•Download as PPTX, PDF•
16 likes•39,445 views
CEDEC2016で講演した内容のスライドです。
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
Similar to 【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには (20)
More from GREE/Art
More from GREE/Art (11)
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
- 1. -UIデザインの品質を効率的に向上させるには - UI Discussionのススメ 2016/8/24 グリー株式会社 長﨑二郎
- 3. 1. 自己紹介 2. UIデザイン 課題に対する対策・効果 3. GoodUIBadUI紹介 4. まとめ 5. 質疑応答 本日の流れ
- 4. 1. 自己紹介 2. UIデザイン 課題に対する対策・効果 3. GoodUIBadUI紹介 4. まとめ 5. 質疑応答 本日の流れ
- 5. ■Wright Flyer Studios NT Production ■ Art Group SeniorManager ■ UI UX Team Manager Lead UI Designer 長﨑 二郎 Jiro Nagasaki
- 6. プラットホーム • コンシューマゲーム • アーケードゲーム • PCゲーム • モバイルソーシャルゲーム （Web/Native） ジャンル • アクション • RPG • アドベンチャー • シュミレーション • スポーツ • ホラー • 知育 etc… 業務 • UIデザイン • 採用 • 育成 ゲームUI歴 16年目 経歴
- 8. 1. 自己紹介 2. UIデザイン 課題に対する対策・効果 3. GoodUIBadUI紹介 4. まとめ 5. 質疑応答 本日の流れ
- 11. 注意すべき事柄が多い
- 20. DiscussionUI
- 23. 詳細 DiscussionUI
- 29. ②複数人でそれぞれプレイする
- 35. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ
- 36. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ 良いと感じた 個所を記入！
- 37. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ 良いと感じた 個所の要因を 記入！
- 38. 分類 ①良い所 ②要因 ロード画面の待ちが楽しい かわいいキャラクターが アニメーションしている為 バトルが簡単にすぐ遊べる チュートリアルが解り易い為 ボタンが押しやすい 面積が大きい為 UI全体が世界観に合っていて 美しい シンプルなデザインで、キャ ラクターとも相性が良い為 購入画面、うっかり課金せずに 済んだ 課金前に確認ウィンドウが 表示される為 画面の遷移がサクサク動く 読み込みがほとんどない為 ボタンをタップすると気持ち良い 音と見た目が合っている為 「○○クエスト」 Goodコメント例 解り 易さ 使い 易さ 演出/音/ アニメ アート 世界観 仕様 使い 易さ 演出/音/ アニメ ７つの分類を 記入！
- 39. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ
- 40. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ 悪いと感じた 個所を記入！
- 41. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ 悪いと感じた 個所の原因を 記入！
- 42. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ ７つの分類を 記入！
- 43. 分類 ①課題 ②原因 ③解決案 ボタンで押せる所が 解らない フラット過ぎてボタ ンぽくないので ボタンを出っ張ら せて目立たせる ボタンが押しづらい 小さすぎる為 大きさ調整 勝利画面が寂しい エフェクトが無い為 派手に演出する 画面の情報が 解り難い レイアウトがごちゃ ごちゃしている為 情報精査と レイアウト調整 文字が読めない 小さすぎる為 大きく表示する ボタンがバラバラに みえる 見た目の統一感が 無い為 基本のデザインで ビジュアルを統一 UIデザインが唐突 世界観とかけ離れ リデザイン 「○○クエスト」 Badコメント例 解り 易さ 使い 易さ 演出/音/ アニメ 見易 さ 統一 性 アート 世界観 解り 易さ どうすれば 改善するかを 記入！
- 54. 1. 自己紹介 2. UIデザイン 課題に対する対策・効果 3. GoodUIBadUI紹介 4. まとめ 5. 質疑応答 本日の流れ
- 55. Good UI Bad UI ７つの分類に コメントを分け、数が多かった 事象それぞれ１０個を紹介 DiscussionUI 演出 音 アニメ アート 世界観 統一性 解り易さ見易さ 使い易さ 仕様
- 57. Bad UI 10 Select 気を付けましょう！ Good UI 10 Select 模範にしましょう！
- 60. UIの演出不足・演出過多により ユーザーの感情を高めていない 1 演出/音/アニメ ゲーム進行や獲得する要素の重要度を考慮し て、適切に演出するよう心がけよう！ 演出 過多！ 演出 不足！ × ×
- 73. 使い易さ 解り易さ 解り易さ 演出/音/アニメ 解り易さ 見易さ 使い易さ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ BadUI傾向 アート/世界観解り易さ 仕様
- 74. 先ほどの１０選で述べてきた Bad UIの傾向 © GREE, Inc. 分析・作成：グリー株式会社 UI/UXチーム BadUI傾向
- 75. 「解り易さ」（30.3%） 解り易さ © GREE, Inc. 分析・作成：グリー株式会社 UI/UXチーム BadUI傾向
- 76. 「使い易さ」（23.1%） 使い易さ © GREE, Inc. 分析・作成：グリー株式会社 UI/UXチーム BadUI傾向 解り易さ
- 87. UIのビジュアルが統一され魅力的である ウィンドウ メインボタン フォント バナー ゲージ スライダー戻るボタン 閉じるボタン タブ プルダウン メニュー チェック ボックス インフィニット インジケーター スイッチ ページャー アイコン類 アート/世界観 「かっこいい？」「かわいい？」 「シンプル？」「フラット？ 」 多くの要素を同じテイストで統一しよう！ 4
- 92. サウンドの魅力によりユーザーの 感情を高めている ♪BGM ♪SE ♪ボイス 声優の声で ゲームに 没入できる！ ドキドキワクワク して気分が 盛り上がる！ ボタンを押すと 音が 気持ち良い！ 感情 UP! 7 演出/音/アニメ
- 97. ♪BGM/SE/ボイス 演出/音/アニメ 使い易さ Good UI傾向 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ 演出/音/アニメ演出/音/アニメ 解り易さ アート/世界観 仕様 アート/世界観 使い易さ ⑩ 見易さ
- 98. 先ほどの１０選で述べてきた Good UIの傾向 Good UI傾向 © GREE, Inc. 分析・作成：グリー株式会社 UI/UXチーム
- 99. 「演出・音・アニメ」（41.6%） 演出 音 アニメ © GREE, Inc. 分析・作成：グリー株式会社 UI/UXチーム Good UI傾向
- 100. 「解り易さ」（17.5%） 解り易さ © GREE, Inc. 分析・作成：グリー株式会社 UI/UXチーム 演出 音 アニメ Good UI傾向
- 101. 「使い易さ」 （14.8%） 「アート・世界観」（14.5%） アート 世界観 © GREE, Inc. 分析・作成：グリー株式会社 UI/UXチーム 演出 音 アニメ Good UI傾向 解り易さ 使い易さ
- 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. 重要度 概要 詳細 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. 重要度 概要 詳細 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. 重要度 概要 詳細 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. 重要度 概要 詳細 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. 重要度 概要 詳細 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
- 112. 1. 自己紹介 2. UIデザイン 課題に対する対策・効果 3. GoodUIBadUI紹介 4. まとめ 5. 質疑応答 本日の流れ
- 114. 解り易さ Bad UIを 改善するなら この二つ！ 演出 音 アニメ 解り易さ 使い易さ Good UIを 目指して品質を 高めるのであれば この二つ！
- 116. 今後の展望 DiscussionUI
- 118. よくあるご質問 DiscussionUI