読者です 読者をやめる 読者になる 読者になる

Noblesse Oblige

App/iOS/Android/Unity/cocos2d/VR/GameJam/Hackathon/肉 ブログの記事は勉強会の書きなぐりメモが多め

GREE Creator's Meetup #3

connpass.com

UIデザインの品質を効率的に向上させるには?

  • グリー株式会社 長崎二郎

アジェンダ

  • 自己紹介・ご挨拶
  • UIデザイン 効率についての課題
  • 課題に対しての取り組みと効果
  • GoodUI BadUI紹介
  • まとめ
  • 質疑応答

︎# 自己紹介

  • アートグループ シニアマネージャー
  • UI/UXチーム マネージャー
  • 経歴
    • ゲームUI歴15年
    • 30本強
    • パイレーツエイジ
    • 海賊王国コロンブス

概要

  • モバイルゲームUIデザインについて、既出タイトルの検証結果をもとに効率的に品質を効率させる方法を解説
    • UIビジュアルデザイン寄りの内容

UIデザイン 効率についての課題

  • UIに関すること
    • わかりやすさ
    • 使いやすさ
    • ビジュアルの楽しさ
    • 見易さ
    • 心地よさ
    • 可読性
    • 統一性
    • レイアウト
    • SE
    • UIエフェクト
    • UIアニメーション
  • 特にどれが大事?
    • なんとなくはわかるけど明示せずに自分の中にとどめていた
  • 気をつける項目が多すぎて闇雲に頑張ると非効率
    • なんとか注力ポイントを定めたい

課題に対しての取り組みと効果

  • 「注力ポイント」 = 「ユーザー視点で認知度の高いポイント」
    • 印象に残るところから注力して品質をあげよう
  • 認知度の高い箇所から改善・ブラッシュアップ
    • 品質を効率的にたかめられるのでは?
  • ユーザー視点に立って認知度の高いポイントを洗い出して傾向を掴む
    • どのようにして?
  • とにかくゲームをたくさんプレイして情報収取し、傾向を導き出す
    • これしかない!
  • 認知度の高いポイントを知るためにした試み
    • UI Discussion
  • UI Discussionとは?
      - UIの効果的な改善ポイント明確化
      - 他者と自社ゲームの品質差の認識
      - 改善思考力の強化
    
    • を目的とした会議体

UI Discussion 概要

  • 日程
    • 6月末〜実施中
  • メンバー
    • 社内デザイナー
  • 参加人数
    • 約15名
  • ディスカッション頻度
    • 毎週1回 1時間
  • 調査するゲーム
    • Nativeモバイルゲーム
  • 調査するゲームの本数
    • 毎週2本をレビュー
  • 1タイトルのプレイの目安
    • チュートリアルとメインゲームサイクルを2、3週プレイした状態
      • いままでに約42タイトル

なぜ社内で?

  • 他社調査の依頼も考えたが情報がフィードバックされるのみで、社内メンバーのナレッジ・知見の蓄積につながらない

具体的な手順は?

  • 調査するタイトルを選定する(ファシリテーターが選定する)
    • 選定ポイント
      • UI自体の品質が高いゲームである
      • 過去にレビューしたゲームのジャンルに偏りがないタイトルである
      • トレンドタイトルである
  • 複数人でそれぞれプレイする
    • メインサイクルを2周くらいプレイしてもらう
  • Good,Badと7つの分類に分けたコメントを1つのリストに記入

    • UIについての感想をGood.Badとして一つのリストに記入
    • さらに7つの分類にコメントを振り分ける
      • 7つの分類とは?
        • 演出 音 アニメ
        • アート 世界観
        • 使いやすさ
        • 見易さ
        • わかりやすさ
        • 統一性
        • 仕様
      • UI Discussionのテスト運用時に上がったコメントから上記7つの精錬!個々のレビューコメントを網羅的の捉える!
    • Good,Badと7つの分類に分けたコメントを記入していく
      • Badには解決案を描くようにしている
        • 大事!!
      • 自分で解決案を描くことで課題解決力を鍛える
  • 7つの分類別に集計し割合を調査する

    • 7つの分類がどの分類で多いパーセントで締めているか(円グラフ)
  • 収益結果をディスカッションする

    • 同じ空間でUIの良し悪しについて話し合うことでスタッフの目線合わせや価値観の統一、育成につなげられる!
      • やんなくていいように見えるけど効果大きい!
  • 1〜5を毎週繰り返して情報を蓄積

得られた効果

育成面
  • 毎週雨継続的にゲームをプレイすることでメンバーの研究意識向上、トレンド把握
  • 他者と自社ゲームのUIデザインの品質差を実感!競争意識が芽生えた
  • 他のメンバーと同じ空間でディスカッションすることで、ジュニアメンバーのレビューコメント精度が向上し、価値観を画一化!
効率面
  • メンバー間での共通健吾が生まれ、コミュニケーションが活性化!
    • デザイン作業のゴールに早く到達できた!
  • 他者のゲームの課題について、修正案を考えることで改善思考力を強化!
    • 他者に指導を仰がずとも課題解決できるようになった!
  • 品質向上における注力ポイントが明確になることで的を絞った作業力をそそ区ごとができ、作業を迷うわずに勧められた!

GoodUI BadUI紹介

  • GoodUI BadUI 7つの分類にコメントを分け、数が多かった自称それぞれ10個を紹介

Bad UI 気をつけよう

  • [使いやすさ] UIパーツの機能が不足しているため使いづらい
    • 戻るボタンどこ? 閉じるボタンどこ?
    • ユーザーは「進む」、「戻る」や「閉じる」操作を繰り返してゲームを理解する
      • それらの導線を見失わないように目立たせよう!
  • [見易さ] UIの文字の可読性が低いため見辛い
    • はみ出してる! 小すぎる! そこ改行? 書体変わってる!
  • [わかりやすさ] UIの画面用途や攻略についての説明が不足しているため分かりにくい
    • まずユーザーに何をしてもらいたいかを明確に表示しよう。
      • 操作を少しずつ説明したいね!
  • [演出/アニメ] UIの演出不足・演出過多によりユーザーの感情を高めていない
    • ゲーム進行や獲得する要素の重要度を考慮して、適切に演出するよう心がけよう!
  • [解りやすさ] UIのビジュアル要素が整理されていないため分かりにくい
    • ごちゃごちゃしている!
    • 「解りやすさ」「使いやすさ」「ビジュアルの魅力」
      • この3つをバランスよく保つことが大事
    • 企画要件としてはいろいろ盛り込みたいけど、絞ってバランスをとる方が大事!
  • [解りやすさ] UIのビジュアルや文言が一般的でないため分かりにくい
    • ガチャのことを「ガチャ」
    • ガチャのことを「召喚」
    • ガチャのことを「呼び出し」
      • 意味わからん!
    • ゲームの世界観に即した文面で演出することは大切だけど、言葉のセレクトで一般性がないとわかりにくくなる!
  • [使いやすさ] UIが誤操作を招くため使いづらい
    • 押しづらい!
    • 主導線につながるボタン、特にゲーム攻略に関連するボタンは、ユーザーテストを通じて誤操作を十分検証し、解消しよう!
  • [統一性] UI全体のビジュアルやパーツデザイン・文字に統一性や規則性がない
    • 色も形も統一感がなくバラバラ。。。 ボタンの質感になんだか違和感 フォントがここだけ違う なぜか急に縦書き
  • [使いやすさ] 読み込み時間やロードが頻繁に起こるため使いづらい
    • プログレスバーは必須!加えてロード時間を「退屈と思わせない」工夫が大切だね
      • 最近のゲームではミニゲームや4コマ漫画をいれていたりする
  • [見易さ] UIを構成している背景描写や装飾が過多、唐突
    • 装飾盛り込みすぎ!
    • ついつい装飾やエフェクトを盛り込みたくなるほにゃらら

傾向

  • 使いやすさ30.3%
    • 操作や画面遷移が快適でないとストレス
  • わかりやすさ28.2%
    • 「情報が認識できない」「遊び方がわからない」はストレス
  • BadUIを避けるために使いやすさ、わかりやすさを改善しよう!

GoodUI 模範にしよう

  • [アート世界観]UIのビジュアルが統一され魅力的である
    • 多くの要素を同じテイストで統一しよう!
  • [演出_アニメ] UIの操作感・挙動・演出の魅力によりユーザーの感情を高めている
    • ユーザーが端末に入力よくした際のデザインや挙動は重要!心地よいビジュアルやアニメーションを追求しよう!
  • [演出/アニメ] UIの画面ごとの演出によりユーザーの感情を高めている
    • 派手に演出したり、没入感のあるログインボーナスを用いてユーザーの気分を高めよう!
      • ゲームのマップ内の宝箱をあけるという演出で没入感
  • [わかりやすさ] UIの画面用途、ゲーム攻略についての説明がわかりやすい
    • わかりやすすぎるくらいの明確さでユーザーに遊び方や有益な情報を提供しよう!
  • [アート/世界観] UIを構成しているパーツや背景・装飾が魅力的である
    • キャラ。背景・UI・エフェクト等のすべてのアート要素に統一感が出ると製品としての一体感が増し、アピールしやすい
  • サウンドの魅力によりユーザーの感情を高めている
      - [BGM] ドキドキワクワクして気分が盛り上がる!
      - [SE] ボタンを押すと音が気持ち良い!
      - [ボイス] 声優の声でゲームに没入できる!
          - これから重要度が増していく
    
    • 感情UP!
  • [使いやすさ] Uiパーツの高い有用性により使いやすい
    • 同じ操作でも複数の操作方法を用意することで、使い勝手がアップ!
      • スワイプでも拡縮
      • ボタン一つでサクサク切り替え!
    • 使うシーンによってユーザーが選べると良い
  • UI全体の演出によりユーザーの感情を高めている
    • ユーザーに長く遊んでいただくためにはおもてなしが大事!
  • 画面の遷移が容易である
    • 最短の画面遷移で遊べるように導線を整理しよう!
      • バトルまでが近い!
  • 文言おねん出によりユーザーの感情を高めている
    • ❌「槍は経験値が不足しているため生産できません ※あとEXP999必要です」
    • ⭕️「修行が足りぬ999の経験を積まねば槍は作らせぬぞ」
      • ユーザーがその世界にはいっているかのような文言が大事・没入感出せる

傾向

  • 「演出・音・アニメ」 40%
    • 感情の推移をデザインしよう!
  • 「アート・世界観」30%
    • 製品として「ビジュアルの一体感」が大事

まとめ

  • BadUIを改善するなら「わかりやすさ」「使いやすさ」
  • GoodUIを目指すなら「演出。音・アニメ」「アート・世界観」
  • コメントや表やチェックシートを活用して評価力・UI品質高めよう!
  • 効果もいっぱい!

  • 意見が集まる分類にこそ。品質改善・向上ポイントがある

  • ユーザーがどこに注目しているかを体感しよう
  • 注力ポイントを絞って作業し、効率的に品質を高めよう

質疑応答

  • 一般的なソーシャルゲームのUIを担当する人はチームにどれくらいの割合いるのか
    • 根深い問題
    • そもそも業界全体をみて、UIデザインの母数が少ない
    • ベテランに出会う確率が少ない
    • ゲーム作ってます、デザインしてますはキャラクターデザイン多い
      • UIデザインやりますって人が少ない
    • 経験して学んでいくしかないので打たれ強い人をUIデザインとして育てていく
  • UI ディスカッションするにあたって選出するにあたって国内と海外の割合どんくらい
    • 海外のゲームもやってる
    • 海外と国内だとかなりUI変わる
    • 割と仕事で何を作ってるかによるけど、日本向けなら日本のを勉強するのが早い
      • 興味持っておくことは大事