user-interface

ユーザーインターフェース

優れた 3D アプリの UI を構築するには、UI を配置する場所（空間内か画面上か）と、UI の見た目（デザイン品質）という 2 つの判断が必要です。このスキルでは、前者の選択肢を示し、後者に求める品質基準を定めます。

テクノロジーの選択

表示面ごとに決めます。1 つのアプリで両方を使うこともよくあります。

表示面	使用するもの
3D 空間内にあるパネルやコントロール	drawcall-ai/uikitml
AR/VR 対応アプリ内の UI（平面パネルでも 3D ジオメトリとしてレンダリングされます）	drawcall-ai/uikitml
AR/VR 非対応アプリの 2D HUD、メニュー、オーバーレイ	HTML/CSS

空間 UI と XR UI には drawcall-ai/uikitml スキル（npx skills add drawcall-ai/uikitml）を使います。これは pmndrs/uikit のインターフェースを厳密な HTML 風マークアップで記述でき、検証、プレビュー、Three.js / R3F / IWSDK への変換が可能です。非 XR アプリの平面 HUD やメニューの外枠には、キャンバス上に通常の HTML/CSS を配置します。より高速で、機能が充実しており、あらゆる解像度で鮮明に表示されるため、この用途に uikit は不要です。

3D オブジェクト（空間 UI を含む）をクリックやホバーに反応させるには、@pmndrs/pointer-events パッケージを使います。

ローディング画面

3D アプリは最初のフレームを表示する前に、モデル、テクスチャ、環境マップ、音声などを読み込みます。読み込みが終わるまでキャンバスは空白なので、画面を覆わないとプレイヤーの最初の体験は静止した黒い画面になってしまいます。アプリの開始直後からローディング画面を表示し（非 XR アプリでは、キャンバス上に通常の HTML/CSS で表示します）、プロダクトのアイデンティティと読み込みの進捗を伝え、シーンの準備が整ったらフェードアウトさせましょう。これは UX の一部であり、プレイを始めた人が最初に目にするものです。後回しにせず、ほかの UI と同じ品質基準でデザインし、固定タイマーで進捗を偽装するのではなく、実際の読み込み段階に合わせて進捗を更新してください。表示の切り替えは読み込み完了を基準にし、フェードのトリガーには単独の requestAnimationFrame ではなくタイマーを使います。バックグラウンド状態やヘッドレス状態のタブ（キャプチャや動作確認の実行時など）では rAF が一時停止し、ローダーがいつまでも画面に残ることがあるためです。

要素のサイズに合わせる

UI、キャンバス、カメラ、ポストプロセッシングは、一度だけ取得した window.innerWidth の値ではなく、レンダリングされる要素の実際のサイズに合わせる必要があります。ユーザーがフルスクリーンに切り替えたり、デバイスの向きを変えたり、ブラウザーのサイズを変更したり、アプリのホストが iframe のサイズを変えたりする間も、ローディング画面が表示されている場合があります。非同期読み込みの完了後にだけリサイズリスナーを登録すると、最初のプレイ可能なフレームでも、キャンバスのバッキングサイズとカメラのアスペクト比が古いままなのに HUD だけが新しいビューポート全体に広がることがあります。

ビューポート全体を覆う固定サイズのアプリコンテナを用意し、その中でキャンバスがいっぱいに広がるようスタイルを設定するのがおすすめです。

html, body { width: 100%; height: 100%; overflow: hidden; }
#app { position: fixed; inset: 0; width: 100%; height: 100%; }
canvas { width: 100%; height: 100%; display: block; }

大きなアセットの読み込みを待つ前に、キャンバスが利用可能になったらすぐにサイズ監視を登録します。通常は window.resize よりも、キャンバスまたはそのコンテナの ResizeObserver のほうが信頼できる情報源です。こちらなら、通常のブラウザーのリサイズとは異なるホストやレイアウトの変更も検知できます。サイズが更新されるたびに、画面サイズに合わせるすべてのレンダーターゲットを同時にリサイズします。対象には、レンダラーのバッキングストア、カメラのアスペクト比と投影行列、ポストプロセッシングコンポーザー、ミニマップなどのピクセル固定オーバーレイキャンバスが含まれます。表示サイズは CSS が制御するように renderer.setSize(width, height, false) を維持し、デバイスのスケールが変わる可能性がある場合はピクセル比も更新します。fullscreenchange と visualViewport.resize は補助的な通知として有用です。ロジックを重複させず、同じリサイズ関数を呼び出すようにしてください。

確認方法は明確です。ローディング画面が表示されている間にリサイズまたはフルスクリーン変更を発生させ、ローダーが消える前にキャンバスのクライアントサイズ、キャンバスのバッキングサイズ、カメラのアスペクト比がすべて現在のビューポートに一致していることを確認します。

プロフェッショナルのようにデザインする

目指すのは、この製品のために意図的にデザインされたと感じられるインターフェースです。ゲームの UI ならゲームらしく、ツールの UI ならツールらしく見えるべきです。陥りがちなのは、ありきたりな「AI アプリ」の見た目です。これは、意図的に選択する代わりに、もっともらしくても汎用的なパターンに頼ることで生まれます。スタジオのリードデザイナーが製品独自のアイデンティティを与えるようにデザインしましょう。

重要な部分に手間をかけ、それ以外は最小限に抑えましょう。 ユーザーが操作する少数の要素、つまり主要なアクション、ライブ表示、フォーカス状態には贅沢にディテールを施し、それ以外は控えめにします。装飾を均一に施すとノイズになります。意図的なコントラストこそがデザインです。段階的開示を活用し、今必要な情報だけを表示して、それ以外は薄くするか隠しましょう。

システムを確立し、一貫して守りましょう。 意図的に選んだカラーパレット、文字サイズの段階、統一された余白は品質を感じさせます。一度きりのスタイリングは AI らしく見えます。作るものの世界観やトーンに合わせましょう。

文字。 既定のフォントスタック（Inter、Roboto、Arial、system）や、「技術的」な表現として等幅フォントに頼るのは避けましょう。製品に合うフォントを選び、ウェイトとサイズで階層を作りましょう。（uikit には MSDF フォントが同梱されています。uikitml スキルを参照してください。）

色。 弱々しく均等に色を散らすのではなく、主役となる色を決め、鮮明なアクセントを加えましょう。ニュートラルカラーにはブランドカラーに寄せた色味をわずかに加え、純粋な #000／#fff は避けましょう。紫から青へのグラデーション、暗い背景にシアン、ネオングローといった AI らしい配色は避けてください。

レイアウト。 余白に変化をつけてリズムを生み出しましょう（要素を詰めたまとまりと、ゆとりのある間隔）。すべてを中央揃えにするより、通常は左揃えのほうが洗練されて見えます。装飾的な要素を追加する前に、余白、整列、スケール、コントラストを活用しましょう。すべてをカードで囲んだり、同じカードのグリッドを繰り返したりしないでください。

動き。 動き続けるよりも、意図的な演出を少数に絞りましょう。巧みに調整された登場アニメーションをひとつ、意味のあるホバーや表示演出をひとつ、といった具合です。素早く控えめにし、ease-out のイージングを使いましょう。バウンスや弾むような動きは避けてください。HTML ではレイアウトではなく、transform／opacity をアニメーションさせましょう。

AI らしさが出る要素を避けましょう： あらゆる場所でのグラスモーフィズム、汎用的なドロップシャドウ付きの角丸カード、ネオングロー、アイコンとしての絵文字、見出しや数値へのグラデーションテキスト、装飾目的のスパークライン、安易に使われるモーダル。（これらは UI の装飾要素についての注意点です。ブルームや発光は正当な表現の一部となるゲーム世界そのものには適用されません。world と postprocessing のスキルを参照してください。）

読みやすさと使いやすさ。 十分なコントラスト、快適な文字サイズ、明確なフォーカス／ホバー状態を確保しましょう。空間 UI では、操作対象を大きくし、離れた位置からでも文字を読めるようにします。没入感より使いやすさを優先しましょう。

野暮ったさの判定基準：ひと目見て「AI が作った」と思われそうなら、作り直しましょう。これは指針であって、制約ではありません。意図があり、製品に合っていれば、求められるあらゆる配色、レイアウト、動きを取り入れて構いません。