ロブロックス（Roblox）スタジオのTweenの使い方｜TweenInfoと11種類の動き方を実際に動かして比べる

制作手順難易度: 中級所要時間: 約50分（目安）情報確認日: 2026年10月23日

「扉をなめらかに開けたい」「床をスーッと動かしたい」「画面の枠をスライドさせて入れたい」

ロブロックス（Roblox）スタジオのTween（トゥイーン）の使い方を、実際の画像付きで誰でも簡単に分かるように解説します。Tweenは、パーツや画面の部品を「今の状態から、決めた状態まで、決めた時間でなめらかに変える」仕組みです。位置だけでなく、大きさ・色・すけ具合・向きも変えられます。

中級ステップ8／28　前の記事：ロブロックス（Roblox）スタジオで消える床を作る方法　全体の順番を見る

使うもの：Roblox Studioが起動するパソコン、マウス、キーボード。Scriptの入れ方はスクリプトの作り方で解説しています。

先に答え：Tweenは次の4つの手順で動きます。

手順	書くこと	意味
1	`TweenInfo.new(2)`	動き方を決める（2秒かける）
2	`{ Position = ... }`	最後にどうなっていてほしいか
3	`TweenService:Create(部品, 動き方, 最後)`	Tweenを作る
4	`tween:Play()`	動かす

1. 青いブロックを置く

新しいBaseplateを開きます。エクスプローラの「Workspace」にマウスを乗せて、右に出る「＋」を押します。一覧の検索欄に「Part」と入れ、一覧の「Part」を押します。

入ったPartを選んだままF2キーを押し、名前を「TweenBlock」に変えます。

エクスプローラでTweenBlockを選んだ状態で、プロパティの検索欄に「Size」と入力し、Sizeの欄を「4, 4, 4」に変えてEnterキーを押します。同じように、検索欄に「Position」と入力し、「▼CFrame」のすぐ下のPositionの欄を「0, 2, -15」に変えてEnterキーを押します。検索欄に「Color」と入力し、Colorの欄を「0, 120, 255」に変えてEnterキーを押します。

プロパティ	値
Size	4, 4, 4
Position（▼CFrameのすぐ下）	0, 2, -15
Color	0, 120, 255
Anchored	チェックを入れる

TweenBlockを選んだ状態で、プロパティの検索欄に「Anchored」と入力し、Anchoredの右の四角を押してチェックを入れます（赤い枠）。Tweenで動かすパーツは、必ずAnchored（固定）にします。固定しないとどうなるかは、最後の「うまく動かないとき」で見せます。

2. 2秒かけて上へ動かす

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

一覧の検索欄に「Script」と入れ、一覧の「Script」を押します。ServerScriptServiceの中にScriptが入り、スクリプトの画面が開きます。

RunContextは、Scriptを「どこで動かすか」を決めるプロパティです。エクスプローラでScriptを選んだまま、プロパティの検索欄に「RunContext」と入力し、「▼動作」の欄のRunContextの右の「▼」を押します。最初は「Legacy」になっています。一覧の「Server」を押して選びます（赤い枠）。

エクスプローラでScriptを選んだままF2キーを押し、名前を「TweenScript」に変えます。この記事では、このTweenScriptの中身を節ごとに入れかえて試していきます。スクリプトの画面で、中身を全部消して、次のコードを貼り付けます。

-- 置き場所：ServerScriptService の Script（名前は TweenScript、RunContext は Server）
-- 青いブロック（TweenBlock）を、2秒かけて上へ10スタッド動かす
-- TweenBlock は Anchored（固定）にしておく。固定していないと、動かしている途中で重力に引っぱられる

local TweenService = game:GetService("TweenService")

local block = workspace:WaitForChild("TweenBlock")

-- 1. 動き方を決める（2秒かける）
local info = TweenInfo.new(2)

-- 2. 最後にどうなっていてほしいかを決める（今の位置より10上）
local goal = {
	Position = block.Position + Vector3.new(0, 10, 0),
}

-- 3. Tween を作る（だれを・どう動かして・どこまで）
local tween = TweenService:Create(block, info, goal)

task.wait(3) -- テストが始まってアバターが出るまで待つ
tween:Play() -- 4. 動かす

コードの「1.」〜「4.」が、先に答えの表の手順1〜4です（9〜21行目、赤い枠）。

3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます（タブの名前はパソコンによって違います）。

テストが始まって3秒たつと、ブロックが上へ動き出し、2秒かけて10スタッド上で止まります。下の3枚は、動く前・途中・止まったところです。

Shift + F5キーでテストを停止します。

3. TweenInfoでくり返す・戻る・待つ

コードのTweenInfo.newには、時間のほかに5つの値を入れられます。

順番	値	意味	最初の値
1	時間	何秒かけるか	1
2	EasingStyle	動き方（4節）	Quad
3	EasingDirection	動き方の向き（In・Out・InOut）	Out
4	くり返す回数	-1でずっとくり返す	0
5	戻るか	trueで行ったら戻ってくる	false
6	待ち時間	始まるまで何秒待つか	0

3D画面の上のタブ「TweenScript」を押して、スクリプトの画面に戻ります。中身を全部消して、次のコードを貼り付けます。2節のコードから変わったのは、10行目のlocal info = ...の行（赤い枠）と、その上の9行目の説明だけです。

-- 置き場所：ServerScriptService の Script（名前は TweenScript、RunContext は Server）
-- 青いブロック（TweenBlock）を、2秒かけて上へ10スタッド動かす
-- TweenBlock は Anchored（固定）にしておく。固定していないと、動かしている途中で重力に引っぱられる

local TweenService = game:GetService("TweenService")

local block = workspace:WaitForChild("TweenBlock")

-- 1. 動き方を決める（2秒かけて、行ったり来たりをずっとくり返す）
local info = TweenInfo.new(2, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true, 1)

-- 2. 最後にどうなっていてほしいかを決める（今の位置より10上）
local goal = {
	Position = block.Position + Vector3.new(0, 10, 0),
}

-- 3. Tween を作る（だれを・どう動かして・どこまで）
local tween = TweenService:Create(block, info, goal)

task.wait(3) -- テストが始まってアバターが出るまで待つ
tween:Play() -- 4. 動かす

3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます（タブの名前はパソコンによって違います）。

テストを始めると、ブロックが2秒かけて上がり、2秒かけて下り、1秒待って、また上がる、をずっとくり返します。動く床や、浮かんでいるアイテムに使えます。下の画像は、このテスト中の画面です。

Shift + F5キーでテストを停止します。

4. 11種類の動き方を並べて比べる

コードのEasingStyleは、動き始めと終わりの速さの変わり方です。11種類を同時に走らせて比べます。

3D画面の上のタブ「TweenScript」を押して、スクリプトの画面に戻ります。中身を全部消して、次のコードを貼り付けます。

-- 置き場所：ServerScriptService の Script（名前は TweenScript、RunContext は Server）
-- 11種類の EasingStyle（動き方）で、ブロックを横一列に並べて同時に走らせる
-- ブロックの上に名前の看板を付けるので、どの動き方かが画面で分かる

local TweenService = game:GetService("TweenService")

local styles = {
	"Linear", "Sine", "Quad", "Cubic", "Quart", "Quint",
	"Exponential", "Circular", "Back", "Bounce", "Elastic",
}

local DISTANCE = 30 -- 走る長さ（スタッド）
local TIME = 3 -- かける時間（秒）

local folder = Instance.new("Folder")
folder.Name = "EasingRace"
folder.Parent = workspace

local tweens = {}

for i, styleName in ipairs(styles) do
	-- ブロックを作る（3スタッドずつ奥へずらして並べる）
	local block = Instance.new("Part")
	block.Name = styleName
	block.Size = Vector3.new(2, 2, 2)
	block.Anchored = true
	block.Position = Vector3.new(-15, 1, -10 - i * 3)
	block.Parent = folder

	-- 名前の看板（ブロックの上に文字を出す）
	local gui = Instance.new("BillboardGui")
	gui.Size = UDim2.new(0, 120, 0, 30)
	gui.StudsOffset = Vector3.new(0, 2, 0)
	gui.AlwaysOnTop = true
	gui.Parent = block
	local label = Instance.new("TextLabel")
	label.Size = UDim2.new(1, 0, 1, 0)
	label.BackgroundTransparency = 1
	label.TextScaled = true
	label.Text = styleName
	label.Parent = gui

	local info = TweenInfo.new(TIME, Enum.EasingStyle[styleName], Enum.EasingDirection.Out)
	tweens[i] = TweenService:Create(block, info, {
		Position = block.Position + Vector3.new(DISTANCE, 0, 0),
	})
end

task.wait(3)
for _, tween in ipairs(tweens) do
	tween:Play() -- 11本を同時に始める
end

3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます（タブの名前はパソコンによって違います）。テストが始まって3秒たつと、11個のブロックがいっせいに走り出します。下の画像は、このテストの画面を、カメラを真上に固定して撮ったものです。テストの画面では、アバターの後ろから斜めに見えます。

走り出してからTIMEで決めた3秒がたつと、11個ともDISTANCEで決めた30スタッド先の同じ場所に着きます。ただし、途中の進み方はまったく違います。

以下は、アソビシフト編集部がこのテストで11個を同時に走らせ、途中の画像（上の2枚目）で並び順を確かめた結果です。Elasticがいちばん先に進み、Exponential・Back・Quintが続き、Linearがいちばん後ろにいました。

それぞれの動き方の特徴は次のとおりです（どれもOutの向き）。

EasingStyle	特徴
Linear	ずっと同じ速さ
Sine	ゆるやかに止まる
Quad	少し早めに止まる（最初の値）
Cubic	Quadより少しだけ急に速さが変わる
Quart	Cubicよりさらに急に速さが変わる
Quint	Quartよりさらに急に速さが変わる
Exponential	はじめにいっきに進む
Circular	はじめにぐっと速く進み、そのあとゆっくり止まる
Back	行きすぎてから戻る
Bounce	着く前にはねる
Elastic	ばねのようにゆれる

扉や動く床はSineやQuad、ボタンを押したときのはずむ動きはBack、アイテムが出てくるときのにぎやかな動きはElasticやBounceが向いています。

Shift + F5キーでテストを停止します。

5. 大きさ・色・すけ具合・向きを同時に変える

Tweenの「最後にどうなっていてほしいか」には、いくつものプロパティをまとめて書けます。

エクスプローラでTweenBlockを選んだ状態でCtrl + Dキーを押します。同じ場所に複製ができ、エクスプローラでは複製のほうが選ばれた状態になります。

複製を選んだままF2キーを押し、名前を「ChangeBlock」に変えます。

ChangeBlockを選んだ状態で、プロパティの検索欄に「Color」と入力し、Colorの欄を「255, 255, 255」に変えてEnterキーを押します。

続けてChangeBlockを選んだまま、プロパティの検索欄に「Position」と入力し、「▼CFrame」のすぐ下のPositionの欄を「10, 4, -15」に変えてEnterキーを押します（赤い枠）。高さを4にしているのは、大きさが8になったときに床にめり込まないようにするためです。

プロパティ	値
Color	255, 255, 255
Position（▼CFrameのすぐ下）	10, 4, -15

3D画面の上のタブ「TweenScript」を押して、スクリプトの画面に戻ります。中身を全部消して、次のコードを貼り付けます。

-- 置き場所：ServerScriptService の Script（名前は TweenScript、RunContext は Server）
-- 白いブロック（ChangeBlock）の、大きさ・色・すけ具合・向きを、3秒かけて同時に変える

local TweenService = game:GetService("TweenService")

local block = workspace:WaitForChild("ChangeBlock")

local info = TweenInfo.new(3)
local goal = {
	Size = Vector3.new(8, 8, 8), -- 大きさ（4,4,4 から 8,8,8 へ）
	Color = Color3.fromRGB(255, 80, 80), -- 色（白から赤へ）
	Transparency = 0.5, -- すけ具合（0 から 0.5 へ）
	CFrame = block.CFrame * CFrame.Angles(0, math.rad(90), 0), -- 向き（その場で90度回す）
}

local tween = TweenService:Create(block, info, goal)

task.wait(3)
tween:Play()

3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます（タブの名前はパソコンによって違います）。3秒かけて、白いブロックが大きく、赤く、半分すけた姿に変わります。

Shift + F5キーでテストを停止します。

6. 着いたら次の動きをする（Completed）

Tweenが最後まで動き終わると、Completedが起きます。これを使うと「上に着いたら緑にして、下に戻す」のように動きをつなげられます。

3D画面の上のタブ「TweenScript」を押して、スクリプトの画面に戻ります。中身を全部消して、次のコードを貼り付けます。

-- 置き場所：ServerScriptService の Script（名前は TweenScript、RunContext は Server）
-- TweenBlock を上へ動かし、着いたら緑にして、そのあと元の高さへ戻す（2つの Tween を順番につなぐ）

local TweenService = game:GetService("TweenService")

local block = workspace:WaitForChild("TweenBlock")
local startPosition = block.Position

local info = TweenInfo.new(2)
local goUp = TweenService:Create(block, info, { Position = startPosition + Vector3.new(0, 10, 0) })
local goDown = TweenService:Create(block, info, { Position = startPosition })

-- 上に着いたときに動く
goUp.Completed:Connect(function(playbackState)
	print("上に着いた：" .. playbackState.Name) -- 最後まで動けば Completed と出る
	block.Color = Color3.fromRGB(0, 200, 0)
	goDown:Play()
end)

task.wait(3)
goUp:Play()

3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます（タブの名前はパソコンによって違います）。テストを始めると、青いブロックが上がり、上に着いたところで緑になって、元の高さへ戻ります。出力に「上に着いた：Completed」と出ます。下の2枚は、このテスト中の画面です。2枚目の画像の1が緑になったブロック、画像の2が出力の行です。

Shift + F5キーでテストを停止します。

7. 途中で止める（Cancel）

コードのtween:Cancel()で、動いている途中のTweenを止められます。

3D画面の上のタブ「TweenScript」を押して、スクリプトの画面に戻ります。中身を全部消して、次のコードを貼り付けます。

-- 置き場所：ServerScriptService の Script（名前は TweenScript、RunContext は Server）
-- 4秒かけて上へ動かし、1秒たったところで Cancel（とり消し）する
-- 公式の説明：Cancel しても、途中まで動いた位置は元に戻らない。もう一度 Play すると、また4秒かけて動く

local TweenService = game:GetService("TweenService")

local block = workspace:WaitForChild("TweenBlock")

local tween = TweenService:Create(block, TweenInfo.new(4, Enum.EasingStyle.Linear), {
	Position = block.Position + Vector3.new(0, 10, 0),
})

tween.Completed:Connect(function(playbackState)
	-- Cancel したときも Completed は起きる。中身は Cancelled になる
	print("止まった：" .. playbackState.Name .. "　高さ：" .. string.format("%.1f", block.Position.Y))
end)

task.wait(3)
tween:Play()
task.wait(1)
tween:Cancel() -- Pause（一時停止）を使うと、あとで Play したときに続きから動く

3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます（タブの名前はパソコンによって違います）。

ブロックは少し上がったところで止まり、出力に「止まった：Cancelled　高さ：4.5」と出ます（赤い枠）。4秒で10スタッド上がる速さで1秒動いたので、もとの高さ2から2.5上がった4.5で止まっています。CancelしてもCompletedは起き、中身が「Cancelled」になります。

Shift + F5キーでテストを停止します。

8. 画面の枠をスライドさせて入れる（UI）

Tweenは画面の部品（UI）にも使えます。画面の部品は遊ぶ人のパソコンで動かすので、LocalScriptに書きます。LocalScriptとScriptの違いはローカルスクリプトとはで解説しています。

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

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

入ったScreenGuiを選んだままF2キーを押し、名前を「SlideGui」に変えます。

エクスプローラの「SlideGui」にマウスを乗せて、右に出る「＋」を押します。一覧の検索欄に「Frame」と入れ、一覧の「Frame」を押します。

入ったFrameを選んだままF2キーを押し、名前を「Panel」に変えます。

Panelのプロパティを次の3つに変えます。最初はAnchorPointが0, 0、Sizeが{0, 100},{0, 100}、Positionが{0, 0},{0, 0}です。

エクスプローラでPanelを選んだ状態で、プロパティの検索欄に「AnchorPoint」と入力し、AnchorPointの欄を「0.5, 0.5」に変えてEnterキーを押します。SizeとPositionも、Panelを選んだまま検索欄にそれぞれの名前を入力して欄を出します。欄の数字を押して全部消し、表の値を「{0.4, 0},{0.3, 0}」のように、かっこも入れてそのまま入力し、Enterキーを押します。

プロパティ	値	意味
AnchorPoint	0.5, 0.5	枠の真ん中を位置の基準にする
Size	{0.4, 0},{0.3, 0}	画面の横40％・縦30％の大きさ
Position	{-0.5, 0},{0.5, 0}	画面の左の外に置く

Positionを画面の外にしたので、3D画面にはPanelが見えません。

次に、エクスプローラの「SlideGui」にマウスを乗せて、右に出る「＋」を押します。一覧の検索欄に「LocalScript」と入れ、一覧の「LocalScript」を押します。

入ったLocalScriptを選んだままF2キーを押し、名前を「UiSlide」に変えます。

スクリプトの画面で、中身を全部消して、次のコードを貼り付けます。

-- 置き場所：StarterGui の中の ScreenGui「SlideGui」の中の LocalScript（名前は UiSlide）
-- 画面の外（左）にある枠「Panel」を、1秒かけて画面の真ん中へスライドさせて入れる
-- 画面の部品は、遊ぶ人のパソコンで動かすので LocalScript に書く
-- Panel の準備：AnchorPoint 0.5, 0.5、Size {0.4, 0},{0.3, 0}、Position {-0.5, 0},{0.5, 0}（画面の外）

local TweenService = game:GetService("TweenService")

local panel = script.Parent:WaitForChild("Panel")

local info = TweenInfo.new(1, Enum.EasingStyle.Back, Enum.EasingDirection.Out)
local slideIn = TweenService:Create(panel, info, {
	Position = UDim2.new(0.5, 0, 0.5, 0), -- 画面の真ん中（横 50％、縦 50％）
})

task.wait(2)
slideIn:Play()

3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます（タブの名前はパソコンによって違います）。テストが始まって2秒たつと、白い枠が左からスライドして入り、画面の真ん中で止まります。下の2枚は、このテスト中の画面です。

Shift + F5キーでテストを停止します。

うまく動かないとき

Anchoredを外すとどうなる？

8節で作った画面の枠が出ないように、先にUiSlideを止めておきます。エクスプローラでUiSlideを選んだ状態で、プロパティの検索欄に「Enabled」と入力し、「▼動作」の欄のEnabledの右の四角を押してチェックを外します。

エクスプローラで「TweenBlock」を選んだ状態で、プロパティの検索欄に「Anchored」と入力し、Anchoredの右の四角を押してチェックを外します（赤い枠）。

3D画面の上のタブ「TweenScript」を押して、スクリプトの画面に戻ります。中身を全部消して、2節の上へ動かすコードをもう一度貼り付けます。

-- 置き場所：ServerScriptService の Script（名前は TweenScript、RunContext は Server）
-- 青いブロック（TweenBlock）を、2秒かけて上へ10スタッド動かす
-- TweenBlock は Anchored（固定）にしておく。固定していないと、動かしている途中で重力に引っぱられる

local TweenService = game:GetService("TweenService")

local block = workspace:WaitForChild("TweenBlock")

-- 1. 動き方を決める（2秒かける）
local info = TweenInfo.new(2)

-- 2. 最後にどうなっていてほしいかを決める（今の位置より10上）
local goal = {
	Position = block.Position + Vector3.new(0, 10, 0),
}

-- 3. Tween を作る（だれを・どう動かして・どこまで）
local tween = TweenService:Create(block, info, goal)

task.wait(3) -- テストが始まってアバターが出るまで待つ
tween:Play() -- 4. 動かす

3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます（タブの名前はパソコンによって違います）。

テストを始めて3秒たつと、ブロックは上へ動きます。ところがTweenが終わると、重力で落ちて、画面から見えなくなりました。下の2枚は、このテスト中の画面です。

Shift + F5キーでテストを停止します。

試したあとは元に戻します。エクスプローラで「TweenBlock」を選んだ状態で、プロパティの検索欄に「Anchored」と入力し、Anchoredの右の四角を押してチェックを入れます。

続けて、エクスプローラでUiSlideを選んだ状態で、プロパティの検索欄に「Enabled」と入力し、Enabledの右の四角を押してチェックを入れます。

こまっていること	見るところ	直し方
動いたあと落ちる・転がる	Anchored	チェックを入れる
何も動かない	部品の名前	エクスプローラの名前が、コードのWaitForChild("TweenBlock")の名前と同じか確かめる
何も動かない	スクリプトの場所とRunContext	ServerScriptServiceのScriptにして、RunContextをServerにする
画面の枠が動かない	スクリプトの種類	ScreenGuiの中のLocalScriptに書く
大きくしたら床にめり込む	Position	大きくなる分だけ高い位置に置く
途中で止めたい	Cancel	`tween:Cancel()`。続きから動かしたいときは`tween:Pause()`

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

次は、話しかけると喋るNPCを作ります。

→ ロブロックス（Roblox）スタジオでNPCを作る方法

次に知りたいことを選ぶ

次のステップ：話しかけると喋るNPCを作ります → ロブロックス（Roblox）スタジオでNPCを作る方法
乗ると消える床を作りたい → ロブロックス（Roblox）スタジオで消える床を作る方法
回る床と行ったり来たりする床を作りたい → 動く床の作り方

次に読む記事

チュートリアル中級

ロブロックス（Roblox）スタジオのTweenの使い方｜TweenInfoと11種類の動き方を実際に動かして比べる

1. 青いブロックを置く

2. 2秒かけて上へ動かす

3. TweenInfoでくり返す・戻る・待つ

4. 11種類の動き方を並べて比べる

5. 大きさ・色・すけ具合・向きを同時に変える

6. 着いたら次の動きをする（Completed）

7. 途中で止める（Cancel）

8. 画面の枠をスライドさせて入れる（UI）

うまく動かないとき

Anchoredを外すとどうなる？

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

次に知りたいことを選ぶ

次に読む記事

ロブロックス（Roblox）スタジオで消える床を作る方法｜乗ると消えて戻る足場と時間で出る橋を画像で解説

ロブロックス（Roblox）で回る床と動く床を作る方法｜乗っても置いていかれない作り方を画像で解説

ロブロックス（Roblox）スタジオでNPCを作る方法｜話しかけると喋る案内人と歩くNPCを画像で解説