ロブロックス（Roblox）スタジオの画像の入れ方｜デカール・テクスチャで看板や床に貼り、画面にImageLabelで出す方法

「ロブロックススタジオに自分で描いた絵を入れたい」「看板に画像を貼りたい」「画面の上にコインのアイコンと数字を出したい」

ロブロックス（Roblox）スタジオの画像の入れ方を、実際の画像付きで誰でも簡単に分かるように解説します。ここでは、パソコンにある画像2枚を取り込み、1枚を看板に貼ります。もう1枚はコインのアイコンにして、生き残った秒数がたまるスコアを画面に出します。最後に、押すと閉じる「ようこそ！」の画像のボタンも作ります。

中級ステップ22／28　前の記事：ロブロックス（Roblox）スタジオで体力ゲージと回復アイテムを作る方法　全体の順番を見る

使うもの：Roblox Studioが起動するパソコン、マウス、キーボード、入れたい画像（PNGかJPG）。画面に文字やボタンを出す基本はボタンの作り方、体力ゲージの作り方は前の記事の体力ゲージと回復アイテムで解説しています。

今回の完成状態：下の画像のように、画面の上にコインのアイコンと数字（画像の1）が出て、1秒ごとに数字が増えれば成功です。奥の看板（画像の2）には、取り込んだ「ようこそ！」の画像が貼られています。

画像を出す場所は3つある

Robloxで画像を出す場所は、大きく分けて3つです。どれも先に画像をRobloxに取り込み、付いた番号（アセットID）を入れて使います。

出す場所	使う部品	画像を入れる欄	向いているもの
パーツの面（引き伸ばす）	Decal	ColorMapContent	看板、ポスター
パーツの面（くり返す）	Texture	ColorMapContent	床のタイル、レンガの壁
画面（プレイヤーの前）	ImageLabel	Image	アイコン、スコアの飾り、タイトルの絵
画面の押せる画像	ImageButton	Image	画像のボタン、閉じるボタン

Decalはデカール、Textureはテクスチャと読みます。どちらもパーツの面に貼りますが、Decalは面いっぱいに1枚を引き伸ばし、Textureは同じ画像を並べてくり返します（手順14）。

Decalは3Dの世界の中に貼るので、近づくと大きく、離れると小さく見えます。ImageLabelとImageButtonは画面に貼るので、カメラを動かしても同じ場所に出ます。

1. 画像を用意する

入れる画像は、ペイントなどのアプリで作るか、自分で撮った写真を使います。この記事では、512×512ピクセルのコインの画像（背景が透明なPNG）と、1024×512ピクセルの「ようこそ！」の画像を使います。

取り込みの画面で選べる画像の形式は、BMP・GIF・JPEG・JPG・PNG・TGAです（2026年10月の画面）。背景を透明にしたいアイコンはPNGで作ります。

取り込んだ画像は、ロブロックスの規約に合っているかを審査されます。公式の説明では、取り込む画像はロブロックスのコミュニティルールと利用規約を守る必要があります。規約に合わない画像を悪質に取り込むと、ゲームが削除されたりアカウントが停止されたりすることもある、と書かれています。

2. 画像をStudioに取り込む

新しいBaseplateを開きます。上の「ホーム」タブの「インポート」（赤い枠）を押します。

ファイルを選ぶ画面が開きます。右下のファイルの種類の欄（赤い枠）を押します。

一覧から「画像（*.bmp *.gif *.jpeg *.jpg *.png *.tga）」（赤い枠）を選びます。

画像を入れたフォルダーを開き、Ctrlキーを押しながら2枚の画像（画像の1）を押して、両方を選びます。右下の「開く」（画像の2）を押します。

下に「キューをインポート」の窓が開き、選んだ2枚（画像の1）が並びます。この窓では「インポートキュー」とも表示されます。右上の「インポートを開始」（画像の2）を押します。

右の端に緑のチェック（赤い枠）が付けば、取り込みは終わりです。

3. 画像のアセットIDを調べる

上の「アセット」（画像の1）を押すと、下に「アセット管理」の窓が開きます。取り込んだ2枚が、名前（sign・coin）とID（画像の2）付きで並んでいます。

このIDの数字が、画像の住所のような番号です。Studioの欄には「rbxassetid://」のあとにこの数字を付けて入れます。この記事の画像は次の2つです。

画像	入れる文字
看板（sign）	rbxassetid://72458793188670
コイン（coin）	rbxassetid://124274185939020

自分の画像を使うときは、アセット管理に出たIDの数字に置きかえてください。上の2つのIDは、この記事のために取り込んだ画像の番号です。

なお2026年10月21日に試したときは、保存していない作品のままでも取り込めました。

4. 看板のパーツを置く

エクスプローラの「Workspace」にマウスを乗せて「＋」を押し、検索欄に「Part」と入力して、一覧の「Part」（赤い枠）を押します。パーツの入れ方はオビーの作り方と同じです。

カメラの見ている場所に灰色のブロック（画像の1）が入り、エクスプローラのWorkspaceの中に「Part」（画像の2）が増えます。

エクスプローラの「Part」を押して選び、F2キーを押して名前を「Sign」に変えます（赤い枠）。

続けてSignを選んだまま、次の3つを変えます。プロパティの検索欄（プロパティの窓のいちばん上の「(Ctrl+Shift+P) のプロパティをフィルタする」と書かれた欄）に名前を入力すると、その行だけが出ます。値は右の欄を押して入力し、Enterキーを押します。

プロパティ	入れる値	画像
Size	12, 6, 1	下の1枚目（横に長い板にする）
Position（▼CFrameのすぐ下）	0, 4, -14	下の2枚目（スポーン地点の奥に立てる）
Anchored	チェックを入れる（上の「固定」を押しても入る）	下の3枚目

スポーン地点の奥に、横に長い看板の板（赤い枠）が立ちました。

5. 看板にデカール（Decal）で画像を貼る

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

検索欄に「Decal」と入力し、一覧の「Decal」（赤い枠）を押します。

Signの中にDecalが入り、プロパティにDecalの欄が並びます。画像を入れる欄は「ColorMapContent」（赤い枠）です。

ColorMapContentの右の欄を押し、「rbxassetid://72458793188670」と入力して（赤い枠）、Enterキーを押します。

入れた直後は、出力にオレンジの文字（画像の1）が出て、看板（画像の2）はまだ灰色のままでした。「Asset content representation is being generated」は、取り込んだ画像を表示できる形に作っているところという意味です。数秒待つと画像の準備ができます。出力のオレンジの文字は、そのまま残っていてかまいません。準備ができても看板が灰色のままなら、次のFaceを確かめます。

Decalを選んだまま、プロパティの検索欄に「Face」と入力します。Faceは、パーツのどの面に画像を貼るかを決めるプロパティです。スポーン地点から見える面は「Back」です。

2026年10月に試したところ、入れたばかりのDecalのFaceは、パソコンによって「Back」のときと「Front」のときがありました。

• Faceが「Back」のとき：そのままで、スポーン地点から見える面に画像が出ます。次の「Faceが『Front』のとき」は飛ばしてください
• Faceが「Front」のとき：看板の奥側の面に貼られているので、こちらからは画像が見えません。下の手順でBackに変えます

Faceが「Front」のとき

下の画像は、Faceが「Front」（画像の1）になっていたときの画面です。看板はまだ灰色のままです。3D画面の右上の立方体にも「Back」（画像の2）と出ていますが、これはカメラが看板のどちら側から見ているかを表す印です。Faceの値とは別のものなので、プロパティの欄で確かめます。

Faceの右の欄を押し、一覧から「Back」（赤い枠）を選びます。

看板に画像が出たか確かめる

Faceが「Back」（画像の1）になっていれば、スポーン地点から見える面に「ようこそ！」の画像（画像の2）が出ます。

どの面がFrontか分からないとき

回していないパーツでは、Position（位置）のZの数が小さくなる向きがパーツの「前」です。スポーン地点（Z＝0）から奥（Z＝-14）の看板を見ると、見えているのは看板の後ろ側（Back）の面になります。迷ったときは、Faceの一覧の6つを順番に選んで画像の出る面を探します。

6. 画面にスコアの枠を作る

ここからは、画面の上にスコアを出す部品を作ります。画面に出す部品は、StarterGuiの中に入れます。

エクスプローラの「StarterGui」にマウスを乗せて「＋」を押し、検索欄に「ScreenGui」と入力して、一覧の「ScreenGui」（赤い枠）を押します。入ったScreenGuiを選び、F2キーを押して名前を「ScoreGui」に変えます。

エクスプローラの「ScoreGui」にマウスを乗せて「＋」を押し、検索欄に「Frame」と入力して、一覧の「Frame」（赤い枠）を押します。

続けてFrameを選んだまま、次の6つを変えます。

プロパティ	入れる値	画像
Name	ScoreBarFrame	下の1枚目
AnchorPoint	0.5, 0	下の2枚目（枠の上の真ん中を基準にする）
BackgroundColor3	0, 0, 0	下の3枚目（黒）
BackgroundTransparency	0.6	下の4枚目（後ろが少し透ける）
Position	{0.5, 0},{0, 0}	下の5枚目（画面の上の真ん中）
Size	{0.25, 0},{0.08, 0}	下の6枚目（画面の横の4分の1、縦の8％）

PositionとSizeの欄は、左の▶を押すとXとYの数が別々の欄に分かれます。Robloxの公式チュートリアルでは、欄に「0.5, 0, 0, 0」のように4つの数をカンマで区切って入れる方法も使っています。

Sizeの「{0.25, 0}」の左の数は、画面の大きさに対する割合です。スマホのように画面が小さいと、枠も小さくなります。小さくなりすぎて数字が読めなくならないよう、次の手順で大きさの下限を決めます。

枠が小さくなりすぎないようにする（UISizeConstraint）

エクスプローラの「ScoreBarFrame」にマウスを乗せて「＋」を押し、検索欄に「UISizeConstraint」と入力して、一覧の「UISizeConstraint」（赤い枠）を押します。

UISizeConstraintを選んだまま、プロパティのMinSizeを「0, 40」（赤い枠）にします。これで枠の高さが40ピクセルより小さくならなくなります。

中の部品を横に並べる（UIListLayout）

もう一度ScoreBarFrameの「＋」を押し、検索欄に「UIListLayout」と入力して、一覧の「UIListLayout」（赤い枠）を押します。

UIListLayoutを選んだまま、次の2つを変えます。このあと入れるアイコンと数字が左から横に並び、枠の高さの真ん中にそろいます。

プロパティ	入れる値	画像
FillDirection	Horizontal	下の1枚目（横に並べる）
VerticalAlignment	Center	下の2枚目（縦の真ん中にそろえる）

7. コインのアイコンを画面に出す（ImageLabel）

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

検索欄に「ImageLabel」と入力し、一覧の「ImageLabel」（赤い枠）を押します。

スコアの枠の左の端に、山の絵の入った白い四角（画像の1）が出ます。これがImageLabelの最初の見た目です。プロパティの検索欄に「Image」と入力すると、画像を入れる欄「Image」（画像の2）が出ます。

Imageの右の欄を押し、「rbxassetid://124274185939020」と入力して（赤い枠）、Enterキーを押します。

コインの画像（画像の1）が出ました。Imageの欄（画像の2）には入れたIDが入っています。ただし、コインの周りに白い四角が残っています。

続けてImageLabelを選んだまま、次の5つを変えます。

プロパティ	入れる値	画像
Name	CoinIcon	下の1枚目
BackgroundTransparency	1	下の2枚目（白い四角を消す）
Size	{1, 0},{1, 0}	下の3枚目（枠いっぱいにする）
SizeConstraint	RelativeYY	下の4枚目（高さに合わせて正方形にする）
LayoutOrder	1	下の5枚目（左から1番目に置く）

3枚目のSizeを入れた時点では、コインが横に引き伸ばされています。Sizeの「{1, 0},{1, 0}」は「枠の横いっぱい、縦いっぱい」なので、横長の枠に合わせて画像も横長になるためです。

4枚目のSizeConstraintを「RelativeYY」にすると、横の大きさも枠の高さを基準に決まります。横も縦も高さの1倍になるので、コインがつぶれない正方形にもどります。

8. スコアの数字を出す（TextLabel）

ScoreBarFrameの「＋」を押し、検索欄に「TextLabel」と入力して、一覧の「TextLabel」（赤い枠）を押します。

入ったTextLabelを選んで、F2キーで名前を「ScoreText」に変え、次の9つを変えます。

プロパティ	入れる値	画像
Text	0	下の1枚目の1
TextColor3	255, 200, 100	下の1枚目の2（金色）
Size	{1, 0},{1, 0}	下の2枚目の1
SizeConstraint	RelativeYY	下の2枚目の2
BackgroundTransparency	1	下の3枚目
FontFace	一覧で「Montserrat」を選び、左の▶を押して開いたWeightを「Bold」にする	下の4枚目（太い字）
TextSize	30	下の5枚目
TextXAlignment	Left	下の6枚目（コインのすぐ右から書く）
LayoutOrder	2	下の7枚目（コインの右に置く）

表の値は9つ、画像は7枚です。1枚目ではTextとTextColor3、2枚目ではSizeとSizeConstraintを、1枚にまとめて見せています。数字の「0」は、あとでスクリプトが秒数に書きかえます。文字の出し方の基本は、文字を出す方法で解説しています。

UIListLayoutのSortOrderは、最初から「LayoutOrder」になっています。このときUIListLayoutは、LayoutOrderの数が小さい順に左から並べます。CoinIconが1、ScoreTextが2なので、コインが左、数字が右に並びます。

9. 画面の端に余白をつける（UIPadding）

このままでは、スコアの枠が画面のいちばん上にくっついています。スマホでは画面の上の端が見えにくいことがあるので、少し内側に下げます。

エクスプローラの「ScoreGui」にマウスを乗せて「＋」を押し、検索欄に「UIPadding」と入力して、一覧の「UIPadding」（赤い枠）を押します。

UIPaddingを選んだまま、プロパティの検索欄に「Padding」と入力し、PaddingBottom・PaddingLeft・PaddingRight・PaddingTopの4つ（画像の2）をどれも「0, 16」にします。右の数は16ピクセルの意味です。スコアの枠（画像の1）が、画面の上の端から16ピクセル下がりました。

UIPaddingを入れると、ScoreGuiの中のすべての部品が、画面の4つの端から16ピクセル内側に置かれます。

10. 押すと閉じる「ようこそ！」の画像を作る（ImageButton）

画像のボタンは、ImageButtonで作ります。看板に使った「ようこそ！」の画像を、そのまま画面の真ん中に出して、押すと消えるようにします。

ScoreGuiの「＋」を押し、検索欄に「ImageButton」と入力して、一覧の「ImageButton」（赤い枠）を押します。

画面の左上に、仮の画像の入ったImageButton（赤い枠）が出ます。

ImageButtonを選んで、F2キーで名前を「WelcomeButton」に変え、次の5つを変えます。

プロパティ	入れる値	画像
Image	rbxassetid://72458793188670	下の1枚目（看板と同じ画像）
Position	{0.5, 0},{0.5, 0}	下の2枚目
AnchorPoint	0.5, 0.5	下の3枚目（画像の真ん中を基準にする）
Size	{0.6, 0},{0.4, 0}	下の4枚目
BackgroundTransparency	1	下の5枚目

画像が横に伸びたら、ScaleTypeをFitにする

画面の真ん中に「ようこそ！」が出ましたが、元の画像より横に伸びています（画像の1）。プロパティの検索欄に「ScaleType」と入力すると、「Stretch」（画像の2）になっています。Stretchは、画像を部品の形に合わせて引き伸ばす設定です。

ScaleTypeの一覧から「Fit」（画像の2）を選びます。元の画像の縦と横の比率のまま、部品の中に収まりました（画像の1）。

ScaleType	見え方
Stretch	部品の形に合わせて引き伸ばす（最初の設定）
Fit	比率を変えずに、部品の中に全部収める
Crop	比率を変えずに部品いっぱいに広げ、はみ出た所を切る
Tile	画像を並べて敷きつめる
Slice	角はそのままにして、辺と真ん中を伸ばす（枠の画像向け）

倒れても「ようこそ！」が出直さないようにする

ScoreGuiを選び、プロパティの検索欄に「ResetOnSpawn」と入力して、チェックを外します（赤い枠）。

ResetOnSpawnにチェックが入っていると、プレイヤーが倒れて出直すたびに、画面の部品が最初の状態に作り直されます。閉じた「ようこそ！」がまた出てこないよう、チェックを外しておきます。

11. 生き残った秒数を数えるスクリプトを入れる

スコアは、生き残っている秒数です。1秒ごとに1増え、倒れると0に戻ります。点数を増やす処理は、ずるができないようにサーバーのScriptに書きます。

エクスプローラの「ServerScriptService」にマウスを乗せて「＋」を押し、検索欄に「Script」と入力して、一覧の「Script」（赤い枠）を押します。

Scriptを入れると、真ん中にスクリプトの画面（画像の1）が自動で開きます。中には最初から print("Hello world!") の1行が入っています。エクスプローラには「Script」（画像の2）が増えます。

エクスプローラの「Script」を押して選び、F2キーで名前を「SetupPoints」に変えます（赤い枠）。ServerScriptServiceの中のScriptはサーバーで動くので、RunContextは変えなくてかまいません。

スクリプトの画面を押してから、Ctrl＋Aキーで中身を全部選んで消し、次のコードを貼り付けます。

local Players = game:GetService("Players")

-- キャラクターが出てきたら「生きている」にし、倒れたらポイントを0に戻す
local function onCharacterAdded(character, player)
	player:SetAttribute("IsAlive", true)
	local humanoid = character:WaitForChild("Humanoid")
	humanoid.Died:Connect(function()
		local points = player.leaderstats.Points
		points.Value = 0
		player:SetAttribute("IsAlive", false)
	end)
end

-- 入ってきたプレイヤーに leaderstats と Points を作る
local function onPlayerAdded(player)
	local leaderstats = Instance.new("Folder")
	leaderstats.Name = "leaderstats"
	leaderstats.Parent = player

	local points = Instance.new("IntValue")
	points.Name = "Points"
	points.Value = 0
	points.Parent = leaderstats

	player:SetAttribute("IsAlive", false)

	player.CharacterAdded:Connect(function(character)
		onCharacterAdded(character, player)
	end)
end

Players.PlayerAdded:Connect(onPlayerAdded)

-- 1秒ごとに、生きている人のポイントを1増やす
while true do
	task.wait(1)
	local playerList = Players:GetPlayers()
	for i = 1, #playerList do
		local player = playerList[i]
		if player:GetAttribute("IsAlive") then
			local points = player.leaderstats.Points
			points.Value += 1
		end
	end
end

貼り付けると、下の画像のようになります。

このコードは、Robloxの公式チュートリアル「Score points」の完成コードに、日本語の説明を付けたものです。「leaderstats」は、すべて小文字で書かないと右上の一覧に出ません。

12. 数字を画面に出すスクリプトを入れる

画面の数字を書きかえるのは、プレイヤーのパソコンで動くLocalScriptの役目です。

エクスプローラの「ScoreGui」にマウスを乗せて「＋」を押し、検索欄に「LocalScript」と入力して、一覧の「LocalScript」（赤い枠）を押します。

エクスプローラの「LocalScript」を押して選び、F2キーで名前を「ScoreDisplay」に変えます（赤い枠）。

開いたスクリプトの画面を押してから、Ctrl＋Aキーで中身を全部選んで消し、次のコードを貼り付けます。

local Players = game:GetService("Players")

local player = Players.LocalPlayer
local scoreGui = script.Parent
local scoreText = scoreGui.ScoreBarFrame.ScoreText
local welcomeButton = scoreGui.WelcomeButton

-- 「ようこそ！」の画像を押したら閉じる
welcomeButton.Activated:Connect(function()
	welcomeButton.Visible = false
end)

-- サーバーが leaderstats と Points を作るまで待つ
local leaderstats = player:WaitForChild("leaderstats")
local points = leaderstats:WaitForChild("Points")

-- ポイントの数を画面の文字に出す
local function updateScore()
	scoreText.Text = tostring(points.Value)
end

points:GetPropertyChangedSignal("Value"):Connect(updateScore)
updateScore()

貼り付けると、下の画像のようになります。

エクスプローラのScoreGuiの中が、次の並びになっていれば準備は終わりです。

StarterGui
└ ScoreGui（ScreenGui）
   ├ UIPadding
   ├ ScoreDisplay（LocalScript）
   ├ ScoreBarFrame（Frame）
   │  ├ UIListLayout
   │  ├ UISizeConstraint
   │  ├ CoinIcon（ImageLabel）
   │  └ ScoreText（TextLabel）
   └ WelcomeButton（ImageButton）

13. テストで確かめる

作品のタブ（「Place1」）を押して3D画面に戻り、F5キーを押してテストを始めます。

画面の上のコインの横の数字（画像の1）が、1秒ごとに増えていきます。画面の真ん中には「ようこそ！」の画像（画像の2）が出ています。2026年10月21日に試したときは、始めてから約13秒で「11」になりました。

画面の真ん中の「ようこそ！」を押すと、画像が消えました。数字（赤い枠）は増え続けています。

倒れると0に戻るか確かめる

Escキーを押してメニューを開き、「リスポーン」（赤い枠）を押します。リスポーンは、自分のアバターを倒してスポーン地点から出直す操作です。

「キャラクターをリスポーンしてよろしいですか？」と出たら、「リスポーン」（赤い枠）を押します。

アバターが倒れた瞬間に、数字が「0」（赤い枠）に戻りました。

スポーン地点から出直すと、また1秒ごとに増え始めました（赤い枠）。閉じた「ようこそ！」は出てきません。確かめ終わったら、Shift＋F5キーでテストを止めます。

14. 床に模様をくり返し貼る（Texture）

看板のような1枚の絵はDecalで貼りますが、床のタイルやレンガの壁のように同じ模様を並べたいときはTexture（テクスチャ）を使います。ここでは、クリエイターストアにあるレンガのデカールを使って、DecalとTextureの違いを見比べます。

2枚の床を置く

手順4と同じように、エクスプローラの「Workspace」にマウスを乗せて「＋」を押し、検索欄に「Part」と入力して、一覧の「Part」を押します。

エクスプローラに入った「Part」を押して選び、F2キーを押して名前を「TileFloor」に変えます。

続けてTileFloorを選んだまま、次の3つを変えます。手順4と同じように、プロパティの検索欄に名前を入力し、値を入れてEnterキーを押します。PositionはCFrameのすぐ下の欄に入れます。

プロパティ	入れる値
Size	16, 1, 16
Position	-20, 0.5, -14
Anchored	チェックを入れる（上の「固定」を押しても入る）

2枚目の床は、TileFloorを複製して作ります。エクスプローラでTileFloorを選んだ状態でCtrl+Dキーを押します。複製したパーツを選んだままF2キーを押し、名前を「DecalFloor」に変えます。

DecalFloorを選んだまま、プロパティの検索欄に「Position」と入力し、CFrameのすぐ下のPositionを「20, 0.5, -14」にしてEnterキーを押します。SizeとAnchoredはTileFloorと同じ値が写っているので、変えません。

名前	Size	Position
TileFloor	16, 1, 16	-20, 0.5, -14
DecalFloor	16, 1, 16	20, 0.5, -14

クリエイターストアの画像のIDを調べる

ホームタブの「ツールボックス」を開き、カテゴリの「2Dアセット」→「デカール」を押して、検索欄に「brick」と入れます。一覧の画像を右クリックすると、「アセットIDをコピー」が出ます（赤い枠）。この記事では「Brick Texture」を使いました。

ただし、ここでコピーした数字は「デカール」の番号で、画像そのものの番号ではありません。このまま使うと画像が出ないので、次の手順で確かめます。

TileFloorにTextureを入れる

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

一覧の検索欄に「Texture」と入力し、一覧の「Texture」（赤い枠）を押します。

TileFloorの中にTextureが入ります。画像を入れる欄は、Decalと同じ「ColorMapContent」（赤い枠）です。2026年10月23日に試したときは、入れたばかりのTextureはFaceが「Front」、StudsPerTileUとStudsPerTileVが「2」でした。

デカールの番号を入れても画像は出ない

試しに、さきほどコピーした番号（この記事では16951369）を「rbxassetid://16951369」としてColorMapContentに入れると、出力にオレンジの文字で「Asset type does not match requested type」と出て、床には何も出ません（赤い枠）。「アセットの種類が合っていない」という意味で、デカールの番号を画像の欄に入れたためです。

画像の番号を調べる

画像の番号は、デカールを一度作品に入れると分かります。ツールボックスの「Brick Texture」を押すと、選んでいた場所にDecalが入ります。入ったDecalを選んで、プロパティの検索欄に「ColorMapContent」と入力すると、「rbxassetid://16951368」と出ます（赤い枠）。デカールの番号（16951369）とは違う数字で、こちらが画像そのものの番号です。

番号を確かめたら、入れたDecalは消します。エクスプローラで「Brick Texture」の左のアイコンのあたりを押して選び（赤い枠）、Deleteキーを押します。名前の文字の上を押すと名前を書きかえる状態になることがあるので、そのときはEscキーで戻してから選び直します。

TileFloorの中は、Textureだけに戻ります（赤い枠）。

画像の番号を入れて、上の面に向ける

Textureを選んだ状態で、ColorMapContentに「rbxassetid://16951368」と入れてEnterキーを押します。続けてTextureを選んだまま、プロパティの検索欄に「Face」と入力し、一覧から「Top」を選びます。床の上の面に、小さなレンガの模様がびっしり並びます（赤い枠）。

DecalFloorにDecalを貼って見比べる

エクスプローラの「DecalFloor」の「＋」から「Decal」（赤い枠）を入れ、ColorMapContentに同じ「rbxassetid://16951368」、Faceに「Top」を入れます。

同じ画像なのに、見え方がまったく違います（赤い枠）。左のTextureは小さなレンガがくり返し並び、右のDecalは1枚の画像が床いっぱいに引き伸ばされています。

模様の大きさを変える（StudsPerTileU・StudsPerTileV）

Textureの1枚の大きさは、StudsPerTileU（横）とStudsPerTileV（縦）で決まります。単位はスタッドです。Textureを選んだ状態で、プロパティの検索欄に「StudsPerTile」と入力し、2つを同じ数字にします。下の3枚は、4・8・16にしたところです。16にすると、16スタッドの床に1枚だけになり、Decalと同じ見た目になります。

床を大きくしたときの違い

StudsPerTileを8に戻し、2枚の床のSizeを両方「32, 1, 32」にして比べます。下の1枚目が16の床、2枚目が32の床です。

Textureはレンガの大きさが変わらず、並ぶ数が増えます。Decalは1枚のまま引き伸ばされるので、レンガが大きくなります。広い床や長い壁にはTextureが向いています。

模様の位置をずらす（OffsetStudsU・OffsetStudsV）

OffsetStudsU（横）とOffsetStudsV（縦）で、模様の位置をスタッド単位でずらせます。Textureを選んだ状態で、プロパティの検索欄に「OffsetStuds」と入力し、OffsetStudsUを「4」にすると、模様が横に4スタッドずれます（赤い枠）。模様の継ぎ目が床の端と合わないときに使います。

DecalとTexture、どちらを使う？

使う物	向いているもの	パーツを大きくすると
Decal（デカール）	看板、ポスター、顔、ロゴ	画像が引き伸ばされる
Texture（テクスチャ）	床のタイル、レンガの壁、地面の模様	並ぶ数が増える

コードのしくみ

サーバーとプレイヤーで役目を分ける

スクリプト	置き場所	動く場所	役目
SetupPoints（Script）	ServerScriptService	サーバー	ポイントを作る・増やす・0に戻す
ScoreDisplay（LocalScript）	ScoreGuiの中	プレイヤーのパソコン	数字を画面に出す・ボタンを押したら閉じる

ポイントの数はサーバーが決め、画面はそれを見て書きかえるだけです。画面の側でポイントを増やすと、そのプレイヤーの画面の中だけで数字が変わり、サーバーやほかの人には伝わりません。

GetPropertyChangedSignalで、数が変わったときだけ書きかえる

points:GetPropertyChangedSignal("Value") は、Pointsの数（Value）が変わるたびに合図を出します。その合図で updateScore を動かすので、画面の数字はPointsと同じになります。最後の updateScore() は、テストを始めた直後の「0」を出すための1回です。

Activatedは、押したときの合図

welcomeButton.Activated は、マウスで押したときと、スマホで指を触れて離したときの両方で合図を出します。Robloxの公式の説明では、Activatedはサーバーでは動きません。LocalScript（またはRunContextを「Client」にしたScript）に書きます。

ScoreDisplayでは、ボタンの処理をleaderstatsを待つ行より上に書いています。WaitForChild は見つかるまで次の行へ進まないため、下に書くと、SetupPointsが動いていないときに「ようこそ！」も閉じられなくなるからです。

welcomeButton.Visible = false で、ボタンを見えない状態にしています。もう一度出したいときは true にします。

うまく動かないときの直し方

症状	原因	直し方
画像のまわりに白い四角が出る	BackgroundTransparencyが0	1にする（手順7）
アイコンが横に伸びる	Sizeが枠いっぱいのまま	SizeConstraintをRelativeYYにする（手順7）
「ようこそ！」が横に伸びる	ScaleTypeがStretch	Fitにする（手順10）
看板に画像が出ない	貼った面が見えていない	DecalのFaceを「Back」にする（手順5）
IDを入れた直後に出力がオレンジになる	画像を表示する形に作っている途中	数秒待つ
出力に「Asset type does not match requested type」と出て画像が出ない	デカールの番号を入れた	ツールボックスから一度入れたDecalのColorMapContentの番号を使う（手順14）
Textureの模様が見えない	Faceが見えていない面	FaceをTopなどに変える（手順14）
模様が大きすぎて1つしか見えない	StudsPerTileU・Vが面より大きい	小さくする（手順14）
画像が灰色の四角のまま	「rbxassetid://」が抜けている、数字のまちがい	アセット管理のIDと見比べて入れ直す
数字が0のまま増えない	SetupPointsがServerScriptServiceにない、leaderstatsの大文字	置き場所と、すべて小文字かを確かめる
「ようこそ！」を押しても消えない	ScoreDisplayの中の名前と部品の名前がちがう	WelcomeButton・ScoreBarFrame・ScoreTextの名前を確かめる
倒れると「ようこそ！」がまた出る	ResetOnSpawnにチェックが入っている	ScoreGuiのResetOnSpawnを外す（手順10）

テストを始めると、出力にオレンジの文字で「CorePackages」から始まる行が並ぶことがあります。2026年10月21日に試したときも出ました。これはRoblox本体の画面の部品からの知らせで、この記事のスクリプトとは関係ありませんでした。自分のスクリプトのまちがいは、スクリプトの名前（SetupPoints、ScoreDisplay）が付いた赤い文字で出ます。読み方はスクリプトが動かないときの確認手順で解説しています。

公開したゲームで画像が見えないとき

Studioで取り込んだ画像は、Robloxの審査を受けます。公式の説明では、公開したゲームでほかの人が見られるのは、審査に通ってからです。審査はたいてい数時間のうちに終わる、と書かれています。

審査が終わる前にゲームを公開すると、ほかの人の画面には画像が出ません。審査に通らなかった画像は、そのあとも表示されません。通らなかったときは、理由の知らせが届きます。

公開してすぐに友だちに遊んでもらうときは、画像を取り込んだあと、時間をおいてから公開すると安心です。公開の手順はゲームを公開する方法で解説しています。

数字を変えて試す

SetupPointsの2つは、コードの中の数字です。エクスプローラで「SetupPoints」をダブルクリックして開き、書き換えます。

ScoreBarFrameのPositionとCoinIconのImageColor3はプロパティです。エクスプローラでその部品を押して選び、プロパティの検索欄にPositionやImageColor3と入力して、右の欄を変えます。

変えたいこと	変える場所	例
ポイントが増える速さ	SetupPointsの task.wait(1)	0.5にすると2倍の速さ
1回に増える数	SetupPointsの points.Value += 1	10にすると1秒で10増える
スコアの枠の位置	ScoreBarFrameのPosition	{0.5, 0},{1, 0}とAnchorPoint 0.5, 1で画面の下
アイコンの色	CoinIconのImageColor3	白で作った画像なら好きな色に変わる

ImageColor3は、画像に色を重ねる設定です。元の画像が白い所ほど、選んだ色がそのまま出ます。この記事のコインのように色の付いた画像では、選んだ色にはならず、元の色と混ざった色になります。色を自由に変えたいアイコンは、白で作っておきます。

AIに相談するときの伝え方

画像の部品はプロパティの数が多いので、作りたい見た目と今の値を一緒に伝えると、答えが合いやすくなります。

Roblox StudioでScreenGuiの中にFrameを作り、その中にImageLabel（コインのアイコン）とTextLabel（数字）をUIListLayoutで横に並べています。
アイコンが横に伸びてしまいます。ImageLabelのSizeは{1, 0},{1, 0}、Frameは横長です。
正方形のままにする方法を、プロパティの名前と値で教えてください。

よくある質問

デカールとは？

デカールは、パーツの面に貼る画像のことです。Studioでは「Decal」という部品で、パーツの中に入れて使います。この記事の手順5で看板に貼ったのがデカールです。

デカールのIDとテクスチャのIDはちがう？

クリエイターストアのデカールの番号と、画像そのものの番号は別の数字です。2026年10月23日に試したところ、デカールの番号（16951369）をColorMapContentに入れると画像が出ず、ツールボックスから一度入れたDecalに入っていた番号（16951368）なら出ました。調べ方は手順14で解説しています。

デカールを消すには？

エクスプローラで、パーツの中のDecalを選んでDeleteキーを押します。パーツを選んで消すと、パーツごと消えてしまうので注意します。

画像の大きさは何ピクセルがいい？

Robloxの公式の目安では、5×5スタッドくらいの小さい物は256×256、10×10スタッドの物は512×512、20×20スタッドの大きな物は1024×1024ピクセルとされています。この記事のコイン（512×512）と看板（1024×512）は、その目安の中で作りました。公式の説明では、ゲームの読み込みのはじめは画質を落とした画像を出し、端末の性能に合わせて画質を上げていきます。

同じ画像を、別のゲームでも使える？

使えます。「rbxassetid://」から始まるIDは、自分のほかのゲームでも同じ画像を指します。アセット管理の名前で指す書き方（rbxgameasset://）もありますが、公式の説明ではそのゲームの中でしか使えません。

Decalと、SurfaceGuiの中のImageLabelはどうちがう？

どちらもパーツの面に画像を出せます。Decalは画像を1枚貼るだけの簡単な部品です。SurfaceGuiの中にImageLabelを入れると、画面のUIと同じように、文字や複数の画像を並べたり、スクリプトで書きかえたりできます。看板に文字を出す方法は文字を出す方法で解説しています。

次のステップ（中級 23／28）

次は、一人称視点・横から見るカメラ・Shiftキーのダッシュを作ります。

→ ロブロックス（Roblox）スタジオで一人称視点・カメラ固定・ダッシュを作る方法

次に知りたいことを選ぶ

• 次のステップ：一人称視点・横から見るカメラ・Shiftキーのダッシュを作ります → ロブロックス（Roblox）スタジオで一人称視点・カメラ固定・ダッシュを作る方法
• 体力ゲージをおさらいしたい → 体力ゲージと回復アイテムの作り方
• 画面のボタンの基本を知りたい → ボタンの作り方
• 看板や頭の上に文字を出したい → 文字を出す方法

次に読む記事

チュートリアル 中級

ロブロックス（Roblox）スタジオで体力ゲージと回復アイテムを作る方法｜HPバー・ダメージ床・回復を画像で解説

制作手順 確認日 2026-10-18

チュートリアル 入門

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

制作手順 確認日 2026-10-04

チュートリアル 入門

ロブロックス（Roblox）スタジオの文字の入れ方｜看板と空中に浮かぶ文字を画像で解説

制作手順 確認日 2026-10-19