ブログ一覧へ

RobloxのUIコンポーネント基本ガイド【ScreenGui・Frame・TextLabel・TextButton】

UIを作るとき、何をどこに置けばいい？

Robloxでゲームを作り始めたとき、こんな疑問を持つ方は多いはずです。

「スコアを画面に表示したい」「ボタンを置きたい」——そう思っても、何のオブジェクトを使えばいいのか、どこに配置すればいいのかがわからない。

Robloxには「UIコンポーネント」と呼ばれるオブジェクト群があり、画面上に表示するUI要素はすべてここから作ります。この記事では、特によく使う4つのコンポーネント——ScreenGui・Frame・TextLabel・TextButton——の役割と使い方を整理して解説します。

UIの土台：ScreenGui

すべてのUI要素は、ScreenGuiの中に配置します。ScreenGuiは「画面に張り付く透明なキャンバス」のようなものです。

配置場所はStarterGuiの直下です。ゲームが始まると、StarterGui内のScreenGuiが自動的に各プレイヤーの画面に表示されます。

StarterGui
└── ScreenGui       ← ここがUIの土台
    └── （UI要素をここに追加していく）

ScreenGuiを作らずにTextLabelなどを直接StarterGuiに置こうとしても正しく表示されません。UIを作るときはまずScreenGuiを用意する、これが最初のルールです。

レイアウトの枠組み：Frame

Frameは、UI要素をグループ化するための透明な枠です。それ自体は何も表示しませんが、「この範囲がメニュー」「この範囲がスコア表示」といった区画を作るために使います。

たとえばスコア表示エリアを作るなら、Frameを1つ置いてその中にTextLabelを入れる、という構成が一般的です。

ScreenGui
└── Frame           ← スコア表示エリア
    └── TextLabel   ← 「スコア：100」などの文字

Frameには背景色・透明度・角丸（UICorner）なども設定でき、パネルやウィンドウのデザインにも使えます。最初は「まとめたいUI要素の親」として使う、と覚えておくと便利です。

文字を表示する：TextLabel

TextLabelは、画面にテキストを表示するためのオブジェクトです。スコア・説明文・プレイヤー名など、読み取り専用の文字表示に使います。

プロパティとしてよく設定するのは以下の3つです。

プロパティ 説明
Text 表示するテキスト内容
TextSize フォントサイズ
BackgroundTransparency 背景の透明度（1にすると透明）

スクリプトからTextLabel.Text = "スコア：" .. scoreのように動的に書き換えることもできるため、ゲーム中の情報表示に欠かせないコンポーネントです。

ボタンを作る：TextButton

TextButtonは、クリック（タップ）できるボタンです。見た目はTextLabelに似ていますが、MouseButton1Clickなどのイベントを使ってプレイヤーの操作を受け取れる点が異なります。

基本的な使い方はLocalScriptと組み合わせます。

local button = script.Parent
button.MouseButton1Click:Connect(function()
    print("ボタンが押されました")
end)

メニューを開く・アイテムを購入する・ゲームをリスタートするなど、プレイヤーが操作するあらゆる場面で使います。TextLabelと見た目が似ているため、「表示だけならTextLabel・押せるならTextButton」と使い分けてください。

おわりに

Robloxのゲームを作り始めたとき、UIをどこに置けばいいのか、何を使えばいいのかが全くわかりませんでした。ScreenGuiの存在を知るまで、パーツの上にテキストを置こうとしていたくらいです。基本を知っているだけで、できることが一気に広がります。

UIの構成が理解できたら、次は「端末によって見た目が変わる問題」に取り組むのがおすすめです。スマホ・タブレット・PCそれぞれで綺麗に見えるUIの作り方はRobloxのUIをスマホ・全端末対応にする方法で詳しく解説しています。スケール値の計算にはRoblox UI Scale Calculatorも併せて活用してください。

まとめ

  • ScreenGui：すべてのUIの土台。StarterGuiの直下に置く
  • Frame：UI要素をグループ化する枠。パネルやエリアの区画分けに使う
  • TextLabel：テキストを表示する。スコアや説明文など読み取り専用の表示に
  • TextButton：クリック・タップで操作できるボタン。イベントと組み合わせて使う
  • まずScreenGui → Frame → TextLabel / TextButtonの構成を覚えると、UIの全体像が見えてくる