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

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

2020-09-01から1ヶ月間の記事一覧

「クローズxWORST~打威鳴舞斗~」アルバム画面のページャーのUIがスクロールできることを仄めかすデザインでした+余談

こんにちは!ちょこです! 今回は「クローズxWORST~打威鳴舞斗~」のアルバム画面を紹介します。 アルバムまたは図鑑とも言われますが、実装されているキャラクターの一覧、及び所持状況が確認できる画面です。ソシャゲの多くはコレクション要素があり、ア…

「クローズxWORST~打威鳴舞斗~」異字体についてヘルプに書いてあったのが衝撃

こんにちは!ちょこです! 今回は異字体について書いてみます。 UIデザインをしていると、異字体の表示について頭を悩ませることがあります。例えば声優さんのお名前で「髙橋」など、環境依存文字が固有名詞に使われている場合です。 画像であれば問題なく指…

「聖闘士星矢 ライジングコスモ」チャットボットが実装されてたので、UIデザイナーとして何を評価軸として実装するのが良いのか考えてみた

こんにちは!ちょこです! 今回は「聖闘士星矢 ライジングコスモ」にて、ヘルプにチャットボットが実装されていたので事例として紹介します。 ヘルプのデザインを考えている方の参考になればと思います。 まず、チャットボットについて簡単にお伝えします。 …

「聖闘士星矢 ライジングコスモ」スクロールすることを仄めかすなら、スクロールする向きに合わせたアニメーションをすると良い話

こんにちは!ちょこです! 今回は「聖闘士星矢 ライジングコスモ」の商店画面のアニメーションが気になったので、なぜ気になったのか書いてみます。 UIのアニメーションを付ける機会がある方、あるいは考える方の参考になれば幸いです。 さて、紹介する商店…

「聖闘士星矢 ライジングコスモ」タイトル起動画面で世界観を表現するテキストが表示されていた。世界観に没入させるための小さな工夫

こんにちは、ちょこです! 今回は「聖闘士星矢 ライジングコスモ」のゲーム起動準備の画面での進行ゲージの上に表示されるテキストについて、ご紹介させていただきます。 ゲームの世界観を遊び心を添えて表現できないか、と悩んでいる方の参考になればと思い…

「ブラックスター -Theater Starless-」楽曲を一時停止して再開した時の手法。一定時間巻き戻る演出がかっこ良かった

こんにちは、ちょこです。 「ブラックスター -Theater Starless-」、通称「ブラスタ」にて、楽曲中に一時停止した後、再度ゲーム中に復帰する際の見せ方が面白かったので紹介します。 音ゲーなど、アクション性が非常に高いゲームの復帰のデザインを考えるの…

「ブラックスター -Theater Starless-」ゲームを開始してから何日かすると、ログインボーナスのボイスが解放されていく。UIとして見たときの有用性を書いてみる

こんにちは、ちょこです。 「ブラックスター -Theater Starless-」、通称「ブラスタ」にはログインボーナスのボイスの種類がたくさんある…! 上図の「ログインボーナス」がそれです。それぞれ解放条件があり、細かく見ていくと… 1日目 2日目 3日目 4日目 5日…

「ブラックスター -Theater Starless-」ゲームUIの情報設計の学習には、なんだかんだで既存のゲームをたくさん触る必要があるという話に落ち着いて

こんにちは、ちょこです。 「ブラックスター -Theater Starless-」、通称「ブラスタ」のストーリーを読むかどうか確認するダイアログで登場人物の情報が表示されるのですが、そこにプレイヤーの有無も表示されているのが興味深いです。 ▲自分自身が表示され…

「ブラックスター -Theater Starless-」自己紹介するまでキャラ名を伏せ字にしていた。そんなわけで周年イベントで誰が誰だかわからん…

こんにちは、ちょこです! 「ブラックスター -Theater Starless-」、通称「ブラスタ」のアドベンチャーパートなのですが、自己紹介されるまでは話者名が伏せ字になっていました。 ▲チュートリアル中はほとんどのキャラが伏字 ▲自己紹介されていないとイベン…

「ブラックスター -Theater Starless-」シリアルコードではなくミニゲーム扱いにしている。世界観に寄せた名称だと感じた

こんにちは、ちょこです! 今回は「ブラックスター -Theater Starless-」、通称「ブラスタ」で機能の名前を付ける際に、システムではなくゲームの世界観に寄せた部分を紹介します。 該当の画面としてはこちらの「ミニゲーム」の画面です。 ミニゲームの中の…

「ヒプノシスマイク-A.R.B-」楽曲画面におけるスキューモーフィズムデザイン。楽曲の進行度に応じてレコードの針が内側に移動する

こんにちは!ちょこです! 「ヒプノシスマイク-A.R.B-」の楽曲プレイ中の画面にて「レコード針で楽曲の進行具合を示しているデザイン」があったので紹介します。 どういうことかと言うと、まず下の画面をよく見て欲しいです。右上にレコードの針のパーツが見…

「ヒプノシスマイク-A.R.B-」の楽曲プレイ中のリリック演出文字がまじかっこいい

こんにちは、ちょこです! 今回は 「ヒプノシスマイク-A.R.B-」の楽曲プレイ中の演出がかっこいい!って話です! 早速ですが演出の一部を紹介します。 こんな感じです。 かっこいい! ゲーム内では「リリック演出」という名前で呼ばれています。 歌詞を動的…

「ヒプノシスマイク-A.R.B-」UIのアンチパターンを放置する6つのデメリット

こんにちは、ちょこです! 引き続き「ヒプノシスマイク-A.R.B-」をプレイしています。今回はUIパーツのアンチパターンと見られる使われ方をされていた箇所があり、気になった次第です。 下の画面なのですが、よく見てください。 ご覧になりましたかね・・・…

「ヒプノシスマイク-A.R.B-」楽曲のお気に入り登録機能は認知コストと手数の軽減に繋がる便利な機能

こんにちは、ちょこです! 引き続き「ヒプノシスマイク-A.R.B-」をプレイしています。 さて、今回は「楽曲選択画面」にある、お気に入り登録機能の利便性について紹介をしたいと思います。 機能について 便利なところ 機能について 上図は楽曲選択画面です。…

「ヒプノシスマイク-A.R.B-」シナリオ選択画面で読了ボーナスを訴求するのではなく、登場キャラ紹介の導線が引かれている件

こんにちは!ちょこです! 今回は「ヒプノシスマイク-A.R.B-」を例にして 「キャラクター重視のコンテンツの場合、シナリオ画面に何を表示するか」について書きます。 情報整理について ヒプマイARBの事例 他タイトルのデザイン事例 登場人物ボタンが表示さ…

「ヒプノシスマイク-A.R.B-」黒背景に赤文字は絶対に避けて欲しい理由

こんにちは!ちょこです! 今回のテーマは「視認性が良くない色の組み合わせについて」です。 過去何度か「色覚多様性」については書いているのですが、黒赤のNGパターンを結構見かけます。ちょっと色を変えるだけでぐっと読みやすくなるので忘れないでいて…

「ヒプノシスマイク-A.R.B-」絞り込み機能に顔グラフィックが表示されていて分かりやすい!広まれ!!

こんにちは!ちょこです! 紹介するタイトルは前回に続き「ヒプノシスマイク-A.R.B-」です! 今回は「キャラの名前だけではなく、顔グラフィックがあるとより分かりやすい」という話です。 どういったデザインかと言うと、キャラクターの絞り込み画面にてキ…

「ヒプノシスマイク-A.R.B-」ユーザー層を広げるための遊び方の幅の提供について

こんにちは!ちょこです! 今回のネタは「ユーザー層を広げるための遊び方の幅の提供について」です。 紹介するタイトルは前回に続き「ヒプノシスマイク-A.R.B-」です! どういう話かというと、スタミナ0~6倍を消費して遊べるモードがあったのでUIの評価軸…

「ヒプノシスマイク-A.R.B-」ロード中にぐるぐる回るレコードをよく見ると細部の拘りが感じられるアニメーション演出だった

こんにちは!ちょこです! 今回のテーマは「世界観への没入のためのビジュアルの作り込みについて」です。 没入感が得られるということは余計なストレスが無いということでもあります。 そういった面でUIにも関係があると考えます。 紹介するタイトルは前回…

「ヒプノシスマイク-A.R.B-」キャラクターを重視したコンテンツにおけるオプション項目について

こんにちは、ちょこです! 今回のテーマは「キャラクターを重視したコンテンツにおけるオプション項目について」です。 紹介するタイトルは「ヒプノシスマイク-A.R.B-」です。 オプション項目は一般的にBGMやSEの音量、通知のオン/オフ切り替えなど様々あり…

「この素晴らしい世界に祝福を!ファンタスティックデイズ」ロード演出めちゃ多い!

こんにちは!ちょこです! 「この素晴らしい世界に祝福を!ファンタスティックデイズ」のロード画面の種類が多いっ!アニメもバリエーションが多かった気がします。 今回はそのバリエーションの一部を紹介します。 1:段組み 1:上から文字が落ちてきて、輪…

「この素晴らしい世界に祝福を!ファンタスティックデイズ」デザインの細部にアニメのネタが散りばめられており、IPを大切にしようとする意志が感じられた件

こんにちは!ちょこです! 「この素晴らしい世界に祝福を!ファンタスティックデイズ」のバトル中に一時停止すると「PAUSE」の文字が妙にデジタルなフォントになっているんですよね…。 この部分ですね。表示するならダイアログの中に表示するだろうし…? こ…

「この素晴らしい世界に祝福を!ファンタスティックデイズ」アドベンチャーパートでもバトルカットインの演出が再生できるようになってる実装が凄い

こんにちは!ちょこです! 「この素晴らしい世界に祝福を!ファンタスティックデイズ」のアドベンチャーパートにて力を入れていると感じたところがあったので紹介します。 該当の演出は以下の演出です。 このように会話中にムービーが挿入される演出が実装さ…

「この素晴らしい世界に祝福を!ファンタスティックデイズ」お知らせ画面に公式Twitterが連携されていました。デザインの参考までに

こんにちは!ちょこです! お知らせ画面のカテゴリで「Twitter」が使用されていました。お知らせで何を伝えるかの事例の参考までにご紹介します。 タイトルは前回に続き「この素晴らしい世界に祝福を!ファンタスティックデイズ」です。 このように「更新情…

「この素晴らしい世界に祝福を!ファンタスティックデイズ」着せ替え演出から学ぶIPらしい演出について

こんにちは!ちょこです! キャラクターの着替え演出の紹介です。過去いくつか紹介してきましたが、キャラのスキン変更ができるゲームの場合ほぼ確実に演出があります。 今回紹介するタイトルは「この素晴らしい世界に祝福を!ファンタスティックデイズ」で…

「この素晴らしい世界に祝福を!ファンタスティックデイズ」タップエフェクトが最高に「このすば」だった件

こんにちは!ちょこです! 今回はIPを手掛ける際の「タップエフェクト」で参考になりそうな事例がありましたので紹介します。 タイトルは「この素晴らしい世界に祝福を!ファンタスティックデイズ」です。 タップエフェクトのデザインもUIデザイナーの範疇か…

「あんさんぶるガールズ!! ~Memories~」AVDパートでひとつ前のセリフに戻れる機能が便利!

こんにちは!ちょこです! アドベンチャーパートで一つ前のセリフに戻る機能の実装事例を紹介します。 今回事例紹介するタイトルは前回に続き「あんさんぶるガールズ!! ~Memories~」です! このゲームのアドベンチャーパートで一つ前のセリフに戻る機能…

「あんさんぶるガールズ!! ~Memories~」上下左右にスクロールできるシナリオ選択画面の操作性が素晴らしい件

こんにちは、ちょこです! 横画面のデザインで、シナリオ選択画面のデザインの参考事例を紹介します。 今回事例紹介するタイトルは「あんさんぶるガールズ!! ~Memories~」です! このタイトルはすでにサービスが終了した「あんさんぶるガールズ!!」の…

「デュエル・マスターズ プレイス」黒地に赤文字は見づらいので避けた方が良い話

こんにちは、ちょこです! 「デュエル・マスターズ プレイス」、通称「デュエプレ」のお知らせ画面で見辛い文字列がありました。 この組み合わせは非常にメジャーで頻出もしています。デザイナーだけではなく開発者の方はアンチパターンとして知っておいて欲…

「デュエル・マスターズ プレイス」同じようなレイアウトにしないことによって、ユーザーが今どこにいるのか分かりやすくしている

こんにちは!ちょこです! 「デュエル・マスターズ プレイス」、通称「デュエプレ」のショップのデザインの工夫が興味深かったので紹介します。 どういう工夫かというと サプライ購入とカード購入でレイアウトを変えている点です。 これだけだと分からないで…