つぶやく［CEDEC 2016］分かりやすいゲームのUIを作るには？ アニメーションを用いたプレイヤー誘導のテクニック
 |
講演を担当したのは，オインクゲームズでUIデザインを担当している新藤 愛大氏だ。カードゲームの開発で知られるオインクゲームズだが，スマートフォン向けゲームでも質の高いタイトルをリリースしており，同社の知見がどのようなものかは興味をそそられる。
実際に同社のデザイナーが，どのような意図を込めてUIを作り上げていったのか，その過程を見ていくことにしよう。
 |
ゲームのUIに込められたゲーム制作者の意図
新藤氏の基本的な仕事は，デザイナーから上がってきたイメージをUnityに組み込んで，ゲームロジックと連携することでゲームとして成立するように，見た目や動き，設置場所の実装を行うというものだ。
その作業は，レイアウト通りの配置をすれば終わりというものではない。プレイヤーに対する分かりやすさはもちろんだが，ゲームデザイナーがどういう意図を持ってデザインしているのかを把握したうえで，それをどうUIとして表現していくかが重要になる。さらには，ゲームとしての気持ち良さも考慮したうえで，UIにも動きをつけて，その効果をゲームに合わせて最大化するように心がけているという。
 |
講演では，まずUIにアニメーションがあるゲームとないゲームの映像を見せて，「プレイヤーへの分かりやすさ」を実現するには，アニメーションが必要であるということを分かりやすく示した。
 |
新藤氏は，言葉ではなく視覚で訴えかけるアニメーションは，ゲームにおける複雑さをプレイヤーうまく伝える役割を担えると述べる。アニメーションを使うことで，平面だけでなく時間軸を使ったデザインが行えるので，平面での展開だけでは理解しにくい問題を，解決できることが多々あるのだという。
とはいえ，ただ動かしているだけのアニメーションでいいわけはなく，どういった意図をもって動かしていくかが大事なようだ。講演で新藤氏は，「見落としを防ぐ」「勘違いをなくす」「迷わせない」「理解を助ける」「不安にさせない」といった観点から，実例を交え解説した。
アニメに意図を組み込んでいく
最初の項目である，「見落としを防ぐ」ための動きとはどういったものだろうか。
ゲーム内では，パラメータやステータスが目まぐるしく変化していき，それによって，必要な情報を見落としてしまうということがよくある。これは，「変化を起こしていること自体に気づかない」「変化が小さくて気づかない」，そして「変化への過程が示されていない」といったことが原因だ。
これを解決するためには，「見せたいものへ注意を向けさせる」「動きそのものを強調する」「変化の過程をしっかり描写する」ことが重要だという。
 |
 |
次の「勘違いをなくす」とは，使ったのに使ってないように見えたり，消えてないのに消えたように見えたりといった勘違いをなくすためのアニメーションを意味する。こうした勘違いは，違う要素であるにも関わらず視覚的に同じ表現を使わっていたり，表現を省略してしまうことで発生しがちだという。
そこで対策としては，とにかく違いを明確にし，演出の省略を極力避けることが勘違いを避ける大事なポイントになっていると，新藤氏は説明していた。
たとえばMUJOでは，ピースを消したときと合体させたときに，どちらもピースが消えているように見えてしまうことを避けるため，合体したときは，いったん浮き上がったような動き付け加えることで，違いを強調したという。
また，MUJOは，敵に一定のダメージを与えないと回復されてしまうというルールになっているため，単純に数字の変化を見せるだけでは，「攻撃したのに，なぜか回復している」ように見えてしまうことがあったのだそうだ。そこで回復しているときは，アニメーションに加えて数字の色も青に変えることで，さらに分かりやすくしたとのことだった。
 |
 |
なぜ迷ってしまうかというと，プレイヤーにとってゲームの要素が並列に見えてしまったり，操作のとっかかりを失ってしまうのが原因だと新藤氏は指摘する。そこで，「どの要素が大事か」の優先度を分かりやすくしたり，操作してほしい部分を強調したり，あるいは，操作してほしい状態にあることを認識させるような動きをつけることで解決できるという。
人間は，動いているものに注意が向くので，押してほしいボタンだけをアニメーションで動かしておくと，その意図がプレイヤーに伝わりやすいわけだ。
 |
 |
ゲームへの「理解を助ける」要素として，新藤氏は，UIの動きによってゲームのルール自体を説明させることに留意しているという。
そのポイントは時間と視線。ゲーム上重要なものは，時間をかけてじっくり見せ，それ以外の付随する要素は，テンポよく配置する。さらに，見せる順番により視線の誘導も使って，ゲームを理解する手助けとしているとのことだ。
 |
最後の要素は「不安にさせない」。ボタンを押しても反応がない状態が続くと，プレイヤーには操作を受け付けたのかが分からないし，反応がない理由も分からないとなれば，不安になる。このような状況を避けるためには，すべてにおいて即座に何らかの反応を返すか，反応自体に差をつけることが有効だと，新藤氏は説明していた。
 |
 |
講演の最後に新藤氏は，分かりやすいアニメを作るために気をつけるべきポイントを解説した。
まず気をつけたいのは，前後のつながりがしっかり見えるような連続性を持たせること。ぶつ切りに見えるような表現や，変化に説得力のない表現にしてしまうと，それがプレイヤーに不安を与え，混乱してしまいかねないのだ。
また，人は同時に複数の要素に対して注意を払うことはできないため，あらかじめプレイヤーの視線の動きを設計することも重要だという。時間差で表示して視線をうまく誘導するといった工夫が大切のようだ。画面をどういう順序で見ていくのか，開発画面上で視線に合わせて線を引いてみるだけでも，不必要な動きを整理できるだろう。
そのほかに，プレイヤーに「なぜ？」と思わせないようにしたり，結果だけ描画するのではなく，原因となった事象もセットで描画するといった工夫も大事だということだった。
新藤氏が解説したポイントのなかで，筆者が一番面白く，「そこまで考えるのか」と思ったのが，画面内だけでなく画面外まで含めて，全体の空間がどうなっているか考えて動きを考えてつけていくというものだ。
たとえば，メニューひとつをとっても，横に並んでいるイメージであれば，画面外にある別のメニューをスクロールにより入れ替えて表示する。また，メニューが重なっているイメージであれば，前後に入れ替えるように動かすのが，自然な動きだという。
この話を聞いて，「ゲーム空間を逸脱するような動きはプレイヤーの混乱を招きやすいので，UIを作るためにそこまでイメージしておかないといけないのか……」と筆者は思ったのだが，その直後，新藤氏は，「最も大切に思っていることは，面倒くさがらないということ。自分もアニメーションをつけるときは，面倒くさくて憂鬱になるのですが，そこを乗り越えるだけの見返りがあると思います」と述べたのだった。やはり，プレイヤーを楽しませるゲームを作るために近道はなしということか。
最後に新藤氏は，「ゲームとして分かりやすくプレイできることを伝えるためにも，（UIの）アニメーションは重要」と締めくくって講演を終了した。ゲームとUI，そしてアニメーションをしっかり結びつけた内容で，新藤氏の知見や，UIのアニメーションをどう作るか，その基本が詰まった講演だったと思う。
