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

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

「ディープインサニティ アサイラム」似たデザインのアイコンが多くあったので整理してみた

こんにちは!ちょこです!

 

このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。

 

今回は「ディープインサニティ アサイラム」の見出しの付け方とアイコンのデザインで気になったことがあったので整理してみました。

 

こちらが目次です。

 

では、早速見ていきます。

 

1:ボタンのラベルと画面見出しが異なる

まず一つ目はボタンのラベルと画面の見出しが異なるケースがありました。
ホーム画面にあるいくつかの小さなボタン群がそれです。

f:id:appgameui:20211118100244p:image

 

こちらですね。アルファベットのラベルが付いています。
アイコンのグラフィックとよくみかけるメニューなのでなんとなく意味は分かるかな、と思います。

  • INFO
  • GIFT
  • SUPPLY
  • FRIEND
  • MENU

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

ただ、「SUPPLY」というメニューはあまり見慣れない気がします。
これをタップすると…

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

こちらの画面に遷移します。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

画面名が左上に書いてありますが「SUPPLY」ではなく「支援物資」と表示されています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

このようにボタンのラベルと画面名が一致していないケースがあります。
もしかすると、当初は日本語を入れようと思ってたけど、漢字だと文字が潰れて読みづらい、という事情もあったのかもしれません。

ただ、今度はラベルと見出しの名前が異なっている問題が起きています。

英語から日本語に翻訳するストレスもありますが、翻訳したとしても遷移先が合っているか分かりづらくなってしまいます。そうなると、元々の見出しの機能が活かされていないことにも繋がります。

 

「ディープインサニティ アサイラム」は日本向けにリリースされており、多くのユーザーは英語を母国語としていません。英語のメニューを採用すると直感的に理解できないというデメリットもあるので、メニューのラベルに英語を採用する場合は身近にある英語を中心に考えてみると良いのかもしれません。

 

 

2:似たアイコンが多い

似たアイコンが多いのも気になる箇所でした。

先ほど紹介したボタンのラベルと画面の見出しが異なるケースだと、アイコンで判断してもらい、文字情報は必ずしも読まなくても良い、という考え方とも言えます。

しかし、 「ディープインサニティ アサイラム」ではアイコンの使い分けも曖昧な部分があります。

 

2-1:「オプション」と「素材」

まずは「オプション」と「素材」のアイコンが似ています。

オプションのアイコンはこちらです。

f:id:appgameui:20211114142623p:image

 

歯車をモチーフとしたアイコンですね。ゲームでは比較的よくあるモチーフかと思います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

続いて「素材」のアイコンです。

f:id:appgameui:20211114142553p:image

 

こちらも歯車のアイコンですね。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

並べると若干の差異はありますが、トリミングの違いだけで、記号としてはほぼ同じものだと見ることができます。

似たアイコンを採用することでユーザーに不要な学習コストを強いているように感じました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

2-2:「メニュー」と「会話ログ」

2つ目に紹介するのはメニューのアイコンと会話ログのアイコンです。

f:id:appgameui:20211114143435p:image

 

メニューのアイコンはこちらです。
これもよく見るデザインであり分かりやすいかと思います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

次に会話ログのアイコンです。

f:id:appgameui:20211114143014p:image

 

先ほど紹介したメニューアイコンとほぼ同じデザインです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

もしかすると、アイコンの横線をメッセージが並ぶ行をイメージしているのかもしれませんが、瞬間的に見た場合、どちらも同じデザインに見えてしまいます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

2-3:「チェックマーク」と「実績」

3つ目に紹介するのはチェックマークと実績のアイコンです。

f:id:appgameui:20211114143503p:image

 

チェックマークはこんな感じですね。一般的なデザインかと思います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

実績アイコンもほぼ同じデザインでした。

f:id:appgameui:20211114143458p:image

 

達成を意味してチェックマークなのかな…

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

並べてみるとこんな感じですね。二重円になったからと言ってあまり印象は変わらないかな…と思います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

あと、スタミナアイコンもぱっと見同じに見えるのも気になりました。
こちらは時計を模しているのですがチェックマークのようにも見えてしまいます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



 

2-4:「倍速」と「移動」

4つ目は倍速と移動のアイコンです。

f:id:appgameui:20211114143522p:image

 

倍速はこんな感じですね。AV機器にも見られるアイコンなので、ゲームをプレイしていないユーザーにも伝わりやすい類のデザインかと思います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

移動のアイコンはこちらですね。

f:id:appgameui:20211114143458p:image

 

矢印が重なるようなデザインになっているので、倍速のアイコンと似たデザインにも見えてしまいます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

余談ですがページ送りも似たデザインでした。
ただ、こちらは文脈でページ送りだと分かるので、そこまで混乱はないかと思います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



2-5:その他いろいろ

他にもいくつかありますが、ここからはダイジェストで記載します。

スキルとアビリティのアイコン。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

プロフィールとアバターのアイコン。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

キャラクターのタイプと挑戦回数、コンテンツのアイコン。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

虫眼鏡アイコンは逆にデザインが不統一でした。
虫眼鏡の向きは統一をする方が学習コストは抑えられるかなと思います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

ひとつひとつなら気にならないかもしれないのですが、ゲーム内にこうも多く散見されると気が散ってしまったり、意味が直感的に分かりづらくなってしまいます。

 

以上です。

アイコンをデザインする際に気を付けたい部分かもしれません。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

© SQUARE ENIX CO., LTD. All Rights Reserved.

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「ディープインサニティ アサイラム」のガイドラインを確認したところ、ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿しても良い旨の文章がありました。

 

【Deep Insanity】ディープインサニティ | SQUARE ENIX

 

主な参照箇所を抜粋します。

利用いただけるもの

ガイドラインに従い利用いただけるもの(以下「利用対象」といいます)は、以下のとおりです。

※但し、以下のものは除きます。

  • コラボレーションイベント等のために、特別に本ソフトに含まれるコンテンツ

 

利用いただける範囲

(1)ゲームプレイの配信を行うことで法人から給与その他の報酬を得ている方:

(2) (1)に該当しない個人の方:

  • 掲載・配信に際して、以下の権利表記を表示してください。
    © SQUARE ENIX CO., LTD. All Rights Reserved.

 

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ