スマホ 横持ゲームのレイアウト大調査 ’24

年々端末のサイズが大きくなるにつれ、横持ちで楽しむゲームアプリも増えてきました。
縦持ちのスマホゲームは、どんなサービスも画面の使い方が似通っているせいか、画面のレイアウトもおおむね統一化されている印象ですが、横持ゲームは最近になって増えてきたゲームスタイルなので、まだまだこれといったパターンがありません。
縦持ちのゲームに比べ、画面を大きく使えるのが特徴といえる横持型のアプリですが、画面レイアウトはサービスによって違うため、どんなUIレイアウトが横持ゲームに適しているのか調べることにしました。
横持ゲームを制作する際の参考になれば幸いです。

横型ゲームのUIパターン

横画面を採用しているゲームを色々調べてみると、大まかに”4つのパターン”でUIが構成されていることが分かりました。

1フッター固定型

全画面共通のGMをフッターに固定しているタイプの画面構成。
画面上部にもヘッダーが固定されるパターンが多いが、ヘッダーの内容は機能によって変化する。
縦持ちスマホゲームのUIをそのまま横型に置き換えたようなレイアウト。

第2階層以降

第2階層以降もGMがフッターに固定され、ヘッダーの内容が多少変化する。（HOMEでユーザー情報だった部分がBACKに切り替わるのが一般的）
フッター上の領域に各画面の機能UIが組み込まれる。(操作系のUIは右下に配置されることが多い)

リスト系UI

リスト系のUIも基本は第2階層と同じ考え方で構成される。ガチャ画面などでは画面の左側をタブとして利用している場合が多い。

---

2左右分散型

グラフィックの表示領域とUIの表示領域を分離するパターンで、主に中央を広くとる”左右分散型”と画面の左右どちらかを広くとる(右にUIを集中させることが多い)”片側集中型”の2つに分類される。

第2階層以降

HOMEのレイアウト思想を反映しつつ、左右分散型を採用している場合でも、第2階層以降は片側集中型で構成しているサービスも多い。
画面の片側に情報や操作パネルを集約させ、空いたスペースをグラフィック領域として大きく利用している。
画面の左側に表示や場面を切り替えるUIを配置し、右側に操作系のUIを配置するパターンが多いが、全画面ユニークで作られていることが多いので、パターン化は難しい。

リスト系UI

左上にBACK、右下に意思決定のUIを配置する等、基本思想は統一化されているが、それ以外は第2階層以上にパターン化できる要素が少なく、ユニークになることが多い。
ソート系のUIを画面の右上やヘッダーに配置していたり、画面左にカテゴリを切り替えるタブ要素を配置しているサービスが多いようだ。
固定のUIが無い分、画面を広く使えるため1画面に表示できるリスト数が多いのが特徴。

---

3フッター変化型

HOME画面の構成は②と同じで、フッターが画面の下部に設置される。第2階層以降の画面構成ルールは②に近く、UIを画面の端に分散させる。 ①と②を組み合わせたようなレイアウトパターン。

第2階層以降

フッター変化型は第2階層以降で画面の構成が大きく変化する。
左上にBACKボタンやHOMEへの時価リンクを置くタイプが多く、フッター領域と画面の左右にUIを分散して、画面の中央部をグラフィック領域として大きく確保している。

リスト系UI

左右分散型のリスト系UIと同じ。まだ決まったパターンは少ない。
固定のUIが無いので、画面を広く使えるため1画面に表示できるリスト数が多い。

---

4サイドGM型

GMを画面の端に固定化しているサイドGMタイプの画面構成。縦持ちゲームのUIを横持に改造したようなレイアウト。
縦持ちレイアウトのルールを適用できるため、UI学習コストが低く、レイアウトのルール化も容易。 画面左側を選択系でまとめ、右側で操作する、左右の手で操作が分離分離しているのが特徴。

第2階層以降

各機能ごとに専用のGMが出現するタイプと、第2階層用のGMが追加されるタイプに分類される。
GMの反対側の画面を広く使えるので、操作系UIを右端に並置し、画面中央をグラフィック領域として利用するパターンが確立している。

リスト系UI

サイドGMでリスト自体のカテゴリ変更する構成(サイドタブ型)
画面の左側を選択エリアとし、右側に操作パネルを配置するか、グラフィックエリアとして丸ごと使用しているパターンも存在。

---

横持画面のモーダル(ポップアップウィンドウ)

ポップアップウィンドウは画面上にオーバーレイする形で展開するので、画面の構成に影響を受けません。
そのため、CLOSEボタンやCTAの位置がサービスによって変わる程度で、どんなサービスでもダイアログの構成はおおむね共通化されている印象。
※ここで挙げているモーダルとは、画面演出を含まない、確認やアラートなどユーザーの操作を確認するものを指しています。

まとめ

横持ちゲームはまだまだ試行錯誤の繰り返しで、決まった王道パターンはまだありませんが、スタンダードなレイアウトパターンは固まりつつあるように感じます。
例：左上にBACK、ヘッダーにリソースを表示する、操作系UIを左右に分散　などなど。
縦持ちに比べて画面を大きく使えるというメリットが大きく、アクション要素の高いゲームなどに多く採用されている印象です。
個人的には「④サイドGM型」が最も画面を広く使えるレイアウトパターンだと思うので、今後研究が進んでくるのではないかと期待しています。