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

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

018_UIパーツ

「アイドリッシュセブン」カルーセルのインジケーターが星型になってて画面のキラキラ度が増す

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「アイドリッシュセブン」から、世界観を取り入れたUIパーツのデザイン…

「NieR Re[in]carnation / ニーア リィンカーネーション」スクロールバーに採用されたマイクロインタラクション

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィ…

「COUNTER: SIDE(カウンターサイド)」サムネイルを長押しすると表示されるリングゲージの端が光っている理由など

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「COUNTER: SIDE(カウンターサイド)」から、サムネイルを長押しした時…

「崩壊3rd」リングゲージUIは長押しすることで操作できることがある、と伝えるための工夫

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「崩壊3rd」から、リングゲージのUIデザインご紹介します。 該当の…

「崩壊3rd」ドロワーのデザインを考えてみた

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「崩壊3rd」から、ドロワーのデザインと開閉の挙動についてご紹介し…

「ポケモンユナイト」ゲーム設定に色覚多様性対応があった、オンにすると自キャラのHPゲージが目立ちやすくなる

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「ポケモンユナイト」から、ゲーム設定の中に色覚サポートがある事…

「ポケモンユナイト」ロードの進捗状況に合わせて、プログレスバーの上にいるピカチュウも進んでいくエンタメ感あるデザイン

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「ポケモンユナイト」から、プログレスバーのデザインを紹介します…

「ガーディアンテイルズ」敵を倒した時のHPゲージの消滅アニメーションの紹介

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「ガーディアンテイルズ」通称「ガデテル」から、敵を倒した時のゲ…

「ドラゴンクエストけしケシ!」消しゴムモチーフだから進行度合いが消えるデザインでも成立している!

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「ドラゴンクエストけしケシ!」通称「DQけしケシ」のロード中の進…

「オクトパストラベラー 大陸の覇者」長押しするとゲージが表示されるので、何かアクションがあることが分かりやすい

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「オクトパストラベラー 大陸の覇者」通称「オクトラ大陸の覇者」の…

「ディープインサニティ アサイラム」長押しするとリングゲージが表示されるので、長押し操作に気付きやすい

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ディープインサニティ アサイラム」の長押しをすると表示されるリ…

「ドラッグ王子とマトリ姫」チェックマークのデザインがハートマークになっていて華やか

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラッグ王子とマトリ姫」、通称「マトリ姫」のシナリオのフィル…

「ワールドエンドヒーローズ」リングゲージがあることで長押しに必要な時間が分かるデザインになっていました

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ワールドエンドヒーローズ」、通称「ワヒロ」のリングゲージのUI…

「あんさんぶるスターズ!!Music」メニューアイコンとドロワーのアイコンが一体となったデザインになっていました

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ!!Music」、通称「あんスタ」のアドベンチ…

「ドラゴンクエスト ダイの大冒険 -魂の絆-」サムネイルを長押しするとリングゲージが表示されて分かりやすい

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラゴンクエスト ダイの大冒険 -魂の絆-」、通称「魂の絆」で採…

「永遠の7日-終わりなき始まり」ゲージの境界線に白い筋を表示して視線誘導をし、情報量の多い画面でも見やすくしていた

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」、通称「とわなな」のゲージのデザ…

「ロマンシング サガ リ・ユニバース」ちょっと特殊なドロワーメニューのデザイン紹介

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ロマンシング サガ リ・ユニバース」、通称「ロマサガRS」のUIパー…

「ブラック・サージナイト」縦長のスライダーを採用している理由は手数の省略の為?

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ブラック・サージナイト」のゲーム設定画面にあるスライダーのUIを…

「極夜大陸:メテオの彼方」タブボタンは上にあるのが当たり前?下タブの方が押しやすい

こんにちは、ちょこです! このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「極夜大陸:メテオの彼方」の下タブのデザインについて考えてみま…

「極夜大陸:メテオの彼方」HPゲージが斜めだった時の減少アニメーション

こんにちは、ちょこです。 このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「極夜大陸:メテオの彼方」のHPゲージがナナメであった時の減少ア…

「パニシング:グレイレイヴン」敵のHPゲージを重ねるデザインは画面に動きが出るのでアクション系のゲームに向いてると思う

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」の敵HPゲージのデザインについて考えてみました。 敵のHPゲージのデザインを検討する際の参考になれば幸いです。 該当の画面は以下です。 分かりやすいようにHPゲージを拡大してみます。HPゲ…

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

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

「魂器学院」HPゲージを重ねるデザインについて考察

こんにちは!ちょこです! 今回は「魂器学院」のボスのHPゲージのデザインについて語ってみたいと思います。 該当の画面は以下です。 HPゲージはこちらですね。 「×8」というのは、HPゲージが8本分あるということを示しています。96%というのは「現在HP/最…

「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」トグルボタンのオン状態は右か左か

こんにちは!ちょこです! 「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」にて、トグルボタンの挙動が気になりました。 該当の画面はこちらです。 トグルボタンはこの画面の下部にある「オート周回」のラベルのところに使われていました。 …

「三国志名将伝」見た目がチェックボックスなのに挙動がラジオボックスのアンチパターンデザインがあった件

こんにちは、ちょこです。 「三国志名将伝」をプレイしていたら、アンチパターンがあったので事例として紹介します。該当の画面はこちらです。 挙動としてはこのような動作をします。チェックボックスは複数の項目を選択できるUIパーツですが、見ての通り「…

「ハムスターコレクション」スライドバーがありえないくらい可愛い

こんにちは、ちょこです! 「ハムスターコレクション」のスライダーバーがありえないくらい かわいい…!! 該当の画面はこちらです。 こちらが「スライドバー」です。「スライダー」とも言ったりしますね。 動くともっとかわいいです! ほんと、なんでここだ…

「食物語」下地を暗くしてアイコンを明るく描くと、ボタンと認識されやすいよ!

こんにちは、ちょこです。 「食物語」のUIパーツの中でドロワーがありました。デザインの手法としてはスキューモーフィズムです。 デザインの特徴を実例を交えて紹介してみたいと思います。 ドロワーのモチーフとして巻物がよく使われていることを記事にしま…

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

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

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

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

「キャラバンストーリーズ」ドロワーで情報量をコントロールする事例の紹介

こんにちは!ちょこです! UIのパーツの中に「ドロワー」というパーツがあるのですが、ちょっと変わったドロワーがあったので、事例として紹介させてください。 「言葉は知ってるけど使いどころが分からない」 「どこで使っているのか知りたい」 など、悩ん…