ロブロックス（Roblox）スタジオでボタンを作る方法｜押すと開く「遊び方」画面をスマホ対応で解説

制作手順難易度: 入門所要時間: 約30分（目安）情報確認日: 2026年10月4日

「ゲームの画面にボタンを置きたい」「押したら説明が出るようにするにはどうするの？」

ロブロックス（Roblox）スタジオでボタンを作る方法を、実際の画像付きで誰でも簡単に分かるように解説します。この記事では、画面の上に「遊び方」ボタンを置き、押すと説明が開いて「閉じる」で元に戻る画面を作ります。遊ぶ人が迷ったときに、自分でルールを確かめられる機能です。

入門ステップ14／24　前の記事：ロブロックス（Roblox）のチェックポイントの作り方　全体の順番を見る

使うもの：Roblox Studioが起動するパソコン、マウス、キーボード、ボタンを入れたい作品。この記事ではオビーの作り方で作ったオビーに入れます。

今回の完成状態：下の画像のように、「遊び方」を押すと説明と「閉じる」ボタンが出れば成功です。

今回作る画面の部品

画面に出す文字やボタンのことを「UI」と呼びます。今回は次の部品を作ります。

名前	種類	役目
HelpGui	ScreenGui	画面に出す部品をまとめる入れ物
HelpButton	TextButton	最初から見えている「遊び方」ボタン
HelpPanel	Frame	説明をまとめる紺色の枠
Description	TextLabel	説明の文章
CloseButton	TextButton	「閉じる」ボタン
HelpMenu	LocalScript	ボタンを押したときに開く・閉じるスクリプト

1. 画面の入れ物（ScreenGui）を作る

Studioのホーム画面の「バーチャル空間」から、オビーの作り方で保存した作品を開きます。

エクスプローラの「StarterGui」にマウスを乗せ、右に出る「＋」（赤い枠）を押しましょう。StarterGuiは、遊ぶ人の画面に出す部品を置く場所です。画像の赤い枠が「次に押す場所」で、画像を押すと大きく表示できます。ボタンの名前や置き場所は、Roblox側の更新で変わることがあります。

検索欄に「ScreenGui」と入れて、「ScreenGui」を押します。

エクスプローラにできたScreenGuiを選んでF2キーを押し、名前を「HelpGui」に変えておきます。

名前が「HelpGui」に変われば大丈夫です（赤い枠）。

2. 「遊び方」ボタンを置く

エクスプローラの「HelpGui」にマウスを乗せて「＋」を押し、検索欄に「TextButton」と入れて「TextButton」を押します。

3D画面の左上に、白い小さなボタンが出ます。エクスプローラにできた「TextButton」を選んだ状態でF2キーを押し、「HelpButton」と入力してEnterキーを押します。

ボタンの位置と大きさを決める

ボタンの位置は、4つの数字で決めます。画面の幅が変わってもずれないように、「割合」と「ピクセル」を組み合わせるのがポイントです。

項目	意味	今回の値
AnchorPoint	ボタンのどこを基準にするか。「0.5, 0」は上の真ん中	0.5, 0
Position	基準をどこに置くか。{横の割合, ずらすピクセル},{縦の割合, ずらすピクセル}	{0.5, 0},{0, 16}
Size	大きさ。同じく{割合, ピクセル}で書く	{0, 140},{0, 48}

今回の値は、「画面の横の真ん中、上から16ピクセルのところに、横140・縦48ピクセルのボタンを置く」という意味です。

エクスプローラで「HelpButton」を選んだ状態で、プロパティの検索欄に「AnchorPoint」と入力します。数字（最初は「0, 0」）をダブルクリックして「0.5, 0」と入れ、Enterキーを押します。

続けてHelpButtonを選んだまま、プロパティの検索欄に「Position」と入力します。AbsolutePositionとPositionの2つが並ぶので、下の名前がちょうど「Position」の欄の数字をダブルクリックし、「{0.5, 0},{0, 16}」と入れてEnterキーを押します。

続けてHelpButtonを選んだまま、プロパティの検索欄に「Size」と入力します。AbsoluteSize・AutomaticSize・Size・SizeConstraint・TextSizeなど、Sizeの付く欄がいくつか並びます。

名前がちょうど「Size」の欄（最初は「{0, 200},{0, 50}」）の数字をダブルクリックし、「{0, 140},{0, 48}」と入れてEnterキーを押します。

続けて、文字の大きさの「TextSize」の欄（最初は「14」）の数字をダブルクリックし、「18」と入れてEnterキーを押します。

変え終わると、次の画像のようになります。Size（画像の1）とTextSize（画像の2）を確かめてください。

最後にHelpButtonを選んだまま、プロパティの検索欄に「Text」と入力します。TextSizeやTextColor3など、Textの付く欄がいくつか並ぶので、名前がちょうど「Text」の欄（最初は「Button」）をダブルクリックし、「遊び方」と入れてEnterキーを押します。画面の上の真ん中のボタンの文字が「遊び方」に変われば完成です。

3. 説明の枠（HelpPanel）を置く

エクスプローラの「HelpGui」にマウスを乗せて「＋」を押し、検索欄に「Frame」と入れて「Frame」を押します。Frameは、ほかの部品をまとめる四角い枠です。

画面の左上に白い四角ができます。エクスプローラにできた「Frame」を選んだ状態でF2キーを押し、「HelpPanel」と入力してEnterキーを押します。

HelpPanelの位置と大きさを、次の3つの手順で変えます。

エクスプローラで「HelpPanel」を選んだ状態で、プロパティの検索欄に「AnchorPoint」と入力します。数字をダブルクリックして「0.5, 0.5」と入れ、Enterキーを押します（下の1枚目）。
HelpPanelを選んだまま、プロパティの検索欄に「Position」と入力します。名前がちょうど「Position」の欄の数字をダブルクリックして「{0.5, 0},{0.5, 0}」と入れ、Enterキーを押します（下の2枚目）。
HelpPanelを選んだまま、プロパティの検索欄に「Size」と入力します。名前がちょうど「Size」の欄の数字をダブルクリックして「{0.85, 0},{0.7, 0}」と入れ、Enterキーを押します（下の3枚目）。

白い枠が画面の真ん中に大きく広がります。Size「{0.85, 0},{0.7, 0}」は、画面の横85%・縦70%の大きさという意味です。割合で決めているので、スマホの小さな画面でも、はみ出さずに縮みます。

HelpPanelを選んだまま、プロパティの検索欄に「BackgroundColor3」と入力します。数字をダブルクリックして「30, 40, 60」と入れ、Enterキーを押すと、枠が紺色になります（赤い枠）。

4. 説明の文字（Description）を入れる

エクスプローラの「HelpPanel」にマウスを乗せて「＋」を押し、検索欄に「TextLabel」と入れて「TextLabel」を押します。TextLabelは、文字を出すだけの部品です。

エクスプローラにできた「TextLabel」を選んだ状態でF2キーを押し、「Description」と入力してEnterキーを押します。

続けてDescriptionを選んだまま、プロパティの検索欄に「Position」と入力します。名前がちょうど「Position」の欄の数字をダブルクリックして「{0, 16},{0, 16}」と入れ、Enterキーを押します（赤い枠）。

Descriptionを選んだまま、プロパティの検索欄に「Size」と入力します。名前がちょうど「Size」の欄の数字をダブルクリックして「{1, -32},{1, -88}」と入れ、Enterキーを押します。紺色の枠の中に、白い「Label」の四角が少し小さく入ります。

「{1, -32}」は、枠いっぱいから32ピクセル引いた幅という意味で、左右に16ピクセルずつすき間ができます。縦は枠いっぱいから88ピクセル引いた高さです。上に16ピクセルずらしているので、下には72ピクセルのすき間ができます。ここに、あとで閉じるボタンを置きます。

続けてDescriptionを選んだまま、プロパティで次の4つを変えます。

プロパティ	変える値	意味
TextSize	18	文字の大きさ
BackgroundTransparency	1	背景を透明にする
TextColor3	255, 255, 255	文字の色を白にする
TextWrapped	チェックを入れる	長い文を枠の中で折り返す

順にやっていきます。

Descriptionを選んだまま、プロパティの検索欄に「TextSize」と入力します。TextSizeの数字をダブルクリックして「18」と入れ、Enterキーを押します。
プロパティの検索欄に「BackgroundTransparency」と入力します。数字をダブルクリックして「1」と入れ、Enterキーを押します（下の1枚目の赤い枠）。
プロパティの検索欄に「TextColor3」と入力します。数字をダブルクリックして「255, 255, 255」と入れ、Enterキーを押します。
プロパティの検索欄に「TextWrapped」と入力し、右の四角を押してチェックを入れます（下の2枚目の赤い枠）。

最後にDescriptionを選んだまま、プロパティの検索欄に「Text」と入力します。名前がちょうど「Text」の欄をダブルクリックして説明文を入れ、Enterキーを押します。この記事では「足場をジャンプで渡って、黄色いゴールを目指します。落ちたらスタートからやり直せます。」と入れました。

5. 「閉じる」ボタン（CloseButton）を置く

エクスプローラの「HelpPanel」にマウスを乗せて、右に出る「＋」（赤い枠）を押します。

検索欄に「TextButton」と入れて「TextButton」を押します。エクスプローラのHelpPanelの中にできた「TextButton」を選んだ状態でF2キーを押し、「CloseButton」と入力してEnterキーを押します。

CloseButtonのプロパティは、次の値にします。

プロパティ	値
AnchorPoint	0.5, 1
Position	{0.5, 0},{1, -16}
Size	{0, 140},{0, 48}
TextSize	18
Text	閉じる

AnchorPoint「0.5, 1」は、ボタンの下の真ん中を基準にするという意味です。Position「{1, -16}」と組み合わせて、枠の下から16ピクセル上に置いています。順にやっていきます。

CloseButtonを選んだまま、プロパティの検索欄に「AnchorPoint」と入力します。数字をダブルクリックして「0.5, 1」と入れ、Enterキーを押します（下の1枚目）。
プロパティの検索欄に「Position」と入力します。名前がちょうど「Position」の欄の数字をダブルクリックして「{0.5, 0},{1, -16}」と入れ、Enterキーを押します（下の2枚目）。
プロパティの検索欄に「Size」と入力します。名前がちょうど「Size」の欄の数字をダブルクリックして「{0, 140},{0, 48}」と入れ、Enterキーを押します。
続けて、同じ検索の結果に並ぶ「TextSize」の欄の数字をダブルクリックして「18」と入れ、Enterキーを押します。
プロパティの検索欄に「Text」と入力します。名前がちょうど「Text」の欄をダブルクリックして「閉じる」と入れ、Enterキーを押します。

6. 最初は枠を隠しておく

説明の枠は、「遊び方」を押すまで見えないようにします。エクスプローラで「HelpPanel」を選んだ状態で、プロパティの検索欄に「Visible」と入力し、Visibleの右の四角を押してチェックを外します（赤い枠）。編集画面でも枠が見えなくなります。

次にエクスプローラで「HelpGui」を選んだ状態で、プロパティの検索欄に「ResetOnSpawn」と入力し、ResetOnSpawnの右の四角を押してチェックを外します（赤い枠）。チェックがあると、アバターが倒れるたびに画面が最初の状態に戻ってしまいます。

7. 開く・閉じるスクリプトを入れる

エクスプローラの「HelpGui」にマウスを乗せて「＋」を押し、検索欄に「LocalScript」と入れて「LocalScript」を押します。

エクスプローラにできた「LocalScript」を選んだ状態でF2キーを押し、「HelpMenu」と入力してEnterキーを押します。

HelpMenuをダブルクリックして開き、中身を全部消して、次のコードを貼り付けます。

local gui = script.Parent
local open = gui:WaitForChild("HelpButton")
local panel = gui:WaitForChild("HelpPanel")
local close = panel:WaitForChild("CloseButton")

panel.Visible = false
open.Activated:Connect(function()
    panel.Visible = true
    open.Visible = false
end)
close.Activated:Connect(function()
    panel.Visible = false
    open.Visible = true
end)

「Activated」は、ボタンがクリックやタップで押されたことを知らせる合図です。「遊び方」を押すと説明の枠を出してボタンを隠し、「閉じる」を押すと元に戻します。ボタンを押した本人の画面だけを変えたいので、遊ぶ人の画面で動く「LocalScript」に書きます。

ここまでで、エクスプローラは次の画像のようになります。

8. テストプレイで開いて閉じる

3D画面の上の作品のタブ「アソビシフト練習3」（赤い枠）を押して3D画面に戻り、F5キーでテストを始めます（タブの名前はパソコンによって違います）。画面の上に「遊び方」ボタンが出ていれば準備完了です。

「遊び方」を押すと、紺色の枠に説明と「閉じる」ボタンが現れました。

「閉じる」を押して、元の「遊び方」ボタンだけの画面に戻れば成功です。開く・閉じるを何度か繰り返して、毎回同じように動くかも確かめておきます。

9. スマホの画面で重ならないか確かめる

ロブロックスはスマホで遊ぶ人が多いので、スマホの画面でも確かめます。Shift + F5キーでテストを停止します。

Device Simulator（スマホなどの画面の形で確かめる道具）を使います。3D画面の右上の歯車のアイコンを押し、開いた一覧の「GUI」の中の「デバイスシミュレーション」にチェックを入れます（赤い枠）。新しいBaseplateでは、最初からチェックが入っていることがあります。そのときは押さずにそのままにします（押すとチェックが外れて、3D画面の上の「現在のデバイス」の欄が消えます）。

3D画面の左上に「現在のデバイス」と出てスマホの形にならないときは、欄の左のスマホのアイコンを押します（赤い枠）。マウスを乗せると「スマートフォンに切り替えます」と出ます。

3D画面がスマホの形に変わり、左上に機種の名前が出ます（赤い枠）。画像では「iPhone XR」ですが、2026年10月30日に編集部が試したときは「iPhone 17 Pro」が選ばれました。機種の名前の欄を押すと、ほかの機種も選べます。この状態で、3D画面の上の作品のタブ「アソビシフト練習3」を押して3D画面に戻り、F5キーでテストを始めます（タブの名前はパソコンによって違います）。

スマホの画面では、左下に移動用のスティック、右下にジャンプボタンが出ます。「遊び方」ボタンがこれらと重なっていないかを見ます。

「遊び方」を押して、説明の文字と「閉じる」ボタンが画面からはみ出していなければ成功です。

確かめ終わったら、Shift + F5キーでテストを停止します。パソコンの画面の形に戻すときは、機種の名前の右のパソコンのアイコン（マウスを乗せると「デスクトップに切り替えます」と出ます）を押します（赤い枠）。機種の欄が「現在のデバイス」に戻れば、パソコンの画面の形です。

デバイスシミュレータは見た目を確かめる道具なので、指での押しやすさまでは分かりません。公開する前に、実際のスマホでも押してみると確実です。スマホで自分の作品を開く方法はゲームを公開する方法で解説しています。

ボタンが出ない・押せないときの直し方

困ったこと	確かめること	直し方
ボタンが表示されない	HelpGuiが「StarterGui」の中にあるか。HelpButtonの「Visible」にチェックがあるか	置き場所とチェックを直す
最初から説明の枠が出ている	HelpPanelの「Visible」のチェックが外れているか	チェックを外す（スクリプトでも隠します）
押しても何も起きない	HelpMenuが「LocalScript」で、HelpGuiのすぐ下にあるか	種類と置き場所を直す
出力に名前を待つ警告が出る	HelpButton・HelpPanel・CloseButtonの名前と、どの部品の中にあるか	エクスプローラで名前と場所を直す
スマホで文字がはみ出す	説明の文章が長すぎないか。Sizeを割合で決めているか	文章を短くする。Sizeを表の値に戻す

AIでボタンを増やすとき

ボタンを増やしたいときや、見た目を変えたいときは、AIに今の部品の構成と値を伝えて相談します。

Roblox StudioでボタンのUIを作りました。
StarterGuiのHelpGuiの中に、HelpButton（TextButton）、HelpPanel（Frame。中にDescriptionとCloseButton）、HelpMenu（LocalScript）があります。
「遊び方」の横に「ショップ」ボタンを足したいです。
スマホの画面でも重ならない位置とSize、追加するスクリプトの書き方を、今の部品を壊さずに教えてください。

よくある質問

ボタンの色や形は変えられる？

変えられます。ボタンの色はプロパティの「BackgroundColor3」、文字の色は「TextColor3」で変えられます。角を丸くしたいときは、エクスプローラでボタンの「＋」から「UICorner」を入れます。UICornerは、入れた先の部品の角を丸くする部品です。

「ScreenGui」と「SurfaceGui」は何が違う？

ScreenGuiは、遊ぶ人の画面にそのまま重ねて出すUIです。SurfaceGuiは、看板のように3Dのパーツの表面に貼るUIです。「遊び方」のようにいつでも押せるボタンには、ScreenGuiを使います。

次のステップ（入門 15／24）

次は、拾うと数が増えるコインを作ります。

→ ロブロックス（Roblox）でコイン集めゲームを作る方法

次に知りたいことを選ぶ

次のステップ：拾うと数が増えるコインを作ります → ロブロックス（Roblox）でコイン集めゲームを作る方法
スクリプトが思いどおりに動かない → ロブロックス（Roblox）でスクリプトが動かないときの確認手順
作ったゲームを友達に遊んでもらいたい → ロブロックス（Roblox）のゲームを公開する方法

次に読む記事

チュートリアル入門

ロブロックス（Roblox）スタジオでボタンを作る方法｜押すと開く「遊び方」画面をスマホ対応で画像解説