Unity UI Imageの使い方 | 画像表示と設定 | Unity初心者何から始める.com

タイトル画面にロゴやアイコンを並べて、ゲームらしい雰囲気にしたいですよね。

UnityのUI Imageを使えば、Canvas上にSprite画像を表示できます。

ボタンの背景、HPバー、アイテムアイコンなど、あらゆるUIの土台になるコンポーネントです。

この記事では、Imageの追加からSprite設定、色調整、表示トラブルの対処までを解説します。

Imageを置いたのに何も表示されない…
Source Imageに何を設定すればいいか分からない。
画像が引き伸ばされて変形してしまう。

✨ この記事でわかること

HierarchyからUI Imageを追加する手順
Source ImageにSpriteを割り当てる方法
ColorとAlphaで色味・透明度を調整するコツ
Preserve Aspectで縦横比を保つ設定
初心者でも理解できる解説

＼プログラミング未経験でも大丈夫！まずは1本作り切ろう／

初心者が最初に選ぶならコレ

Unity ノンフィールドRPG
＋スレスパ風JRPG講座

★★★★★ (Unity6対応)

Unity ノンフィールドRPGの作り方講座＋Slay the Spire風デッキ構築JRPGの作り方講座

Unity6対応・スマホ化対応の最新カリキュラム。「何から始めればいいかわからない」という初心者でも、ステップごとに手を動かすだけでRPGが完成します。

講座を見てみる＼ゼロからでもスマホ対応RPGが作れる！／

憧れのアクションゲームに挑戦

Unity 2Dアクションゲーム
の作り方講座（ロックマン風）

★★★★★ (スマホ化・広告実装)

初心者でもロックマン風の横スクロールACTが作れる講座。7ステージ＋ラスボスという本格構成で、スマホ化・広告実装まで対応。「自分のゲームをリリースしたい」夢を叶えます。

講座を見てみる＼初心者でも本格ACTが完成する！／

3Dゲーム開発の入口はここ

ゼルダ風3Dアクションゲーム
の作り方講座

★★★★★ (スマホ化対応)

「3Dゲームって難しそう…」と感じている初心者向けの講座。全16回でゼルダ風3Dアクションがスマホ対応で作れるようになります。3D開発の基礎がしっかり身につきます。

講座を見てみる＼初心者でも全16回で3Dゲームが完成！／

UI Imageの役割を押さえる
HierarchyからImageを追加する
Source ImageにSpriteを設定する
ColorとAlphaで見た目を調整する
Preserve Aspectで縦横比を維持する
Raycast Targetの使い分け
FilledタイプでHPゲージを作る
画像が表示されないときの確認項目
記事を読んで「作ってみたい！」と思ったら！初心者でも1本完成できる講座で実力をつけよう
まとめ

UI Imageの役割を押さえる

Imageコンポーネントは、RectTransformの範囲内にSpriteを描画します。

テキストはTextMeshPro、クリック可能な枠はButtonと組み合わせる、という分担が基本です。

プロパティ	作用	よくある用途
Source Image	表示するSpriteを指定	ロゴ・アイコン・ボタン背景
Color	画像に色を乗算（白なら原色のまま）	ボタンの無効化（グレー化）
Material	描画マテリアル（通常はNoneのまま）	特殊エフェクト時のみ変更
Raycast Target	クリック判定の対象にするか	背景パネルはOFFにして透過クリックを防ぐ

Canvas上に載せる前提なので、152のCanvas設定を先に済ませておくとスムーズです。

HierarchyからImageを追加する

Hierarchyで右クリック → UI → Imageを選ぶと、Canvasの子にImageが作られます。

最初は白い四角が表示されますが、Source Imageが空のためUnityロゴ風のプレースホルダーに見えるだけです。

UI Imageの基本設定手順

STEP1
Spriteを用意する

PNG画像をProjectに入れ、Texture TypeをSprite (2D and UI)に変更します。
STEP2
Imageを作成する

Hierarchy → UI → Imageでオブジェクトを追加します。
STEP3
Source ImageにSpriteを割り当て

InspectorのSource Image欄にSpriteをドラッグします。

157のSprite設定記事では、画像インポートの詳細も解説しています。

Source ImageにSpriteを設定する

Projectウィンドウの画像を、InspectorのSource Imageへドラッグ＆ドロップすれば表示されます。

Image TypeにはSimple（そのまま表示）、Sliced（9-slice枠）、Filled（ゲージ表示）などがあります。

アイコンやロゴはSimple、角丸ボタン背景はSlicedが向いています。

using UnityEngine;
using UnityEngine.UI;

public class IconChanger : MonoBehaviour
{
    public Image iconImage;
    public Sprite[] itemSprites;

    public void SetIcon(int index)
    {
        iconImage.sprite = itemSprites[index];
    }
}

実行中にspriteプロパティを差し替えると、アイテム取得時の表示更新などに使えます。

管理人

画像が真っ白になるときは、Texture TypeがSpriteになっているか、Applyを押したかを確認しましょう。
未設定だとSource Imageに載せられません。

ColorとAlphaで見た目を調整する

ImageのColorはRGBAで指定します。

Alpha（A）を128程度に下げると半透明になり、背景がうっすら透けて見えます。

HPが減ったときに赤みを足す、クールタイム中にグレーにする、といった演出にも使えます。

Colorを白(255,255,255)のまま → Sprite本来の色で表示
ColorのAを下げる → 半透明化
Colorをグレーに → 無効状態の見た目

テキストの可読性を上げたいときは、Imageを暗めの半透明にしてコントラストを確保するのも手です。

Preserve Aspectで縦横比を維持する

RectTransformのサイズを変えると、画像が引き伸ばされることがあります。

InspectorのImageコンポーネントでPreserve Aspectにチェックを入れると、縦横比を保ったまま収まります。

ロゴやキャラクターアイコンでは、ほぼ必須の設定ですね。

アンカー（Anchor）と併用すると、画面サイズが変わっても中央にきれいに配置できます。

Raycast Targetの使い分け

Raycast TargetがONだと、そのImageがクリック判定を受け取ります。

全画面の背景ImageにONのままだと、下のボタンが押せなくなることがあります。

装飾だけの画像はRaycast TargetをOFFにするのが定番です。

150のButtonと組み合わせるときは、Button側がクリックを受け取るよう設計しましょう。

管理人

スタート画面を作るなら、背景Image＋中央ロゴImage＋150のButtonを並べる構成が分かりやすいです。
日本語テキストは153のTextMeshProへ。

FilledタイプでHPゲージを作る

Image TypeをFilledにすると、Fill Amount（0〜1）でゲージの長さを変えられます。

public class HealthBar : MonoBehaviour
{
    public Image hpImage;

    public void SetHp(float rate)
    {
        hpImage.fillAmount = Mathf.Clamp01(rate);
    }
}

Fill MethodをHorizontalにすれば、左から右へ減るHPバーが作れます。

151のImageと150のButtonを組み合わせれば、スタート画面の一式がそろいますね。