Unityでスマホゲームのホーム画面UIを作り直した記録

現在、Unityでスマートフォン向けの「おはじきバトル」を個人開発しています。

キャラクターを指で弾いて敵へぶつけるゲームで、戦闘部分に加えて、クエスト、キャラクター育成、必殺技、スキル、上限解放、スタミナなどを実装しています。

機能が増えてきた一方で、ホーム画面は開発初期の仮デザインのままでした。必要なボタンは置かれていましたが、情報の優先順位や画面全体の統一感が十分ではありませんでした。

そこで、ゲーム内で使用するUI素材を整理し、ホーム画面から作り直すことにしました。

この記事では、ホーム画面に必要な情報を決めた流れ、作成したUI素材、Unityへ組み込むときに意識したこと、作業中に難しかった点をまとめます。

ホーム画面を作り直した理由

開発初期の画面では、動作確認を優先して標準的なパネルやボタンを配置していました。

機能を実装する段階では問題ありませんが、ゲームとして見たときには次の課題がありました。

• 画面全体の色や枠の形が統一されていない
• どのボタンが重要なのか分かりにくい
• プレイヤー情報と所持アイテムの表示が整理されていない
• 下部メニューのアイコンに統一感がない
• ゲームの世界観が画面から伝わりにくい

戦闘部分が形になってきたため、次の段階として、利用者が最初に長く見るホーム画面を整えることにしました。

見た目を変更するだけではなく、今後画面や機能が増えても使い回せるUI部品を作ることも目的にしています。

最初にホーム画面の情報を整理した

デザインを始める前に、ホーム画面で何を表示するのかを整理しました。

今回、上部へ配置する情報は次のとおりです。

• プレイヤーランク
• ランク経験値
• スタミナ
• ゴールド

対人戦を予定していないため、プレイヤー名を大きく表示する必要性は低いと考えました。

その代わり、クエストへ挑戦するときに確認するスタミナと、育成に使用するゴールドを常に見られる構成にしました。

画面中央には、開催中のクエストやお知らせへつながるカードを配置します。最も重要な操作となるクエスト開始ボタンは、ほかのボタンより目立つ金色を使用する方針にしました。

下部のナビゲーションは、次の5項目です。

ホーム｜キャラ｜クエスト｜編成｜設定

項目数を5つに固定することで、スマートフォンの横幅でも均等に配置しやすくしています。

作成したUI素材

画面を一枚の画像として作るのではなく、Unity上で個別に配置できるように、部品ごとに分けて作成しました。

上部ステータスバー

ランク、経験値、スタミナ、ゴールドを表示する領域です。

経験値ゲージは、Unity側で現在値を反映できるように、素材では0％の状態を基準にしました。ゲージの背景、枠、増加する部分を分離しておけば、プログラムから割合を変更できます。

スタミナには回復画面などへ移動するための小さなプラスボタンも用意しました。

カードとパネル

キャラクターやクエストを表示するため、複数の枠を作成しました。

• キャラクターカード枠
• クエストカード枠
• 汎用パネル
• 小型パネル
• 選択中を示す枠

キャラクター名やレベルを画像へ直接書き込まず、Unityのテキストとして重ねる構成にしました。

文字を画像へ含めると、別のキャラクターで使い回せません。また、数値や言語を変更するたびに画像を作り直す必要があります。

枠と内容を分離することで、同じ素材を複数の画面で再利用できます。

用途別のボタン

操作の種類が見た目から分かるように、ボタンの色を分けました。

• 金色：クエスト開始などの主要操作
• 青色：通常の操作
• 赤色：削除やリセットなど注意が必要な操作
• 灰色：現在は操作できない状態

ボタンへ文字を直接入れず、背景部分だけを素材にしています。ラベルはUnity側で表示するため、同じボタンを異なる用途に使えます。

下部ナビゲーションのアイコン

ホーム、キャラ、クエスト、編成、設定のアイコンを作成しました。

最初は文字を含む案も考えましたが、素材としての再利用性を優先し、最終的には文字なしのアイコンを用意しました。

通常状態と選択状態の違いは、アイコン自体を増やしすぎず、背景色や選択中の枠をUnity側で切り替える方針です。

背景を透明にする理由

UnityでUI素材を重ねて使用するため、PNG画像の背景は透明にしました。

背景が白いままだと、パネルへ配置したときに四角い白色が残り、ほかの素材となじみません。

ただし、単純に背景を削除すると、本来残したい枠の内側や明るい装飾まで透明になる場合があります。

今回の作業では、次の部分を確認しました。

• 枠の外側だけが透明になっているか
• 枠線や影が消えていないか
• 左側の小さなアイコン枠も意図どおり処理されているか
• 半透明の縁に白い色が残っていないか
• Unity上で暗い背景と明るい背景の両方に置いても不自然でないか

画像編集画面では問題なく見えても、ゲームへ配置すると縁の白さが目立つことがあります。最終確認はUnity上で行う必要があります。

Unityへ組み込むときの設定

作成したPNGをUnityへ追加したあと、Texture Typeを Sprite (2D and UI) に設定します。

Texture Type: Sprite (2D and UI)
Sprite Mode: Single
Mesh Type: Full Rect

ボタンやパネルのように大きさを変更する素材は、Sprite EditorでBorderを設定し、ImageコンポーネントのImage Typeを Sliced にします。

Image Type: Sliced
Preserve Aspect: 用途に応じて設定

この9-sliceを使用すると、四隅の形を保ちながら中央部分だけを伸ばせます。

通常の拡大縮小では、角の丸みや枠線の太さまで変化します。Slicedを使用することで、横長のボタンや高さの異なるパネルでも、同じ印象を保ちやすくなります。

画面サイズへの対応

スマートフォンは機種によって画面の縦横比が異なります。

開発端末でちょうどよく見えても、別の端末では上部バーがずれたり、下部ナビゲーションが画面外へ出たりする可能性があります。

Canvas Scalerは、基準となる解像度に合わせて設定します。

UI Scale Mode: Scale With Screen Size
Screen Match Mode: Match Width Or Height

上部ステータスバーは上側、下部ナビゲーションは下側へアンカーを固定します。中央のカードは、上下の固定領域に挟まれた範囲で伸縮できるようにします。

また、ノッチや画面下部の操作領域と重ならないように、Safe Areaへの対応も必要です。

作業中に難しかったこと

一枚の完成画像とゲーム用素材は目的が異なる

完成イメージとして画面全体を作ると、デザインの方向性を確認しやすくなります。

しかし、その画像をそのままUnityへ入れても、ランク、スタミナ、キャラクター、ボタンの状態を変更できません。

そのため、完成イメージを参考にしながら、実装時には枠、背景、アイコン、ゲージを個別のPNGへ分ける必要がありました。

素材ごとの余白をそろえる

同じ大きさに見えるアイコンでも、PNG内の透明な余白が異なると、Unityで同じサイズを指定したときに表示の大きさがそろいません。

キャラクター、クエスト、編成などのアイコンは、キャンバスサイズと中心位置を統一することが重要でした。

文字を素材へ含めるか判断する

文字を含めた画像は完成形を確認しやすい反面、修正や多言語対応が難しくなります。

今回は、基本的に文字なしの素材を作り、Unity側でテキストを重ねる方法を選びました。

これにより、ボタン名の変更やフォント調整をUnityだけで行えます。

修正後のホーム画面で目指すこと

新しいホーム画面では、情報量を増やすことよりも、次に何をすればよいか分かることを優先します。

利用者が画面を開いたときに、次の流れが自然に伝わる構成を目指しています。

1. スタミナと所持ゴールドを確認する
2. 育成や編成が必要なら下部メニューから移動する
3. 中央のクエスト情報を確認する
4. 主要ボタンからクエストを開始する

すべてのボタンを同じ強さで表示するのではなく、クエスト開始を最も目立たせ、補助的な操作は一段控えめにします。

今後の予定

ホーム画面の次は、同じデザインルールを使って、ほかの画面も整えていく予定です。

• キャラクター一覧と詳細画面
• キャラクター強化画面
• クエスト選択画面
• 編成画面
• ミッション画面
• 設定画面

また、画面を作るだけでなく、実機で文字の大きさ、押しやすさ、異なる画面サイズでの崩れも確認します。

おはじきバトルは、11月の公開を目標に制作を進めています。UIの修正後は、ゲーム全体のバランス調整や公開準備にも取り組む予定です。

まとめ

今回は、おはじきバトルのホーム画面を作り直すため、表示する情報と操作の優先順位を整理し、UI素材を個別に作成しました。

実際に作業してみると、見た目のよい完成画像を作ることと、Unityで再利用できる部品を作ることは別の作業だと分かりました。

背景の透明化、余白の統一、文字と画像の分離、9-slice、アンカー設定など、実装を前提に素材を準備することが大切です。

今後も、完成した画面だけではなく、制作中に迷った点や修正した理由を開発記録として残していきます。