こんにちは!ちょこです!
このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!
ここでは過去にプレイしたゲームをもとに、タイトル画面のデザインの特徴についてまとめました。
「タイトル画面って何を表示したらいいのか分からない!」「どういうデザインがあるのか知りたい!」と悩んでいる方の参考になれば幸いです。
以下、概要です。
- Q:タイトル画面って何を表示するの?
- Q:タイトル画面の背景ってどうデザインすればいいの?
- Q:ゲームロゴを配置するときに気を付けることは?
- TAP TO START
- メニューボタン
- ユーザーID
- 他ゲームへの導線
- サーバー選択
Q:タイトル画面って何を表示するの?
A:ケースバイケースで色々ある
© SQUARE ENIX CO., LTD. All Rights Reserved.
タイトル画面を構成している要素はたくさんあります。
何をどのように表示するかはケースバイケースです。
まずは色々表示する情報があることを認識していただいた上で、
「この情報って必要?それとも不要?」などを確認する際の参考までに。
- 背景
- ゲームロゴ
- TAP TO STAR
- メニューボタン
- コピーライト
- バージョン
- ユーザーID
- 選択しているサーバー
- 他ゲームへの導線
- CRI WARE(ミドルウェア)
- BISHAMON(ミドルウェア)
- LINEアイコン
- Twitterアイコン
- 国によるレーティング表記(韓国)
- ゲーム内への遷移アニメーション
Q:タイトル画面の背景ってどうデザインすればいいの?
A:目的に沿ってデザインすると良さそう
基本的には何をしたら良い悪いというのは無いかと思います。
タイトル画面を作成する理由、達成したいことに沿って好きにデザインすると良いかと。
以下、既存タイトルの事例です。
基本方針
背景素材はタイトル画面の中でも大きく面積を占めるため、画面の印象を左右する情報です。
ゲームのブランド、IPらしさを訴求するデザインもある
キャラを表示する場合、端末で見切れないようにセーフエリアを設定し、デザインすると良さそう。
デザインバリエーションを用意する
周年などの大きな節目に合わせてデザインを更新する
開催中のイベント、季節、周年などの大きな節目に合わせてデザインが更新されることもあります。
(参考:「ロマンシング サガ リ・ユニバース」/「勝利の女神:NIKKE(ニケ)」)
時間差分を用意する
現実世界の時間を参照し、時間差分を用意するケースもあります。
(参考: 「咲うアルスノトリア」)
ゲームの進行度に合わせたデザインを用意する
ストーリーの進行度に合わせでデザインを変えるケースもあります。
(参考:「咲うアルスノトリア」)
ランダムでデザインを切り替える
バリエーションを多く用意し、ランダムで表示を切り替えるデザインもあります
(参考:「機動戦隊アイアンサーガ」)
デザインを任意で切り替える
ゲーム内のオプションから、任意の背景に変更できるタイトルもある
(参考:「ダンまち〜メモリア・フレーゼ〜」)
動的な表現を使う
ジャイロ機能を使う
ジャイロ機能を使い、イラストを奥行きを設け、動かすデザインが採用されることがある
(参考:「妖怪ウォッチメダルウォーズ」)
動画を再生する
- 動画が採用されるケースもある。
Q:ゲームロゴを配置するときに気を付けることは?
ゲームロゴ
- 配信国や対応言語を考慮し、複数の言語をデザインすることがあります(参考:「ドラゴンクエスト ダイの大冒険 -魂の絆-」/「ワンダータクティクス」/「麻雀一番街」)
- 世界観を表現するために、あえてタイトルロゴを無くすケースもある(参考:「未定事件簿」)
TAP TO START
- ゲームの開始を促す情報
- この情報ではなく、画面内のどこかをタップすれば次の画面に遷移する
- ボタンらしいデザインではなく、テキストでデザインされることが多い
- 視線を誘導するために明滅などの簡単なアニメーションをしていることが多い
- アニメーションをさせる場合、世界観を表現するケースもある(参考: 「NieR Re[in]carnation / ニーア リィンカーネーション」)
- 「冒険をはじめる」など世界観を取り入れた文言もあり(参考:「ドラゴンクエストけしケシ!」)
- 明滅は派手でなくても(参考:「ヘブンバーンズレッド」)
メニューボタン
- ゲーム内と同じ位置にすると、ユーザーの学習コストが下がり、一貫性も高まると考える
- メニューボタンの中はキャッシュ削除、データ連携、お知らせなどのコマンドが格納されている。メニューでまとめずに各コマンドを画面に直接配置しているゲームもある。配置するコマンドの数が2個くらいであればメニューボタンの中に格納しなくても良いのかもしれない。
ユーザーID
- 配信に配慮してか、デフォルトでは隠してタップすると表示するゲームもある(参考:「ヘブンバーンズレッド」)
他ゲームへの導線
- 自社タイトルの他のゲームへの導線が設置されている場合がある。離脱が懸念だけど、自社コンテンツの宣伝を兼ねているのだろうか(参考:「ワールドサッカーコレクションS」/「東京喰種 :re invoke」)
- オフライン版、あるいは近日中のサービス終了が決まっていて、続編に誘導するとかならアリかもしれない?
サーバー選択
- デフォルトでオススメサーバーが選択されている。手数が減る。
お知らせ
ゲーム内への遷移アニメーション
- ゲームによってはタイトルからシームレスに繋げるためのデザインもあります(参考:「崩壊3rd」/「エクリプスサーガ」)
- 直接ゲームが始めるケースもある(参考:「チョコボGP'(ダッシュ)」)
ゲームをインストールしなくてもプレイできる
「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」おためしプレイってコラボやキャンペーンでの新規流入を狙ってたのかな… - ゲームアプリのUIデザイン