はじめに
PCで問題なく見えていたWebゲームをiPhone 15で開くと、文字が小さい、ボタンを押しにくい、ゲーム領域が画面の一部にしか表示されない、という問題が見つかりました。
この記事では、スマートフォン向けWebゲームを実機で改善した際に効果があったポイントを、再利用できる形でまとめます。
1. viewportを必ず確認する
最初にHTMLのviewport設定を確認します。
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
viewport-fit=coverを指定すると、iPhoneのセーフエリアを考慮した全画面設計がしやすくなります。
2. 画面高さは100vhだけに頼らない
モバイルブラウザではアドレスバーの表示状態によって100vhの見え方が変わります。現在はdvhを優先し、フォールバックとしてvhを残す方法が扱いやすいです。
.game-shell {
min-height: 100vh;
min-height: 100dvh;
}
3. ボタンのタップ領域を44px以上にする
見た目が小さくなくても、実際のタップ領域が狭いと操作ミスが増えます。
.game-button {
min-width: 48px;
min-height: 48px;
padding: 12px 16px;
touch-action: manipulation;
}
文字サイズはclamp()で画面幅に応じて調整します。
.game-button {
font-size: clamp(16px, 4vw, 20px);
}
4. セーフエリアを余白に含める
ノッチやホームインジケータ付近に重要なUIを置かないようにします。
.hud {
padding-top: max(12px, env(safe-area-inset-top));
padding-right: max(12px, env(safe-area-inset-right));
padding-bottom: max(12px, env(safe-area-inset-bottom));
padding-left: max(12px, env(safe-area-inset-left));
}
5. ゲーム画面と説明を無理に1画面へ詰め込まない
小さい端末で全情報を固定表示すると、肝心のゲーム領域が狭くなります。ゲーム領域を優先し、説明・操作方法・FAQは下へスクロールできる構成にしました。
.game-canvas-wrap {
width: 100%;
aspect-ratio: 16 / 10;
max-height: 72dvh;
}
.guide {
padding-block: 24px;
}
6. 横スクロールの原因を機械的に潰す
width: 100vwと親要素のpaddingが組み合わさると、意図せず画面幅を超えることがあります。基本はwidth: 100%を使い、全要素をborder-boxにします。
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
max-width: 100%;
overflow-x: clip;
}
img, canvas, video {
max-width: 100%;
height: auto;
}
overflow-x: hiddenだけで隠す前に、DevToolsでdocument.documentElement.scrollWidthとclientWidthを比較し、はみ出している要素を特定するのが重要です。
7. 実機では「読める」ではなく「迷わず操作できる」を確認する
確認項目は次の通りです。
- 片手で主要ボタンを押せるか
- 初見で開始方法が分かるか
- 横向き・縦向きの両方で破綻しないか
- スクロール中にゲーム操作が誤発火しないか
- 文字拡大時にも重要情報が欠けないか
- 低電力モードでも操作感が大きく落ちないか
まとめ
スマホ対応は、単に幅を狭くする作業ではありません。ゲーム領域、タップ操作、セーフエリア、説明の優先順位を実機で確かめることが重要です。
今回の改善対象は、ブラウザで遊べる「猫の電気屋さん」というWebゲームです。実際の表示確認用デモはこちらです。
ゲームは電気工事の手順を教えるものではなく、電気の安全に関心を持ってもらうための体験コンテンツとして制作しています。