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

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

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

「アークナイツ」オプションにあるUI調整って何のための機能?やっぱり配信を意識している?

こんにちは、ちょこです。 「アークナイツ」のオプション画面でUI調整という変わった項目がありました。 このオプションを変更すると、こんな感じで横幅が狭くなり、一部のUIの位置が変わります。 ▲ぐいーんと変わります ゲーム中の画面を比較してみましたの…

「アークナイツ」HPゲージで顔が隠れるのはアリやナシや

こんにちは、ちょこです。 「アークナイツ」のバトル中の画面ですが、キャラの顔に情報が被るのが気になりました。 ▲目線が入っているみたいで気になる 同じタワーディフェンスの城プロはこんな感じ。 ん~…正直ビジュアル的にはめっちゃ気になるけど、実際…

「アークナイツ」会話シーンの尖がった仕様は世界観の没入の為?気になったので考察してみました

こんにちは、ちょこです。 「アークナイツ」の会話シーンのUIが気になったので、特徴を書いてみます。 1:ログが見れない 超意外…!なんでこの機能がないんだろう…。 ここまで会話シーンが凝られていてログが見れないゲームってちょっと記憶にないです。 意…

「アークナイツ」既存のメンタルモデルをリセットし、世界観を前面に出した図鑑画面

こんにちは、ちょこです。 「アークナイツ」の図鑑画面のデザインが気になりました。 まず「図鑑画面」と聞いてどういった画面を想像しますか? キャラクターの情報が五十音順に並ぶリストのようなデザインでしょうか?それともアルバムのようにサムネイルが…

「Auto Chess」三択のトグルボタンって初めて見たけどアリなのか…?

こんにちは、ちょこです。 「Auto Chess」のUIで変わったトグルが使われてたので紹介してみます。 三択トグル…? 設定画面にある… …このUI。このデザインを見て瞬間的にトグルであると認識したのですが、よくよく考えて三択のトグルって見たことないんだけど…

「Auto Chess」お知らせ画面。文字が小さいっ!

こんにちは、ちょこです。 「Auto Chess」のお知らせ画面に情報がなく見づらく感じました。どのような画面かというと、以下のような画面です。 ▲お知らせ画面 絵が大きいっ! ここでユーザーの判断や行動の手掛かりになる情報はこの部分だけです。 ▲ここだけ…

「Auto Chess」お知らせに簡体字仕様のフォントが使われているので、ぜひ日本語仕様のフォントを…

こんにちは、ちょこです。 「Auto Chess」のお知らせに簡体字が使われているのが気になりました。 ▲お知らせ画面 簡体字は多くの中国語圏で使われている基本的な文字です。 日本語圏に対してこの「簡体字」のフォントが使われています。読みづらさはあります…

「Auto Chess」自動進行機能の波がついにオートチェスにまで…アクティブユーザーを増やす意図があるのかな

こんにちは、ちょこです。 「Auto Chess」のバトル画面のUIが大きく変わっていました。その中で自動戦闘の機能が追加されていたのに気づきました。 改修前後の比較 最初に改修前を紹介します。 ▲変更前 茶系で暗いトーンですね。中国系のファンタジーの世界…

「Auto Chess」アンチパターンがあるとアプリに対する信頼性が下がる気がするのは私だけ?

こんにちは、ちょこです。 「Auto Chess」でフィルタのレイアウトで気になるところがありました。 グルーピングが出来ていない 気になるところですが、大きなところで言うとグルーピングです。 この個別のフィルタは以下のようなグループになっているのです…

「Auto Chess」色覚対応が必要に感じる理由をC型(多数派の色の見え方)の人にも実感してほしい事例を集めてみました

こんにちは、ちょこです。 「Auto Chess」に色覚対応のオプション設定が入っていたので、そういったリテラシーがあるのかと期待したのですが残念ながらそんなことなかった…。 一部ですが、文字がめっちゃ読みづらかったです… 1:ユニット詳細画面での事例 上…

「永遠の七日」その選択肢が選ばれている割合を表示する機能の紹介

こんにちは、ちょこです。 「永遠の七日」で他のユーザー達が選択した選択肢が見れる仕様になっていたのが興味深かったです。 こんな感じで選択肢が表示され、 右上にある「ヒント」のボタンを選ぶと… このように他のユーザーが選んだ選択肢の割合が表示され…

「永遠の七日」図鑑画面に遷移する時、手持ちのキャラのグラフィックが表示される

こんにちは、ちょこです。 「永遠の七日」の図鑑画面に遷移する演出が特徴的でしたのでご紹介させていただきます。 ここから遷移して… この画面が挿入され… 画面遷移が完了します。 流れで見るとこんな感じです。 イージングの詰めと、演出に奥行きがあると…

「永遠の七日」画面に表示される情報が洗練され、迷わないUIになっていた

こんにちは、ちょこです。 「永遠の七日」のホーム画面のUIがかなりシンプルで特徴的でしたのでご紹介させていただきます。 やることを絞っている 「永遠の七日」はかなり複雑なスキームを持っているゲームなのですが、表示する情報を絞っているので迷いま…

「永遠の七日」データダウンロード中にアンケート機能が利用できる実装でした

こんにちは、ちょこです。 「永遠の七日」でデータDL中にアンケート機能が表示されたので実装事例として紹介します。 手紙風でかわいいですね。フォントも丸くてかわいいくて開発者のこだわりが感じられます。 ユーザーの反応を知ることはより良いUIを作るた…

「仮面ライダー シティウォーズ」ブラウン管の歪みと走査線の表現がレトロ感を煽る

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」TVのブラウン管っぽいデザインがかっこいいな、と思いました。 走査線とか比率とか、歪みとかがレトロ感あって良いですね。 よく見たら歪ませてなくて、上から黒い板乗せてるだけだったー。 とはい…

「仮面ライダー シティウォーズ」画面をかっこよくすることと、項目に英語を使うことは結び付けない方が良いです

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のメニューで英語が使われているのが気になりました。 むやみにメニュー内に英語を使わない方が良い 無闇に英語は使わない方が良いです。単純に読めないので。 「いや、読めるじゃん」って思う方が…

ブログ1年目を振り返って

こんにちは、ちょこです。 おかげさまで去る2020/1/12をもちまして、ブログを1年継続できました。(気付いたら過ぎてました)最初の1年目を振り返ってみます。 ▲プレイしたゲーム ブログを始めてみて良かったこと このブログの目指すところ やらなくても良い…

「仮面ライダー シティウォーズ」訴求画像が気になりました。小さい画像に情報詰め過ぎちゃう問題

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のホーム画面の訴求画像が本当に役割を果たせているのか気になりました。 訴求画像の役割を果たせているのか? 左上に訴求画像があるのですが、潰れて見えません… 拡大表示するとこんな感じです。 …

「仮面ライダー シティウォーズ」敵のアイコンがショッカーだった。IPを活かしたデザインだと感じました

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」にてIPらしいデザインがあったので紹介します。 敵のマークがショッカー 敵の数を示すアイコンがショッカーをモチーフにデザインされていました。 ▲画面上部に表示されているアイコン アイコンはIP…

「仮面ライダー シティウォーズ」年齢確認画面が気になったので他タイトルと比較してみた。そしたら全部フォーマット違ってた。

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」からバッドUIなデザインがあったのが気になりました。 どんなUIだったか 画面のデザインとしては以下のようなデザインでした。いわゆる課金画面の前に表示される年齢確認の画面です。 枠内に生年月…

「仮面ライダー シティウォーズ」プレゼントボタンと一括受け取りボタンが左側にあり、他のゲームの位置関係を調べてみました。

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のプレゼントの一括受け取りボタンが左側なのが気になりました。 ▲ひだりにある 理由としては、過去プレイしたゲームには右側にあるのが多くあったので、違和感を感じています。 左側に配置されて…

「仮面ライダー シティウォーズ」ドロワーのUIを採用する時に注意したいこと

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のホーム画面にある、メニューボタンのデザインと挙動が気になりました。 注意したいこととしては 挙動が(ある程度)推測できる見た目にする です。以下、詳細と解決案の提案を書いてみます。 どん…

「ガール・カフェ・ガン」フィルタ機能のデザインがとても分かりやすかった。色覚多様性にも対応できているデザインは珍しい

こんにちは、ちょこです。 「ガール・カフェ・ガン」のフィルタ機能が良かったので紹介させてください。 色覚多様性対応もバッチリ どこが良かったのか、ですが「色覚多様性への配慮が出来ている」という部分です。属性の色だけでなく文字が書いてあるデザイ…

「ガール・カフェ・ガン」会話シーンのホログラムの表現に差分があった。新しいUXに繋がるヒントかも

こんにちは、ちょこです。 「ガール・カフェ・ガン」にてアドベンチャーパートの演出が凝っていました。 ホログラムの演出に差異が… 以下の二つを比べると、ホログラムの乱れに差があることが分かるかと思います。 こんな感じ。 乱れ方が全然違いますよね。 …

「ガール・カフェ・ガン」数字は進んでいるのにロード画面のプログレスバーが全然進まなくてイライラしてた話

こんにちは、ちょこです。 「ガール・カフェ・ガン」のデータダウンロード画面ですが数字とゲージを合ってないように見えるんですよね… 進捗率を計算してみた 数字をベースに進捗率を計算してみました。 進捗を計算すると12.3%くらいでした。 10等分してみ…

「ガール・カフェ・ガン」年末にかけてホーム画面やガチャ演出のデザインが変わっていた

こんにちは、ちょこです。 「ガール・カフェ・ガン」のデザインですが、ホーム画面だけでなくガチャ演出にも季節感が取り入れられていました。 ホーム画面 ▲通常時 ▲年末デザイン 年末の方は雪の結晶や星の装飾などが追加されていますね。 サンタ帽子とか、 …

「ガール・カフェ・ガン」今まで紹介してきたゲームのエンプティステートと一緒に紹介してみます。

こんにちは、ちょこです。 「ガール・カフェ・ガン」でエンプティステートがあったので紹介してみます。 (エンプティステートとは情報が空であることを示すUIです) ▲フレンドがいないことを示す画面 ▲ブロックしている人がいないことを示す画面 ▲友達申請し…

「ガール・カフェ・ガン」見落とされがちがサムネイルのデザイン。ガルカフェのデザインはスッキリしている

こんにちは、ちょこです。 「ガール・カフェ・ガン」のキャラクターのサムネイルのデザインと種類について考えてみました。 リストに使われるサムネイル こちらはキャラ一覧などのリストに使われている画像です。見た限り一番小さいサムネイルです。 1枚のサ…

「ガール・カフェ・ガン」戦闘敗北時、強くなるための導線が用意されている。ユーザーを回遊させるための導線を設置する工夫

こんにちは、ちょこです。 「ガール・カフェ・ガン」にて戦闘敗北した時の導線を紹介します。 敗北の導線が丁寧 戦闘に敗北した時にいくつか導線が表示されるのですが、表示される導線が「クリアするために出来ること」という導線ばかりでとても親切だと感じ…

「ガール・カフェ・ガン」バトル中のボタンの位置やサイズが変えられる機能の紹介。ボタンサイズの可変機能は音ゲーのノーツサイズを調整する機能に流用できそう。

こんにちは、ちょこです。 「ガール・カフェ・ガン」でUIのレイアウトをカスタムする機能を見かけました。 この機能、久々に見ました。ドールズオーダー以来? 「ドールズオーダー」あまり見ないレイアウトカスタム機能について語る どういうものかというと…