061930d1-b089-5a51-ab2a-e505865b5c4c__i18n_ja_jp:5wZ4XsXcAZy0HxzXD44eRs

始めよう

メニュータイトルの追加

UI ボタンのセットアップ

Canvas Scaler の使用

次のステップ

Unity における UI の基本

 本チュートリアルでは、以下のことを学びます：

Anchor ボタンをサイドに配置し、幅や高さを調整する方法

Anchor UI Text をキャンバスの中央上部に配置し、画面の幅を調整する方法

アンカープリセットを使って UI 要素を UI メニューの角や側面に固定する方法

さまざまな画面サイズに合わせてメニューサイズを自動調整する Canvas Scaler の使い方

Canvas に Canvas Scaler を追加する方法

Canvas Scaler の設定を利用して、異なる画面サイズに合わせてキャンバスを適切に拡大する方法

Unity で作る UI 入門

Unity でユーザーインターフェース（UI）のゲームオブジェクトを扱う場合、Anchor ポイントと Pivot ポイントを使って、画面上での UI イメージの表示方法をカスタマイズすることができます。背景画像やボタン、テキストなどの UI 要素は、ゲーム開始時に表示されるメニューの中に表示されるのが一般的です。キャンバス内の設定された位置に合わせて拡大/縮小するように設定できます。さらに、ウィンドウサイズやアスペクト比の変化に合わせて、UI 要素の配置を調整することができます。これらの UI 機能により、開発者は複数の、あるいは様々なデバイスのスクリーンサイズに合わせてコンテンツを作成することができ、また、Game ビュー内で UI 要素を視覚的にフレーム化して整理することもできます。 

Unity で UI 要素を使用するには、まず既存のプロジェクトを開くか、Unity Hub のテンプレートを使って新しいプロジェクトを作成する必要があります。このチュートリアルでは、Universal Render Pipeline (URP) プロジェクトで新しく作成された空のシーンでセットアップを行います。ここでは、背景画像、タイトル、いくつかのメニューボタンを備えたシンプルなメニューキャンバス画面を作成します。まず始めに、新しい URP プロジェクトを作成します。

1. Unity Hub から New ボタンを選択します。Create a new project with Unity ポップアップウィンドウの Project Name フィールドに、プロジェクトの名前を入力します。次に、Templates メニューから Universal Render Pipeline ボタンを選択して、Create ボタンを選択します。

新しく作成されたプロジェクトが開き、デフォルトのサンプルシーンが表示されます。 

2. 上部メニューのドロップダウンから、File > New Scene と選択し、空白のシーンを作成します。

3. 上部メニューのドロップダウンから、File > Save As と選択し、シーンに名前を付けます。名前を入力して、Save ボタンを選択します。

これで、UI Background Image を追加する準備が整いました。

4. 上部メニューのドロップダウンから、GameObject > UI > Image の順に選択して、新しい画像をシーンに追加します。

新しい画像を追加すると、新しい Canvas と EventSystem ゲームオブジェクトも自動的に追加され、Hierarchy ウィンドウに表示されるようになりました。新しく作成された画像は、Canvas ゲームオブジェクトの中に配置されます。シーン内の白い枠は、Game ウィンドウの表示範囲を表しています。

5.  UI  Image のサイズや位置を設定するには、左上のツールバーで Rect Tool を選択します。また、UI 要素を操作する際には、左上のツールバーの Toggle Tool Handle Rotation ボタンが Pivot に、Toggle Tool Handle Rotation ボタンが Local に設定されていることを確認してください。

6. UI Image をフレームいっぱいに拡大します。Rect Tool で画像のサイズを変更するには、Scene ウィンドウの画像の角にある青いドットのアイコンを選択し、図形をドラッグして幅と高さを大きくし、Game ウィンドウに合わせてフレームを埋めるようにサイズを変更します。Rect Tool を使って画像のサイズをドラッグすると、エッジがフレームにスナップします。また、Inspector の Rect Transform コンポーネントの Pos X と Pos Y の値、および Width と Height の値を変更して、UI Image の具体的な形とサイズを調整することもできます。

画面サイズ、Unity エディターのシーンと Game ウィンドウサイズによっては、このチュートリアルで表示されている寸法が正確に一致しない場合がありますので注意が必要です。チュートリアルの例は、おおよその目安とし、必要に応じて寸法を調整してください。

なお、Game ウィンドウのサイズを変更すると、長方形の外枠が変化します。この時点で Game ウィンドウのサイズを調整した場合、フレームもプロポーションに合わせて更新されますが、画像は Game ビューには表示されなくなります。これについては次のステップで説明します。

UI Image が Game ウィンドウのサイズに合わせてフィットするようにするには、画像の Anchor ポイントを調整する必要があります。Anchor ポイントは、4 つの三角形がつながって、白い X アイコンになっています。ただし、現在のところ、このアイコンは、画像の白い背景の上では見づらいものとなっています。まず、Anchor ポイントを見やすくするために、画像の色を濃くする必要があります。

7. 画像の色を変更するには、Inspector ウィンドウの Image コンポーネント内の Color フィールドを選択し、Color ポップアップウィンドウから濃い色を選択します。  

これで、UI Image の Anchor ポイントがわかりやすくなりました。4 つの三角形が X を形成するアイコンで表現されています。 

8. ここで、各アンカーポイントの四隅を UI Image のフレームに合わせて移動させる必要があります。 まず、画像のアンカーポイントの左上の三角形を選択し、その位置を画像のフレームの左上に向かってドラッグします。 

9. 右下のアンカーポイントを選択し、画像の形状の右下隅にドラッグして、UI Image の長方形のフレーミングを完成させます。 

10. Game ウィンドウのサイズを大きくしたり小さくしたりして、Game ウィンドウ内の UI Image の比率をテストします。Game ウィンドウのサイズやアスペクト比に関わらず、画像の位置は中央に配置され、サイズは Game ウィンドウに比例していることが確認できるはずです。

The New button is highlighted in the Unity Hub window, with the Universal Render Pipeline Template selected. The name “UI Demo” is underlined in the Project Name field, and the Create button is highlighted in the lower right corner of the Create a new project with Unity window

Unity Hub から新規プロジェクトを作成

An image GameObject is highlighted in the Hierarchy, within a newly created Canvas GameObject

新たに作成した UI Image

The Rect Tool is highlighted in the toolbar, as well as the Toggle Tool Handle Position and Rotation buttons, set to Pivot and Local

ツールバーの Rect Tool を選択し、Toggle Tool Handle Position and Rotation を Pivot と Local に設定した場合

The UI Image’s size is enlarged to a new size adjustment. The Pos X and Pos Y values are highlighted in the Rect Transform component in the Inspector window, as well as the Width and Height values

画像のサイズ変更

The Color field is highlighted in the Image component in the Inspector window. The Image’s color is set to a darker blue-grey

背景画像の色の設定

The UI Image’s upper-left Anchor point is highlighted, showing its adjusted position

UI Image の左上のアンカーポイントのフレーミング

The UI Image’s lower-right Anchor point is highlighted, showing its adjusted position

UI Image の右下のアンカーポイントのフレーミング

When the Game window is resized, the UI Image’s size and proportions match the Game window’s dimensions

UI Image のサイズは、Game ウィンドウのサイズに比例

ここでは、メニューからキャンバススクリーンにタイトルを追加するなど、UI Text 要素を扱います。

1. トップメニューのドロップダウンから、GameObject > UI > Text の順に選択して、シーンに新しいテキスト要素を追加します。先に追加した UI Image と同様に、新しく作成したテキスト要素も、Hierarchy 内の Canvas ゲームオブジェクト内に配置します。

2. Rect Tool を使って、UI Text 要素の境界線を拡大します。Inspector の Rect Transform コンポーネントで、Width を 350 に、Height を 100 に設定します。

3. Pos Y を 200 に設定して、UI Text をフレームの上部に近づけます。

4. Inspector で Text コンポーネントを展開し、Text フィールドにカスタムメニューのタイトルを設定します。この例では「Game Jam」と設定しています。Font Size を 70 に設定します。Paragraph の Alignment を中央揃えのアイコンに設定します。最後に、Color フィールドを選択し、Color ポップアップウィンドウからカスタムカラーを選択して、UI Text の色を選びます。

現在、Game ウィンドウのサイズを変更すると、UI Text 要素は中央に配置されません。そこで、UI アンカーを使用して、テキストを中央に配置し、Game ウィンドウの大きさに合わせて配置します。今回は、Anchor Presets を利用して処理を高速化します。

5. Inspector の Anchor Presets ボタンを選択して、 Anchor Presets オプションを開きます。上部中央の Anchor Preset に対応するボタンを選択します。

これで、Game ウィンドウのサイズを変更しても、UI Text 要素はキャンバス画面の上部中央に比例して表示されます。ただし、Game ウィンド ウのサイズを変更しても、UI Text のフォントサイズは一定に保たれます。  

6. Inspector の Anchor Presets ボタンを選択して、 Anchor Presets のオプションを開きます。 水平/垂直軸上が top-stretch にある Anchor Preset に対応するボタンを選択します。 

現在、Game ウィンドウのサイズを変更しても、UI Text 要素の Rect Transform の境界形状のみが変更され、テキストサイズ自体は変更されません。 

7. Game ウィンドウのサイズに合わせてテキストサイズも変化するようにするには、Best Fit のチェックボックスを有効にします。

これで、Game ビューウィンドウのサイズを変更しても、UI Text 要素はキャンバス画面の上部中央に比例し、Game ビューウィンドウのサイズに比例してフォントサイズが拡大/縮小されます。

The modified UI Text features are highlighted in the Inspector window, such as Pos Y, Width and Height, Text, Font Size, Paragraph Alignment, and Color

カスタムの UI Text

The Anchor Presets button is highlighted in the Inspector, showing a grid of preset options. The button corresponding to the top-center Anchor Preset is highlighted.

Anchor Presets ボタン

When the Game window is resized, the UI text element size stays centered in the top center of the canvas screen

UI Text 要素のサイズは、キャンバス画面の上部中央に配置される

The Anchor Presets button is highlighted in the Inspector, showing a grid of preset options. The button corresponding to the top-stretch Anchor Preset is highlighted.

水平/垂直軸上が top-stretch に設定された Anchor Presets ボタン

When the Game window is resized, the UI text element size stays centered in the top center of the canvas screen while its boundary stretches 

The Best Fit checkbox is highlighted and selected in the Inspector window

Best Fit のチェックボックスを有効にする

When the Game window is resized, the UI text element stays centered in the top center of the canvas screen while its scale also resizes 

UI Text 要素は、キャンバス画面の中央上部に配置されたままスケールもサイズ変更される

ここでは、いくつかの UI ボタンを追加し、その外観をカスタマイズし、Anchor ポイントと Pivot ポイントを微調整します。

1. 上部メニューのドロップダウンから、GameObject > UI > Button の順に選択し、シーンに新しいボタン要素を追加します。 

2. Inspector で Rect Transform コンポーネントの Width を 250 に、Height を 100 に設定して、UI Button のサイズを大きくします。   

3. ここでは、UI ボタンの配色をカスタマイズします。Inspector で Button コンポーネントの左にある三角形を選択して、ボタンのプロパティを展開します。次に、Normal Color フィールドを選択し、 Color ポップアップウィンドウから色を選択します。Play モードでのプレビュー時に UI ボタンがよりインタラクティブになるように、Highlighted Color、Pressed Color、Selected Color の各フィールドにカスタムカラーを選択してください。

4. UI ボタンのテキストをカスタマイズするには、まず Hierarchy の Button ゲームオブジェクトの中の Text ゲームオブジェクトを選択し、Inspector の Text コンポーネントの中の Text フィールドにカスタムテキストを入力します。この例では、テキストを「Start」に設定しています。Font Size を 60 にします。最後に、Best Fit チェックボックスを有効にします。

5. Hierarchy で Button ゲームオブジェクトを選択した状態で、Inspector の Anchor Presets ボタンを選択して、Anchor Presets のオプションを開きます。今回は、Anchor Preset を設定する際に、Button の位置も設定します。キーボードの Alt キーを押しながら、水平/垂直軸上が middle-stretch にあるボタン Anchor Preset を選択します。 

UI ボタンは、シーン内で複製することも、メニューに必要な数だけ新しい UI ボタンを作成してカスタマイズすることもできます。次に、特定の UI 要素を回転させるために、Pivot ポイントを使用します。Pivot ポイントで回転角度を指定した UI ボタンを作成します。

6. UI ボタンの矩形ツールが選択されている状態で、アイコンをクリックして新しい位置にドラッグするか、Inspector の X および Y Pivot フィールドに Pivot 値を設定して、青い円で示された Pivot ポイントを移動します。ボタンを回転させるには、Inspector で Rotation の Z 軸を 10 に設定し、Pivot ポイントに比例した角度でボタンを回転させます。

7. Hierarchyで例の UI Button ゲームオブジェクトを選択した状態で、Inspector の Anchor Presets ボタンを選択して、Anchor Presets のオプションを開きます。今回は、Anchor Preset を設定する際に、Button の Pivot ポイントも設定します。キーボードの Shift キーを押しながら、左下の Anchor Preset ボタンを選択します。Anchor Preset 内の別のオプションとして、Alt キーを押しながら左下の Anchor Preset ボタンを選択すると、ボタンの位置が設定されます。 

The UI Button’s Rect Transform component is highlighted in the Inspector, showing the Width and Height values

UI ボタンの拡大

The UI Button’s color fields are highlighted in the Button component in the Inspector window

UI ボタンの配色のカスタマイズ

The UI Button’s Text field is highlighted in the Text component in the Inspector window. Additionally, the Font Size field is highlighted, as well as the Best Fit checkbox

UI ボタンのテキストとフォントサイズのカスタマイズ

The Anchor Presets button is highlighted in the Inspector, showing a grid of preset options. The button corresponding to the middle-stretch Anchor Preset is highlighted.

UI Button の Anchor Preset を middle-stretch に設定

The UI Button’s Pivot field is highlighted in the Rect Transform component, as well as the Rotation’s Z axis value in the Inspector window

UI Button の Pivot ポイントと Rotation (回転) の調整

The UI Button’s Z Rotation is adjusted to show the rotation occurring directly at the Pivot Point. When the Pivot point is moved to the left, the UI Button’s Z axis rotation now rotates at an angle established by the new Pivot point location

UI Button の Rotation (回転) と Pivot ポイントの調整

The Anchor Presets button is highlighted in the Inspector, showing a grid of preset options. The button corresponding to the bottom-left Anchor Preset is highlighted, with the Shift key held down, showing the corresponding bottom-left pivot point

Reset UI Button の Anchor Preset を bottom-left に設定し、Shift キーを押しながら Pivot ポイントも設定する

Canvas ゲームオブジェクトは、初めて UI 要素を追加する際に、自動的にシーンに追加されます。追加の UI 要素は、Canvas ゲームオブジェクトの中に追加されます。また、Canvas Scaler コンポーネントを使って、UI 要素のスケーリングを調整することができます。

1. Hierarchy ウィンドウで Canvas ゲームオブジェクトを選択した状態で、Inspector で Canvas Scaler コンポーネントの左にある三角形を選択して、そのプロパティを展開します。

これまでは、Game ウィンドウのサイズを変更すると、Canvas Scaler コンポーネントの UI Scale Mode が Constant Pixel Size に設定されていました。これは、Free Aspect 比設定で Game ウィンドウをスケーリングする際に役立ちました。Canvas Scaler を使用すると、カスタムモバイルデバイスの画面解像度を特にターゲットにします。

2. UI Scale Mode フィールドのドロップダウンから Scale with Screen Size を選択します。Reference Resolution の X と Y のフィールドにカスタム値を入力します。例えば、中型のモバイルデバイスの画面解像度に近づけるには、X=1440、Y=2960 とします。

Game ビューウィンドウのサイズを変更しても、UI 要素はモバイルデバイスの画面幅の寸法に合わせて表示されます。

3. モバイル端末の画面に合わせて UI 要素の幅や高さを調整するには、Match スライダーをドラッグします。例えば、モバイル画面の高さ方向の解像度に UI 要素を合わせるには、Match スライダーを Height にドラッグするか、値を 1 に設定します。

The Canvas GameObject is highlighted in the Hierarchy window. Additionally, the Canvas Scaler component is highlighted in the Inspector window

Canvas Scaler コンポーネント

The Canvas Scaler Component’s UI Scale Mode option is highlighted, showing Scale With Screen Size. Additionally, the Reference Resolution is set to X=750, Y=1334

UI Scale Mode が Scale With Screen Size に設定されている

The Canvas Scaler Component’s Match slider is highlighted, showing the value setting to Height

Canvas Scaler コンポーネントの Match スライダーを Height に設定

Anchor ポイントと Pivot ポイントを UI 要素に使用し、Canvas Scaler と組み合わせることで、様々なスクリーンサイズやデバイスでの UI イメージの表示をカスタマイズすることができます。背景画像、ボタン、テキストなどの UI 要素を細かく調整し、整理することで、プロ品質のメニューやその他のユーザーインターフェース体験を実現します。

Unity における UI の基本

1. 始めよう

2. メニュータイトルの追加

3. UI ボタンのセットアップ

4. Canvas Scaler の使用

5. 次のステップ

Complete this tutorial