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

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

「麻雀一番街」進捗ゲージが麻雀牌になっていた

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

 

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

 

今回は「麻雀一番街」からロード画面の進捗ゲージのデザインを紹介します。

 

以下、主な特徴です!

 

ロードゲージが麻雀牌

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

「麻雀一番街」をプレイ開始直後、リソースダウンロードの時に表示された進捗ゲージが麻雀牌を模したデザインになっていました。
青いラインがあるだけで麻雀牌と分かるため、必要最小限の要素でデザインされていると感じました。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

アニメーションで見るとこんな感じです。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

分かりやすくするため、ゲージ部分を少し大きく表示します。
進捗率にあわせて麻雀牌もどんどん並んでいきます。

世界観を取り入れたゲームらしいデザインだと感じました。

 

キャラ同士の関係性も表現したデザイン

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

進捗ゲージの上にキャラクターが表示されている点にも注目です。

進捗ゲージの役割としてはダウンロードの進捗率が直感的に分かれば良いため、役割だけを考えた場合、キャラクターを表示する必要はありません。
しかし、あえてコストがかかるデザインにしている理由もあるはずです。

例えば、キャラクターの関係性を見せたい、という狙いがあったのかもしれません。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

麻雀ゲームにキャラクターの関係性は必要か?と思うかもしれませんが、少なくとも「麻雀一番街」の場合はキャラクターを深掘りしようとする意志が感じられました。

例えば、進捗ゲージの上に表示されているキャラクターは、タイトル画面で仲良く並んで描かれています。この構図だけで2人の関係性が想像できます。

また、ゲーム内にはキャラクターのプロフィールも書かれています。
プロフィールにはキャラクターたちが、なぜ麻雀を打っているのか動機が書かれています。

f:id:appgameui:20230625010945p:image

例えば、一色清美の場合は以下のように書かれていました。

(読み:イッシキセイビ) 絶対の幸運者、雀丘中学麻雀部の部長(部員は2名しかいない)。両親の仕事の都合で、今までの人生はほとんど旅をして過ごしてきた。たくさんのものと出会い、すぐ別れてきた。一色清美は次第に「こんなもんだ」と割り切るようになった。両親からやりたいことを聞かれても、彼女は答えなくなった。両親と一緒にいるより大事なことが思いつかない。

ある日、彼女は両親と天和市に来た。第4回「無限天和賞」を開催している。熱狂なファンに囲まれた一色清美は初めて麻雀という競技の魅力を味わうことができた。その強運のおかげで、初めての対戦で大勝利できた。自分がどんな人間になれるのは分からないが、今の彼女は確信できる。プロ雀士として、世界大会のステージに立ちたい!

 

f:id:appgameui:20230625010948p:image

また、東方凪の場合は以下のように書かれています。

(読み:トウホウナギ)雀荘の天才女性雀士。東方家は天和市で有名な雀荘を経営している。小さい頃から麻雀牌の音を聞いて成長した。お嬢様生まれの優雅さを持ちながら、巧みな雀力も身に着けた。彼女の最大な特徴はその冷静さで、いつも追い込まれた状況から的確な選択を見せ、局面を逆転させる。「天才美少女雀士」のあだ名も響かせた。

本人は「天才美少女雀士」と呼ばれるのが嫌い。彼女は生まれながらに運に見放されている体。彼女はこれまでたくさんの低確率な事件と出会い、被害を受けてきた。彼女の冷たい表情の下にはものすごい怒りが燃えている。

それでも、麻雀の技術が家族の栄光と繋がっている。東方家の娘として、彼女は人知れずに自分の腕を鍛え、不運に対抗し続ける。彼女は努力がすべての悪運を打ち破ると信じている。

一見するとこれらの情報はゲームとは無関係な情報に見えます。知ったところで麻雀を打つ時に有利になりません。
しかし、このように麻雀に対するキャラクターの背景や生い立ちなどの情報があると、ゲームをプレイするユーザーのユーザー体験は大きく変化すると考えます。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ロード画面のデザインの話に戻ります。

ロード画面では2人のキャラクターが描かれています。
キャラ単体ではなく、2人登場させている点に注目したいと思います。

2人を描くことで、お互いの関係性を想像することができます。
今回のデザインの場合、自分は追いかけられているようにも見えたため、なぜそのような関係性になっているのか気になりました。
人によって見え方は変わると思いますが、1人だけだと生まれない想像であることには違いないかと思います。

ロード画面は頻繁に表示される画面です。
バリエーションを複数用意し、定期的に更新すれば新しい関係性を見せることもできます。キャラクターを深掘りさせたい意思を感じるデザインだと思いました。

 

以上です。
ロード中の進捗ゲージをデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「麻雀一番街」のガイドラインを確認したところ、以下の記載がありました。

本コンテンツのゲーム配信及び動画投稿を利用する際には、以下の内容をお守りの上お楽しみください。

1. お客様は本コンテンツから取り込んだゲームプレイの動画や静止画を、下記の場所にてご利用いただけます。

(1)YouTube、Twitch、TwitterFacebook、ゲームの攻略・紹介・実況・解説など動画投稿サイト

(2)お客様の個人的、かつ非営利目的のブログ・ホームページ・及びSNS

麻雀一番街

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

麻雀一番街のコンテンツ利用ガイドラインです

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ