scenario-roblox-ui

Roblox UI と入力

scenario-roblox-expert ツールキットを使って操作する、macOS 上の Roblox Studio（2026 年 10 月ビルド）です。

ここでいうエキスパートレベルとは、画面とプレイヤーの入力を実行時に読み取る単一の UI ツリーを構築し、デバイスを一切所有せずに、縦横両方の向きのスマートフォン、タブレット、PC、コンソール、携帯型ゲーム機で、数値とキャプチャによって検証することです。UI は Edit でインスタンスとして構築し、見た目は StyleSheet に、操作は Input Action System（IAS）のコンテキストにまとめてから、Studio のデバイスプリセットで測定し、実際のクリックとキーで操作します。

ここに記載された兄弟スキルが利用可能なスキルにない場合は、ユーザーにインストールを依頼してください （npx skills add scenario-labs/skills --skill <name>）。無人で処理する場合は、ツールのスキーマに従って進め、不足している点を明記してください。

必須の背景知識： scenario-roblox-expert（チャネル、レビューループ、ツールキット、現行 Roblox 固有の落とし穴）。

姿勢（専門家による追加情報）

1. 測定に応じて調整する一つのツリー。 デバイスごとに個別のコピーを作成しないでください（Roblox モバイル円卓会議、BsyU-SJ9L-c；RDC 2024 フレームワークパネル）。GuiService.ViewportDisplaySize に合わせてレイアウトし、UserInputService.PreferredInput に応じてプロンプトを表示します（Roblox ゲームパッドのドキュメント）。スマートフォンでもコントローラーが使われ、ノート PC にもタッチスクリーンがあるため（Roblox IAS Q&A、KnFJl6z5UN0 [00:10:42]）、TouchEnabled と IsTenFootInterface による判定は誤りやすいです。
2. シェルには Scale、親指や目に必要な部分には Offset。 パネルには UISizeConstraint で上限を設けた Scale を使い、ボタンとテキストにはスマートフォンでも読みやすさを保てるよう Offset を使います（円卓会議 [00:11:15]）。子要素ではなく、外側のコンテナーに制約を設定します（Itz_FloppyFish、BLZl-0cl2DM [00:16:37]）。画面全体の ScreenGui に UIScale を設定すると「すべてが壊れます」（boatbomber、RDC 2024 パネル [00:38:15]）。
3. コアタッチ操作とトップバーには、それぞれ専用のスペースがあります。 カスタムタッチボタンは JumpButton を基準に配置します（Roblox の位置とサイズに関するドキュメント）。Studio 0.743 のすべてのプリセットで、トップバーのインセットは 58 px と測定されましたが、2023 年の円卓会議のスライドでは 36 とされていました（BsyU-SJ9L-c [00:08:20]）。ScreenInsets.CoreUISafeInsets を使って測定し、マージンを固定値にしないでください。
4. 見た目は StyleSheet で管理します。 トークンには繰り返し使う値をすべて保持し、テーマは同名のトークンで構成されるシートにします。クエリーセレクター（@ViewportDisplaySizeLarge、@PreferredInputTouch、@ReducedMotionEnabledFalse）で表示を調整します（Roblox Style Editor の動画、_k1ea0OIKaU [00:03:52, 00:04:24]）。コードで設定されたプロパティは、すべての StyleRule より優先されます（StyleSheet のドキュメント、実測）。直接読み取るとスタイル適用前の値が返されるため、GetStyled で読み取ります。
5. 入力は画面に応じて切り替えるコンテキストの集合です。 Priority 2000 のゲームプレイ用コンテキストと、Sink を設定した Priority 3000 のメニュー用コンテキストを用意し、メニューが開いている間だけ有効にします（IAS のドキュメント；derpmonster83、8nqNw6kSKJ0 [00:08:26]）。Priority と Sink はコンテキストに設定し、Priority が同じ場合の実行順序は固定されません（KnFJl6z5UN0 [00:17:26, 00:29:33]）。各アクションにはキーとゲームパッドボタンを割り当てます。タッチ操作では、画面上に該当する操作手段がない場合（アビリティ、メニューを開く、閉じる）に限り、UIButton バインディングが必要です。プレイヤーがいずれにしてもタップする操作（タブ切り替え、購入時の Confirm など）には不要で、UIAudit は ias-no-touch の情報として報告します。IAS はモバイル用ボタンやプロンプトを描画しないため、自分で用意します（KnFJl6z5UN0 [00:13:30]）。
6. 永続する HUD は StarterGui の直下に置き、ResetOnSpawn = false に設定します。 Folder 内にネストすると、このフラグは無視されて HUD がリセットされます（画面上のコンテナーに関するドキュメント、実測）。
7. アクセシビリティは第 2 の伝達手段です。 色だけで状態を表さないでください（BitwiseAndrea、アクセシビリティ円卓会議 K1pEI6LVJJA [00:29:24]）。キーの同時押しや F キーを使わず、WASD と矢印キーの両方に対応します（同パネル [00:43:15]）。PreferredTransparency、ReducedMotionEnabled、PreferredTextSize を尊重します（Roblox アクセシビリティのドキュメント）。コントラスト比は 4.5:1、24 px 以上のテキストでは 3:1 にします［追加、WCAG］。
8. プロジェクトがすでにフレームワークを使っている場合を除き、標準のインスタンスを使います。 Edit で作成したインスタンスは MCP ツールから見えるため、Play を開始する前に監査、レイアウト確認、キャプチャを実行できます。Rojo を使うチームで、多数の画面にまたがって変化の速い状態を扱う場合は、React（jsdotlua）、Fusion、または Vide を選びます。その場合もゲームデータはフレームワークの外部に保管し（Leif、Ezk3vEOvv8o [00:13:51]）、ストレステストではなく自分のコードをベンチマークします（RDC 2024 パネル [00:28:11]）。

最初に確認すること

入力	変更内容	指定がない場合のデフォルト
デバイスと向き	セルサイズ、安全領域、StarterGui.ScreenOrientation	スマートフォンの横向きと縦向き、タブレット、PC、コンソール、携帯型デバイス；Sensor
プロジェクト内の UI フレームワーク	ツリーを構築してテストする場所	なし：インスタンスと StyleSheet
Workspace.PlayerScriptsUseInputActionSystem	IAS のデフォルト操作、メニューによるジャンプ入力の無効化	Rojo プロジェクトで設定される Enabled（スクリプトからは書き込めません）
言語	テキスト用スペース、AutoLocalize	英語を原文とし、ドイツ語と +40% の擬似ローカライズでテスト
UI アート	画像スロット、9 スライスのマージン	フラットな StyleSheet の外観とし、Scenario のアートは後から追加
アクセシビリティ基準	コントラスト、動き、ターゲットサイズ	4.5:1、動きの軽減に対応、ターゲットサイズは 44 px

手順

コード全文、テスト ID、結果については、references/procedures.md を参照してください。各段階は scripts/rbx_ui.py とリードのツールキットを使って実行します。L と O の ID は run_live.py を参照してください。

1. 編集モードでビルド（P1）。 rbx_ui.build(s) は、カタログ、キットモジュール、クライアントコントローラー（RunContext Client の Script）、ショップサーバーをインストールし、その後 BuildMenuHud.luau を実行します。HUD には左上にステータス（表示のみ）、右上にメニューボタン、そしてアビリティボタンが表示されます。メニューは、ヘッダーにタブを備えた CanvasGroup パネルで、Home、Shop、Settings の各ページがあります。ショップは AutomaticCanvasSize = Y の ScrollingFrame と、セルサイズを StyleSheet から取得する UIGridLayout で構成されます。動的なラベルでは AutoLocalize = false を設定します。コードから StyleRule が所有するプロパティを設定することはありません。ゲート条件：アイテム30個、StyleLink 2個、セレクターエラー0件、両方の ScreenGui が ResetOnSpawn = false で StarterGui の直接の子になっていること。
2. 監査（P2）。 rbx_ui.audit(s) は UIAudit.luau を実行し（リセット、インセット、制約、キャンバス、ストローク、セレクター、選択、コントラスト、IAS のカバレッジと競合、旧式の入力パターンに関する20のルール）、リードの Audit.ui も実行します。同じモジュールを Lune で place ファイルに対して実行します。ゲート条件：エラー0件、警告0件。各ルールにつき1つの不具合を含むフィクスチャですべてのルールが発動すること。
3. レイアウトマトリックス（P3）。 rbx_ui.layout_matrix(pt, rbx_ui.DEVICES, scenes, out) は、プレイテスト内で StudioDeviceSimulatorService を通じて9つのプリセットを設定します。 UILayout.luau の check は、画面外表示、トップバー、安全領域、コアタッチコントロールとの重なり、小さなターゲット、重なり、クリッピング、小さなテキストを検出し、各状態をキャプチャします。キー入力やクリックで PreferredInput が Touch 以外に切り替わるため、Scriptable バインディングでシーンを操作します。ゲート条件：デバイスとシーンごとの警告0件。タッチ操作ではアビリティボタンが JumpButton より上にあること。ショップのセルが少なくとも1行すべて表示されること。コンタクトシートが読みやすいこと。
4. マウス（P4）。 instance_path に "LocalPlayer.PlayerGui.Menu..." を指定した pt.mouse で、PlayerGui のコピーをクリックします。編集モードで設定した UIButton バインディングは、実行時にクローンにも適用されます。ゲート条件：各クリックで属性が正確に1つ変更されること。購入時にサーバーでコインが1回消費されること。
5. キーボードとコンテキスト（P5）。 pt.keys は IAS を通じてキーを押します。ゲート条件：クールダウン中は2回目の使用が拒否されること。メニューを開いているとき、Q、E、Space がゲームプレイやジャンプに一切届かないこと。
6. Studio で対応できる範囲のゲームパッド（P6）。 GuiService:Select(grid) で選択を開始し、矢印キーで移動して Return で有効化します。Scriptable バインディングを通じてゲームパッドのボタンを押し、xbox プリセットでグリフとサイズを確認します。ゲート条件：グリッド内でフォーカスが下と右に移動すること。最後のアイテムを選択するとキャンバスがスクロールすること。xbox のグリフが「X」と表示されること。サムスティック、D パッド、ButtonB、Select ボタンにはコントローラーまたは Controller Emulator が必要です （gui-paths）。
7. スタイルとテーマ（P7）。 UIStyle.setTheme で実行時にテーマを切り替えます。これにより、デザインシートの StyleDerive の参照先が切り替わります。ゲート条件：両方のテーマで low-contrast が0件であること。コードで設定した Size がすべてのルールで維持されること。
8. 設定とモーション（P8）。 装飾要素の透明度に PreferredTransparency を乗算します。モーション低減が有効な場合はフェードをスキップします。ゲート条件：モーション低減が有効な状態では、最初のフレームからパネルが不透明であること。音量、カメラの揺れ、キーの再割り当て、テキストサイズについては、UISettings を使用した player-settings.md を参照してください。
9. リスポーン（P9）。 サーバーでキャラクターを倒し、その前後で HUD のマークを比較します。ゲート条件：HUD が1つだけであること。状態が保持されること。新しい Humanoid に体力が再び設定されること。
10. ローカライズ（P10）。 LocalizationService:GetTranslatorForLocaleAsync("de") を通じてその場で翻訳し、次に最小サイズの2台のスマートフォンで、ローカライズ可能な文字列をすべて40%長くします。ゲート条件：両方のパスにおいて、すべてのページで text-clipped が0件であること。
11. シナリオ UI アート（P12）。 アイテムアイコン、フレーム、ボタンのスキンには、scenario-game-assets の透過 PNG を使用します。ユーザーの許可を得てからアップロードし、各セルの Icon.Image を設定します。フレームには SliceCenter とともに ScaleType = Slice を設定します。アートにテキストを入れないでください。

数値

値	基準	出典
すべてのプリセットでトップバーのインセットは 58 px	GuiService.TopbarInset、Studio 0.743	実測（2023 年のスライドでは 36）
iPhone 7 666x374、iPhone 14 749x388（縦向き 388x762）、Galaxy A06 705x338	ビューポート、シミュレーターのプリセット	実測
iPad 第 10 世代 1179x819、ノート PC 1365x768、1080p および Xbox 1919x1079	ビューポート、シミュレーターのプリセット	実測
Small：スマートフォンと携帯ゲーム機、Medium：iPad、ノート PC、1080p、Large：Xbox	ViewportDisplaySize	実測
スマートフォンでは JumpButton は 70 px、位置は (1,-95, 1,-90)、iPad では 120 px、位置は (1,-170, 1,-210)	画面の隅	実測
サムスティック領域：幅の左側 40%	ビューポートの幅	実測値、クランプ [追加]
スマートフォンでは上から 40% の位置に届きますが、タブレットでは届きません	画面の高さ	位置とサイズのドキュメント
ターゲットは 44 px、テキストは最小 11 px	絶対ピクセル	[追加、Apple HIG]
コントラスト比は 4.5:1、24 px 以上では 3:1	テキストとその背景	[追加、WCAG]
ゲームプレイより優先される Sink を使い、メニューのコンテキストを 3000、ゲームプレイを 2000 に設定	InputContext.Priority	IAS ドキュメント（2000 はデフォルトのスクリプトより優先）
CAS の優先度は Low 1000、Medium 2000、High 3000	Enum.ContextActionPriority	リファレンス（「0～100」のチュートリアルは誤り）
セルは 88x100、96x112、140x160、アビリティは 64 px と 88 px	Small、Medium、Large ディスプレイ	テンプレート [追加]
フェードは 0.2 s、暗転は 0.45 x PreferredTransparency	メニューを開くとき	テンプレート [追加]
長さ +40%	ソース文字列	疑似ローカライズ [追加]
自動翻訳のクォータは言語ごとに文字数をカウント	文字数	自動翻訳のドキュメント

品質ゲート

測定可能な項目：

• run_live.py の L0～L14 と run_offline.sh の O1～O3 が成功すること。
• UIAudit とリードの Audit.ui で警告とエラーが 0 件であること。
• UILayout.check で、2 つのシーンにおける 9 つのプリセットすべての警告が 0 件であること。
• 2 つの最小サイズのスマートフォンで、ドイツ語と疑似ローカライズの text-clipped が 0 件であること。両方のテーマで low-contrast が 0 件であること。
• スクリプトからコンソールエラーが出ないこと。FoundationProvider と UIBlox の行は Studio 自体のコアスクリプトに由来します。

視覚面：HUD とショップのコンタクトシート（最大 1,600 px）を critique.md と照らし合わせて確認してください。常時表示される要素、チャット領域、ショップの見つけやすさについては、screen-budget.md を参照してください。テキストが読みやすいこと、タッチコントロールやトップバーの下に何も配置されていないこと、主要アクションのボタンが最も大きいこと、色に頼らずレア度を判別できることを確認してください。

よくある間違い

間違い	症状	修正
コードが StyleRule の所有するプロパティを設定する	テーマの切り替え時にそのオブジェクトが更新されない	ルールに任せます
スタイルが適用されたオブジェクトで obj.BackgroundColor3 を読み取る	デフォルトの色が返される	obj:GetStyled("BackgroundColor3")
Folder 内に HUD の ScreenGui を配置する	フラグを設定してもリスポーン時にリセットされる	StarterGui の直下に配置します
ボタンハンドラーに MouseButton1Click を使う	ゲームパッドとタッチで動作が異なる	Activated、または IAS の UIButton バインド
TouchEnabled でレイアウトを決める	タッチ対応ノート PC にスマートフォン用 UI が表示される	PreferredInput、ViewportDisplaySize
タッチのテスト中にキーを押す	PreferredInput が KeyboardAndMouse に切り替わる	Scriptable な InputBinding:Fire
メニューがタッチ操作を非表示にし、元に戻さない	メニューを閉じるとジャンプボタンが消える	閉じるときに TouchControlsEnabled を復元します
同じ Priority の 2 つのコンテキストで同じキーを使う	どちらかのアクションが実行される	優先度を分け、優先度の高い方で Sink を使います
グリッドで AutomaticCanvasSize = None を使う	最後のアイテムにアクセスできない	AutomaticCanvasSize = Y
テキストに Round 結合の太い UIStroke を使う	重なった部分が透けて見える	LineJoinMode を Miter または Bevel にします（Stewiepfing、9kuWl_t1AOE [00:00:12]）
数値や名前に AutoLocalize を使う	翻訳テーブルに不要な項目が追加される	動的ラベルでは AutoLocalize = false にします
セレクターの入力ミス	ルールが機能せず、SelectorError が "" と表示されることが多い	UIStyle.errors を再代入し、待機してから読み取ります
IAS の UIButton としてバインドされたボタンで Activated ハンドラーを使う	クリックが 1 回遅れて発火する（確認済み）	InputAction を処理します
起動時にアビリティボタンを一度だけ配置する	画面の回転後や入力方式の切り替え後、ジャンプボタンの上に表示されなくなる	Camera.ViewportSize と PreferredInput の変更時に配置し直します（テンプレート。iPhone 14 の縦向きでジャンプボタンの上に表示されることを確認済み）

引き継ぎ

• 入力：プレイヤー属性としてのコインと所有権（scenario-roblox-data からの永続化）、リモートの 検証ルール（scenario-roblox-networking）、アビリティ名とクールダウン （scenario-roblox-gameplay）、Robux のプロンプト（scenario-roblox-monetization）、クリック音と購入音 （scenario-roblox-vfx-audio）、アイコン、フレーム、ボタンのスキン（scenario-game-assets）、プロジェクトの レイアウトと Rojo（scenario-roblox-architecture、scenario-roblox-tooling）。
• 出力：Scriptable のテスト用バインディングを備えた InputActions は scenario-roblox-gameplay へ、低性能な スマートフォンでの UI コストは scenario-roblox-performance へ、画面の開閉属性はファネル分析用に scenario-roblox-monetization へ。

Roblox に関する最新情報

• IAS は 2026-06-11 に正式リリースされました。InputAction:Fire は非推奨です。代わりに Scriptable の InputBinding を発火させてください。IAS のデフォルトスクリプトは、2027 年初頭からデフォルトで有効になる 見込みです。BindActivate とゲームパッドの選択切り替えには、まだ IAS 版がありません（KnFJl6z5UN0 [00:20:15, 00:39:43]）。
• PreferredInput（2025-10-14）と ViewportDisplaySize（2025-08-14）は、デバイスの判別処理に代わるものです。
• 未設定の InputBinding.KeyCode を読み取ると、ドキュメントにある Unknown ではなく None が返ります。 プレイテストでは InputActionLabel.ResolvedText が空だったため、グリフには InputAction.PreferredBinding を使用します（実測）。
• StudioDeviceSimulatorService（PluginSecurity）は、Edit 中およびプレイテスト中の Client から execute_luau を使って Device Simulator を操作します。Server からの操作は拒否されます。シミュレーターは ScreenOrientation にかかわらず回転します（実測）。
• 新しい place では ScreenOrientation = LandscapeSensor が設定されます。リファレンスでは Sensor と記載されています。
• すでに place にあるルールでは、Selector の変更後、StyleRule.SelectorError が数フレーム後に反映されます。先に 設定した場合、壊れたセレクターは "" と表示されます（実測）。
• execute_luau では PlayerScriptsUseInputActionSystem の読み取りも、GuiService の 設定の書き込みもできません。Rojo でフラグを設定し、ゲーム内設定から設定をテストしてください。
• MCP の user_keyboard_input と VirtualInput が送信するのはキーボードイベントのみです。ゲームパッドの KeyCode は IAS に届きません（実測）。

参考資料

• references/procedures.md：P0 から P12 までの完全なコード、テスト ID、 結果。
• references/expert-notes.md：各専門家とドキュメントから得られる知見とタイムスタンプ。
• references/critique.md：UI の構築とキャプチャを評価するための基準。
• references/player-settings.md：音量、カメラの揺れ、再バインド、 テキストサイズ。
• references/screen-budget.md：HUD 要素の削減、チャット領域、 ショップの見つけやすさ、購入時のフィードバック。
• references/gui-paths.md：Studio GUI での Device Simulator、Controller Emulator、Style Editor、IAS、ローカライズ。
• references/sources.md：すべての情報源、認証情報、URL、最適なタイムスタンプ。
• scripts/rbx_ui.py：ビルド、監査、デバイス一覧、シミュレーション、レイアウトマトリクス、 コントラスト。
• scripts/agentkit/ui/：UIKit、UIStyle、UIInput、UILayout、UIAudit、 UISettings、およびテンプレート（BuildMenuHud、MenuController、ShopServer、Catalog）。