「シャイニングニキ」遷移先に関係するロード画面が表示されるデザイン

こんにちは、ちょこです！

今回は「シャイニングニキ」のロード画面の紹介です。

部屋やショップなど、特定の画面に遷移する際に専用のロード画面が表示されるデザインになっていました。

該当の画面はこちらです。

専用の画面があると没入感が維持される

画面遷移する際に世界観を伝えるためのtips画像が表示されることはゲームUIではよくあるデザインです。

「シャイニングニキ」の場合、遷移先に関係する情報がtips表示されることにより、没入感が削がれにくいデザインになっています。

こちらはショップに遷移する際の画面です。ショップに関するロード画面が表示されます。

ユーザーは目的があって画面遷移するので、その際に少しでも関係のある情報を表示した方がユーザーの意識を阻害しないかな、と考えます。

優先度をつけて画像を用意するのが現実的

しかし、遷移する場所ごとにロード画面を個別に用意することは大変です。

「シャイニングニキ」では私が見た範囲だと、以下の画面のみ専用の画面が用意されていました。

• 部屋
• ショップ

同じ思想のデザインとしては「七つの大罪 光と闇の交戦 : グラクロ」があげられます。

「七つの大罪 光と闇の交戦 : グラクロ」圧倒的なロード画面の種類を紹介。数だけではなく出し分け方も丁寧。 - ゲームアプリのUIデザイン

「七つの大罪 光と闇の交戦 : グラクロ」はかなりこだわってデザインされていました.

しかし、全てのパターンを用意することは困難だと思います。

実際「シャイニングニキ」ではメインの機能や、頻繁に遷移することが予想できる画面など、優先度をつけて対応しているように見えました。

関係のある情報を表示するほうがメリットがある

一般的に画面遷移するとゲームの没入感が削がれます。
ロード画面は無い方が良いですが、0にすることは現状では困難です。

ロード画面を無くせないのであれば、少しでもユーザーのメリットになるロード画面をデザインしようと考えるのが良いのかなと思います。

「シャイニングニキ」のロード画面では以下の点が工夫されている点だと感じました。

• 文脈に沿った画面を表示することにより、没入感を無くさないようにしている
• ユーザーの目的に関係ある情報を表示するして、ユーザーのメリットに貢献している

以上です。ロード画面をデザインする際の参考になれば幸いです。

「シャイニングニキ」メッセージウィンドウが画面中央寄りに配置。キャラの表情が見やすく、指が文字と被らないなどのメリット

こんにちは、ちょこです！

「シャイニングニキ」のADVパートにて、メッセージウィンドウの位置に工夫が見られました。

該当の画面はこちらです！

メッセージウィンドウが画面中央に配置されている

このように、メッセージウィンドウが画面下部ではなく、画面中央に配置されています。

一般的に多く見るレイアウトは下揃えのレイアウトです。

今回はメッセージウィンドウが中央寄せになっているメリットを考えてみました。

キャラとメッセージの位置が近いので表情がわかりやすい

キャラクターが登場するときはこんな見た目になります。

特徴として、キャラクターの顔とメッセージの位置が近く、表情とセリフが自然と目に留まるデザインになっています。

関係する情報を近くに配置することはデザインの4原則にもある「近接」に該当します。

非デザイナーも必見！「4大原則」を知るだけで見違えるデザインに | Swings

そのおかげで、理解しやすいレイアウトになっています。

また、視線の動きも抑えられ、ユーザーの疲れも軽減できると考えられます。

続いてもうひとつのメリットを紹介します。

指でメッセージが隠れないから読みやすい

メッセージを送る際など、画面をタップするような場面でもメッセージウィンドウが画面中央近くにあるため、指とメッセージが被らないレイアウトになっています。

メッセージが指で隠れないことにより、以下のメリットが考えられます。

1. 文章が読みやすい
2. 没入感を損ないにくい
3. 心理的にタップしやすい

などでしょうか。

簡単に補足します。

ADVパートの主な目的は文章を読むことです。ですので、ADVパートでの文章を表示する優先度は非常に高くなります。

優先度の高い情報が指で隠れてしまうのは期待する結果ではない、という考えです。

メッセージウィンドウの位置をカスタムできるゲームもある

以前、メッセージウィンドウの位置が調整できる機能の実装事例を紹介しました。

実装されていたタイトルは「王子様のプロポーズ Eternal Kiss」です。

こんな感じで設定があります。

ここの部分でテキストウィンドウの位置が変えられます。

下部に設定するとこの位置です。

上の方に持っていくと、この位置にも配置できます。

「シャイニングニキ」のようにメッセージウィンドウの位置にこだわるのであれば、「王子様のプロポーズ Eternal Kiss」のようにUIを微調整できる機能も需要が見込めるのかもしれません。

以上です。

端末の比率は頻繁に変わりますが、

• 端末の大型化
• アスペクト比の変化

などの変化は顕著に感じます。
端末側が変化すると、最適なUIも変化していきます。
今回紹介したメッセージウィンドウの位置もその中の一つです。

アドベンチャーパートのデザインを検討する際に、メッセージウィンドウの位置について検討することがあるかもしれません。

その際にデザインの参考になれば幸いです。

▼類似デザインの事例

「王子様のプロポーズ Eternal Kiss」メッセージが指で隠れてしまうストレスから解放される！他ではあまり見ないUIのカスタム仕様 - ゲームアプリのUIデザイン

「シャイニングニキ」キャラボイスが聴きたくなるサムネイルのデザイン

こんにちは、ちょこです！

「シャイニングニキ」で、キャラクターのボイスが聴ける画面にて、画面のデザインが音楽プレーヤー風になっていました。良いですね！

該当の画面はこちらです！

キャラクターの声を聴きたくなるようなデザイン

他のタイトルでもボイス試聴の機能はしばしば見かけますが、階層としては深いところに配置されがちです。

例えば、

キャラ一覧

┗キャラ詳細

　┗キャラボイス試聴

という階層に配置されることが一般的かと思います。

下位階層にあるため、利用頻度は少ないと仮定できます。利用頻度が少ないならば学習コストも抑えられると良いと、考えられます。

そういった意味で多くのゲームではキャラボイスを試聴する画面はシンプルな情報で構成されがちです。

そんな中で「シャイニングニキ」ではキャラクターの声が聴きたくなるような、ワクワクするデザインになっていました。

聴くことができるデザイン、聴きたくなるデザイン

この画面のデザインの評価軸を考えた際、

機能としてキャラクターのボイスを聴くことができるというデザインと、画面に遷移したときにボイスが聴きたくなるデザイン、という評価軸を立ててみました。

ここでの「キャラボイスを聴くことができるデザイン」とは『「わかりやすさ」「認識のしやすさ」「文字の見やすさ」など、目的を達成するために必要な情報が適切に提供されているか』という定義とします。

「キャラボイスが聴きたくなるデザイン」とは『目的達成のための動機付けがされる』という定義とします。

その評価軸で画面を捉えた場合、UIパーツのグラフィックが「キャラボイスが聴きたくなるデザイン」になっていることがわかります。

このようにサムネイルのデザインが音楽プレイヤーのようになっています。

新奇性があり楽しい試みです。

サムネイルが音楽プレーヤーのようになっていることにより、サムネイルに関連する音が出ることが直感的にわかるようになっています。

このように、機能に合わせてサムネイルのデザインを変えるのは面白い試みだと感じます。

プレーヤーをしっかり作りすぎていて、操作できるように誤認させてしまうかも

ただ、このデザインで注意したいのはサムネイルをタップしても音は鳴りません。

ボタンを描いているため、押せるように見えますが、押せません。押しても反応はありません。

ゲーム全体がフラット寄りであるため、ここで操作できそうにも見えますが、反応はありません。

この辺りは押せそうなボタンに見えないような見た目にするなどの工夫は必要かもしれません。

以上です。

ゲームUIの場合、機能を使いやすく実装するだけではなく、遊び心も大切です。

「シャイニングニキ」の場合、キャラボイスを試聴する画面のサムネイルを音楽プレーヤーのようにして、遊び心のあるデザインになっていました。

サムネイルのデザインを検討する際のひとつの評価軸やアイディアとして、参考になれば幸いです。

「シャイニングニキ」現在時刻の表示のオン/オフ設定があるのはなぜだろう

こんにちは、ちょこです！

「シャイニングニキ」の設定の中に現在時刻表示のオン/オフの機能がありました。

該当の画面はこちらです。

この設定ですね。

切り替えると以下のような挙動になります。

ちょっと分かりづらいかもですが、画面右上に時刻表示が出たり消えたりします。 

時刻表示をするほうが良い、と考えていた時期が俺にもありました

ゲーム内に時刻表示をしているタイトルはしばしば見かけます。

時刻の表示については、個人的にはポジティブに受け止めていました。

理由としては、スマホゲームは空き時間にプレイすることができるため、据え置きと比較して時間を気にするシーンが多くあります。

ゲームから離脱して時間を確認することもできますが、ゲームから離脱せずに確認できた方が離脱する確率が減るのではないか、と考えていたためです。

しかし「シャイニングニキ」では時刻表示機能を実装した上で、あえて非表示にする機能を実装しています。

非表示のオプションはSNSの投稿を見越してのこと？

表示のオン/オフを切り替えるオプションがあるということは、時刻表示についてはいくつかの評価軸があることが考えられます。

時間が表示されることのデメリットをいくつか考えてみました。

• 時間が気になってしまい、ゲームに没入しきれない
• ホーム画面の情報が増えてしまい、ごちゃごちゃする
• SNSにスクショを投稿する際に時刻表示があると、生活のリズムが分かるようで嫌
• 動画配信する際に時刻表示があると、生活のリズムが分かるようで嫌

※他にもあればコメントにて伺いたいです。

時間の表示については賛否が分かれることがある

ソシャゲが出始めの頃は最終ログイン時間が分単位で表示されるゲームも少なくありませんでした。

理由としては頻繁にログインしているユーザーの方が、ゲームを有利に進められるため、フレンド申請する際の指針になっていた事情があります。

その後、最終ログイン時間を監視されたり、常にログインしているような印象を持たれるなどの風潮があり、ログインの管理については現在のように「1時間以内」「1日前」「3日以上」などの幅を持たせるデザインが増えてきました。

そういった背景を考慮すると、現在時刻の表示について否定的な見方をするユーザーがいる可能性は十分に考えられます。

UIには利便性以外にも嗜好性といった評価軸もあります。

嗜好性が関係する場合は「シャイニングニキ」のように、設定によってユーザーが管理できるようになっても良いのかもしれません。

また、その際は重要度や優先度も加味して検討するのが良いのかなと考えます。

以上です。

時刻表示を実装する際にオプションが必要か検討する際の参考になれば幸いです。