スマホでブラウザゲームを全画面にする方法
遊びを見つける執筆にClaudeを使用しています。
スマホでブラウザゲームを遊ぶとき、上下にアドレスバーやナビゲーションバーが残って画面が狭く感じることがあります。特に横スクロールゲームやパズルゲームは、その数センチの差がプレイのしやすさに直結します。 全画面にする方法はいくつかありますが、「どのブラウザを使っているか」と「AndroidかiOSか」によって手順が異なります。この記事では、端末・ブラウザごとの手順を整理し、うまくいかないときの対処まで順を追って説明します。
この記事の目次
なぜアドレスバーが消えないのか
ブラウザのアドレスバーやタブバーは、ブラウザアプリ自体が表示しているUIです。ゲームのページ側からは基本的に制御できません。スクロール操作をしたときにバーが自動で隠れることはありますが、それも完全な全画面ではなく、ブラウザが用意した「縮小表示」の範囲にとどまります。
本当の意味での全画面——ステータスバーも含めて画面全体をゲームに使う状態——を実現するには、ブラウザの設定やOSの仕組みを利用する必要があります。方法は大きく三つあります。①スクロールでバーを隠す、②ブラウザのメニューから全画面モードに切り替える、③ホーム画面に追加してアプリのように起動する。それぞれに向いている場面と限界があります。
Android：Chromeで全画面にする手順
Androidの場合、Google Chromeには全画面表示に近い状態にする方法が複数あります。
スクロールでバーを隠す（最も手軽）
ゲームページを開いた状態で、画面を上方向に少しスクロールすると、アドレスバーが自動で隠れます。ゲーム内でスクロールが発生しにくい構造なら、これだけで十分広く使えます。バーを再表示したいときは画面上部を下方向にスワイプします。
ホーム画面に追加してアプリ風に起動する
- Chromeでゲームページを開く
- 右上のメニュー（縦三点アイコン）をタップ
- 「ホーム画面に追加」を選ぶ
- 名前を確認して「追加」をタップ
- ホーム画面のアイコンからゲームを起動する
この方法で起動すると、アドレスバーとタブバーが非表示になり、ゲームに使える領域が大きく広がります。ゲームページがPWA（Progressive Web App）の要件を満たしている場合、ステータスバーまで含めた完全な全画面になることもあります。
注意点
ホーム画面追加後の見た目はゲームページの設定に依存します。ページ側でPWAのマニフェストが設定されていないと、ブラウザのUIが一部残ります。アソバースのゲームでも、作者がPWA対応の設定を組み込んでいるかどうかで挙動が変わります。
iOS（iPhone・iPad）：Safariで全画面にする手順
iOSではSafariが標準ブラウザです。ChromeなどサードパーティブラウザはiOS上でもWebKitエンジンを使うため、Safari準拠の挙動になります。
ホーム画面に追加する（推奨）
- Safariでゲームページを開く
- 画面下部（または上部）の共有ボタン（四角に上矢印のアイコン）をタップ
- 「ホーム画面に追加」をタップ
- 名前を確認して右上の「追加」をタップ
- ホーム画面のアイコンからゲームを起動する
ホーム画面から起動すると、Safariのアドレスバー・タブバーが表示されない状態になります。ゲームページがAppleの定めるPWA要件（apple-mobile-web-app-capableメタタグなど）を含んでいる場合、よりネイティブアプリに近い全画面表示になります。
Safariの「全画面」ボタンを使う（iPad）
iPadのSafariでは、横向き表示時にアドレスバーを隠して全画面に近い表示にするボタンが用意されている場合があります。アドレスバー右端のアイコンを確認してください。iOSのバージョンによって位置や有無が異なるため、公式のiOSサポートページで最新の操作を確認することをお勧めします。
iOSの制約
iOSではサードパーティブラウザが本物の全画面API（Fullscreen API）を完全には使えないケースがあります。ゲーム側のボタンで全画面化を試みても、Safariのバーが残ることがあります。ホーム画面追加が現状もっとも確実な方法です。
うまくいかないときの確認ポイント
全画面にしたいのにうまくいかない場合、以下の順で確認してください。
ページを再読み込みしてから試す
ホーム画面追加後に初回起動でキャッシュが古い状態だと、変化がわかりにくいことがあります。アイコンから起動後に一度リロードしてみてください。
ゲーム側の「全画面ボタン」を探す
ゲームによっては、作者が独自に全画面ボタンを実装している場合があります。ゲーム画面の隅にアイコンがないか確認してください。
横向き表示に切り替える
縦向きよりも横向きのほうがバーが小さく表示されるブラウザがあります。縦持ちのゲームでなければ、端末を横向きにしてみてください。
ブラウザのバージョンを更新する
古いバージョンでは全画面関連の挙動が異なることがあります。App StoreまたはGoogle Playでブラウザを最新版に更新してください。
別のブラウザを試す
AndroidではFirefox、Samsung Internetなど、ブラウザごとに全画面表示の挙動が異なります。特定のゲームで表示が崩れる場合、ブラウザを変えると改善することがあります。
ゲームを作る側が対応できること
ブラウザゲームの作者であれば、プレイヤーが全画面を使いやすくなるよう、ゲーム側で工夫することができます。
HTMLの<meta name="viewport">タグを適切に設定すると、スマホでの表示倍率や余白が整います。width=device-width, initial-scale=1.0の指定が出発点です。また、JavaScriptのrequestFullscreen()APIをボタンに割り当てることで、プレイヤーが自分でタップして全画面に切り替えられるようになります。iOSでの対応状況はブラウザのバージョンによって異なるため、実機での確認が必要です。
PWA対応（WebマニフェストファイルとService Workerの追加）まで進めると、ホーム画面追加後の体験が大きく向上します。ただしPWA実装にはある程度の知識が必要なため、まずはviewportとFullscreen APIの対応から始めるのが現実的です。
次の行動
使っているブラウザとOSを確認し、この記事の該当手順でホーム画面への追加を試してみてください。アソバース（https://aso-verse.com）でゲームを公開している場合は、HTMLにviewportタグとFullscreen API呼び出しを加えることで、スマホプレイヤーの体験を改善できます。iOSの最新の挙動はApple公式のSafariリリースノートで確認することをお勧めします。
参考資料
- MDN Web Docs「Fullscreen API」
- Apple Developer Documentation「Configuring Web Applications」
- Google Developers「Progressive Web Apps」
