# 入力精度を保ちながら回転に対応する

> 方向をゲームの再開として扱わずに、レイアウトと入力マッピングを再計算することで、デバイスが回転してもプレイを読みやすい状態に保ちます。

- URL: https://oneshotgems.ai/ja/topics/game-orientation-changes
- カテゴリ: ゲーム開発者向け
- 種類: ガイド
- 更新日: 2026年10月5日

スマートフォンを回転すると、使える幅と高さが変わります。しかし、プレイヤーが行っている入力を気付かれないまま無効にしたり、シミュレーションをリセットしたりしてはいけません。縦向きと横向きの両方に対応するかを決め、使える空間が狭い向きではどうするかを明確にします。表示と操作を一つの連動した変更として更新してください。

## レイアウト方針を選ぶ

レスポンシブなゲームでは、プレイフィールドを再配置する、固定サイズの仮想領域を余白付きで表示する、または端末を回転するよう明確に案内する方法があります。ゲームの仕組みに合わせて選びましょう。横に広いレーンを走るゲームには横幅が必要ですが、縦に積み上げるゲームは縦向きのまま読みやすいかもしれません。シーン全体を引き伸ばして合わせるとオブジェクトの比率が変わり、ヒット領域もずれるため避けます。

ビューポートの向きに応じたレイアウトにはCSSメディアクエリーを使います。スクリプトで向きを知る必要がある場合に限ってScreenOrientationの変更を監視し、非推奨のwindow.orientationchangeイベントには依存しません。画面の向きをロックするのは、明確な要件と代替手段がある場合に限り、未検証のレイアウトを避ける近道にしないでください。

## 座標変換を組み直す

回転後にゲームコンテナを測定し、表示変換を計算し直します。次の操作を受け付ける前に、ポインター座標からワールド座標への変換を更新してください。ドラッグ中なら、新しい変換の下で続けるか、適切にキャンセルします。古いポインター座標と新しいcanvasサイズを混ぜると、オブジェクトが画面を飛び越えてしまうことがあります。

ゲーム開始前、ドラッグ中、メニューを開いた状態で回転をテストします。サイズ変更で新しいセッションが始まらず、操作部に引き続きアクセスできることを確認します。MDNはScreenOrientationの変更イベントとロックを説明しています。必要な場合に利用し、端末がロックを許可するかも確認してください。

## よくある質問

**ブラウザーゲームで横向きを強制すべきですか？** 明確な理由と分かりやすい代替手段がある場合に限ります。画面をロックするより、レスポンシブなレイアウトや端末を回転する案内が適切なこともあります。

**画面を回転すると、必ずリサイズイベントが発生しますか？** ビューポートと向きの変化に対する動作はブラウザーや端末によって異なります。実装が依存するイベントをテストし、変更後に実際のゲームコンテナを測り直してください。

## 気になることを、もっと

- [ブラウザーゲームのレスポンシブレイアウトを作る](https://oneshotgems.ai/ja/topics/responsive-game-layouts): シミュレーション状態を画面サイズに結び付けることなく、ゲーム サーフェスをそのコンテナに適応させ、変更するビューポート間でレイアウトをテストします。
- [複数の端末でブラウザーゲームの入力をテストする](https://oneshotgems.ai/ja/topics/testing-game-input-devices): 1 つのデスクトップ セッションに依存するのではなく、実際のタッチ、マウス、キーボード、方向の動作をカバーする小さな入力テスト マトリックスを構築します。
- [縦向きプレイ向けのモバイル ゲームをデザインする](https://oneshotgems.ai/ja/topics/portrait-mobile-game-design): 内容や横向き対応を増やす前に、見やすいプレイ領域、読み取りやすい状態表示、スマートフォンの表示領域の変化を踏まえて、縦向き中心のゲームを設計します。

## 関連情報

- [MDN: 画面の向きの管理](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)
- [MDN: ScreenOrientation 変更イベント](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/change_event)

---
正規ページ: https://oneshotgems.ai/ja/topics/game-orientation-changes