効果的なゲームUIをデザインするための基礎ガイド｜役割やポイント、作り方などを解説

UIとは「ユーザーインターフェース（User Interface）」の略称で、製品・サービスとユーザーの接点となる部分を指します。

ゲームにおけるUIは、プレイ画面やボタン、アイコン、マップ、体力ゲージ、テキストなど、プレイヤーが情報を得たり操作したりする部分となります。

それらのレイアウトやグラフィック、アニメーションを最適化することで、プレイヤーのゲームプレイを快適なものにすることがUIデザインの目的です。

ゲームUIとよく一緒に語られるのが、ゲームUXです。

UXとは「ユーザーエクスペリエンス（User eXperience）」の略称で、ユーザーが製品・サービスを通して得られる体験のことを指します。

ゲームにおけるUXは、プレイヤーがゲームで遊ぶことで楽しんだり、「面白い」「買ってよかった」「また遊びたい」などと感じたりすることが該当します。

狙った感情をプレイヤーに抱いてもらえるように、シナリオやストーリー・ゲームサイクルなどを通じ、質の高いUXを設計する必要があります。

「ゲームUI」と「ゲームUX」の2つの意味をおさらいすると、下記の通りです。

• ゲームUI：プレイヤーとゲームの接点
• ゲームUX：プレイヤーがゲームで得られる体験

UXの質を高めるためには使いやすいUIが必須となります。

例えば、バトル画面や操作がわかりやすいUIであれば、バトル本来の面白さを体感してもらいやすくなります。しかし、操作感が悪いとバトルによる臨場感や達成感をさまたげ、UXの評価を下げてしまうでしょう。

もちろん、UIさえ良ければ良いUXになるとは限らず、優れたUXを設計するためにはゲームの企画自体が魅力的なものでなければいけません。

とはいえ、UIはUXの質を左右する大きな要素となるため、「このUIを通してプレイヤーはどのような体験（UX）をするか？」という部分までを視野に入れて考えることが大切です。

ゲームのUIは、その他の一般的なサービス・製品のUIと比較すると、よりインタラクティブ性が高くユーザーの感情を揺さぶりやすいデザインとなっています。

（インタラクティブ： 「対話型」や「相互に作用する」といった意味で、一方的に情報を提供するのではなく、双方向でのやり取りができることを指す）

まず、一般的なサービス・製品におけるUIの例を挙げます。

• 通販サイト：欲しい商品が探しやすい・買いやすいような配置や、カテゴリ分け・おすすめ商品の表示などで購買意欲をあおる設計
• カーナビ：的確に目的地に到着できるよう、見やすくシンプルに最適なルートを提示する設計

いずれも、ユーザーの目的に応じて無駄のない行動ルートを提供するよう、機能性や使いやすさを重視したデザインが求められます。
 

一方、ゲームにおけるUIには以下の特徴があります。

• 特有の操作を活かした設計：コントローラーなどの入力デバイスでのボタン対応・振動、モバイルゲームであればタップ・スライド・ドラッグ・プルなどにより、ユニークな操作感を提供
• ユーザーの感情を動かす仕掛け：より印象的な動きや画面遷移・ビジュアルにより、ワクワク感や達成感のほか、あえて緊張感や適度なストレスを与える場合も
• ガイドやチュートリアルの提供：ユーザーがゲームの世界に入り込みながら、操作や方向性を理解できる仕組み

ゲームUIの場合は、ユーザーを惹きつけ飽きさせないために、より体験（UX）を重視したデザインが求められます。

ゲームにおけるUIデザインには、さまざまな役割があります。
具体的には、以下の通りです。

ゲームUIデザインには、ユーザーに適切かつタイムリーに情報を伝達する役割があります。

プレイヤーがゲームの進行状況やキャラクターのステータスなどを簡単に把握できるようなUIデザインは、ユーザーがゲームの機能をより良く理解し、効率的に操作する手助けをします。

ゲーム制作においては、ユーザーが迷わず行動できるような導線設計も重要です。

効果的なUIデザインは、視覚的な手がかりやガイドラインを提供し、プレイヤーが次に何をすべきかを直感的に理解できるようにします。

これにより、ユーザーはゲームの目的を達成するために必要なアクションをスムーズに取ることができ、ゲームプレイの流れを中断せずに進行させることができます。

UIデザインにより、そのゲームならではのウリとなる要素を伝えることができます。

例えば魅力的なキャラクターがウリであれば、会話パートは立ち絵を使用したり、ゲームパートでストレスを与えないUIデザインが良いでしょう。

逆にアクションバトルがウリのゲームの場合は、バトルパートの操作性やシステムを充実させるのが好ましいと言えます。

ゲーム進行において、単調さや作業感が新鮮さを欠いたり面倒になったりすると、ユーザーも飽きてしまいます。
それらの要因をUIの面からも軽減できれば、ユーザー離れの防止につながります。

2020年に発表された「継続したゲームプレイからの離脱理由に関する調査分析」によると、ゲーム内容とは関係ない要因である「ブランク」「生活変化」を除いた場合、「単純作業」や「繰り返し」が離脱理由の上位に含まれています。

参考：継続したゲームプレイからの離脱理由に関する調査分析｜日本デジタルゲーム学会

もちろんゲームバランスやゲームシステムの問題もありますが、UIデザインでも飽きさせない工夫を講じることが大切です。

また、ユーザーが直感的に操作できるUIデザインを心掛けることで、「操作が不便で遊びにくい」「次に何をすればいいか分からない」という状況からの離脱を防ぐことも可能です。

ゲーム画面においてUIデザイナーが担当する範囲は下記の通りで、わかりやすく表現すれば「キャラクターや背景以外の全て」と言えるでしょう。

これらのレイアウトや素材は、具体的には以下のような要素に適用されます。

3つの要素について、以下で詳しく解説します。

プレイヤーだけに見える要素は、ゲーム世界から切り離された、情報提供のための表示です。

体力ゲージやスコアなどのステータス、マップ、メニュー画面などがこれにあたり、こうした UI には戦略や戦術を強化する効果があります。

例えば、体力ゲージの容量が少なくなると、「このタイミングで回復アイテムを使うべきだ」　「もっと素早く行動しなければ」などと判断しやすくなります。

あわせて警報の音や赤く点滅するなどの演出を加えることで、ユーザーに緊張感を与え、体験を効果的に盛り上げる場合もあります。

ゲーム画面上で常にオーバーレイ表示（画面上にさらに画面を重ね合わせ、表示すること）される情報のことを、「HUD（Head Up Display／ヘッドアップディスプレイ）」と言います。

ゲーム世界のキャラクターに追従する形でステータスを表示する場合もありますが、直接キャラクターの行動に影響を与えるわけではなく、あくまでプレイヤーの状態に関する情報を知らせるためのものです。

ゲーム世界の空間に存在する要素とは、キャラクターが触れることができ、何らかの動きや反応があるものです。
例えば、フィールド上で拾えるアイテムなどがこれにあたります。

多くの場合にゲーム世界に影響を与えない形で表示する情報を、あえてゲーム世界の一部として組み込む手法もあります。
このように、ゲーム世界に存在している要素をそのままUIとして使うものは「ダイエジェティックUI（Diegetic UI）」と呼ばれ、没入感を高める役割を果たします。

例えばドライビングシミュレーションゲーム『グランツーリスモ』シリーズのコックピットビュー（ドライバー視点モード）では、車のダッシュボードや計器盤がそのままゲームのUIとして機能します。

ユーザーは運転手目線で、速度や燃料、ギアの情報のほか、ハンドルがどれだけ切られているかを目視できるのです。
HUDとして表示される他の情報は、設定で非表示にすることができ、不要な場合は消しておくとよりリアルな運転体験が可能になります。

ゲーム進行において、プレイヤーが迷わないよう誘導するための演出をUIで行う場合があります。

ゲームの次のステップを示してくれるアイコンやボタン、テキストなどのUIは、ユーザーのゲームプレイをサポートします。

迷った時に、ユーザー側からヒントにアクセスできるようなUI設計であれば親切でしょう。

ゲームUIデザインの考え方について説明します。
具体的には、以下のポイントを意識しながら、ゲームタイトルごとに一貫性を持たせたUIにする必要があります。

5つのポイントについて、以下で詳しく解説します。

ゲームUIは、ターゲットの年齢や性別、操作レベル、好みによって異なる場合が多いです。

例えば、子ども向けゲームではよりわかりやすいデザインやカラフルな色づかいにしたり、豊富な戦術・戦略を好む大人向けのゲームの場合は装備カスタムがスムーズにできるデザインを採用したりというように検討することができます。

ターゲット層の幅が広いゲームでは、一番伝わりにくいターゲット層に合わせる必要があります。

また、ゲームのジャンルごとにUIのパターンはある程度確立されています。

例えば FPS（一人称視点シューティング）では、画面上に体力のステータスが表示されているのがイメージできるでしょう。

作ろうとしているゲームジャンルの慣例をよく理解し、プレイヤーに馴染みのあるスタイルでUIを提供することが適切な場合もあります。

ゲームのUIは、そのゲームのコンセプトを体現するデザインである必要があります。

これには、ゲームのテーマやストーリー、アートスタイルに一致する色使いやフォント、アイコンなどのビジュアル要素が含まれます。

例えば、ファンタジーゲームでは魔法や冒険を連想させるデザイン、SFゲームでは未来的で洗練されたデザインなど、大枠のコンセプトに適した雰囲気を強調することが求められます。
その上で、独自性に沿ったエッセンスを盛り込むと良いでしょう。

UIデザインでは、操作しやすさや理解しやすさを意識することが非常に重要です。

そのためには、ユーザー目線に立って画面上の要素の配置やビジュアルを見やすくわかりやすいものにする必要があります。

見やすさ・わかりやすさを最大化するためには、以下の「デザインの4原則」にもとづく考え方が役立ちます。

配置は、①近接・②整列を意識することで、「どこに、どんな情報があるのか」が直感的にわかるようになります。

• 「近接」：関連する要素同士を近くに配置しグループ化する
• 「整列」：関連する要素にルールを持たせて配置し統一感を出す

要素ごとのビジュアルは、③反復・④対比を意識することで、「何が同じ要素なのか、何が重要なのか」を理解しやすくなります。

• 「反復」：要素ごとにデザインのルールを繰り返す
• 「対比」：要素の優先度を明確に示す

具体的には、以下のようなテクニックが挙げられます。

ゲームUIでは、情報量のバランスの最適化も重要なポイントとなります。

プレイヤーに示す情報が少なすぎると、ゲームプレイの難易度が上がりすぎてしまう場合があります。

一方で、情報量が多く複雑すぎると、気が散ってしまったりテンポが悪くなってしまったりすることもあります。
その場合は、適切な箇所で情報を削ることで、ユーザーの選択に対する心理的負担を軽減することが可能です。

どの情報を充実させるべきか、あるいはどこを簡素化するべきか、常に問いかけながらデザインを検討する必要があります。

ゲームUIは、ユーザーの目を引くビジュアルデザインが求められます。

色彩、タイポグラフィ（文章を読みやすく見せるためのデザイン技術、また、それにより文字を美しく配置すること）、アイコン、アニメーションなどを効果的に組み合わせ、ゲームのテーマや世界観を反映させることが重要です。

時には、あえて誇張された形や鮮やかで大胆な色彩などを採用することで、より印象的な画面を作り上げます。

魅力的なビジュアルは、ユーザーの没入感を高め、ゲーム体験を豊かにします。

ここでは、ゲームUIデザインの作り方の一例を紹介します。
実際の制作フローは会社やプロジェクトによって異なりますが、基本的なUIデザインの流れは以下のようになります。

1.デザインを発注する

プランナーからUIデザイナーにデザインが発注されます。

ゲームプランナーは、どのような目的でゲームを作るのか、そのためにどのような素材をどのような使用目的で制作するのかを、的確にUIデザイナーに伝える必要があります。

それらは「仕様書」によって指示され、仕様書は「企画書」にもとづいて決定されます。

企画書や仕様書の書き方については以下の記事を参考にしましょう。

2.発注内容に従い、画面設計や素材のデザインを行う

UIデザイナーは、企画書や仕様書、プランナーやディレクターとの打ち合わせによって得た情報を整理し、画面レイアウトを設計します。

設計図やフローが決まったら、ビジュアルデザインに入っていきます。はじめに要素が多い画面を選んでルールを決めたり、複数の画面で使用するパーツをまとめておいたりすると、工数削減につながります。

必要に応じてアニメーション用の素材も制作し、アニメーション担当のデザイナーが動きをつけます。

3.制作した素材を実装する

出来上がったUIデザインを、エンジニアがゲームエンジンに実装します。

4.テスト・ブラッシュアップを行う

実装が完了したら、UIが適切に機能しているか、崩れや動作の問題はないかなどをテスト環境でチェックします。

ゲームUIのデザインに使用するツールにはさまざまなものがあります。
代表的な制作ツールは以下の通りです。

• Adobe Illustrator
  アイコンやロゴの作成に適したグラフィックツール。

• Adobe Photoshop
  画像加工やテクスチャ作成に適したグラフィックツール。

• Adobe XD
  プロトタイピングツール。インタラクティブなワイヤーフレームやプロトタイプを迅速に作成できる。

• Figma
  クラウドベースのデザインツール。リアルタイムでの共有が可能で、チームでのデザイン作業に最適。

• Sketch
  UI/UXデザインに特化したツール。直感的かつ効率的なデザイン作業が可能。

• Unity
  ゲームエンジン。UIデザインだけでなく総合的なゲーム開発が可能。

• After Effects
  動画編集・モーショングラフィックスツール。UIに動的な要素を追加できる。

最適なツールを選択したり、組み合わせて使用したりすることで、ゲームUIデザインを効率的に作成できます。

ゲームのUIデザインをする上で必要なスキルと勉強方法について解説します。

ゲームUIデザイナーには、次のようなスキルが必要です。

ゲームUIデザイナーには、高度なグラフィックスキルが必須です。
見やすく使いやすいデザイン構築のための基礎知識に加え、デザインツールを使いこなせる必要があります。

UIデザイナーは、ディレクターやプランナーの意図を汲み取り、それを実現するにはどんなビジュアル・レイアウト・操作性にするのが最適かを考えます。

デザイン発注の根本にある意図を理解できれば、単に指示通りのデザインを制作するのではなく、別の最適な案を探ることも可能です。

統一感や一貫性のあるゲームUIを構築するためには、常にゲームの全体像を把握しておかなければいけません。
個々の発注内容だけでなく、ゲーム全体の認識のすり合わせが必要になります。

これらのスキルを活かし、常にユーザーのゲームプレイをより良いものにできないかと模索しながらデザインに取り組むマインドが求められます。

ゲームUIデザインの勉強方法としては、書籍やオンラインスクールのほか、「Udemy」などのオンライン学習プラットフォームを活用したり、「TECH PLAY」などのイベントプラットフォームでセミナーを探して参加したりする選択肢が挙げられます。

実際にいろいろなゲームをプレイしてみることで、「なぜこのようなUIを採用したのか？」「実際にどういう体験が生まれたか？」を分析してみるのも良いでしょう。
 

また、次のような資格があると役立つ可能性があります。

• Photoshop®クリエイター能力認定試験
• Illustrator®クリエイター能力認定試験
• Webクリエイター能力認定試験
• 色彩検定

ゲームUIデザインの参考となるサイトを紹介します。

扱うタイトル数が非常に多いゲームUIデータベースです。
海外のサイトですが日本のゲームも掲載されており、さまざまなカテゴリーでの絞り込み機能に優れています。

UI要素を動画で確認できるのが特徴のゲームUIデータベースです。
ジャンルや要素、テーマで絞り込むことも可能です。

ゲームのUIに限らず、幅広いアイデアを発見・コレクションできるWebサービスです。
例えば「ゲーム UI」などと検索することで、さまざまなゲーム画面や素材などのアイデアが表示され、自分用に保存しておくこともできます。

ゲーム開発におけるUIデザインは、ユーザーへ適切に情報を伝達するだけでなく、ユーザー体験に大きく影響する重要な要素です。

ゲームUIの役割や考え方のポイントを深く理解し、制作するゲームの目的に合ったデザインを検討することが大切です。

適切かつ効果的なゲームUIデザインを実現するために、本記事を参考にしていただけると幸いです。