アイコンを使ってUIを見やすく

こんにちは。Annulus Gamesです。

今回の記事はアイコンについて。
基本的に、ゲームのUIは情報量が多くなりがちです。アクションやSTGなどのゲームであれば比較的少ないですが、ソシャゲやシミュレーション、ストラテジーなどのゲームでは、膨大な量の情報を画面に表示する必要が出てきます。

そのため、ユーザーがゲームの内容を理解しやすいように、出来るだけ見やすくわかりやすいUIを作っていく必要があります。

この記事では、アイコンを効果的に使用して見やすいUIを作る方法を説明していきたいと思います。

アイコン+テキスト

まずはテキストにアイコンを組み合わせるパターンから見ていきましょう。

例えば、ゲーム内にGoldという通貨(単位はG)があったとします。
それを文字だけで表示すると、こんな感じです。

特にカッコよくもないですが、そこまで見づらいというほどでもないでしょう。むしろ、これだけ見ればアイコンは不要と感じるかもしれません。

では、さらにElixirとCrystalという通貨を追加してみましょう。これらは特に単位を持たないため、判別のために数値の前にラベルを表示するようにします。

種類が3つに増えると、パッと見ただけではどれがいくつあるかがわかりにくいですよね。これがさらに10個以上にまで増えていけば、もはや何が何だかわからなくなってしまいます。

そこでアイコンの出番です。これらのラベルをアイコンに置き換えてみましょう。

上のものに比べてかなり見やすくなったのではないでしょうか。

このように、テキストと併用して効果的にアイコンを用いることで、ユーザーが情報を認識するまでの時間を短縮し、より見やすいUIを作ることができます。

また、アイコンを使用する方が、文字だけで表示するよりもシンプルで洗練されている印象を与えます。文字だけのものと比べてみると、明らかにアイコンがあった方がカッコよく感じるでしょう。

見た目も機能性も向上させることのできるアイコン。こんな便利なものを使わない手はありません。
アイコンがあった方が見やすそうだな、と思ったらどんどん使っていきましょう。

アイコン+ボタン

アイコンを用いる手法は、ボタンのデザインにも応用することができます。

下のボタンを見てください。

ポーズ画面にありがちなボタンの並びです。

見づらいというほどでもありませんが、パッと見ただけではResumeとRetryの判別がつきにくく、間違って押してしまうことも考えられます。

また、そもそもResumeという単語自体、日本人にはあまり馴染みのないものなので、意味を理解してもらえない可能性もあります。

そこで、テキストの横にアイコンを追加してみます。

どうでしょうか。アイコンがあれば、ResumeとRetryを見間違えることもなく、また英単語の意味がわからなくとも、アイコンから何となく意味を察することができるようになりました。

...実はこれ、過去に私がやらかした案件だったりもします。

これは私が作った「Mini Blaster」というゲームのポーズ画面なのですが...

この画面、見ての通りResumeとRetryの判別がつきにくく、隣に配置されていることもあって、間違って押してしまう人が続出しました。作者である私が時々押し間違えるくらいなのですから、プレイヤーが間違えないはずがありません。

そのため、後に作った「Recoil Gunner」では、ボタンの横にアイコンを表示するようにしました。また、ResumeとRetryの間にConfigを挟むことでボタンの距離を離し、押し間違えが起こりにくいようにしています。

アイコンでローカライズの手間を省く

さらに、アイコンを使うメリットとして「ローカライズの手間が省ける」というものがあります。

先ほどのポーズボタンの例で言うと、もし文字だけでポーズボタンを表現する場合、各言語ごとにテキストを変更する必要に迫られます。

ゲームには膨大な量のボタンが存在することがほとんどですから、全てのボタンのテキストをローカライズするのは非常に大変な作業になります。

そこでアイコンの出番です。この「再開」のボタンを、文字を使わずにアイコンを使って表現してみます。

このようにアイコンを使えば、一切文字を使うことなくユーザーに意図を伝えることができます。このようなデザインであれば言語が変わっても変更を加える必要がなく、ローカライズの負担を減らすことができます。

海外のユーザーを取り込むためにも、多言語対応は非常に大切です。できるだけ少ない労力でローカライズを行うためにも、可能な限りアイコンを使ってテキストの量を減らすようにしましょう。

アセット紹介

とはいえ、大量のアイコンを用意するのは大変ですよね。
そこで今回も、役立ちそうなアセットやサイトを紹介していきます。

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

Googleが作成した「Material」のアイコンフォント。1000以上の高品質なアイコンがApache License 2.0で公開されています。

シンプルでモダンなUIのアセット。アニメーション付きのアイコンやスライダーなど、様々なUIのセットが含まれています。

まとめ

・アイコンを使ってUIを見やすくシンプルに

・テキストと組み合わせて意味を分かりやすく

・文字を使わずアイコンを使ってローカライズの手間を省く

アイコンはUIを作っていく上で非常に重要な要素の一つです。カッコ良くて見やすいUIを作るためにも、使えるところにはガンガン使っていきましょう。