投稿する
マガジン
著者：アソバース編集部公開：更新：約7分で読めます

スマホゲームで横画面を強制できるか：できることと代替案

遊びをつくる

執筆にClaudeを使用しています。

同じシンプルなゲームの景色を映すPC、スマートフォン、タブレットを並べた作業机。
記事のテーマをもとに制作したAI生成の写真風イメージ。

ブラウザゲームを横画面前提でデザインしたのに、スマホで縦持ちのままプレイされてしまう——そんな悩みを持つ作者は少なくありません。「横画面を強制する方法はないか」と調べると、screen.orientation.lock() というAPIが見つかり、一瞬解決したように見えます。しかし実際に試すと、多くの環境でエラーになるか、単に無視されます。 結論から言うと、ブラウザゲームからスマホの画面向きを完全に強制することは現時点では難しく、OSやブラウザの制限を超えることはできません。ただし「強制はできないが、横向きでなければ遊べない状態をユーザーに正しく伝え、快適に誘導する」ことは十分に実現できます。この記事では、APIの実情・代替手段の実装方法・設計上の判断基準を順に整理します。

この記事の目次
  1. `screen.orientation.lock()` の実情
  2. 現実的な代替案：「回転を促す」UI
  3. CSSだけで対応する方法
  4. 「横画面前提か」を再検討する判断基準
  5. 次の行動
  6. 参考資料

`screen.orientation.lock()` の実情

screen.orientation.lock('landscape') はW3Cの仕様に含まれており、Androidのフルスクリーン状態のChromeでは動作することがあります。しかしiOS Safari（および多くのモバイルブラウザ）はこのメソッドを実装していないか、意図的に無効化しています。

コードとしては次の形になります。

js
if (screen.orientation && screen.orientation.lock) {
  screen.orientation.lock('landscape').catch(() => {
    // 失敗した場合の代替処理
  });
}

catch で握りつぶすだけでは問題を先送りにするだけです。「APIが使えた場合はロック、使えない場合は別の手段を取る」という二段構えで考えるのが現実的です。

なお、このAPIはHTTPS環境・フルスクリーン状態という条件がそろって初めて動く場合があり、ブラウザゲームの通常の埋め込み状態ではほぼ機能しません。公式の最新サポート状況はMDN Web Docsで確認してください。

現実的な代替案：「回転を促す」UI

強制ができない以上、最も実用的なアプローチは「縦向きで開かれたときに回転を促す画面を表示し、横向きになったら自動で消す」パターンです。これはゲームアプリでもよく使われる手法で、ユーザーにとっても直感的です。

実装の骨格は以下のとおりです。

  1. 向きを検出する：window.matchMedia('(orientation: portrait)') でCSSメディアクエリ的に判定するか、screen.orientation.type で文字列を取得します。
  2. 縦向きのときにオーバーレイを表示する：ゲームキャンバスの上に position: fixed で全面を覆う要素を乗せ、「端末を横向きにしてください」というメッセージと回転アイコンを表示します。
  3. 向きが変わったら自動で消す：window.addEventListener('orientationchange', ...) または ResizeObserver でウィンドウ比率の変化を監視し、横向きになったらオーバーレイを非表示にします。

オーバーレイには回転を示すアニメーション（CSSアニメーションで端末アイコンが90度回るだけで十分です）を加えると、何をすればよいかがひと目でわかります。文字だけでも機能しますが、言語を問わないアイコンと組み合わせると海外ユーザーにも伝わりやすくなります。

注意点

orientationchange イベントはiOSでタイミングがずれることがあります。向きが変わってから実際にレイアウトが確定するまで少し遅延するため、イベント発火直後に window.innerWidth と window.innerHeight を読むと誤った値が返ることがあります。setTimeout で数十ミリ秒待つか、ResizeObserver でサイズ確定後に判定するほうが安定します。

CSSだけで対応する方法

JavaScriptを使わず、CSSのメディアクエリとCSS Transformだけで「縦向きのときにゲーム全体を90度回転させて横向きに見せる」手法もあります。

css
@media (orientation: portrait) {
  #game-container {
    transform: rotate(90deg);
    transform-origin: center center;
    width: 100vh;
    height: 100vw;
    /* 位置調整が必要 */
  }
}

この方法は「物理的な向きを変えずに、描画だけ横向きにする」ものです。見た目は横画面になりますが、タッチ座標の変換が必要になる点に注意が必要です。タッチイベントはOSが認識する物理的な画面座標を返すため、回転した描画とズレが生じます。タッチ座標を90度逆回転して補正するロジックが必要になり、実装コストは思ったより高くなります。

操作が必要ないゲーム（動画再生や演出だけのもの）なら有効ですが、タッチ操作が中心のゲームにはやや不向きです。

「横画面前提か」を再検討する判断基準

そもそも横画面を強制したい理由によっては、設計を変えたほうが問題がすっきり解決します。

  • 横長のゲームフィールドが必要なとき（横スクロールアクション・RTSなど）：回転誘導UIで十分対応できます。ゲームが始まる前に誘導するため、プレイ中に突然レイアウトが崩れることもありません。
  • 縦向きでも遊べるがレイアウトが窮屈なとき：横画面向けレイアウトと縦画面向けレイアウトを両方用意するのが最も親切です。CSS Grid・Flexboxと orientation メディアクエリを組み合わせれば、同じHTMLで両対応が可能です。
  • どうしてもネイティブアプリ並みの強制が必要なとき：ブラウザゲームの技術的限界であると割り切り、PWA（プログレッシブウェブアプリ）化して manifest.json に "orientation": "landscape" を記述する方向を検討する価値があります。PWAとしてインストールされた場合に限り、Androidでは向きのロックが機能することがあります。

縦向き対応を最初から諦めない設計のほうが、より多くの環境で快適に遊んでもらえます。回転を「強制」から「誘導」に発想を切り替えると、実装の難易度も大幅に下がります。

次の行動

縦向き検出→オーバーレイ表示→横向き検出で非表示、の3ステップをまず小さなHTMLファイルで試してみてください。動作確認はChromeの開発者ツールでデバイスエミュレーションを「縦↔横」と切り替えながら行えます。実機でも早めに確認し、特にiOS Safariでの挙動を必ずチェックしてください。作成したゲームはアソバース（https://aso-verse.com）にHTMLファイルやZIPで直接投稿して公開できます。

参考資料

  • MDN Web Docs「Screen Orientation API」
  • W3C Screen Orientation仕様
  • MDN Web Docs「Using media queries」
マガジン一覧に戻る