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

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

「フェスティバトル」配信画面のトグルボタンのUIが斬新で分かりやすい

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

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

 

今回は「フェスティバトル」(以下「フェスバ」)から配信&視聴機能のUIついてご紹介します。前回の記事(リンク)が長くなったので分割しました。

以下、目次です。

それではそれぞれ詳細を記載します。

起動直後に配信に関する注意事項が表示される

「フェスバ」ではゲーム起動直後の画面で以下のような文言が表示されます。

また、あなたのコメントやボイスチャットが他プレイヤーによって配信される可能性がございます。

f:id:appgameui:20241016093245p:image
©COLOPL, Inc. ©MIXI
▲起動直後の画面

 

分かりやすいように該当箇所を抜粋します。
こういった文言は配信&視聴機能がある「フェスバ」ならではだと感じました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI
▲該当箇所を抜粋

 

楽しそうな印象を受ける配信画面

「フェスバ」の配信画面は非常に賑やかな見た目だと感じました。
主に以下の4点を挙げます。

  1. 多くの色、明るい配色が使われ楽しそうな印象を受ける
  2. ユーザーが作ったサムネイルを表示し、いつ見ても新しさが感じられるデザイン
  3. ピックアップ、人気、お気に入り、新着のそれぞれのカテゴリにアイコンを用意し、情報量を増し、賑やかさに繋がっている
  4. どの配信を見たら良いかの指針になるように、盛り上がっている度合いを数値化させた情報を表示している

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI
▲配信画面

レイアウトはグリッドレイアウトし、配色はベースカラー、メインカラー、アクセントカラーを採用し、基本的には整然とした印象を受けるように設計されています。

一方で、サムネイルのデザインの情報量は多く、全体で見たときに楽しそうな印象を演出していると感じました。

 

また、数字を利用してユーザーの感情の盛り上げを押し上げていると考えます。

同時視聴者数を表示すると1~2桁程度になりそうですし、延べ視聴者数だと誤解を招きやすいです。
配信中に獲得できるポイントを利用している点が上手い方法だと感じました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI
▲数字が大きいと盛り上がってる感が演出される

 

配信するためのステップが少ない

「フェスバ」では以下の4つの情報を入力したら配信が開始できます。
配信するためのステップ数が少なく、手軽さが演出されていると感じました。
(ネットワーク環境や対応機種、年齢などの配信条件を満たした前提です)

  1. 配信タイトル
  2. 配信カテゴリー選択
  3. 視聴者入室時の自動コメント
  4. 配信サムネイル


f:id:appgameui:20241016093338p:image
©COLOPL, Inc. ©MIXI
「顔は映らないよ!」という吹き出しをボタンの近くに表示させ、ユーザーの不安を少しでも抑えようとしている点もユーザビリティを感じます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI
▲配信開始ボタンと被るように吹き出しが表示されており、見落としにくい

 

配信オプションのトグルUIが分かりやすい

配信オプション画面も紹介します。
設定項目は細かく設定でき、ユーザーのニーズの多様性、機能の複雑さがうかがえます。どのような項目を採用するかはそのゲームによって様々だと考えます。

割とマイナーで参考できるゲームが限られていると感じたため、事例として残しておきます。基本的な要件の候補として参考になれば幸いです。

  1. 視聴者入室通知
  2. コメント通知
  3. ギフトスタンプ通知
  4. お気に入り通知
  5. コメントの音声読み上げ、及びその音量設定
  6. 視聴者のパーティ参加の許可設定
  7. パーティメンバーの音声の初期状態の設定

f:id:appgameui:20241016093308p:image
©COLOPL, Inc. ©MIXI
▲配信オプション画面

UIとして気になったのはトグルボタンのデザインです。
トグルボタンのアイコンのデザインが各項目ごとに異なっており、斬新で分かりやすいデザインだと感じました。どの設定を操作しているのか手掛かりが表示されているため、分かりやすさに繋がっていると考えます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI
▲設定項目ごとにアイコンが用意されている

 

以上です。
配信&視聴機能のような特殊な機能のUIをデザインする際の参考になれば幸いです。

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

 


権利者さまへ

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

「フェスティバトル」のガイドラインを確認したところ、プレイ画像の投稿が可能な旨が書かれていました。

主な参照箇所を抜粋します。

◆『フェスティバトル』アプリ内でのプレイ動画の投稿等
『フェスティバトル』に登場するすべてのキャラクターを使用する『フェスティバトル』のプレイ動画を対象とします。

YouTube等の外部プラットフォームを利用したプレイ動画の投稿等
『フェスティバトル』に登場するキャラクターのうち、「白猫プロジェクト」と「モンスターストライク」の ゲームオリジナルキャラクターを使用する『フェスティバトル』のプレイ動画を対象とします。
『フェスティバトル』とのコラボを含む、上記 以外のキャラクターを使用するプレイ動画は、本ガイドラインの対象外とさせていただきます。

◆プレイ画像の投稿等
上記「YouTube等の外部プラットフォームを利用したプレイ動画の投稿等」と同様とします。

  1. プレイ動画やプレイ画像の投稿等にあたっては、以下の著作権表示を行うこと
    「©COLOPL, Inc. ©MIXI

配信ガイドライン | フェスティバトル

フェスティバトルの配信ガイドラインです。2024年9月20日確認

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

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

 

お問い合わせ