roblox-ui

Roblox UI

体験のビジュアル言語を保ち、サポート対象のデバイスで動作する、意図的に設計された編集可能な Roblox UI を実装します。 Roblox の継続的に更新されるプラットフォーム API を対象とします。エンジンに依存しない情報設計と UX には game-ui-ux を併用してください。このスキルでは Roblox の Instance と API を扱います。

使用する場面

• 作成する ScreenGui インターフェース、Roblox のレイアウト／制約 API、UI のライフサイクル、入力、フォーカス、アニメーション、パフォーマンス、レスポンシブ対応やデバイス別の修正に使用します。
• 脆弱なピクセル単位のレイアウト、実行時に作成される Instance の複雑な絡まり、マウス専用メニュー、または汎用的に生成されたスタイルを、保守しやすい階層構造に置き換える場合に使用します。

使用しない場面： 一般的な UX フローとアクセシビリティの原則は game-ui-ux、ゲームプレイの基本操作の割り当ては input-systems、サーバーの信頼性は roblox-networking に任せます。

ワークフロー

1. 設計の前に調査します。 Explorer で既存の ScreenGui、UI モジュール、フォント、色、アイコンのファミリー、間隔、角、ストローク、アニメーションのタイミング、命名規則、再利用可能なコンポーネントを確認します。代表的な 2 種類のビューポートでスクリーンショットを撮影します。既存のビジュアル言語を広げてください。
2. 所有権とライフサイクルを定義します。 StarterGui は作成元のテンプレートであり、Roblox は各プレイヤーの PlayerGui にその複製を作成します。各 ScreenGui で ResetOnSpawn = false を設定し、リスポーン後も維持するかを決めます。破棄された複製への古い参照は決して保持しないでください。
3. 読みやすい階層構造を作成します。 意味が分かり、編集可能な Instance と小規模な動作モジュールを優先します。通常の画面は Explorer で把握できる構造にしてください。手続き型生成は、本当にデータ駆動の繰り返しにのみ使用し、シェル全体には使わないでください。
4. レスポンシブな構造を構築します。 配置には UDim2 のスケールを使い、上限を設けたオフセット、適切な AnchorPoint、レイアウト、パディング、コンテンツサイズ、制約を組み合わせます。デスクトップ用パネルを技術的に収まるだけ縮小するのではなく、画面幅が狭い場合と広い場合それぞれに明示的な配置を選びます。
5. プラットフォームによる表示領域の制約に対応します。 インタラクティブな UI は CoreUISafeInsets（推奨される ScreenGui.ScreenInsets のデフォルト値）の範囲内に保ち、タッチ操作とテレビの視聴距離／オーバースキャンも考慮します。
6. 状態と入力を連携させます。 小さなビュー状態から描画し、イベントに応じて更新します。GuiButtons には Activated を使い、選択状態を明示し、ゲームパッドで操作できるようにします。ウィジェット以外の操作は、その画面が操作を受け持つ間だけ ContextActionService でバインドします。
7. 過度に飾らず仕上げます。 ホバー、押下、選択、無効の状態を実装します。装飾ではなく状態の変化をアニメーション化し、GuiService.ReducedMotionEnabled を尊重します。画面を閉じるとき、または置き換えるときは、tween と接続をクリーンアップします。
8. 実際のインターフェースを検証します。 Device Emulator と Controller Emulator を使います。デスクトップ、縦長の狭い画面、横向きのモバイル、タブレット相当の画面、コンソール／ゲームパッドでテストし、その後リスポーンします。クリッピング、重なり、テキスト、スクロール、安全領域、フォーカス経路、タッチ対象、ライフサイクルの結果を記録します。

本番環境向けの構造

StarterGui
└── InventoryGui (ScreenGui; ResetOnSpawn = false)
    ├── Root (Frame)
    │   ├── Header
    │   ├── Content
    │   │   ├── CategoryList
    │   │   ├── ItemGrid (ScrollingFrame)
    │   │   └── DetailsPanel
    │   └── Footer
    └── InventoryController (LocalScript)
ReplicatedStorage
└── UI
    ├── Components
    └── Theme

名前には色や一時的な位置ではなく、役割を表す名前を付けます。繰り返し使うアイテムセルはテンプレートまたはコンポーネントとして保持しつつ、作成したシェルは Explorer で見える状態にしてください。

パターン

コンテンツやビューポートが変わっても崩れないレイアウト

-- Authored properties on ItemGrid (ScrollingFrame):
--   AutomaticCanvasSize = Enum.AutomaticSize.Y
--   CanvasSize = UDim2.fromOffset(0, 0)
-- Children: UIPadding + UIGridLayout
local grid = itemGrid.UIGridLayout
local projectBreakpoint = 700 -- derive from where this composition stops being usable

local function applyComposition()
    local narrow = root.AbsoluteSize.X < projectBreakpoint
    categoryList.UIListLayout.FillDirection = if narrow
        then Enum.FillDirection.Horizontal
        else Enum.FillDirection.Vertical
    categoryList.Size = if narrow
        then UDim2.new(1, 0, 0, 40)
        else UDim2.new(0, 148, 1, 0)
    itemGrid.Position = if narrow then UDim2.fromOffset(0, 52) else UDim2.fromOffset(164, 0)
    itemGrid.Size = if narrow
        then UDim2.new(1, 0, 1, -52)
        else UDim2.new(0.58, -164, 1, 0)
    detailsPanel.Visible = not narrow -- open details as a separate narrow-screen state

    local width = itemGrid.AbsoluteSize.X
    local columns = if width < 520 then 2 elseif width < 820 then 3 else 4
    local gap = 12
    local usable = width - itemGrid.UIPadding.PaddingLeft.Offset
        - itemGrid.UIPadding.PaddingRight.Offset - gap * (columns - 1)
    grid.CellSize = UDim2.fromOffset(math.floor(usable / columns), 112)
    grid.CellPadding = UDim2.fromOffset(gap, gap)
end

root:GetPropertyChangedSignal("AbsoluteSize"):Connect(applyComposition)
applyComposition()

一次元の配置には UIListLayout、均一なセルには UIGridLayout を使い、行と列の整列が本当に表形式の場合に限り UITableLayout を使います。AutomaticSize はコンテンツに合わせたサイズ調整に、AutomaticCanvasSize はスクロールコンテンツに合わせたサイズ調整に使用します。全体に単一の UIScale を適用するのではなく、UISizeConstraint、UIAspectRatioConstraint、または UITextSizeConstraint で極端なサイズを制限します。

1つの有効化経路と、ゲームパッドでの明示的な操作開始

local GuiService = game:GetService("GuiService")
local RunService = game:GetService("RunService")
local UserInputService = game:GetService("UserInputService")

local function openInventory()
    root.Visible = true
    task.spawn(function()
        RunService.RenderStepped:Wait() -- selection must be rendered and selectable
        if root.Visible and (UserInputService.GamepadEnabled
            or (UserInputService.KeyboardEnabled and not UserInputService.TouchEnabled)) then
            GuiService.SelectedObject = firstItemButton
        end
    end)
end

local function closeInventory()
    GuiService.SelectedObject = nil
    root.Visible = false
end

firstItemButton.Activated:Connect(function()
    selectItem(firstItemButton:GetAttribute("ItemId"))
end)

マウスやタッチのハンドラーを個別に用意するのではなく、Activated を優先してください。自動ナビゲーションが曖昧な場合、特にグリッド、サイドバー、モーダルでは、NextSelectionUp/Down/Left/Right を設定してください。モーダルではフォーカスを内部に閉じ込め、閉じるときに適切な選択状態へ戻す必要があります。

デバイスをまたいで操作をバインドする場合は、Input Action System（InputContext/InputAction/InputBinding）が編集時の最新レイヤーです。詳しくは references/input-navigation.md を参照してください。

Roblox のデフォルトの選択装飾を実際の画面で確認してください。インターフェースを圧迫する場合は、プロジェクト独自の SelectionImageObject または選択状態の表示を割り当ててください。フォーカス表示を無効にするのではなく、視認性と有効性を保ち、控えめにしてください。

アニメーションを多用しない状態遷移

local TweenService = game:GetService("TweenService")
local GuiService = game:GetService("GuiService")
local fade = TweenInfo.new(0.14, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

local function setPanelVisible(visible: boolean)
    panel.Visible = true -- panel is a CanvasGroup
    if GuiService.ReducedMotionEnabled then
        panel.GroupTransparency = if visible then 0 else 1
    else
        TweenService:Create(panel, fade, {
            GroupTransparency = if visible then 0 else 1,
        }):Play()
    end
    if not visible then
        task.delay(fade.Time, function()
            if panel.GroupTransparency == 1 then panel.Visible = false end
        end)
    end
end

パネルや状態の境界は一度だけアニメーションさせてください。すべての子孫要素を個別にバウンスさせないでください。

ビジュアル品質の確認項目

• 装飾を加える前に、サイズ、ウェイト、コントラスト、グループ化、余白で階層を明確にしてください。間隔は少数のスケールに絞り、それに合わせて配置してください。
• ゲームのフォント、パレット、アイコン、角丸、線幅を維持してください。既存のものがない場合は、コンパクトなトークンモジュールを定義し、コンポーネントごとに場当たり的な調整をしないでください。
• 素材や形状に合う箇所で角を使い、すべての入れ子になった Frame に角を付けないでください。カードの上にカードを重ねたようなシェル、あらゆる要素へのピル形状、根拠のないグラデーション／発光／影、ネオンの輪郭線、過剰な透明度／ぼかし、大きすぎる見出し、意味のないアイコン、広大な空白パネルは避けてください。
• 重要度が異なるボタンは、見た目も変えてください。必要に応じて、プライマリ、セカンダリ、控えめ、破壊的、選択中、押下中、ホバー中、無効の表示を定義してください。
• モーションは、開閉、フォーカス、確認、空間的な関係を伝えるために使います。短く、中断可能で、控えめにしてください。動き続けるアニメーションや装飾的な Tween の連鎖は避けてください。
• タッチデバイスでは、デフォルトの移動／ジャンプ用の隅を空けてください。重なる下部アクションは移動するか再構成し、それらの入力がアクティブでない場合はキーボード／ゲームパッドのヒントを非表示にしてください。

よくある問題

症状	考えられる原因	対処法
リスポーン後に UI が消える、または重複する	ResetOnSpawn ポリシーの誤り、または古いクローン	ポリシーを選択し、PlayerGui から取得し直して、古いバインドをクリーンアップする
スマートフォンのレイアウトが切れる	デスクトップ向けのオフセット／グローバルスケールをレイアウトとして使用している	狭い画面向けの構成、レイアウト、境界を追加し、Device Emulator で確認する
コンテンツがトップバー／ノッチの下に隠れる	インセットが無視されている、または ScreenInsets = None	インタラクティブな UI には CoreUISafeInsets を使用し、意図的なはみ出し表示を確認する
スクロールが早く終わる	CanvasSize が固定されている	AutomaticCanvasSize またはレイアウトの AbsoluteContentSize を使用する
コントローラーの操作が行き詰まる	開始時の選択がない、または隣接先のグラフが不適切	初期の SelectedObject を設定し、フォーカスの遷移先とモーダル内への閉じ込めを定義してテストする
UI が自動生成されたように見える	階層の代わりに装飾を使っている	エフェクトを取り除き、配置を整え、入れ子を減らし、密度とコンポーネントの役割を見直す
接続／Tween の数が増え続ける	クリーンアップせずに画面を再バインドしている	画面のライフサイクルごとに接続を管理し、破棄時に切断／キャンセルする

リソース

• レイアウトの判断、インセットの方針、密度、必須のビューポートマトリックスについては、references/responsive-layout.md を参照してください。
• ゲームパッド／タッチのフォーカス、モーダルの動作、アクションのバインド、モーションの設定を実装する際は、references/input-navigation.md を参照してください。
• Rojo で assets/inventory-quality-test.project.json をビルドしてください（隣接する JSON モデルをマッピングします）。ビジュアル／レイアウトレビューで使用する編集可能な Instance のフィクスチャです。これはテスト用のベースラインであり、公開するゲームのスタイルテンプレートではありません。

関連スキル

• game-ui-ux — 情報階層、画面遷移、アクセシビリティ、UX 検証。
• input-systems — ゲームプレイのアクションマッピングとデバイスの切り替え。
• roblox-networking — UI から開始されるサーバー権威型リクエスト。
• roblox-studio-workflow — Explorer を優先した編集と Studio での検証。

主な参考資料

• Roblox Creator Hub：https://create.roblox.com/docs/ui/on-screen-containers
• Roblox Creator Hub：https://create.roblox.com/docs/ui/position-and-size
• Roblox Creator Hub：https://create.roblox.com/docs/ui/size-modifiers
• Roblox Creator Hub：https://create.roblox.com/docs/studio/testing-modes