こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「麻雀一番街」からマッチング中のスケルトンスクリーンの事例をご紹介します。スケルトンスクリーンとは、ざっくり言うと「ロード中にいい感じに表示する画面デザイン」のようなものだと考えていただければと思います。
以下、主な特徴です！
マッチング中はキャラのシルエットを表示
「麻雀一番街」では特定の対局のマッチング中にキャラのシルエットが表示されます。
マッチング中にキャラのシルエットを表示するゲームは珍しくありませんが、一種のスケルトンスクリーンに分類されていると見ることもできそうです。
YouTubeやX（旧 Twitter）のような、テキストが含まれているリストがスケルトンスクリーンのデザイン事例としてあげられがちだったせいか、「麻雀一番街」のようなゲームでの事例は見落としていました。
シルエットは特定の誰かではない
汎用性を高めるためか、キャラのシルエットは特定の誰かをモチーフとしていません。
髪は短すぎず長すぎず、体型も少年とも少女とも見ることができます。
実際、シルエットと全く同じ形のキャラクターは2023年8月11日時点では実装されていません。ある程度汎用的なシルエットにすることで、どのキャラとマッチングしても特に違和感を感じさせないデザインだと感じました。
分かりやすいようにキャラクターのプレビュー部分のみトリミングしてみます。
画面を動かして読み込んでる感を表現
ここまでキャラのシルエットに注目してきましたが、画面背景にも注目してみたいと思います。
「麻雀一番街」の背景は躍動感のある効果線のエフェクトが左右に流れています。
ちょっとしたことかもしれませんが、この背景のアニメーションも重要な要素だと感じています。
仮に背景が動いていなかったら、画面左下に小さく表示されているタイマーだけが動く退屈な画面になってしまいます。
画面に動きがあることでゲームが動いていると分かり、ユーザーが待ち時間を短く感じる効果も期待できると考えます。
適材適所で使う
このようなスケルトンスクリーンのデザインは、インジゲーターを表示するだけのシンプルな画面と比較して、見た目がリッチに見えるため、積極的に採用したい気持ちになるかもしれません。
しかし、デザインを採用することが目的にならないように注意が必要だと考えます。
スケルトンスクリーンの場合、以下のようなメリットデメリットがあると言われています。「麻雀一番街」のマッチング画面では、このメリットデメリットに合った使われ方をされているように感じました。
メリット
- ユーザーの集中を維持できる
- 次に表示されるものに対する予測を与え、認識における負荷を低減する効果がある
- スピナーやプログレスバーよりも多くの情報を得られるため、結果として体感時間が短くなるといわれている
デメリット
【スマホアプリ】待ち時間のUIデザインを徹底解説！離脱を防ぐためのポイントを紹介 | 東京のアプリ開発会社
Everything you need to know about skeleton screens | by Bill Chung | UX Collective
以上です。
マッチング中の画面デザインの参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「麻雀一番街」のガイドラインを確認したところ、以下の記載がありました。
本コンテンツのゲーム配信及び動画投稿を利用する際には、以下の内容をお守りの上お楽しみください。
1. お客様は本コンテンツから取り込んだゲームプレイの動画や静止画を、下記の場所にてご利用いただけます。
（1）YouTube、Twitch、Twitter、Facebook、ゲームの攻略・紹介・実況・解説など動画投稿サイト
（2）お客様の個人的、かつ非営利目的のブログ・ホームページ・及びＳＮＳ
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
