ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

タイトル画面をデザインするときのコツ

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

ここでは過去にプレイしたゲームをもとに、タイトル画面のデザインの特徴についてまとめました。

「タイトル画面って何を表示したらいいのか分からない!」「どういうデザインがあるのか知りたい!」と悩んでいる方の参考になれば幸いです。

以下、概要です。

 

Q:タイトル画面って何を表示するの?

A:ケースバイケースで色々ある

f:id:appgameui:20220702172329p:image

© SQUARE ENIX CO., LTD. All Rights Reserved.

タイトル画面を構成している要素はたくさんあります。

何をどのように表示するかはケースバイケースです。
まずは色々表示する情報があることを認識していただいた上で、
「この情報って必要?それとも不要?」などを確認する際の参考までに。

  1. 背景
  2. ゲームロゴ
  3. TAP TO STAR
  4. メニューボタン
  5. コピーライト
  6. バージョン
  7. ユーザーID
  8. 選択しているサーバー
  9. 他ゲームへの導線
  10. CRI WARE(ミドルウェア
  11. BISHAMON(ミドルウェア
  12. LINEアイコン
  13. Twitterアイコン
  14. 国によるレーティング表記(韓国)
  15. ゲーム内への遷移アニメーション

 

Q:タイトル画面の背景ってどうデザインすればいいの?

A:目的に沿ってデザインすると良さそう

基本的には何をしたら良い悪いというのは無いかと思います。
タイトル画面を作成する理由、達成したいことに沿って好きにデザインすると良いかと。

以下、既存タイトルの事例です。

 

基本方針

背景素材はタイトル画面の中でも大きく面積を占めるため、画面の印象を左右する情報です。

ゲームのブランド、IPらしさを訴求するデザインもある

キャラを表示する場合、端末で見切れないようにセーフエリアを設定し、デザインすると良さそう。

デザインバリエーションを用意する

周年などの大きな節目に合わせてデザインを更新する

開催中のイベント、季節、周年などの大きな節目に合わせてデザインが更新されることもあります。
(参考:「ロマンシング サガ リ・ユニバース」/「勝利の女神:NIKKE(ニケ)」

 

時間差分を用意する

現実世界の時間を参照し、時間差分を用意するケースもあります。
(参考: 「咲うアルスノトリア」

 

ゲームの進行度に合わせたデザインを用意する

ストーリーの進行度に合わせでデザインを変えるケースもあります。
(参考:「咲うアルスノトリア」

 

ランダムでデザインを切り替える

バリエーションを多く用意し、ランダムで表示を切り替えるデザインもあります
(参考:「機動戦隊アイアンサーガ」

 

デザインを任意で切り替える

ゲーム内のオプションから、任意の背景に変更できるタイトルもある
(参考:「ダンまち〜メモリア・フレーゼ〜」

 

動的な表現を使う

ジャイロ機能を使う

ジャイロ機能を使い、イラストを奥行きを設け、動かすデザインが採用されることがある
(参考:「妖怪ウォッチメダルウォーズ」

 

動画を再生する
  • 動画が採用されるケースもある。

 

Q:ゲームロゴを配置するときに気を付けることは?

ゲームロゴ

 

TAP TO START

 

メニューボタン

  • ゲーム内と同じ位置にすると、ユーザーの学習コストが下がり、一貫性も高まると考える
  • メニューボタンの中はキャッシュ削除、データ連携、お知らせなどのコマンドが格納されている。メニューでまとめずに各コマンドを画面に直接配置しているゲームもある。配置するコマンドの数が2個くらいであればメニューボタンの中に格納しなくても良いのかもしれない。

 

ユーザーID

 

他ゲームへの導線

  • 自社タイトルの他のゲームへの導線が設置されている場合がある。離脱が懸念だけど、自社コンテンツの宣伝を兼ねているのだろうか(参考:「ワールドサッカーコレクションS」/「東京喰種 :re invoke」
  • オフライン版、あるいは近日中のサービス終了が決まっていて、続編に誘導するとかならアリかもしれない?

 

 

サーバー選択

  • デフォルトでオススメサーバーが選択されている。手数が減る。

 

お知らせ

 

 

ゲーム内への遷移アニメーション

 

 

ゲームをインストールしなくてもプレイできる

「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」おためしプレイってコラボやキャンペーンでの新規流入を狙ってたのかな… - ゲームアプリのUIデザイン