ブログ一覧へ

RobloxのUIをスマホ・全端末対応にする方法【UIScale活用ガイド】

スマホでゲームを開いたら、UIが崩れていた

Robloxでゲームを作っていると、こんな経験をすることがあります。

Roblox Studioでは見た目がバッチリ整っていたのに、スマートフォンで開いてみると、ボタンが画面からはみ出している、文字が極端に小さい、レイアウトが崩れている——。

これは決して珍しいことではありません。Robloxのプレイヤーの多くはPCではなく、スマートフォンやタブレットでプレイしています。つまり、PC向けに作ったUIがそのまま通用しない場面がほとんどです。

この記事では、UIScaleを使ってRobloxのUIをあらゆる端末に対応させる方法を、初心者にもわかりやすく解説します。

なぜ端末によってUIの見た目が変わるのか

Robloxでは、UIのサイズを「オフセット（px単位）」か「スケール（画面比率）」で指定できます。

たとえば、ボタンのサイズを{0, 200}, {0, 50}（200px × 50px）と固定で設定したとします。PCの広い画面では問題なく表示されますが、スマートフォンの小さな画面では相対的に大きくなりすぎたり、逆に見えにくくなったりします。

画面の解像度やサイズが端末によって異なるため、固定サイズのUIは崩れやすいのです。

UIScaleとは何か

UIScaleは、RobloxのUI全体の表示サイズをまとめて調整できるオブジェクトです。

たとえばUIScale.Scale = 0.8と設定すると、そのUIの子要素が全て80%のサイズで表示されます。逆にScale = 1.5にすれば150%になります。

単純に「縮小・拡大する」だけのように聞こえますが、スクリプトと組み合わせることで、端末の画面サイズに応じて自動でスケールを調整することができます。これがUIScaleを活用したレスポンシブ対応の核心です。

UIScaleを使ったスマホ対応の基本実装

画面の横幅（ViewportSize.X）を取得して、それに応じてUIScaleの値を変える方法がよく使われます。

まず、Roblox StudioのExplorerで以下の構成を作ります。

StarterGui
└── ScreenGui
    ├── UIScale        ← UIScaleオブジェクトをここに追加
    └── LocalScript    ← 名前は何でもOK（例：ScaleController）

LocalScriptの中身は以下のとおりです。

local ScreenGui = script.Parent
local UIScale = ScreenGui:FindFirstChildOfClass("UIScale")

local function updateScale()
    local viewportWidth = workspace.CurrentCamera.ViewportSize.X
    if viewportWidth < 600 then
        UIScale.Scale = 0.75
    elseif viewportWidth < 1024 then
        UIScale.Scale = 0.9
    else
        UIScale.Scale = 1.0
    end
end

updateScale()
workspace.CurrentCamera:GetPropertyChangedSignal("ViewportSize"):Connect(updateScale)

端末ごとのスケール値の目安は以下のとおりです。

端末の種類 画面の横幅（ViewportSize.X） 推奨スケール値（Scale）
スマートフォン 600px 未満 0.75
タブレット 600px 以上 〜 1024px 未満 0.9
パソコン（PC） 1024px 以上 1.0

ブレークポイント（600px・1024px）の数値は、自分のUIのデザインに合わせて調整してください。

スケール値はどう決める？計算ツールを使おう

「どのスケール値が適切か」は、UIの構成や画面サイズによって変わります。毎回手計算するのは大変です。

Roblox UI Scale Calculator を使うと、画面サイズやベースサイズを入力するだけで適切なスケール値を素早く確認できます。開発中に「この端末ではどう見えるか」を素早く確かめたいときに便利です。

おわりに

Robloxのゲームを作り始めたとき、自分のPCでは綺麗に見えていたUIが、スマートフォンでプレイすると全く違う見た目になっていて驚きました。Robloxのプレイヤーの多くがモバイル端末でプレイしていることを知ってからは、スマホ対応を最初から意識するようになりました。

UIScaleは覚えてしまえばシンプルな仕組みですが、対応しているゲームとそうでないゲームでは、プレイヤーの快適さが大きく変わります。最初から意識して組み込んでおくことをおすすめします。

まとめ

  • Robloxのプレイヤーはスマホユーザーが多く、PC向けUIはそのまま通用しないことが多い
  • UIScaleオブジェクトを使うと、UIの表示倍率をまとめて変更できる
  • StarterGui > ScreenGuiの中にUIScaleとLocalScriptを追加するのが基本構成
  • ViewportSize.Xを取得してスクリプトでスケール値を切り替えるのが基本パターン
  • スケール値の目安にはRoblox UI Scale Calculatorが便利