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

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

2021-04-01から1ヶ月間の記事一覧

「ユージェネ」BGMを使った単純接触効果!ゲーム性がシンプルなのはゲームよりもラジオを聞いてもらいたいから?

こんにちは!ちょこです! 今回はグラフィックではなく、サウンド面からUIについて紹介。 紹介するサウンドはこちらです。 ラジオがあるからゲームが単調でも気にならない 驚きの30時間14分!!映画10本分以上のボリュームです。 凄い量。 内部的には短いト…

「ユージェネ」目的地に合わせてロード画面のバリエーションを用意し、没入感を維持するデザインの紹介

こんにちは!ちょこです! 今回は「ユージェネ」の画面遷移演出のバリエーションが豊富だったので、デザインの一部を紹介します。 「ユージェネ」の場合、目的地に応じて画面遷移時の画面デザインが用意されています。 例えば、目的地が海岸線近くだと海がモ…

「ユージェネ」から見る行動のデザイン

こんにちは!ちょこです! 今回は「ユージェネ」のフィールド画面から、メッセージによってユーザーの行動をデザインする例があったので紹介します! ユーザーの行動をデザインすることに興味のある方の参考になれば幸いです。 以外、該当のフィールド画面で…

「ユージェネ」ヘルプ機能に実装されていたチャットボットの基本機能と、隠しメッセージの紹介

こんにちは、ちょこです! 今回は「ユージェネ」からヘルプ画面のデザインと隠しメッセージを紹介します。「ユージェネ」ではヘルプ機能にチャットボットが採用されていました。 チャットボットは中国開発のゲームではしばしば見かけますが、国内の開発事例…

「ユージェネ」サービス全体を俯瞰して見た上で、ビジュアルデザインに落とし込んでいるデザイン事例

こんにちは、ちょこです! 「ユージェネ」のアドベンチャーパートのデザインを紹介します。 主な特徴として、 文字が大きい 分かりやすい色使い 映像コンテンツを意識したメニューUI などがあげられます。アドベンチャーパートのデザインをする際に参考にな…

「ユージェネ」存在しない0月0日が初期値になっているのは、違和感を利用して正しい情報を入力させるため?

こんにちは!ちょこです! 今回は「ユージェネ」の誕生日の入力フォームにおけるマイクロコピーのデザイン事例を紹介します。 該当画面はこちらのプロフィール画面です。 初期値が入力されていると誤入力防止になる こちらの「誕生日」の項目のマイクロコピ…

「ユージェネ」情報に使う色を統一させることによって関係性を強化、ユーザーの学習コストを下げるデザイン

こんにちは、ちょこです! 今回は「ユージェネ」から、使う色を統一することでユーザーの学習コストを下げているデザインの事例があったため紹介します。 該当の画面はこちらです。 プレイヤーが目的地に向かってフィールドを進んでいる画面です。 目的地に…

「ユージェネ」 ゲームの没入感を高めるためのマイクロコピーの採用例

こんにちは!ちょこです! 今回は「ユージェネ」のマイクロコピーについての事例紹介です! ゲームUXライティングの参考になれば幸いです。 該当の箇所はこちらのプロフィール画面です! この画面の中に「ロイド起動日」とあります。 こちらが今回紹介したい…

「タイムリフレイン」ホーム画面のデザインが切り替えられるオプションの存在理由が謎すぎる

こんにちは!ちょこです! 「タイムリフレイン」にてホーム画面のデザインが切り替えられるデザインになっていました。 設定画面からデザインが切り替えられます。該当の画面はこちらです。 設定はこちらです。「簡易モード」と「オリジナル」の設定がありま…

「タイムリフレイン」キャラを評価する機能の種類とそれぞれの特徴

こんにちは!ちょこです! 「タイムリフレイン」のキャラクター評価機能が特徴的だったのでご紹介です! 該当の画面はこちらです。 評価軸は以下の18個です。 先手 後手 最強攻撃 コントロール ジョーカ 最強守備 使いやすい 勢力スレイヤー チームアシス…

「タイムリフレイン」タイトル画面で表示される世界観を表現するテキスト

こんにちは!ちょこです! 「タイムリフレイン」にてタイトル画面からゲーム内に遷移する際に世界観を表現するテキストが表示されていました。 該当の画面はこちらです。 現実での時間経過とゲーム内の時系列をリンクさせている ロード中のテキストには「時…

「タイムリフレイン」グリッチ表現の実装事例

こんにちは、ちょこです! 「タイムリフレイン」にて、バナーを表示する際に「グリッチ表現」が使われていました。 グリッチ表現とは… グリッチエフェクトとは、動画にノイズや歪み、ストライプの効果を付けるエフェクトです。 今流行り!動画にグリッチエフ…

「タイムリフレイン」キャラが向き合うと掛け合っている感じがする

こんにちは、ちょこです。 「タイムリフレイン」のアドベンチャーパートにて、キャラクターが掛け合いを行う際に、シームレスに話者の方を向き直す演出がありました。珍しい表現だと感じたので紹介します。 該当の画面はこちらです。 演出部分のアニメーショ…

「機動戦隊アイアンサーガ」タイトル画面のデザインが39種類もある

こんにちは、ちょこです! 「機動戦隊アイアンサーガ」にて、タイトル画面に表示されるグラフィックが切り替えられるデザインになっていました。 該当の画面はこちらです。 全39種類のタイトル画面 「アイアンサーガ」のタイトル画面はランダムではなく順番…

「機動戦隊アイアンサーガ」ショップに無料の商品を置くのは単純接触効果を狙ったもの?

こんにちは、ちょこです! 「機動戦隊アイアンサーガ」にてショップでアイテムが無料で購入できる機能が実装されていました。 該当の画面はこちらです。 左上にある商品が無料です!! 良いですよね。無料! なぜショップで配布するのか? 「ショップでアイ…

「機動戦隊アイアンサーガ」選択肢だけ読めば分かる確認ダイアログは便利

こんにちは、ちょこです! 「機動戦隊アイアンサーガ」の確認ダイアログにて、選択肢の内容を確認するだけで行動を判断できるデザインになっていました。 該当の画面はこちらです。 選択肢だけ見ればいい 早速ですが、ひとつ例を紹介します。 こちらの確認ダ…

「シャイニングニキ」アプリを更新してもらいたくなるテキスト

こんにちは!ちょこです! 「シャイニングニキ」にてアプリのデータ更新時のテキストが世界観に寄せた内容になっていました。 該当の画面はこちらです。 マーベル大陸に変化がおこりました 表示されているダイアログに書かれているテキストの内容は以下の内…

「シャイニングニキ」タイトル起動画面で表示されるテキストが概念的すぎた

こんにちは、ちょこです! 「シャイニングニキ」のゲーム起動直後のロード画面の進捗ゲージの下に、ゲームらしい遊び心のあるデザインが実装されていました。 ゲームの世界観を遊び心を添えて表現できないか、と悩んでいる方の参考になればと思います。 該当…

「シャイニングニキ」プレイヤーのことをどう呼称するか問題

こんにちは、ちょこです。 「シャイニングニキ」のお知らせの文章にてプレイヤーを「スタイリストの皆さまへ」と表記している部分がありました。 該当の画面はこちらです。 この部分ですね。「スタイリストの皆さまへ」という挨拶から始まっています。 ゲー…

「シャイニングニキ」撮影モードで照明の設定まで出来ることに驚きました

こんにちは、ちょこです! 「シャイニングニキ」の撮影モードに照明の設定があることに驚きました。 ただ撮影するのではなく、ニキがどう撮影されたいか、ということが意識されているように感じました。該当の画面はこちらです。 まるで本物のスタジオで撮影…

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

こんにちは、ちょこです! 今回は「シャイニングニキ」のロード画面の紹介です。 部屋やショップなど、特定の画面に遷移する際に専用のロード画面が表示されるデザインになっていました。 該当の画面はこちらです。 専用の画面があると没入感が維持される 画…

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

こんにちは、ちょこです! 「シャイニングニキ」のADVパートにて、メッセージウィンドウの位置に工夫が見られました。 該当の画面はこちらです! メッセージウィンドウが画面中央に配置されている このように、メッセージウィンドウが画面下部ではなく、画面…

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

こんにちは、ちょこです! 「シャイニングニキ」で、キャラクターのボイスが聴ける画面にて、画面のデザインが音楽プレーヤー風になっていました。良いですね! 該当の画面はこちらです! キャラクターの声を聴きたくなるようなデザイン 他のタイトルでもボ…

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

こんにちは、ちょこです! 「シャイニングニキ」の設定の中に現在時刻表示のオン/オフの機能がありました。 該当の画面はこちらです。 この設定ですね。 切り替えると以下のような挙動になります。 ちょっと分かりづらいかもですが、画面右上に時刻表示が出…

「シャイニングニキ」節電モードと表記するより、発熱防止と表記する方が伝わりやすい?

こんにちは、ちょこです! 「シャイニングニキ」のゲーム設定にて、発熱防止機能がありました。 該当の画面はこちらです。 こちらに「発熱防止機能」があります。 機能の効果をどう評価するか? 発熱防止機能と表記している例は珍しいです。 省エネモードと…

「シャイニングニキ」ジャイロ機能を使って双方向のコミュニケーションを構成している

こんにちは、ちょこです! 「シャイニングニキ」のホーム画面にて、端末の傾きとニキのアニメーションが連動するデザインになっていました。 該当の画面はこちらです。 アニメーションにするとこんな感じです。 画面からだと分かりづらいのですが、端末を傾…

「アッシュアームズ-灰燼戦線-」アドベンチャーパートの選択肢の配置が画面の左右に配置されていた

こんにちは、ちょこです! 「アッシュアームズ-灰燼戦線-」アドベンチャーパートの選択肢のデザインが他とは変わったデザインだったので紹介してみます。 アドベンチャーパートをデザインする際の参考になれば幸いです。 該当の画面はこちらです。どん! 選…

「アッシュアームズ-灰燼戦線-」長押しできるところには、それが分かるUIがあると良さそう

こんにちは、ちょこです! 「アッシュアームズ-灰燼戦線-」にて、キャラクターのサムネイルを長押しすると反応がすることが分かるUIが実装されていました。 該当の画面はこちらです! このキャラクターのサムネイルを長押しすると円ゲージが表示され、ゲージ…

「アッシュアームズ-灰燼戦線-」ロード画面に隠されたデザイン

こんにちは!ちょこです! 「アッシュアームズ-灰燼戦線-」のロード画面のビジュアルデザインが、凝っていたのでご紹介します! 該当の画面はこちらです。ロード画面は比較的頻繁に表示されるので情報の見せ方は絞っているものの、かなり凝ったデザインであ…

「アッシュアームズ-灰燼戦線-」背景の見せ方やUIアニメーションを使った情報設計

こんにちは、ちょこです! 「アッシュアームズ-灰燼戦線-」のバトル中の情報整理について特徴的な場面を紹介します。 該当の画面はこちらです。 空と地面が一望できるデザイン 「アッシュアームズ-灰燼戦線-」の戦闘中の画面では地上で戦闘するキャラクター…