roblox-ui-design

Roblox UI のビジュアルデザイン

読み込むタイミング

UI のデザインやレビューを行うときに読み込みます。既存のスタイルやアートディレクションがある場合は、それらを優先します。ない場合は、ゲームの世界観と画面の目的に基づいて、抑制の効いたシステムを導き出します。仕組みについては roblox-gui を読み込みます。

クイックリファレンス

ビジュアルシステムを確立する

1. 既存のサーフェス、文字の役割、ボーダー、奥行き、アイコン、間隔、アクションカラーを確認します。一貫性のあるトークンを再利用します。
2. スタイルがない場合は、色、フォント、装飾を選ぶ前に、画面の目的とゲームの世界観を明確にします。
3. 背景、サーフェス、浮き上がったサーフェス、テキスト、控えめなテキスト、アクセント、危険、ボーダー、角丸、間隔、文字の役割から成る小さなトークンセットを定義します。
4. タスクとデバイスに合わせて情報密度を選びます。HUD、インベントリグリッド、設定リスト、購入プロンプトに同じトポロジーを使うべきではありません。
5. ゲームやアートディレクションで求められる場合に限り、シミュレーター風のスタイリングを使います。完全なリファレンスには、任意のレシピが記載されています。

基本原則

• トポロジー： 単一の焦点、コレクション、比較、HUD、リストなど、妥当な形を選びます。あらゆるタスクを中央配置のモーダルに押し込まないでください。
• 階層： オブジェクト、状態、アクションのうち1つを、最も強いコントラストと大きさで際立たせます。二次的なコンテンツは控えめにします。
• フロー： 繰り返されるフローごとに、UIListLayout、UIGridLayout、共有列の計算のいずれか1つを使います。
• 情報密度： 有用なコンテンツ全体に合わせてパネルのサイズを決めます。スペースを埋めるために外枠を引き伸ばしたり、メタデータを追加したりしないでください。
• 境界： 幅、間隔、パディング、ボーダー、最小サイズを合算します。ストロークや背景要素は親要素の内側に収めます。
• 配置： 共有レイアウト、固定のアイコン枠、一致するアンカーを使います。
• 状態： アクティブ、利用可能、ロック中、完了、選択中、無効の状態は、色だけに頼らず表現します。
• 入力： ホバーが使える場合に限り、ホバー状態をデザインします。タッチ、ゲームパッドのフォーカス、キーボード、モーション低減にも同等のフィードバックが必要です。
• 検証： 対象となる代表的なビューポートで、クリッピング、オーバーフロー、デッドスペース、文字、階層、フォーカス順を確認します。

ニュートラルな代替案

抑制の効いたサーフェスとボーダーのスタイルを1つずつ、ディスプレイ用の文字スタイルを1つ、本文用の文字スタイルを1つ、アクセントを1つ使います。ゲームのコンテンツ、アートワーク、アクションの重要度によって個性を表現します。太い輪郭線、装飾的な奥行き、ジャンルの決めつけよりも、読みやすいコントラストと明確なグループ分けを優先します。

アンチパターン

大きすぎる外枠、管理レイアウトでの推測によるオフセット、定位置からずれていくアクション、空のアイテム枠、色だけで表す状態、マウス操作だけのフィードバック、階層より先行する装飾、無関係なアートディレクションにありきたりなシミュレーター風の外観を当てはめること。

スタイルの推定、任意のシミュレーター風レシピ、構成、インタラクション状態、QA：references/full.md