ユーザーインターフェース入門

ユーザーインターフェース (UI) とは、ユーザーがコンピューターやコンピューターアプリケーションと相互作用（インターフェース）できるようにするシステムのことです。

リアルタイム 3D プロジェクトの場合、UI は通常、テキスト、ボタン、チェックボックス、スライダー、トグルの組み合わせになります。

これらの要素は、ルールや通知を使ってユーザーとコミュニケーションをとることができます。また、UI は、進捗の保存や設定の調整など、ユーザーのタスク実行を支援することもできます。

画像：Unity の「Tanks」デモプロジェクトより

画像：アセットストアの Unity UI Samples より

あなたがこれまでに使ったことのある公開アプリケーションには、何らかの UI が含まれていることが多いはずです。

このチュートリアルとこれに続くチュートリアルでは、Unity の UI システムを使用して、インタラクティブな設定画面を作成する方法を学びます。

最終的には、下のサンプルのような形になりますが、デザイン次第でまったく別のものになります。

この最初のチュートリアルでは、まず、UI デザインとは何か、そして、そうでないものを正確に探ることから始めます。その後、UI プロジェクトを開き、シーンをカスタマイズします。

Unity は初めてですか。

Unity を初めてお使いになる方、ようこそ！Unity Essentials 学習パスウェイは、Unity エディターで制作するための設定や準備を支援するために設計されています。Core UI チュートリアルを続ける前に、このパスウェイを完了させることをお勧めします。

Unity Hub のアップデート

Unity プロジェクトのセットアップを開始する前に、Unity Hub を最新のリリースに更新することを検討してください。旧バージョンの Hub をお使いの場合、提供されている手引きとあなたの経験との間に差異が生じる可能性があります。

Unity エディターの基本をおさらい

Unity エディターの基本的な知識を再確認したい場合は、いつでも Explore the Unity Editor を見直すことができます。

役割

UI デザイナーは、主に UI 要素がどのように見えるか、画面上のどこに配置されているかに関心を持ちます。具体的には、以下のようなことを行います：

• アートディレクションに基づき、メニュー、ボタン、HUD、ポップアップなどをデザインする
• さまざまな UI を通じて、関連するすべての情報と機能が提供されていることを確認する
• 技術的制約と最適化のガイドラインを考慮した設計を行う。

Arena of Valor や Ludo King など、Unity で作られたアプリケーションの優れたデザインの UI をご覧ください。

Arena of Valor. © 2021 - Proxima Beta Pte Limited. 画像：Unity Case Studyより

Ludo King. © 2021 - Gametion. 画像：Unity Case Study より

UI デザイナーが基本的なプログラミングに慣れている場合は、簡単な UI 機能の実装を求められることもあります。キャラクターのカスタマイズ画面など、より複雑な UI 機能は、プログラマーが担当することになります。

バックグラウンド

多くの UI アーティストは、以下のような基礎的なスキルや経験を持っています：

• プロポーション比、構図、色彩などの知識を含む基本的なアート関連のスキル
• インターフェースの使いやすさ、わかりやすさ、アクセシビリティをよく理解している
• 現在のデザインやタイポグラフィーのトレンドに通じていること

UI は通常、単純な機能と結びついているため、基本的なプログラミングができればなお良しです。

ツール

UI デザイナーは、Unity 以外にも、以下のようなソフトウェアを使用する、または精通している場合があります：

• Adobe Photoshop などの 2D 画像編集ソフトで、テクスチャーの作成やインターフェースのレイアウトを行う。
• Adobe Illustrator などの 2D ベクター形式のイラストツールで、画像やボタン、アイコンなどを描画する。

UI デザインとは？

UI デザインは、グラフィカルユーザーインターフェース (GUI) 要素を、説得力があり、かつ直感的に理解できるようにレイアウトするプロセスです。UI は、明確で一貫性があり、アクセスしやすく、魅力的であるべきです。優れたデザインの UI を使用していれば、シームレスで楽しい体験が可能です。

使っているうちに UI デザインについてあまり考えなくなったら、それはたいてい良いサインです。

実際、良い UI は目に見えず、ユーザーの邪魔にならないものであるべきだと言われます。

Unity で作られた「Last Day on Earth」の例をご覧ください。UI が本来フォーカスされるべきゲームプレイから注意を逸らさないことに注目してください。

Last Day on Earth. © 2021 - KEFIR. 画像：Google Play Store より引用

UI デザインではないもの

ただし、UI デザインの定義は、ユーザー体験やユーザーインタラクションのデザインなど、似たような響きを持つ分野と一緒に考えると、混乱することがあります。

以下の図は、そのような分野の一部と、それぞれの分野がどのように関連しているかを示しています：

ユーザー体験 (UX) に関わるデザイン

• 質問の回答：ユーザージャーニーとは何か？
• 目標：製品の最初から最後まで、全体的にポジティブな体験を実現する

ユーザーインタラクションのデザイン (IxD)

• 質問の回答：ユーザーが目的を達成するために必要なものは何か？
• 目標：ユーザーが最も効率的に目標を達成できるようにする
• UX デザインの一部である

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

• 質問の回答：UI 要素は画面上でどのように見えるべきか？
• 目標：わかりやすく、邪魔にならない使いやすいインターフェースにする
• IxD の一部であり、UX の一部である

情報アーキテクチャ

• 質問の回答：情報はどのように整理され、構造化されるべきか（必ずしも相互作用のためではない）
• 目標：ユーザーが必要な情報を見つけるためにどこに行けばいいのかが分かるようにコンテンツを構成する
• UI デザイン、IxD、UX デザインに反映させる

ビジュアルデザイン

• 質問の回答：何が一番よく見えるか（必ずしもインタラクションのためではない）？
• 目標：視覚に訴えるものを作る
• UI デザイン、IxD、UX デザインに反映させる

これらの分野の正確な違いについて明確なコンセンサスはありませんが、これらの用語が互いにどのように関連しているかを高いレベルで意識しておくことは有用です。

サンプルを用いてテストしてみましょう。下のスクリーンショットはアクション RPG のインベントリメニューで、プレイヤーはアイテムを装備したり、インベントリからアイテムを使用したり、現在のプレイヤーのステータスを表示したりすることができます。

画像：Unity の「Creator Kit：コーディング入門」プロジェクト

上記のような最終製品に到達するために、次のような専門分野のスタッフがそれぞれどのような責任を負っていたと思われますか？

• ユーザー体験のデザイン
• インタラクションデザイン
• UI デザイン
• 情報アーキテクチャ
• ビジュアルデザイン

各役割の確認

• ユーザー体験：アイテムを装備する体験が、ユーザーにとって楽しく、満足のいくものであるようにする。
• インタラクションデザイン：ユーザーが 2 回以内のクリックでアイテムを装備または使用できるようにする。
• ユーザーインターフェース：アイコンやインターフェースのレイアウトは、何が何だかよくわかるようにデザインする。
• 情報アーキテクチャ：情報を整理しユーザーに分かりやすく伝える
• ビジュアルデザイン：背景色と文字色に最適な色を選択する。
  
  

UI デザイナーの役割がわかったところで、Unity を開いて、実際に使ってみましょう。

Unity プロジェクトの設定方法：

1. Unity 2020.3 LTS をインストールします（インストールしていない場合）

2. この学習体験のためのプロジェクトをダウンロードします。

3. コンピューター上の適当な場所を特定し、そこにプロジェクトフォルダーを解凍してください。Unityのプロジェクトフォルダーを空の親フォルダーから削除します。

4. Unity プロジェクトを Unity Hub へ追加します。

5. Unity Hub からプロジェクトを開きます。

6. Unity エディターの Project ウィンドウで、Assets > CreativeCore_UI > Scenes の順に開き、TutorialScene_UI_Outdoor のシーンを開きます。

TutorialScene_UI_Outdoor のシーンでは、街灯が 1 つある屋外シーンが表示されます。

次のステップでは、シーンを自分の好きなようにカスタマイズしていきます。

Play を押してください。Game ビューに表示されるのは、UI の背景になるものです。タイトルとメニューは、そこに表示されているものの上に配置されます。

もし、最終的なプロジェクトがどのようなものであっても構わないのであれば、このステップはスキップして、現在 Game ビューでフレームされているものだけを使用することができます。

ただし、UI シーンを自分好みにしたいのであれば、今のうちに時間をかけて自分の好きなように仕上げましょう。シーンとカメラの位置を少し変えるだけで、印象が大きく変わります。

1. Project ウィンドウの Assets > CreativeCore_UI > Prefabss の順に選択し、UI 背景に含めたいプロップをシーンに加えます。また、キューブやスフィアなどのプリミティブな形状を使って、独自のオブジェクトを作ることもできます。Probuilder に慣れている方は、そちらも使えますよ。

2. ライティングのチュートリアルで学んだように、Directional Light の Rotation、Color、Intensity を調整し、時間帯を変更します。

3. Main Camera の位置を変えて、シーン内のオブジェクトをうまくフレームに収めましょう。カメラのチュートリアルで学んだように、Field of View プロパティを使用して、フレーム内にあるものを拡大または制限します。

シーンの構図がちょうどいい感じになったら、次のステップに進みましょう！

新しい UI 要素を追加する前に、Unity で UI を開発するために uGUI、IMGUI、UI Toolkit という 3 つの全く別のシステムが利用できることを知る必要があります。似たような響きの略語が多いので、それぞれのシステムを簡単に説明しましょう。

• uGUI (または、Unity UI) は、ゲーム内インターフェイスを開発するための安定した UI システムです。現在最も一般的に使用されているシステムで、他の Unity プロジェクトでも遭遇する可能性が最も高いです。
• IMGUI (または、Immediate Mode GUI) は、主にプログラマーが Unity エディター自体のデバッグツールやカスタムのインスペクターを作成するためのコードベースのシステムです。ユーザー向けの UI にはあまり使われません。
• UI Toolkit は、最終的に Unity 内で UI を開発するための主要なシステムになる予定の新しいシステムです。目標は、uGUI と IMGUI のすべての機能を含むことです。ただし、このシステムはまだ開発中です。

各システムの長所と短所については、Unity ユーザーマニュアルで詳しく説明されています。

UI Toolkit はまだ開発中なので、このチュートリアルでは uGUI システムを使用します。uGUI は、今日の実稼働中のアプリケーションに最適なオプションです。

uGUI システムを使いこなすうちに、どのようなシステムでも通用する UI デザインのスキルが身につきます。

このチュートリアルでは、UI とは何か、そして UI が他の関連分野とどのように組み合わされるかを学びました。その後、プロジェクトを開き、シーンをカスタマイズして、UI 編集のための準備をしました。次のチュートリアルでは、最初の UI 要素である「タイトル」を追加します。