# 縦向きのレイアウトでゲームの主要な決定をサポートしましょう

> 内容や横向き対応を増やす前に、見やすいプレイ領域、読み取りやすい状態表示、スマートフォンの表示領域の変化を踏まえて、縦向き中心のゲームを設計します。

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

縦向きゲームは、横向きの画面を縦長の長方形に押し込めばよいわけではありません。次の数秒でプレイヤーが何を見て何をする必要があるかを決め、それらが同時に見えるよう配置します。長いステージを作る前に、対応する最も狭い表示領域でひとつのプレイ場面を試作してください。

## 見やすいプレイ領域を確保する

スマートフォンの画面を、実際に遊ぶ領域、常に表示する情報、一時的な案内の3つに分けて考えます。中央はまずゲームの主な操作のために確保し、スコア、残機、一時停止に関する情報は、危険や目標を隠さずひと目で確認できる位置に置きます。縦方向に進むプラットフォームゲームなら、キャラクターの上に次の着地点が見えるようにします。言葉のパズルなら、ヒントと操作中の文字列に十分な幅を確保し、重ねて表示するUIで圧迫しないようにします。

推測される端末の解像度ではなく、ビューポートの幅を使用します。 MDN は、ビューポート メタ要素がモバイル ブラウザーにページ レイアウトにデバイス幅を使用するように指示する方法を説明しています。プレイフィールドを個別に確認してください。正しく設定されたページには、固定サイズを想定したキャンバスまたはパネルが含まれている可能性があります。

## ゲームの適応方法を選択する

画面に応じて世界の配置を変えるか、カメラが動きを追うか、余った空間を余白にするかを決めます。列数が変わってもルールが成り立つなら再配置が使えます。画面より大きな世界にはカメラ追従が向いています。縦横比を固定する必要がある場合は、周囲に帯を設けるレターボックス方式で設計どおりのプレイ領域を保ちます。画面を埋めるためだけにキャラクターを引き伸ばしたり、目標の位置を変えたりしないでください。

操作部を画面端に固定する前に、システムUIやノッチを確認します。Appleのレイアウトガイドはセーフエリアを説明し、重要な内容が端末の切り欠きなどに隠れないよう案内しています。Androidでスマートフォンとタブレットの両方を対象にするなら、各画面比率を別々に試してください。縦向き専用ゲームでも、端末を回転させたときの配置を明確に決め、画面が半分切れた状態にならないようにします。

## 1 つのラウンドを完了して確認する

幅の狭いスマートフォンと広い端末で、チュートリアル、動きの多い場面、終了画面を確認します。どの場面でも、目標、目前の危険、現在の状態を同時に把握できるかを確かめてください。ステージを増やす前に、表示の欠けや情報の優先順位を直します。

## よくある質問

**縦向きのゲームは横向きもサポートする必要がありますか?** ゲームデザインにメリットがある場合に限ります。縦方向のみの決定は有効ですが、特定の向きのロックに依存するのではなく、デバイスが回転するときに使用可能なレイアウトを提供します。

**HUD は常に上部にあるべきですか?** いいえ。主なプレイの邪魔にならず、見える位置に配置してください。最適な場所はゲーム画面によって異なるため、プレイ中、重ねて表示するUIがある場面、終了画面で確認します。

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

- [モバイル ゲーム開発: まずターゲットを選択してください](https://oneshotgems.ai/ja/topics/mobile-game-development): 携帯電話向けのゲームを計画し、ブラウザーとネイティブのビルドを比較し、モバイル固有のシステムを追加する前に実用的な最初のワークフローを選択します。
- [ブラウザーゲームのレスポンシブレイアウトを作る](https://oneshotgems.ai/ja/topics/responsive-game-layouts): シミュレーション状態を画面サイズに結び付けることなく、ゲーム サーフェスをそのコンテナに適応させ、変更するビューポート間でレイアウトをテストします。
- [ブラウザーゲームの画面回転に対応する](https://oneshotgems.ai/ja/topics/game-orientation-changes): 方向をゲームの再開として扱わずに、レイアウトと入力マッピングを再計算することで、デバイスが回転してもプレイを読みやすい状態に保ちます。
- [各アクションを説明するゲームのフィードバックをデザインする](https://oneshotgems.ai/ja/topics/game-feedback-design): プレイエリアを覆うことなく、何が変更されたのか、なぜ変更されたのか、プレイヤーが次に何ができるのかをゲームのフィードバックに表示します。

## 関連情報

- [MDN ビューポートのメタ要素](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport)
- [Apple ヒューマン インターフェイス ガイドライン: レイアウト](https://developer.apple.com/design/human-interface-guidelines/layout)
- [Android ゲームデザインのガイドライン](https://developer.android.com/games/design/overview?hl=en)

---
正規ページ: https://oneshotgems.ai/ja/topics/portrait-mobile-game-design