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

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

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

「スタースマッシュ」スタンプを送るとボイスが流れるけど、スタンプに文字が含まれていないので送信するまで何のメッセージが伝わるのか分からない

こんにちは!ちょこです! 「スタースマッシュ」のスタンプ機能のデザインがちょっと変わったアンチパターンであったので事例として共有してみます。 該当の機能が使える画面はこちらです。 分かりやすいようにスタンプ部分を大きくします。見て分かる通り、…

「食物語」でもアズレン同様にオート戦闘機能を有効にしようとした際に注意喚起が表示されるデザインでした

こんにちは!ちょこです! 「食物語」でオートバトルにした時に表示されるヒント画像が気になりました。 該当の画像はこちらです。 画像の中に「オート機能を使うには一定のリスクがある」という文字と、キャラクターが倒れている画像が表示されています。 …

「食物語」ブロックするユーザーがいない時の表現が世界観に沿った表現になっていた話

こんにちは、ちょこです! 「食物語」にて、ブロックするユーザーがいなかった場合のテキストが世界観に沿っていて感動しました。 該当の画面はこちらです。 文字小さいですね。大きくします。 このように「若さまを煩わす人がいません」と表示されています…

「ファイナルギア」ホームボタンでメインコンテンツのボタンが縦に並べてあって、指の可動域的に押しやすいレイアウトだと思った

こんにちは、ちょこです。 「ファイナルギア」のボタンが押しやすい配置になっていました。 早速見ていきます! 具体的にはこちらのホーム画面です。 通常、画面下部に並んで配置されがちなメインコンテンツのボタンが画面右側に配置されています。 ここの部…

「スタースマッシュ」アドベンチャーパートが漫画だった。メリットとデメリットを考えてみた

こんにちは!ちょこです! 「スタースマッシュ」でストーリーの展開がいわゆるアドベンチャーパートではなく、漫画で進行するデザインになっていました。 これについてUIの視点から考えてみたいと思います。 以下が該当の画面です。 このようにストーリー…

「プロジェクトセカイ カラフルステージ! feat.初音ミク」エラー文にキャラグラフィックを使うと、開発側の温度感を伝えられるという話

こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」でバーチャルライブの接続上限になった時の表示を紹介します。 エラー文にキャラクターのグラフィックを利用すると、開発側の温度感も伝わるので良いデザインだと思いまし…

「ファイナルギア」お知らせ画面の新しいメンタルモデルが出来てきてる…?

こんにちは、ちょこです! 「ファイナルギア」のお知らせ画面と同じようなデザインのフォーマットを最近よく見るようになったので、もうちょっとちゃんと見ようかと思います。 「ファイナルギア」のお知らせ画面はこちらです。 大きな特徴としては… お知らせ…

「ファイナルギア」世界観を作り込む為にデザインされたUIパーツの例

こんにちは!ちょこです! 「ファイナルギア」のUIパーツの中に世界観の作り込みが感じられるグラフィックがありました。 世界観を表現する際にどういった部分に気を付けてUIパーツをデザインしているのか、考える際の参考になりそうだと感じたので、紹介し…

「ファイナルギア」エフェクトや演出を作り込むと世界観の没入感に繋がる

こんにちは、ちょこです! 「ファイナルギア」のバトル中の会話UIがコクピットで通信してる様子を表現していました! 没入感や演出の参考になると感じたので紹介します。 該当の画面はこちらです! バトル中に会話イベントが発生すると、左上に(イベントに…

「ファイナルギア」バトル結果画面が時間経過で自動で進行するデザインになってて便利!

こんにちは、ちょこです! 「ファイナルギア」で時間経過で自動的に画面が遷移していく機能が実装されていました。 意外と見たことないかも…? 該当の画面はいくつかありますが、一例として以下の画面をあげます。 こちらはバトル結果の画面です。 画面右下…

「ファイナルギア」設定画面にあるベゼルレスUIって何?

こんにちは、ちょこです! 「ファイナルギア」の設定画面に「ベゼルレスデザインUI最適化」という 見慣れない項目がありました。 ん~…初めて見ました。 相変わらず中国のゲームはオプションが細かい…! ベゼルレスデザインUIの設定をスライダーで調整して…

「ファイナルギア」バッテリー残量と現在時刻の表示のさせ方がスキューモーフィズムだった

こんにちは、ちょこです! 「ファイナルギア」のホーム画面にバッテリーの残量と現在時刻が表示されていました。 それ自体は珍しくはないのですが、表示されている場所とデザインの思想が珍しかったので紹介します。 該当の画面はこちらです。 ホーム画面は…

「ファイナルギア」水滴エフェクトを実装する際はオンオフの設定があると良さそう

こんにちは、ちょこです! 「ファイナルギア」にて、バトルフィールドの天気が雨であった場合、画面に水滴が付き、流れていきます! かっこいい! ▲バトル中に雨が降ってたら水滴が付きます 動画で見るとこんな感じです! ん~、解像度粗くて分かりづらいで…

「プラネット・コマンダー」チャットに書き込む際の注意文の圧が強すぎ

こんにちは、ちょこです! 「プラネット・コマンダー」のチャット画面に、チャット機能を利用するにあたっての注意事項が結構強めに書かれていました。 注意事項というより警告文に近く、驚いたので紹介します。 該当画面はこちらです。 分かりやすくアップ…

「プラネット・コマンダー」文字は読めるサイズにしてほしい

こんにちは!ちょこです! 「プラネット・コマンダー」でめちゃくちゃ小さい文字があったので、アンチパターンとして紹介します。 該当の文字があったのはこちらの画面です。 分かりやすくトリミングすると、この箇所です。 うぅ…視力検査の文字みたいなサイ…

「神無月」CVが未実装のままリリースされた時、どう表記するのが良いか。UIデザイナーにできること

こんにちは、ちょこです! コロナの影響などで、CVが未実装のままキャラクターがリリースされた場合、UIデザイナーとしてどう表記するのが良いのか…。 以前なら考えたことはなかったのですが、実際にそういうケースがありました。 「神無月」のガチャ演…

「神無月」スタンプ作成機能があるのはユーザー間のコミュニケーションの促進を狙っている

こんにちは!ちょこです! 「神無月」に自分でスタンプが作れる機能がありました。 スタンプ機能があるだけでも凝っている部類なのに、自分でスタンプが作れる機能まであるとは…。 先日紹介した「フィギュア機能」や「ストーリー中にコメントを流せる機能」…

「神無月」スクロールに合わせて歯車が回転するUI

こんにちは、ちょこです! 「神無月」で歯車のUIパーツがあるのですが、スクロールに合わせて回転するデザインになっていました! スクロールするとこのように動きます! あ、ダメだ。全然分からん。 拡大しました! スクロールする向きに合わせて歯車が動く…

「神無月」フィギュア機能はキャラを魅力的に見せる機能なのでそれは良いと思うけど…

こんにちは、ちょこです! 「神無月」にて『フィギュア』という機能がありました。見慣れない…というか、かなりマイナーな機能なのでUIの価値として考えてみます。 フィギュア機能のUIとしての価値は「キャラクターを魅力的に見せること」だと考えます。 魅…

「神無月」キャラ獲得演出。ローコストっぽいけど飛び出す演出によってZ軸方向に情報が増え、リッチに見える

こんにちは!ちょこです! 「神無月」のガチャのキャラの獲得演出の見せ方が良かったです! 限られたリソースの中で工夫されていたので紹介します! まず、獲得演出を全体で見るとこんな感じです。 まずカードを見せて… 次にキャライラストを見せます。 3Dの…

「神無月」エンプティステートの紹介(13回目)

こんにちは!ちょこです! エンプティステートをこつこつ紹介して13回目。少しずつ、システム的なダイアログではなく、キャラクターなどのグラフィックを表示するゲームも増えてきた気がしないでもない。 もっと一般的になって欲しい…! 「神無月」でもエン…

「神無月」アドベンチャーパート中にニコニコみたいなコメント流す機能が実装されてて驚きました

こんにちは!ちょこです! 「神無月」の会話シーンにて、ニコニコ動画のようなコメントが流れる機能が実装されていました。 動きで見るとこんな感じです! この機能が実際されているアプリは久々に見たので驚きました。 特許絡みで実装できないのかな、と思…

「三国 -IKUSA-」既存のメンタルモデルと違うお知らせ画面のデザインがされていました

こんにちは!ちょこです! 「三国 -IKUSA-」のお知らせ画面のデザインが興味深かったので紹介です。 挙動としてはこんな感じです。 左側のタブのような場所をタップすると、右側に本文がプレビューされます。 この挙動をするお知らせ画面は初めて見ました。 …

「三国 -IKUSA-」巻物の形をしたUIって大体ドロワー

こんにちは!ちょこです! 「三国 -IKUSA-」にて画面下部のメニューがドロワーになっていました。 中国のアプリってフッターがこういった挙動になってること多いですよね。なんでだろう…。 挙動としてはこんな感じです。 このドロワーのデザインは現実世界の…

「鉄腕アトム:ブリックブレーカー」画面から指を離した時に表示されるUIって斬新な発想だと思った

こんにちは!ちょこです! 「鉄腕アトム:ブリックブレーカー」にて、画面から指を離すことで表示されるUIがありました。 画面上の挙動だとこんな感じです。 画面から指を離すと、画面がスローモーションになり、使用可能なアイテムがポップアップします。 こ…

「プロジェクトセカイ カラフルステージ! feat.初音ミク」MVP獲得演出のUIアニメーションがMVPなので紹介させてください!

こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」のマルチプレイの結果画面にて、UIアニメーションを使って上手に視線誘導されている箇所がありました! デザインとして、凄く良いと感じたので紹介します! 場面としては…

「プロジェクトセカイ カラフルステージ! feat.初音ミク」楽曲開始演出のUIアニメーションが視線誘導と情報の優先度を上手く使われている

こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」の楽曲開始演出のUIアニメーションが視線誘導と情報の優先度を上手く使っているな、と感じました。 こちらのアニメーションです。 これもアニメーションを利用して視線…

「プロジェクトセカイ カラフルステージ! feat.初音ミク」バーチャルライブの臨場感が凄かった!

こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」のバーチャルライブに感動しました! これすごいです! ビジュアルや没入感も素晴らしいのですが、ここではUIデザインについて書いてみます。 バーチャルライブとは? …

「プロジェクトセカイ カラフルステージ! feat.初音ミク」アニメーションを利用することにより、段階的開示を取り入れている

こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」のUIアニメーションで上手く視線誘導している箇所がありました! 情報量の多い画面のデザインをする際の参考になれば幸いです。 該当画面はこちらのホーム画面の初心者ミ…

「プロジェクトセカイ カラフルステージ! feat.初音ミク」スタミナ一括消費に似た機能が実装されていた。より利便性が高められていた

こんにちは、ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」にて、ライフボーナス消費設定機能というものがありました。 これ、どういう機能かと言うと、以前「ヒプノシスマイク-A.R.B-」で紹介したスタミナを一括消費する機能に近…