iphoneXが来るのでスマホゲームのUIについて考える

スポンサーリンク




今更な感じかもしれませんが、AppleさんからIphoneXが発売となりますね。
それで事前に色々と情報を調べていて、スマホゲームのUIにどれくらい影響が出るのかなということを考えています。ということで今回は雑記みたいな形です。

■iphoneXの仕様を確認

とりあえずはiphoneの外観と仕様チェックです。

外観

iphoneXの外観をまず確認します。

iphoneXはこのような感じで、ベゼルが殆どない形になっています。また特徴的なのは上部のカメラスピーカーの搭載箇所だけが画面領域内に食い込んでくる形となっている店ですね。あとは角が本体形状と合わせて角丸となっています。

仕様(主に画面に関して)

iphoneXの基本的な仕様や機能に関しては他のブログやHPなどで諸々解説されていますので、私のところではUIデザイナーとしての視点にフォーカスを当ててみていきます。
ってなると基本的には画面の仕様に関してですね。

個人的に気になる画面仕様

・5.8インチ(対角)オールスクリーンOLED
・2,436 x 1,125ピクセル解像度、458ppi

などなど、まだTrue Colorとか色々ありますがとりあえず必要そうな情報を抜粋しました。ここで一番の問題となりそうなのがやはり画面のアスペクト比ですよね。

■ゲームUIに問題を与える要素

ここからはiphoneXがスマホ用ゲームのUIに与える要素を挙げてみようと思います。

アスペクト比

なにはともあれまずはアスペクト比です。今、市場にある端末で最も普及しているのが16:9のアスペクト比を持つ端末になります。なので基本的にUIを作成するにあたってこのアスペクト比が何よりも優先されて作られてきているはずです。あとはipadなどのタブレット端末などでは一部領域を広く取るなどして対応しているアプリが多いとは思いますが、まぁ対応の仕方が割と確立されているのでそこまで問題にはならないかなーと思ったりしています。(個人的なところですが。)

ただ、今回のiphoneXは、このアスペクト比が約2:1(正確には2.165:1くらい)となります。既存の端末との差はこんな感じです。

端末が縦に補長くなって画面の高さがだいぶ増えた感じですね。そのまま既存のゲームの画面(シノアリス)を当てはめるとこんな感じになって高さが余ってしまいますね。

これはヘッダーの位置調整などを行って解消する流れでしょうか。ページによってはだいぶスカスカになる箇所が発生するゲームなどあるかもしれません。

ちなみに横画面のマギアレコードなんかはこんな感じになりますかね。ボタンの要素が浮いているので左右に動かすことで対応しやすそうな印象を受けます。そして、個人的には縦画面よりは横画面ゲームの方がこういう時に対応しやすいイメージです・・・。

上部の切り欠き部分

続いて上部のセンサーなどがあるために生じる切り欠き部分


引用:Apple:com

公式の方でもこのような画像が出ていますがフルスクリーンのコンテンツを映すとどうしても領域に被ってきます。ゲームなんかだと縦持ちのゲームだとヘッダーがあり重要な情報があったり、横持ちのゲームとかだと端にはボタンが設置されていることがあるのでここに対する対応が必要になりそうです。

ラウンド形状

最後に画面の四隅のラウンド形状ですね。フッターにグローバルナビゲーションがあるゲームが多いと思いますがそちらに影響が出てきそうです。
先ほど画面に合わせたシノアリスなんかはフッターが四角いボタンがキッチリ並べられてるタイプなので、影響でそうです。

■実際の対応予測(希望)

これまでの内容を見ていくと、今回の解像度の変更で全てを完璧に直すのは正直かなりの工数を取られる予感がします。今後のスマートフォンの解像度のメインが移っていくのか、
それとも一時的なものなのかにもよりますがこれはUIデザイナーとしては、各会社の対応を注目したいところです。

個人的な落としどころとしては、切り欠きとセンサー部分の領域は黒い帯を敷いて、その上でボタンなどのスペースを調整するというのが工数と見た目のバランス的に最もよさそうな気はします。

デベロッパーのCarlos Gavinaさんも切り欠きの左右は黒い帯敷いたほうがいいと言った内容のツイートはしてらっしゃいます。

ということで、私はこんな感じで対応する流れにしていきたい・・・!ですね。
ただ、この対応だとAppStore申請でリジェクトされる可能性も有るといった噂なんかもチラッと来てるのでそこらへんが怖いところですね・・・w あと別の対応方法は、ゲームの一部の表示として追加部材をくっつけるとか・・・。(世界観に合わせたテクスチャ画像とか)うーん、とりあえずまだまだ模索中です。

スポンサーリンク







2 件のコメント

  • コメントありがとうございます。あと、当日ゲットおめでとうございます!
    横でもホームインジケーター出るんですねぇ。全てがキッチリ対応するのはしばらく無理な気がするので、非対応サービスを使う時はちょっともどかしいかもしれませんね^^;
    もう間もなく発売となるので周りの反応を楽しみにしておこうと思います。

  • こんにちは
    ゲームをこよなく愛するものです
    横画面ですが、非対応アプリではこんな感じで下にホームインジケーターが出るようです
    http://forum.cocos.com/t/iphone-x/52394
    横といい下といい黒帯が多く、iPhone8Plusに匹敵する表示サイズには程遠く、せいぜい無印と同等程度かもしれません
    さすがに、無印以下に小さくなるとは思いませんが、これだけセーフエリアが広いと絶対にないとは言えないですね・・・
    非対応ゲームの表示サイズを考えると、仮想ハードキーで良かったのに、どうしても見かけ上の下に置きたかったんですね
    折角3xリソースが拡縮無しでドットバイドットで表示できると思ってたらこの仕打ちですからねぇ・・・
    と、愚痴でした
    ちなみに、3日にゲットの予定です(笑
    あと、縦に関しては、上下黒帯で、理想通りのようですよ

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です