All content in this course uses:

『Out of Circulation』のユーザーインターフェース実装とデザインを学び、ご自身のゲームのUIでのアクセシビリティ配慮を検討します。

ユーザーインターフェース (UI)

このチュートリアルでは、『Out of Circulation』におけるユーザーインターフェースの実装とデザインについて学びます。また、ご自身のゲームにおけるユーザーインターフェースのアクセシビリティへの配慮についても紹介します。

物語型アドベンチャーゲームでは、キャラクターの会話やインタラクティブなアイテムが、すべて UI ウィンドウを介してプレイヤーに表示されるため、ユーザーインターフェースが非常に重要です。特に、多くのテキストを表示するユーザーインターフェースでは、プレイヤーが自分のニーズに合わせてユーザーインターフェースを設定できることが重要です。

このチュートリアルでは、次のことを行います：

『Out of Circulation』のユーザーインターフェースを評価する

UI Toolkit システムに切り替え、UI テーマを実装する

ユーザーインターフェースに関するアクセシビリティへの配慮を自分のゲームで検証してみる

『Out of Circulation』のハイレベルな詳細について、事前に思い出したい場合は、

概要

『Out of Circulation』では、ユーザーインターフェースの実装について、次のような初期要件を設定しました：

プレイヤーは、ゲーム内のユーザーインターフェースウィンドウを、設定された最大サイズまでスケールできる必要があります。

デフォルトのゲームプレイ UI は、プレイヤーが便利なオン/オフ設定のために設定メニューに行く必要がないように、クイックアクセスのトグルを含める必要があります。

デフォルトの UI カラーパレットは、最低でも 

WCAG 2.1 AA カラーコントラスト要件

を満たしている必要があります。

デフォルトのフォントサイズは、視力 20/20 の人が容易に読めるサイズでなければなりません（1080p で表示した場合、最小 28px）。

プレイヤーは、自分のニーズに合ったフォントを選択できるようにしなければなりません。

ユーザーインターフェースは、音声による説明か、プレイヤーが選択したスクリーンリーダーで操作可能である必要があります。

当初、『Out of Circulation』には複数の UI テーマを搭載し、プレイヤーのニーズに合わせてテーマを選べるようにしたいと考えていました。ただし、Unity UI (uGUI) にはテーマシステムが組み込まれていないため、大きな問題が発生しました。実装方法を検討しましたが、今回のプロジェクトの範囲内ではこの機能を追加することはできませんでした。

アクセシビリティに関する要件

Unity には、UI Toolkit、Unity UI パッケージ (uGUI)、Immediate Mode Graphical User Interface (IMGUI) という 

があります。IMGUI は Unity エディター向けの拡張機能であり、ランタイムのユーザーインターフェース用ではありません。UI Toolkit と uGUI システムのどちらを選ぶかについては、様々な考慮事項がありました。


長期サポート版 (Long-Term Support: LTS) のリリース

UI Toolkit は 2021.3 LTS で公式にサポートされるパッケージとなりました。『Out of Circulation』の作業を開始した時点では、Unity の 2020 LTS リリースと 2021 LTS リリースのどちらでローンチするかは分かりませんでした。

私たちは、学習体験をできるだけ安定させるために、学習コンテンツにプレビューパッケージを使用しないことを希望しています。 


『Out of Circulation』の UI ナレーションには、オープンソースの 

 を使用しました。このサードパーティツールは、UI ナレーションのカスタム録音やスクリーンリーダーのフルサポートを実装するために必要だったカスタム開発の量を大幅に削減しました。UI Accessibility Plugin は uGUI システムをサポートしていますが、現在 UI Toolkit はサポートしていません。 

この 2 つのバランスを考えて、『Out of Circulation』には uGUI を採用することにしました。


私たちが行った選択は、完璧なものではありませんでした。uGUI システムは、デフォルトで UI テーマをサポートしていません。つまり、『Out of Circulation』で UI のカラーパレットやフォントを変更するには、かなりの開発者の作業が必要になるということです。 

私たちは、完全な UI テーマをサポートするための最初の探索と作業を完了しました。しかし、最終的には、開発者の時間を他の重要なプロジェクト機能に費やした方が良いと判断しました。

UI ナレーションやスクリーンリーダーのサポートを自作ゲームに実装するために別のアプローチを使用する場合は、UI ツールキットを UI システムとして使用することをお勧めします。

UI システムの選択

古典的なポイントアンドクリック式の物語型アドベンチャーは、主にマウスなどのポインターコントローラーを想定してデザインされています。ただし、ボタンなどの入力コントロールやスクリーンリーダーなどの補助技術を使って、プレイヤーが『Out of Circulation』を操作できるようにする必要がありました。

このように、ゲームの UI と間接的に相互作用する必要があることから、『Out of Circulation』には 2つの要件がありました：

プレイヤーは、どの UI ゲームオブジェクトをアクティブにするか（選択するか）を変更できるようにする必要があります。

 は、ポインター入力の click-to-select 機能と同様に、UI ゲームオブジェクトを起動（トリガー）する必要があります。


 ゲームオブジェクトにある Input Module によって自動的に処理されます。プレイヤーがユーザーインターフェースを操作するためには、プレイヤーが入力したときに、どの UI ゲームオブジェクトが選択可能で、次にどの UI ゲームオブジェクトを選択すべきかを Input Module が識別できるように、UI を設定する必要がありました。

UI ゲームオブジェクトの選択トラッキング

Unity には、現在選択されている UI ゲームオブジェクトを追跡するシステムが組み込まれています。このトラッキング機能を使うには、UI ゲームオブジェクトは 

 クラスを派生させる必要があります。ほとんどの UI コンポーネントは Selectable クラスを継承しており、設定メニューのタブを定義するために作成したカスタム UI コンポーネントである UITab もこのクラスを使用しています。

ポインター以外の入力コントローラーを使用しているプレイヤーは、

 の移動方向のいずれかにマッピングされた入力を提供することで、UI ゲームオブジェクトを選択することができます。例えば、プレイヤーがゲーム設定メニューを開いたときに、右に移動するように入力すると、右隣のタブが選択されます。

uGUI システムは、プレイヤーがボタン、トグル、スライダーのような入力をしたときに、特定の方向に選択できる次の UI ゲームオブジェクトを決定するために

プロパティを使用します。すべての UI ゲームオブジェクトは、Inspector でこのプロパティを利用できます。

『Out of Circulation』のメインメニューボタンの 1 つである Button コンポーネントです：

は、手動で設定することも、このボタンのように 

 に設定されている場合、UI システムは、プレイヤーの入力によって提供される方向で現在選択されている UI ゲームオブジェクトに最も近い UI ゲームオブジェクトを検出することで、次の UI ゲームオブジェクトの選択を決定します。この方法は、最小限のユーザーインターフェースを持つゲームに有効です。

『Out of Circulation』は、オン/オフ可能なウィンドウなど、複雑なユーザーインターフェースを備えています。さまざまな入力コントローラーによるナビゲーションをサポートするために、UI ナビゲーションマップを完全に制御する必要がありました。この要件は『Out of Circulation』の UI のほとんどに自動ナビゲーションを使用できないことを意味します。

UI ナビゲーションの大部分を手動で設定しました。つまり、プレイヤーが各基本方向（上下左右）に入力すると、次に選択される特定の UI ゲームオブジェクトを特定する必要があったのです。

次の UI ゲームオブジェクトは、Inspector から指定するか、コードで指定します。コードによる UI ゲームオブジェクトの設定は、Game 設定ウィンドウのリマッピングタブにある入力リマッピングボタンのように、ゲームオブジェクトを動的に作成したい場合に特に有効です。この方法は、UI ゲームオブジェクトを UI の状態に応じてナビゲーションマップに追加したり、ナビゲーションマップから削除する場合にも有効です。例えば、設定メニューの Save と Undo ボタンは、プレイヤーが保存 (save) または元に戻せる (undo) 変更を行った場合にのみ選択可能になります。 

方向入力による UI ナビゲーション

 を使用しました。このプラグインは、ゲームのユーザーインターフェースのデータを外部のスクリーンリーダーに渡し、そのスクリーンリーダーのテキスト読み上げ機能を使って、ゲームの UI ナレーションを提供します。このプラグインは、Windows と macOS のオペレーティングシステムのデフォルトを含む、さまざまなスクリーンリーダーに対応しています。

スクリーンリーダーが操作できるユーザーインターフェースを Unity で作るのは大変なことで、これは『Out of Circulation』の範囲外でした。UI Accessibility Plugin は、プレイヤーがスクリーンリーダーを使って実際に UI を操作できるわけではありませんが、私たちがゲームに求める要件を満たすための良い解決策でした。

UI Accessibility Plugin の音声読み上げ機能を利用しました。プラグインに正しい情報を読み上げさせるために、この機能をサポートする UI ゲームオブジェクトのカスタムスクリプトコンポーネント、UI Component Info を作成する必要がありました。 

UI Component Info コンポーネントは、以下の情報を記録します：

UI ゲームオブジェクトの使用ヒント（必要な場合）

UI ゲームオブジェクトのツールチップ


下記は、ゲームプレイのメイン UI にある Log ボタンの UI Component Info (Script) コンポーネントです：


音声読み上げシステムは、現在選択されている UI ゲームオブジェクトが変更されたことを検出すると、その UI ゲームオブジェクトのゲームオブジェクトに UI Component Info コンポーネントがあるかどうかを確認します。このコンポーネントが存在する場合、システムはその UI ゲームオブジェクトの名前、状態、使用ヒント（これが使用されている場合）、ツールチップを読み取ることになります。

また、ゲームプレイインターフェースやゲーム設定メニューの設定項目にカーソルを合わせたときにも、Tooltip フィールドがプレイヤーに表示されます。

UI Accessibility Plugin を使用したナビゲーション

UI Accessibility Plugin には、ほとんどのタイプの UI ゲームオブジェクトを扱うことができるコンポーネントも組み込まれています。これらのコンポーネントは、デスクトップではキーボード入力、モバイルではタッチ入力を使ったナビゲーションを追加します。 

『Out of Circulation』ではこの機能を使用しませんでした。ゲームパッドでうまく機能するゲーム用プレイヤー移動システムが必要だったからです。私たちが実装した移動システムは、キーボードとゲームパッドの UI ナビゲーションも処理するため、UI Accessibility Plugin のキーボード入力の処理方法と衝突してしまう可能性がありました。

UI ナレーション

ユーザーインターフェースに関するユーザーからのフィードバックでは、ポインター入力を使わないナビゲーションや UI のナレーション機能に関するものがほとんどでした。

『Out of Circulation』のほぼすべての UI について、UI ナビゲーションを手動で設定しました。すべての UI ゲームオブジェクトに、スクリーンリーダーに渡すデータを持つ UI Component Info (Script) コンポーネントが関連付けられていることを確認するために、私たちは多くの徹底的なテストを行いました。   

あるテスターから、ゲーム設定の UI をキーボードで操作しているときに、タブの一番上にある設定からリストの一番下にある設定にジャンプして、その間にあるいくつかの設定をスキップしてしまうという報告がありました。このジャンプは、ナビゲーションのための中間 UI ゲームオブジェクトが適切に登録されていないために起こりました。

外部のテスターと Unity の QA テスターの両方が、最初の手動設定やその後のプロジェクトの変更時に見落とされた UI ゲームオブジェクトに起因する複数のナビゲーション問題を特定したのです。

UI ナビゲーションとナレーションのフィードバック

このプロジェクトには専任の UI デザイナーがおらず、洗練されたユーザーインターフェースデザインに取り組むには、限られた能力しかないことが分かっていました。そのため、デザインはシンプルにする必要がありました。

UI の配置とスケーリング機能の両方について、レビュアーから非常に有益なフィードバックをいただきました。UI ウィンドウを拡大しても、プレイヤーのゲームプレイビューに重要な情報が表示されるよう、何度もデザインのイテレーションを行い、細かな調整を行いました。

前述したように、『Out of Circulation』で uGUI システムを選択する際には、大きな妥協がありました。この選択により、UI Accessibility Plugin を使用して UI ナレーション機能を提供することができましたが、UI Toolkit システムがサポートする UI テーマを利用することができなくなりました。そのため、色やフォントのカスタマイズオプションをユーザーに提供するには、私たちのチームによる手作業での実装が必要になります。

uGUI システムに UI テーマを実装する方法を検討しました。しかし、必要な作業範囲は、私たちのリソースの制約を超えていました。

視覚的に強いコントラストが必要な弱視のプレイヤーをサポートするため、白背景（#FFFFFF）に黒文字（#000000）のハイコントラストなカラーパレットを使用することにしました。これらの色がもたらすコントラスト比は 21 : 1 と、非常に強いコントラストを示しています。また、全体の色調が異なる 3 種類のゲームプレイシーンでも、それぞれうまく発色しています。


このカラーテーマの選択にはデメリットがあり、例えば、読字困難な方など、コントラストの高い文字を知覚しにくいプレイヤーがいる可能性があります。

会話ウィンドウでは、登場人物のダイアログを識別するために異なる色が使用されます。

プレイヤーによって異なる書体が効果的に作用します。『Out of Circulation』のデフォルトのフォントは、基本的な sans-serif フォントの Lato です。基本の sans-serif フォントは幅広いプレイヤーにとって読みやすいため『Out of Circulation』にはこれが適していると思いました。1 種類のフォントしか提供できないと考えたとき、できるだけ多くのプレイヤーのニーズに応えられるような選択肢を用意したいと思いました。

ただし、他のニーズに対応したデザインのフォントも用意されています。すべての読み手にとって同じように機能するフォントはありません。例えば、失読症の方が読みやすいように特別にデザインされたフォントもあります。

チームは制作の最後に、プレイヤーが『Out of Circulation』のフォントをオープンソースの 

 フォントに切り替えるためのトグルを手動で実装したのです。このフォントに関する限られたリサーチでは、読みやすさを向上させるということは示されていませんが、一部の人々は非常に有用であると感じています。このトグルは、このフォントが有用であると考えるプレイヤーが、その経験をカスタマイズできることを意味します。

UI デザインおよびテーマ

私たちのユーザーインターフェースデザインは、とても基本的なものです。ゲームのビジュアルテーマに沿いつつ、アクセシビリティを向上させるために、既存のウィンドウのデザインを変更することで、スキルを磨くことができます。また、独自のカスタムデザインで新しい UI ウィンドウを実装することも可能です。

探索：UI ウィンドウのデザイン変更

私たちの作業範囲では UI テーマを実装することはできませんでしたが、それを行うことで『Out of Circulation』を拡張することができます。UI Toolkit に切り替えて、プレイヤーのテーマ選択を作成してみましょう。

UI Toolkit に切り替えると『Out of Circulation』のカスタムスクリプトがすでに書かれているため、最初から始めるよりもかなり作業が少なくなります。ただし、この作業でも UI のすべてを完全に作り直すことになります。『Out of Circulation』を拡張するよりも、自分のゲームの UI を作成したほうがいいかもしれません。

UI Toolkit システムに移行する際のヒント：

UI Accessibility Plugin の Say 関数をスクリプト内で手動で呼び出して、外部のスクリーンリーダーにデータを渡し、ナビゲーションを行うようにしています。UI Toolkit システムに切り替えても UI Accessibility Plugin のナレーション機能を使い続けたい場合は、コードから Say を呼び出して現在選択されている UIElement を検出することができます。 

UI Toolkit システムでは、UIElement に tooltip 機能が組み込まれています。また、必要であれば、

を使って、使用ヒントなど、他の重要な情報を保存することもできます。

拡張：UI Toolkit への切り替えと UI テーマの実装

あなた自身のゲームに取り組むとき、次の質問を考えてみてください：

(テキストの書式)：『Out of Circulation』のフォントに関する課題をクリアしましたが、プレイヤーに選択肢を提供することはできませんでした。どのようなフォントを使用する予定ですか？また、さまざまなプレイヤーのニーズに応えるために、どのように計画されていますか？

 (リサイズ可能なインターフェース)：『Out of Circulation』には多くのインターフェースがありますが、それらをリサイズできるようにすることは、さまざまなプレイヤーが楽しめるユーザー体験を実現するために重要なことでした。

 (スクリーンリーダー対応)：スクリーンリーダー対応の実装は、『Out of Circulation』にとって優先事項でした。ボイス付きのダイアログと合わせて、より多くのプレイヤーがストーリーに触れることができるようになることを意味します。スクリーンリーダーの対応は、プロジェクトの範囲内ですか？

これらの質問に対する回答は、定期的なテストや障害を持つプレイヤーからのフィードバックの代わりとなるものではありません。

このコースの前半で学習したアクセシビリティのリソース

ゲーム内のユーザーインターフェース

」の他のチュートリアルでは、『Out of Circulation』の制作の他の側面について知ることができます。準備ができたら、「

Unity Version 2021.3