初心者の初心者による初心者のためのUIデザイン with Unity
こんにちは。Annulus Gamesです。
突然ですが皆さん。Unityでゲームを作っている時、
「UIがダサい...」
と思うこと、ありませんか？
今回は2Dアクションゲームを例に、「それっぽいUI」を目指して作ってみたいと思います。
この記事の目的
「UIデザインとかなんもわからん」というUnity使いでも、それなりにカッコ良いUIが作れるようになること。
初心者向けに初心者が書いてるだけなので、UIデザインに詳しい方には参考にならなかったり、間違っていたりする部分があるかもしれません。
あくまでこの記事の目的は「それっぽいUI」が作れるようになることです。
使用するアセット
今回使用するアセットはこちら。
インポートが完了したら、早速Demoシーンを開いてみましょう。
そのままだと位置がやや中途半端なので、少しカメラを右にずらしておきます。これで準備は完了です。
要素を書き出す
まずは、画面上に表示する必要がある要素を書き出していきましょう。
これはどんなゲームにするかによって変わりますが、とりあえず表示してみたいものを挙げてみます。
・HP
・コイン
・タイム
こんなところでしょうか。
さらに今回は、スマホで遊べるようにボタンも配置します。
・左右ボタン
・ジャンプボタン
・アクションボタン (物を投げる、ドアを開ける...など)
・ポーズボタン
これだけあれば十分です。それでは作っていきましょう。
とりあえず作る！
UnityのUIはオブジェクトを配置する要領で簡単に構築できます。(この記事はデザインがテーマなので、操作の説明は省略します)
スマホでの操作を想定しているので、ボタンは画面下、HPやコインなどの表示は画面上に配置します。
TextやSlider、Imageを駆使し、出来上がったUIがこちら...!
......ダサい。
なんというか...いかにも「Unityで作った感」溢れるUIですね...
それではここからは、このUIをどうにかして「それっぽいUI」に改良していきます。
どのようなデザインにするか？
まずはUIをどのようなデザインにするかを考えます。
UIをそれっぽく見せるコツは「ゲームの画面と調和するデザインにすること」です。「凝ったデザインで目を引く」というのも一つの方法ですが、主張を抑えてそれっぽくする方が遥かに簡単です。
じゃあ具体的にどのようなデザインにすればいいのか...
参考として、UIのデザインをする上でよく聞く「スキューモーフィズム」「フラットデザイン」「マテリアルデザイン」について軽くまとめてみます。
少々長くなるので、興味のない方は読み飛ばしてください。
スキューモーフィズム (Wikipedia)
「スキューモーフィズム（英: skeuomorphism）またはリッチデザイン（英: Rich Design）とは、他の物質に似せるために行うデザインや装飾を指す用語である。たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあてはまる。」
要するに、ボタンやカレンダーなど実際の物質に似せた、リアルなデザインのことです。現実に似せることで、馴染みのあるデザインにすることができます。フラットデザインの登場により用いられることは少なくなりましたが、最近は、スキューモーフィズムにフラットデザインの利点を取り入れた「ニューモーフィズム」が注目されています。
フラットデザイン (Wikipedia)
「フラットデザイン（英: Flat design）は、グラフィカルユーザインタフェース（ウェブアプリケーション・モバイルアプリケーション）や出版物などの視覚に訴える分野において、ミニマリズムを取り入れたデザインであり、スキューモーフィズムやリッチデザインの対義語とされている一方で、スキューモーフィズムを取り入れる場合もある。」
...何やら難しいことを言ってますが、簡単に言うと「装飾や立体感を取り払ってシンプルにしたデザイン」のことです。現在のiOSや多くのWebページがフラットデザインを採用しており、今でも主流のデザインとなっています。
マテリアルデザイン (material.ioより、翻訳はGoogle翻訳)
「Materialは、チームがAndroid、iOS、Flutter、およびWeb向けの高品質のデジタルエクスペリエンスを構築するのを支援するためにGoogleによって作成されたデザインシステムです。
マテリアルデザインは、光を反射したり影を落としたりする方法など、物理的な世界とそのテクスチャに触発されています。素材の表面は、紙とインクの媒体を再考します。...」
マテリアルデザインはGoogleが提唱し、明確なガイドラインを定めているデザインです。説明が難しいですが「現実の素材のメタファーとしてUIをデザインする」といったところでしょうか。AndroidのUIはこのマテリアルデザインに基づいて設計されています。
詳しく知りたい場合は各自で調べてください。(丸投げ)
これらを参考にしつつ、お手軽でおしゃれなUIを作っていきましょう。
改良① HPやコインの表示
まずは左上に配置されているHP・コイン・タイムのテキストを変えていきましょう。
まずはHP。ダメージを受けたらゲージが減るのであれば、"HP"というラベルは無くても伝わります。よって不要なので削除。
さらに、デフォルトでImageのSource Imageに指定されている「UISprite」と「Background」を外し、Noneにします。
外枠が消えてしまったので、新たに追加します。
SliderのBackgroundにOutlineコンポーネントを追加。色はBackgroundのImageと同じがいいでしょう。太さはお好みで。
ぶっちゃけまだダサいですが、後でまた調整するので、とりあえず今はこれでOKです。
次はコインとタイムの表示。コインやタイムなど、ゲーム内の数値を表示する場合はテキストではなくアイコンを使ったほうが見やすくなります。今回はアセット内に画像が用意されているのでそれを利用しましょう。
"Coin"、"Time"の文字を消し、代わりにImageを配置。それぞれ画像を割り当てます。大きさはテキストより少し大きめにするとちょうど良い感じ。
時間のアイコンは、HPやコインと見分けがつきやすいように青色を選びました。
ここまではこんな感じ。かなり良くなりましたが、もう一工夫加えます。
せっかくなので、Textのフォントを変えてみましょう。
今回はこちらのフォントを使います。
フォントをダウンロードしたら、二つのTextのフォントを変更します。
そして、Colorをアイコンに合わせて変更。
このまま少し見づらいので、Outlineを追加。Colorは白に設定します。
できるだけ色づかいを少なくし、統一的なデザインを心がけるとそれっぽくなります。
これでひとまず、左上の表示は完成です。(HPゲージは後でボタンと一緒に調整します)
改良② ボタン
次はボタンを改良していきます。今回はゲーム画面の雰囲気に合った、角を丸めたデザインにするのが好ましいでしょう。
というわけで、下の画像を使います。
...え？何も表示されない？
いえいえ、見えないだけですよ。白い丸の画像です。
ダウンロードしたらUnityに読み込み、Sprite Editorを起動します。
Borderを全て128に設定します。これで角丸ボタンの素材は完成です。
では、試しに下のボタンの画像を差し替えてみましょう。角の丸みはPixels Per Unit Multipliarで調整できます。
このくらいでしょうか。次は、色を変えてみます。
地面の色に合わせて緑色にしてみました。
さらにOutlineを追加。
Outlineはなるべく目立たないようにしています。
可能ならボタン内のTextもアイコンに差し替えるべきですが、用意するのも手間なので、代わりにTextを少し変えてみます。
先ほどダウンロードしたフォントに変更し、色は白に。さらに見やすくするため、Outlineを目立たない程度に入れます。
角を丸くしたボタンは、安心感や親しみやすさを与えることができます。この手法はWebデザインでも主流となっていて非常に有用ですので、ガンガン使っていきましょう。
さらに、ポーズボタンも変えていきましょう。小さなボタンはアイコンにしてしまうのが吉。ポーズのアイコンはアセットに含まれているので、それを使います。
それに合わせてボタンの色や丸みを再調整します。
...ここにきてボタンが大きすぎる気がしてきたので、それも修正。
ついでに、後回しにしてきたHPゲージも直してしまいましょう。
ボタンに使った円の画像をSliderのFillとBackgroundに適用します。
このままでは黒色が浮いているので、色も調整します。
Outlineはボタンと同じ色に。また、ImageをSliderの後ろに追加して、より見やすさと統一感を高めてみました。赤色は彩度を下げて柔らかく。
また、余白もボタンに合わせて調整しています。
改良③ 立体感を出す
これでも十分良くなりましたが、さらに影を追加して立体感を演出してみましょう。
下のボタン4つにShadowコンポーネントを追加します。
影は斜め下ではなく「真下」に落とすのがコツです。色はボタンより若干暗いくらい。
HPゲージにもShadowを追加。
さらに、コインとタイムのTextとImageやポーズボタンにも影を追加しましょう。
主張が強くなりすぎないように、適度に影をつけてみました。
改良④ ゲーム画面との位置を調整する
これで見た目は完成ですが、このUIには一つ問題が残っています。実際に操作した時に「指で隠れて地面が見えない」のです。
これはカメラワークを工夫することでも解決できますが、画面にボタンで見えない部分があるのはやや理不尽な感じがします。
そこで今回は、ボタンの部分ごと帯で覆ってしまうことにします。イメージとしては「ケロブラスター」のような感じでしょうか。
まずはカメラの位置や範囲を調整し、下の画像のようにします。
そして、カメラ外が写っている部分をImageで隠します。色はお好みで。
こうすることで、ボタンを押すために指を置いても画面が隠れなくなります。
これで完成です！
出来上がったUI
Before:
After:
なんということでしょう。「Unityで作った感」はどこへやら、「いかにもゲームっぽい」UIに。
少しの手間で、これだけUIが改善されるわけです。
参考になったかはわかりませんが、皆さんもぜひ、UIにこだわってみてください。
改善案
さらにこのUIを良くしていくために
・アニメーションをつける
デフォルトのButtonは若干色が変化するだけで押してる実感が少ないように思われます。AnimatorやTweenを駆使してアニメーションを追加すれば、より使いやすいUIを作ることができます。
・アイコンを追加する
素材の用意が大変なため今回は見送りましたが、ボタンにアイコンがあれば、押した時に何が起こるか分かり易いのではないでしょうか。また、他のゲージ(MPなど)を追加したい場合も、ゲージの区別をつけるためにアイコンがあってもいいかもしれません。
要点のまとめ
・UIは少しの手間でそれっぽくなる！
・フラットデザインとマテリアルデザインを参考に
・色やデザインを統一して一体感を出す
・ボタンの角は丸く
長い記事でしたが、最後までお付き合いいただきありがとうございました！
この記事が気に入ったらサポートをしてみませんか？