画像編集ソフト不要！いい感じのUIを作る小手先テクニック集！

本記事の内容

・デザインの知識一切不要！小手先のテクだけでUIをオシャレにする方法

はじめに

この記事は、デザインの本質的な要素や、原理・原則とかは考えず、エンジニア気質の筆者が小手先だけでそれっぽいUIを作るための記事です。
ラクしてそれっぽいものを作りたい人向けの記事ですので、ご留意ください。

デフォルトのUIがダサすぎる！

Unityを長い事触っていると、世のゲーム制作者が作ったゲームがUnity製かどうかがすぐ分かる能力が身につきます。
いわゆる、「Unity臭さ」というものです。

この、「Unity臭い」と感じられてしまう要素の1つが、UIデザインです。デフォルトで用意されているUIパーツをデフォルトのまま使っていると、このUnity臭さを即座に感じてしまいます。

けど、デザイナーでもない人にとって、どうやったらそれっぽいUIになるのか、アセットを買ってみたはいいものの、なんかいい感じにならない...そんな人もきっと多いと思います。

良いデザインのUIを作るには、本質的にはキチンとデザインを学んで、原理・原則を守ったものをつくるのが正解ルートではありますが、もっとラクして良さげなモノを作りたい！という人もきっと多いでしょう(私はそうでした)。
そこで、小手先だけでできる簡単UIデザインアップの方法を紹介します。

この記事では、以下のダメな見本を改善していく形で解説していきます！

影をつけて立体感を出せ

ボタンには影をつけろ！

一番即効性のある方法です。これだけで印象は簡単に変わります。

やり方は簡単。実はUnityの標準コンポーネントで実現出来ます。
影を付けたいオブジェクトに、Shadowというコンポーネントをアタッチするだけです

EffectDistanceで影の大きさを調整できます。ただ、この方法はインナーシャドウ(オブジェクトの内側に影を付ける)は出来ないので要注意。
左がボタンの影無しで、右がボタンの影ありです。

右の方が、明らかに「押せそう」なボタンな感じがしませんか？
世の中のゲームに限らずありとあらゆるUIをよ～く観察すると、押したら反応するオブジェクトにはほとんどの場合影が付いています。
ブルーアーカイブを例に見てみます。ボタンになっているオブジェクトには影がついていますね。

引用元URL：https://gameui.matme.info/blog/archives/76328

また、ボタン以外でも、オブジェクトのまとまり単位で影を付けるのも効果的です。
例えば、ポップアップのパネルに影を付けると、情報としてのまとまりがわかりやすくなり、見やすく、楽しいUIに近づきました。

ワンステップ上の影を使う(有料アセット)

Unity標準のShadowコンポーネントだと、単純な影しかつけることが出来ませんが、True Shadowというアセットを使うと、より自然な影を付けることが出来ます。