どうもハジメです。
今回は、デザイン仕様書を作成する前に、何にに気をつければいいかをまとめたものになります。
オリジナルなUIの設計が難しいと感じていませんか？とりあえず他のゲームやアプリの真似をすることが無難で簡単だからそちらに流れていませんか？
そんな方のために、より良いUIを考えるときに何を足し引きすればいいかを考えるための手助けになるような内容になっています。
表現方法も含めて方針が決まってからより詳しく仕様を書いたほうがいいと考えています。
具体的には、以降に説明していきます。
1 UI・画面設計
1-1 何を表示させるかを考える
今回もスプラトゥーンのバトル中（ガチホコ）のUIを考えることを想定して
説明していきたいと思います。
（※エフェクト・モデルなどは今回は基本的に対象としません）
step1 必要そうな情報をすべてかき出します。
書き出す作業は最初なれなくてもやるべきです。
そもそもデザインは「カッコよく、面白そう」にすることも重要ですが、「何かを伝える為に用いる」ことも頭に入れておく必要があります。
つまり、何を伝える必要があるかを企画は考える必要があります。
デザイナーさんはそれをどうやって伝えるかが仕事の一つになります。
◆競技のルール
・試合時間
・勝敗
・スタート
・終了
◆戦闘
・倒した
・倒された
・インク（残弾数）
・インク切れ
・自分のサブ・スペシャル
・被弾状況
◆状況説明
・ホコ持ちの場所
・攻め込んだ位置（勝敗に左右するやつ）
・ホコが奪われた
・ホコ持ちを倒した
◆他のプレイヤー
・生死
・プレイヤー名
・敵味方の識別
Step2 常に出すべきかどうかを判断する
ここでは、常に表示しないとダメか、一時的な表示でないと成立しないかどうか。
ここを間違えると画面はぐちゃぐちゃになり、とても他の人にプレイしてもらうには難しいものになります。
Step3 どの位置・どれぐらいの長さ表示するかを考える。
場所や位置に関してはデザイナーさんの仕事でもあります。
最終的にうまく表示できるのであれば企画・デザイナーどちらが考えてもいいと思っています。
ただ、開発初期や完成イメージは企画にしかないケースも多いかと思うので、企画にとって様々な状況を想像しながら位置を検証する能力はあったほうがいいと考えています。
「とりあえず一度、配置を決めてみましょう！」
個人的に頭の中で検証することとして
◆プレイヤーの操作キャラが動いた時に邪魔にならないか？
◆試合が始まった時に特定の状況で不都合はないか？
◆自分はいいが、相手にとってわかりやすいものか？
◆表示する尺感は適切か？
◆ある程度繰り返し見ている人にとっても適切か？
頭の中で何度も何度もシミュレーションをしてそのアプローチで問題が生まれないか検証します。
ここが深く考え抜けているかどうかで開発途中の作り直しの回数は減りますし、デザイナーさんへの説明も明確になると思います。
1-2 全体の情報整理、優先順位付け
ある程度の表示物の位置や表示の仕方を決めた後は、表示物の重要さに合わせて優先順位をつける作業です。
ユーザーの視線や操作の誘導をどうやってやらせたいかを決めて記すものです。
伝えたいからといって全て同じレベルで表示してしまうと結局どれも目についてしまい、こちらの思ったようにプレイをしてもらえないかもしれません。
また、ユーザーにとってこちらから意図的に表示しなくても意識を向けることとの折り合いをうまくつける必要があります。
その上で、気を付けるポイントを３点ほど紹介いたします。
Step1 最も伝えたいことは何か？
開発するメンバーに対しても意識的に１番ユーザーに伝えなければいけないものが何か？はしっかり伝えておきたいところです。
そこからグラデーションをつける作業に関してはやはり作りながら調整が必要になるかと思います。
そこでスプラトゥーンの「ガチホコ」バトルにおいて
ユーザーに対して一番意識づけておく必要があるものは何か？
通常の戦闘の状況を伝えることを置いておくと、
それは、紛れもなく「ホコ」の状況です。
仕上げ方には個人差があると思いますが、思い切って、一番伝えたいものをとりあえず中心に置いて調整するとまとまりやすいとは思います。
Step2 状況を分類して整頓する
次に、状況が変わることで、同時に表示させることができない、もしくは表示させる必要がないものを紹介します。
例えば、
試合が始まっている時とそうでない時。
自分が倒されている時といない時。
それによって、同時に表示をさせる必要がないものは、UI表示をあれこれ悩む必要はなく分けて考えればいいからです。
自分が倒されているのに、自分の攻撃を発射することは無いですよね？
だから、戦闘に関わる表示の大半は不要になる可能性があります。
Step3 配置位置を注視するタイミングで分けてみる
これは一概にそうすれば正解というものでも無いのですが、まずはこのアプローチをとってみるといいと思います。
どう言うことかと言うと、ユーザーは画面をみる際に何か目的を持ってみています。（本人が意識しているかどうかは関係なく）
例えば、
・相手を倒したいと思っている時
こういった時は、相手の場所や自分の場所、相手の武器タイプは何か？
もっと細かいレベルだと、相手の射ってきた銃弾を避けながら、自分のエイムを確実に当てることに意識の大半を占めると思います。
・今の戦況をみたい（優勢度度合いを知りたい）
この場合は、今ホコがどこにあるか？見方は生きているか？どちらのほうが優勢かなど。を知りたいと思います。
1-3 スプラトゥーン２で見てみよう！
実際にスプラトゥーン２の画面で検証してみましょう。
プレイ画面は以下のような画面配置になっています。
◆グループ１
ここでは、戦闘可と戦闘不可のタイミングで表示物を切り替えている。
・戦闘不可
[試合が始まっていない時]：試合の開始や終了の表示など
[試合が始まっている時]：自分が死んだ状態や誰に倒されかかなど
の表示がされている。（画像には無いですが）
・戦闘可
自分が生きている状態で、ありとあらゆる攻撃エフェクト、被弾エフェクトが表示される。
そもそものマップや相手、見方プレイヤーのモデルをメインにみていると思います。
◆グループ２
このグループでは主に戦況確認用の表示が占められているます。
・味方の生死（味方のスペシャルの状況）
・試合の優勢度（ホコの優勢度）
・残り時間
比較的、ずっと見続けている必要は無いですが、試合をする上で重要な情報が多いです。チラッと見て認識できればOK。
セオリー的には中央の次に画面上、画面下は視認しやすいエリアになります。
◆グループ３
画像には表示されていないですが、ここには自分のプレイヤーのインク状況などが表示される場所ですね。
ここをずっと見てなくても、慣れてくれば、感覚的にわかります。画面脇に外した理由も納得です。
◆グループ４
ここでは、サブウェポンの状況を表示してあります。
基本的にここもずっとみる必要がなく、SEなどもでも溜まっているかどうかはかかるため、画面端に一応載せているといった感じでしょうか。こちらも数回プレイすると意味がわかってきて、みる機会がグッと減ると思います。
画面の整頓と配置がセオリー的ではありますが、わかりやすい例だと思います。
まとめ
いかがでしたでしょうか？
実際に、開発現場では、一旦形にしてみて、細かい表示サイズの微調整や表示タイミングの調整をしていきます。そう取っ替えするなんてこともあるかもしれません。
そこである程度の形になってから他のメンバーに見てもらって、見辛いものを言ってもらったり、気になる部分を上げてもらうものを微調整すると効率的には良いかなとは思っています。
今回は、UI・画面設計に関しての記事をまとめてみました。
実際の書類に落とす場合のまとめはまた別途機会を用意して紹介してみたいと思います。
今回の内容が、無作為に何を載せるかどうかを迷ったりする際に
少しでも助けになれば幸いです。