AmusementCreators、2年のキノ子です。先の夏コミ向けにチーム開発した「ちみちみざむらい」では自分は主にUIデザインを担当したので、その反省を踏まえながら「UIをデザインすること」について書いていきたい思います。・UIをきちんと作ることで見栄えがする-->BGMしかり、イラストしかり、ゲームのパッと見の完成度に深く関係してる・遊び方を視覚的に分かりやすく伝える事ができる-->ゲームに触り慣れてる人はもちろん、慣れてない人にも正しく遊んでもらえるという点があると思います。実際いざUI作るぞ!となると、UI素材を自作した上で画面配置やアニメーションなどをコードに落とし込む作業が必要になるので尋常じゃない作業量になると思うし、一人で開発してたら気が狂いそうですね。これを読んでるゲーム開発者の人には、自分の反省を踏み台にして良いUIを作ってほしいし、そうでない人にもUI作りの重要性を感じてもらえたら嬉しいです。最初に必要なこと1.必要な画面数&フローを考えるサイクル的に繰り返す2.画面ごとに必要な要素・配置構成を考える3.配置構成にあった枠でUIの素材を作る4.UIアニメーションをつける適宜この作業を通してブラッシュアップしていくUIを作る必要な画面数・画面フローを考えるまず初めに、必要になる画面数と画面フローを考えます。プレイヤーがゲームを起動させてから終了するまでの一連の流れをフローチャートにおこします。粗が過ぎるので恥ずかしいですが、実際に自分が作ったフローチャートはこんな感じ。最終的には、ステージをひとつにしたのでステージ選択の画面が無くなったり遊び方説明の画面が追加されてたりと、これとかなり変わっていますが、とりあえず必要最低限の部分だけすごく簡単に書きだしています。面倒でもここでフローチャートを書いておくことで後々プレイヤーの使いやすさに配慮した画面遷移が考えやすくなります。画面ごとに必要な要素とその配置構成を考える次に、その画面でのプレイヤーの操作に対応するボタンや画面表示にどんなものが必要か考えます。・ゲームプレイボタン・ゲーム終了ボタンが挙げられ、他に・コンフィグボタン・遊び方を記載したシーンへ飛ぶためのボタンなどが考えられます。タイトル画面ということなので、ゲームのタイトルやロゴも表示させましょう。これらの要素をどのように配置するかふわっと思い浮かべ、同様の作業を各画面についてもしたら次の段階へ。配置構成にあった枠でUIの素材を作る作成するべき要素が決まったら、いよいよ画像素材を作っていきましょう。最初の一個を変形させて次の素材を作っていくので、最初のひとつは丁寧に、なるべく作り直すことがないように出来るといいです(自戒)。ゲーム内容、世界観に合うように枠の色、形、フォントを決めていきます。用いてUIを作りました。フォントの色は原色や真っ白でない方が目に優しいので、ほんの少しだけクリーム色になってます。なんとなくですが、フォントでも背景でも原色を使うより少しだけ彩度を下げた色だったり、黒でも真っ黒でない黒を使うほうが見やすい画面になるような気がします。途中のレイアウトを記録していなかったので最終的なものしか無いのですが、表示する情報を増やしたり、遷移できる画面を増やしたり色々して、完成版のタイトル画面のレイアウトはこんな感じ。全体的な配色や構成については、見やすいようにボタンの大部分が空の水色の部分にかかるようにして、背景とUI部分がごっちゃにならないように背景に少しぼかしをかけています。常に同じことに気を付けていればいいという訳ではなく、使う画像や素材、色やテーマなどによってデザインの方法はまちまちだと思いますが、上記のようなに見やすさ第一で気を付けていれば、可読性に関しては保たれるのではないかと思います(かっこよさとかは分からん)。試してみるといいです。こんな感じで、明度の差が少ないと見辛くなるので、ボタンの地の色と文字の色は特に気を付けて差をつけるようにすると良いですね。UIアニメーションをつけるさて、ここまで出来たらもう完成でもいいのですが、より見栄え良くリッチなUIにするためにアニメーションをつけましょう。コーディングについても書いていきたいところですが、最初に述べた通り、具体的なコードに関しては長くなってしまうので、ここでは割愛します。その代わり、zamakaさんがコルーチンを用いたアニメーションのコーディングについて丁寧に解説されてるので興味がある方はそちらを参照してください。zamakaのブログUIにアニメーションをつける理由には、「かっこよさ」のためと「分かりやすさ」のための2つがあると思います。時間がない場合は、そのうちの「分かりやすさ」に必要なアニメーションを優先して作ると良いでしょう。「分かりやすさ」に必要なアニメーションというのは基本的にはユーザーの操作をより視覚的に明示的にするものである、ということを念頭に置いて、アニメーションのイメージを考えていくことが大切です。今作ではボタンが選択された場合には上下に早く振動する動きをし、そのまま選択中である場合はボタンがゆっくり拡大縮小する動きをするようにしてあります。これによって、ユーザーがどのボタンを選択しているのか明確にし、かつ、ユーザーの操作するオブジェクトがゲーム本編以外にも増えることになるので、「分かりやすさ」と「動かしてる感」をユーザーが得ることが出来ます。このようなアニメーションの付け方というのはいつも同じやり方が通用する訳ではないので、具体的な方法としては書けないのですが、既存のゲームのUIを参考に自分の技術力と相談しながら、ユーザーの気持ちになって考えていけたらいいのかなと思います。まとめ手短にUIの作成方法について書きましたが、実際は地道に文字色の確認をしたり、座標をポチポチ直したりと、すごく地味な作業が多いです。何かしら直すたびにビルドし直さないといけないので時間もかかるし...。ぶっちゃけしんどいですが、プレイヤーにとってとっつきやすいゲームを目指さないと手に取ってすらもらえないので、UIは馬鹿に出来ないです。自分としては改めてUIを見直してみて改善点がたくさん見つかったので、次にゲーム作る時はもっと上手く作っていきたいな。思ったより、後の手順になるほど方法論的に言えることが少なくて煩雑な割りに中身スカスカなような気がしないでもないですが、この辺で終わりにします。書きましたが一番伝えたかったのは、UIにはユーザーの気持ちにたったデザインを心掛けることが大切ってことです。