UI とは｜操作と表示を担う、画面上の要素

言葉の意味

UI は User Interface（ユーザーインターフェース）の略で、画面のボタンや文字の表示など、遊ぶ人が操作したり、情報を受け取ったりする部分です。

たとえば Godot でも、この意味で使われています。Godot の UI は、ノードの中でも Control ノードを使って組まれ、中に入れた Control ノードの配置を管理する Container が用意されています。Container は入れ子にでき、複雑な配置を作れます。Container の大きさが変わると、中の Control ノードは Container の種類に応じた振る舞いで配置し直されます。

作り手がこの語を使う場面の例が、Godot の「Your first 2D game」の Heads up display の手順です。ここでは、スコア・「Game Over」や「Get Ready!」のような案内の文字・ゲームを始める「Start」のボタンなどを表示する UI を作ります。HUD（heads-up display）は、ゲームの画面の上に重ねて出す情報の表示を指す言葉です。

UI の見た目をまとめて決める場面では、Godot の Theme リソースが使われます。Theme は、色・フォント・フォントの大きさ・アイコンなどの項目を持ちます。親の Control ノードに当てた設定は子の Control ノードへ伝わるため、フォントの設定などを1か所に当てて、UI 全体に効かせられます。キーボードまたはコントローラーで UI を操作する場面では、操作の対象になる部品を切り替えることを「UI フォーカスを変える」と呼びます。Godot では、Control ノードはどれもフォーカスを持てます。

UI をゲームの画面とは別の層に置く場面では、CanvasLayer ノードが使われます。CanvasItem から派生したノードのうち、CanvasLayer の直接または間接の子になっているものは、その層に描かれ、層の番号が描く順番を決めます。標準の2Dのシーンは番号0で描かれ、番号1の CanvasLayer はその上、番号-1の CanvasLayer はその下に描かれます。体力バーを重ねる HUD のようなものは番号1以上の層に、背景は番号-1以下の層に置く、という使い方ができます。作例でスコアの表示を CanvasLayer の下に置いた記録は、Godotのシーンとノードの読み方にあります。

ブラウザで開くゲームでの、タイトルの画面・スコアの表示・画面の伸び縮みを作らせた記録は、タイトル・スコア・画面サイズ対応を作らせる頼み方にあります。

キーボードやコントローラーで操作するときの注意

キーボードとコントローラーでの操作を正しく働かせるには、シーンの開始時にコードでいずれかのノードにフォーカスを当てる必要があります。そうしないと、ボタンやキーを押しても何も起きません。フォーカスの移り先になる隣のノードを設定していない場合は、エンジンが次の部品を自動で推測しようとします。これにより、とくに縦または横の移り方がはっきり決まっていない複雑な UI で、意図しない動きになることがあります。

混同されやすい言葉

UI と UX は、指す広さが違います。UI は操作と表示に使う画面の部品で、UX は、利用を通して受け取る体験の全体です。UI は UX の一部にすぎません。

次に読む

• タイトル・スコア・画面サイズ対応を作らせる頼み方

情報源

• Godot Engine Documentation — Using Containershttps://docs.godotengine.org/en/stable/tutorials/ui/gui_containers.html確認日 2026-10-23
• Godot Engine Documentation — User interface (UI)https://docs.godotengine.org/en/stable/tutorials/ui/index.html確認日 2026-10-23
• Godot Engine Documentation — Heads up displayhttps://docs.godotengine.org/en/stable/getting_started/first_2d_game/06.heads_up_display.html確認日 2026-10-23
• Godot Engine Documentation — Introduction to GUI skinninghttps://docs.godotengine.org/en/stable/tutorials/ui/gui_skinning.html確認日 2026-10-23
• Godot Engine Documentation — Keyboard/Controller Navigation and Focushttps://docs.godotengine.org/en/stable/tutorials/ui/gui_navigation.html確認日 2026-10-23
• Godot Engine Documentation — CanvasLayerhttps://docs.godotengine.org/en/stable/classes/class_canvaslayer.html確認日 2026-10-23