Roblox UIレスポンシブ設計完全ガイド：Offset・Scale・UIScaleの使い分け

はじめに：RobloxのモバイルUIはなぜ難しいのか

Roblox Studioで完璧なUIを作り上げた。HPバーはちょうどいい位置にある。PC上ではきれいに見える。いざ公開すると——スマホでプレイしたプレイヤーから「ボタンが巨大すぎる」「レイアウトが崩れている」とスクリーンショットが送られてくる。

これが起きる理由はシンプルです。ピクセル固定のサイズ指定は、画面サイズに追従しないからです。

Robloxは4Kモニターから小型のAndroidスマホまで、何百種類もの解像度の端末で動作します。ピクセル値（Offset）でUIを作ると、ある解像度では正しく表示されても、それ以外の端末では崩れてしまいます。

このガイドでは以下を解説します：

• UDim2 の構造と、OffsetとScaleの違い
• Scaleをほぼ常に使うべき理由
• Roblox UI Scale CalculatorでOffset値を素早くScaleに変換する方法
• UIScale とは何か、UDim2 Scaleとどう違うのか
• たった1つのLocalScriptで全端末に自動対応する方法

UDim2のOffsetとScaleを理解する

RobloxのすべてのUI要素——Frame・TextLabel・ImageButton——には Size と Position プロパティがあります。どちらも UDim2 型を使います。

UDim2.new(scaleX, offsetX, scaleY, offsetY)

4つの数値が2ペアに分かれています——X軸用とY軸用です。各ペアの中で、Scale と Offset はまったく異なる動作をします。

Offset：固定ピクセル

Offset は生のピクセル数です。フレームを以下のように設定すると：

frame.Size = UDim2.new(0, 200, 0, 100)

どの端末でも正確に200×100ピクセルになります。

問題はすぐに見えてきます。 iPhone XR（896×414）で同じフレームを表示するとこうなります：

フレームは指示通り正確に200×100ピクセルです。問題は、414px幅のスマホでは200pxが巨大に見えること。Offsetは適応しない——はみ出すだけです。

Scale：親要素に対する比率

Scale は親コンテナに対する比率でサイズを表します。1.0 は親の100%、0.5 は50%、0.104 は約10.4%です。

frame.Size = UDim2.new(0.104, 0, 0.093, 0)

1920×1080の画面では 0.104 × 1920 = 約200px。iPhone XRでは 0.104 × 896 = 約93px。比率を維持したままスケールします——同じiPhone XRでの結果がこちら：

追加のコードなしで、あらゆる端末でレイアウトが維持されます。

基本ルール： すべての要素にScaleを使う。例外は1pxの境界線など厳密なピクセル指定が必要な要素だけです。

UI Scale CalculatorでOffsetをScaleに変換する

手計算は手間がかかりミスも起きやすいです。Roblox UI Scale Calculatorなら一瞬で変換できます。

実例：200×100pxのFrameを変換する手順

1. UI Scale Calculatorを開き、Offset → Scale タブを選択
2. 要素サイズを入力：Width 200、Height 100
3. 設計解像度を入力——Roblox StudioでUIを作ったときの自分の画面解像度。1080pモニターなら 1920 × 1080
4. 生成されたコードをコピー：

frame.Size = UDim2.new(0.104, 0, 0.093, 0)

Roblox StudioのPropertiesパネル、またはスクリプトに直接貼り付けます。

よくある間違い： Screen Width・Screen Heightにはプレイヤーのデバイスではなく、自分がUIを設計したときの画面解像度を入力します。プレイヤーの端末への対応はScaleになっていれば自動で行われます。プリセット（1920×1080、1280×720など）は設計基準の選択肢です——テストするデバイスの解像度を入れる必要はありません。

UDim2 Scaleだけでは解決しない3つの問題

Scaleでほとんどのレスポンシブ問題は解決できますが、3つの重要な限界があります。

1. TextSizeには効果がない。 TextLabel と TextButton の TextSize プロパティは常にピクセル値で指定します。テキストサイズを自動でスケールさせるプロパティが存在しないため、フレーム自体が完璧にスケールされていても、小さな画面では TextSize: 24 のテキストが大きすぎて表示されることがあります。これを解決するのがUIScaleです（次のセクションで解説）。

2. Scaleは形状を維持できない。 Scale XとScale YはそれぞれX軸・Y軸に対する独立した比率です。そのため「正方形」のフレームでも、画面のアスペクト比によって見た目が変わります。例えば UDim2.new(0.2, 0, 0.2, 0) は幅の20%・高さの20%を指定しますが、ワイドスクリーンとスマホ縦持ちではピクセル値が異なります。

形状を固定したい場合は、専用のInstanceを使ってください：

• 正方形を維持したい → UISizeConstraint（MinSizeとMaxSizeを同じ値に設定）
• アスペクト比を固定したい → UIAspectRatioConstraint

Scaleは配置とサイズの比率指定が得意です。形状の維持は別のInstanceが担当する設計になっています。

3. 大規模プロジェクトでは作業量が多い。 Offsetを使っている要素が数十個あると、一つずつ変換する作業は大変です。ツールを使えば大幅に効率化できますが、すべての要素を確認する手間は残ります。

UIScaleの導入：スクリプト1つで全端末対応

UIScale は上の3つの限界のうち最初の問題（TextSize）を直接解決します——そしてUDim2 Scaleとはまったく異なる仕組みで動作します。

UIScaleはプロパティではなく、Instance（オブジェクト）です。 ScreenGui や Frame に挿入することで、そのコンテナ内のすべての要素を一括で拡大・縮小します——テキストも含めて。

ズームレンズのようなイメージです。UIScale.Scale = 0.5 はUI全体を50%に縮小します。先ほどのフレームにUIScale 0.5を適用した結果がこちら：

Roblox StudioでUIScaleを追加する方法

1. ExplorerでScreenGuiを右クリック
2. Insert Object → UIScale を選択
3. Propertiesでスケール値を設定

固定値のUIScaleでは不十分な理由

UIScale.Scale = 0.5 を手動で設定すると、Offsetと同じ問題が残ります——特定の画面サイズにしか合いません。プレイヤーの実際のデバイスに合わせて自動で変わる仕組みが必要です。

それを実現するのがスクリプトです。

完全な解決策：スクリプト1つで全端末対応

UI Scale Calculatorの UIScale Calculator タブで、このスクリプトを自動生成できます：

-- 自動レスポンシブ UIScaleスクリプト
-- 基準解像度: 1920 x 1080

local UIScale = Instance.new("UIScale")
UIScale.Parent = script.Parent

local function updateScale()
    local viewportSize = workspace.CurrentCamera.ViewportSize
    local baseWidth = 1920
    local baseHeight = 1080

    local scaleX = viewportSize.X / baseWidth
    local scaleY = viewportSize.Y / baseHeight

    -- 小さい方の値を使用してUIが画面に収まるようにする
    UIScale.Scale = math.min(scaleX, scaleY)
end

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

このスクリプトをコピーして、ScreenGui内のLocalScriptに貼り付けるだけです。 あとは全端末に自動で対応します——デバイスごとの手動調整は不要です。

仕組みの解説

変更が必要な値は基準解像度だけです。baseWidth と baseHeight を、自分がUIを設計したときの画面解像度に設定してください。1080pモニターで作成した場合は 1920 と 1080 のままでOKです。

ゲーム実行時、スクリプトはプレイヤーの実際の画面サイズを読み取って比率を自動計算します：

math.min で小さい方の比率を採用することで、どちらの軸でもはみ出さないことが保証されます。GetPropertyChangedSignal の行により、ゲーム中にウィンドウサイズが変わった場合も自動で更新されます。

これにより、手動作業やデバイスごとの個別調整は一切不要になり、スクリプト1つで全端末に対応できます。

ベストプラクティス

レスポンシブ設計チェックリスト

• すべての Size と Position がOffset不使用・Scale使用になっている
• 各ScreenGuiにUIScale Instanceが存在する
• UIScaleタブで生成したLocalScriptが各ScreenGuiに設定されている
• スクリプトの baseWidth と baseHeight がプレイヤーのデバイスではなく自分の設計解像度になっている
• デバイスエミュレーターで 1920×1080、1280×720、スマホ系プリセットの3種類以上でテスト済み

よくある間違い

ツールに実機（プレイヤーの画面）の解像度を入力してしまう。 Screen Width・HeightはRoblox Studioで自分がUIを設計したときの解像度を入力します。プレイヤーのデバイス解像度を入れる必要はありません。Scaleになっていれば、プレイヤー端末への対応はRobloxが自動で行います。

OffsetとScaleを混在させる。 UDim2.new(0.5, 50, 0, 30) のようにScaleとOffsetを混在させると、Offset部分が画面サイズに適応しません。どちらかに統一してください。

UIScaleを固定値にしてしまう。 UIScale.Scale = 0.7 とハードコードすると、その値が正しいのは1つの解像度だけです。必ずスクリプトで動的に設定してください。

PCでしかテストしない。 Roblox Studioのデバイスエミュレーターは無料で即座に使えます。公開前に必ずスマホ系プリセットで確認してください。

深くネストしたFrame構造。 UDim2 Scaleは画面ではなく親要素に対する比率です。Frameを深くネストすると予期しないサイズ変化が起きます。なるべくフラットな構造を心がけてください。

まとめ

RobloxのレスポンシブUIは3つの要素の組み合わせです：

1. UDim2 Scale ——すべての要素の Size と Position に使い、レイアウトが常にコンテナに適応するようにする。

2. UI Scale Calculator ——既存のOffset値を瞬時にScaleに変換。設計解像度を入力するだけでUDim2コードが生成される。

3. UIScale LocalScript ——UIScale CalculatorタブのスクリプトをScreenGuiに1度貼り付けるだけで、全端末に永続的に自動対応。

この3つが揃えば、4Kモニター・ノートPC・iPhoneのどれでも、要素を個別に調整することなくUIが正しく表示されます。

関連ツール： Roblox Tween Generator ——TweenServiceのLuaコードを素早く生成。UIのアニメーション実装に。

タグ：Roblox UIレスポンシブ設計 · Roblox UDim2 · RobloxモバイルUI · Roblox UIScale · Offset Scale変換