はじめに

これは AmusementCreators 2019 アドベントカレンダー の17日目の記事です。

こんにちは！　AmusementCreators、2年のキノ子です。
先の夏コミ向けにチーム開発した「ちみちみざむらい」では自分は主にUIデザインを担当したので、その反省を踏まえながら「UIをデザインすること」について書いていきたい思います。

UIの重要性

そもそも、どうしてUIが大事かと言うと、

という点があると思います。
でも、実際いざUI作るぞ！となると、UI素材を自作した上で画面配置やアニメーションなどをコードに落とし込む作業が必要になるので尋常じゃない作業量になると思うし、一人で開発してたら気が狂いそうですね。

なので、これを読んでるゲーム開発者の人には、自分の反省を踏み台にして良いUIを作ってほしいし、そうでない人にもUI作りの重要性を感じてもらえたら嬉しいです。

この記事で紹介すること

UI素材・画面の作り方に関して

・UIを作る手順(実際に行った工程)
・自分が覚えたこと+意識して実践したこと

これらを各工程ごとの自分の作業を辿りながら解説する

・実践的なペイントソフトでのUI素材の作成
・UIアニメ―ションや画面遷移などの諸々のコーディング

に関してはここでは取り上げない

UIの作成手順

適宜この作業を通してブラッシュアップしていく

UIを作る

必要な画面数・画面フローを考える

まず初めに、必要になる画面数と画面フローを考えます。 プレイヤーがゲームを起動させてから終了するまでの一連の流れをフローチャートにおこします。

粗が過ぎるので恥ずかしいですが、実際に自分が作ったフローチャートはこんな感じ。

最終的には、ステージをひとつにしたのでステージ選択の画面が無くなったり遊び方説明の画面が追加されてたりと、これとかなり変わっていますが、とりあえず必要最低限の部分だけすごく簡単に書きだしています。

面倒でもここでフローチャートを書いておくことで後々プレイヤーの使いやすさに配慮した画面遷移が考えやすくなります。たぶん。

画面ごとに必要な要素とその配置構成を考える

次に、その画面でのプレイヤーの操作に対応するボタンや画面表示にどんなものが必要か考えます。

例えば、タイトル画面であれば、プレイヤーが選択するボタンとして必要なものはシーンチェンジするためのボタンとして、

・ゲームプレイボタン
・ゲーム終了ボタン

が挙げられ、他に

・コンフィグボタン
・遊び方を記載したシーンへ飛ぶためのボタン

などが考えられます。

また、タイトル画面ということなので、ゲームのタイトルやロゴも表示させましょう。

これらの要素をどのように配置するかふわっと思い浮かべ、同様の作業を各画面についてもしたら次の段階へ。

配置構成にあった枠でUIの素材を作る

作成するべき要素が決まったら、いよいよ画像素材を作っていきましょう。

最初の一個を変形させて次の素材を作っていくので、最初のひとつは丁寧に、なるべく作り直すことがないように出来るといいです(自戒)。

ゲーム内容、世界観に合うように枠の色、形、フォントを決めていきます。

自分の場合はゲームステージで使用している背景をタイトル画面の背景としても流用することにしたため、そこに含まれている茶色・黄土色・緑色を用いてUIを作りました。

フォントの色は原色や真っ白でない方が目に優しいので、ほんの少しだけクリーム色になってます。
なんとなくですが、フォントでも背景でも原色を使うより少しだけ彩度を下げた色だったり、黒でも真っ黒でない黒を使うほうが見やすい画面になるような気がします。

途中のレイアウトを記録していなかったので最終的なものしか無いのですが、表示する情報を増やしたり、遷移できる画面を増やしたり色々して、完成版のタイトル画面のレイアウトはこんな感じ。

全体的な配色や構成については、見やすいようにボタンの大部分が空の水色の部分にかかるようにして、背景とUI部分がごっちゃにならないように背景に少しぼかしをかけています。

常に同じことに気を付けていればいいという訳ではなく、使う画像や素材、色やテーマなどによってデザインの方法はまちまちだと思いますが、上記のようなに見やすさ第一で気を付けていれば、可読性に関しては保たれるのではないかと思います(かっこよさとかは分からん)。

ちなみに、画像をグレースケールにしてみることで文字の配色や明度による可読性の確認をすることが出来るので、見やすい色になっているかどうか心配になったら一度スクショなりペイントソフトで編集するなりして 試してみるといいです。

こんな感じで、明度の差が少ないと見辛くなるので、ボタンの地の色と文字の色は特に気を付けて差をつけるようにすると良いですね。

UIアニメーションをつける

さて、ここまで出来たらもう完成でもいいのですが、より見栄え良くリッチなUIにするためにアニメーションをつけましょう。

コーディングについても書いていきたいところですが、最初に述べた通り、具体的なコードに関しては長くなってしまうので、ここでは割愛します。
その代わり、zamakaさんがコルーチンを用いたアニメーションのコーディングについて丁寧に解説されてるので興味がある方はそちらを参照してください。

コルーチンを使おう！ - zamakaのブログ

UIにアニメーションをつける理由には、「かっこよさ」のためと「分かりやすさ」のための2つがあると思います。
時間がない場合は、そのうちの「分かりやすさ」に必要なアニメーションを優先して作ると良いでしょう。

「分かりやすさ」に必要なアニメーションというのは基本的にはユーザーの操作をより視覚的に明示的にするものである、ということを念頭に置いて、アニメーションのイメージを考えていくことが大切です。

例えば、今作ではボタンが選択された場合には上下に早く振動する動きをし、そのまま選択中である場合はボタンがゆっくり拡大縮小する動きをするようにしてあります。
これによって、ユーザーがどのボタンを選択しているのか明確にし、かつ、ユーザーの操作するオブジェクトがゲーム本編以外にも増えることになるので、「分かりやすさ」と「動かしてる感」をユーザーが得ることが出来ます。

このようなアニメーションの付け方というのはいつも同じやり方が通用する訳ではないので、具体的な方法としては書けないのですが、既存のゲームのUIを参考に自分の技術力と相談しながら、ユーザーの気持ちになって考えていけたらいいのかなと思います。

まとめ

手短にUIの作成方法について書きましたが、実際は地道に文字色の確認をしたり、座標をポチポチ直したりと、すごく地味な作業が多いです。
何かしら直すたびにビルドし直さないといけないので時間もかかるし…。
ぶっちゃけしんどいですが、プレイヤーにとってとっつきやすいゲームを目指さないと手に取ってすらもらえないので、UIは馬鹿に出来ないです。
ともあれ、自分としては改めてUIを見直してみて改善点がたくさん見つかったので、次にゲーム作る時はもっと上手く作っていきたいな。

思ったより、後の手順になるほど方法論的に言えることが少なくて煩雑な割りに中身スカスカなような気がしないでもないですが、この辺で終わりにします。

色々書きましたが一番伝えたかったのは、UIにはユーザーの気持ちにたったデザインを心掛けることが大切ってことです。

こんな感じのことに気を付けて、是非かっこいいUIを作ってみてね！