UIのためのUnity入門: ①導入編

目次

はじめに

「UIのためのUnity入門」では、「Unity」というゲームエンジン1を用いて、自分の作ったデザインやアニメーションを実際に動かせるようになることを目標に、Unityの使い方を数回に分けて紹介します。

他のUnityの入門記事よりもUIデザインやUIアニメーションをUnityに入れることに特化しエンジニア視点で知っておいてほしいことも記載するため、Unityの使用経験が全くない/少しあっても不安が残っているデザイナーや、Unity初学者のエンジニアに是非読んでいただければと思います。

また、入門と言いつつも業務でもある程度通用するレベルの知識を身につけられる記事にするため、説明が多くなっている部分があります。そこまで深く知るのは一旦いいかなと思う方は、見出しに(業務レベル)と記載されている項目については読み飛ばすことを推奨します。
(あくまでも目的は「Unity上で自分の作ったデザインやアニメーションを実際に動かせるようになること」であるため、難しいと感じて挫折するより、自分のモチベーションに合った内容を読み進めて実際に手を動かすのが良いと思います)

なぜデザイナーがUnityをやるのか

エンジニアは読み飛ばして良いです。

「なぜデザイナーがUnityをやるのか」という問いには以下の2つの観点があります。

  1. なぜデザイナーがゲームエンジンを使うのか
  2. なぜUnityなのか

なぜデザイナーがゲームエンジンを使うのか

自分が業務で携わったプロジェクトでは、デザイナーがUnityでデザインやアニメーションを調整することが多々ありました。
他のゲーム会社でもそういった状況が考えられる以上、ゲームエンジンを使えるデザイナーに一定の需要があることは確かです。
また業務上の利点としては、以下のようなものがあります。

  • エンジニアが実装したものが理想と異なっていた場合、自分で修正できるorどう修正してほしいか伝えやすくなる
    • 実際にデザイナーが修正して良いかはプロジェクトのルール次第ですが
  • 見落としがちな画面比率が異なる端末の対応に対しても意識するようになる
    • とくにスマホゲームでは多種多様な画面比率に対応することになりますが、この意識が足りていないと後からデザインやアニメーションを調整する必要がでて、しなくて良い苦労をすることになります

それに業務に関係ない点では、自分が作ったデザインやアニメーションを実際に動かして試せるようになったらなんかスゲー良いと思いませんか?

なのでデザイナーもゲームエンジンを使えるに越したことはないです。

なぜUnityなのか

自分が業務でUnityを使っているので、業務レベルの話ができるのがUnityだからです…というと身も蓋もないですが、ゲームエンジンの中でUnityが高いシェア率を誇るため需要があります。
また、個人かつ特定の条件2を満たしている限りは無料で使えるという点と、Unityは以前より人気の高いゲームエンジンであるため、日本語で書かれた記事が多く存在し、困った時に調べ易いという点もUnityを選択する理由です。

より詳しく:
PCゲームや中国のゲーム会社ではUnreal Engineという別のゲームエンジンも多く使われていたり、独自のゲームエンジンが使われている場合もあります。しかし、まずこの記事でUnityに慣れることで、他のゲームエンジンでもこういうことができるのではという考えを持つことができるのでとっかかりがつきやすくなると思います。
特にUnreal Engineなど、一般に情報が出回っているゲームエンジンの場合、ChatGPTGeminiなどのAIチャットbotに「Unityの~~~と同じ機能をUnreal Engineで使いたい場合、公式で提供されている方法はある?」という感じで聞けば一発でやり方を出してくれるので、この記事を読んだ後にUnreal Engineに移行しても遅くはないと思います。
(UnityのこともAIに聞けば大体回答を出してもらえますが、この記事では画像などを交えながらAIよりわかりやすく紹介し、道に迷わずに目標を達成できるようにします。)

本記事の内容

今回は初回の記事であるため、以下の内容について紹介します。

  1. Unityの導入
  2. Unityの画面の見方
  3. 知っておくと良い画面についてのTips
  1. ゲームエンジン: ゲームを開発するためのツールのこと。UnityやUnreal Engineなど誰でも使えるものや、ゲーム会社が独自に作って自社内等でのみ使用しているものがある。 ↩︎
  2. 特定の条件: 調達資金または年間収益が20万米ドル以下 ↩︎

Unityの導入(2025年12月現在)

Unityを起動するまでには以下の手順を踏みます。

  1. UnityIDの作成(なければ)
  2. UnityHubのインストールとアカウント連携
  3. Unityのインストール
  4. プロジェクトの作成

次の項から順に説明していきます。

以降の説明で出るスクリーンショットはApple SiliconのMac上の画像となるため、Intel版のMacやWindows、Linuxを使用している方は若干の差異がある可能性があることにご注意ください。

UnityIDの作成

Unityを使うにはUnityIDという所謂Unity用のアカウントが必要になります。
まず以下のリンクから、Unity IDのサインアップ用サイトへ行きましょう。

https://login.unity.com/ja/sign-up

基本はリンク先のサイトの流れでできますが、以下の画像のように進めていきます。

これでUnity IDの作成は完了です!
試しに以下のリンクからサインインしてみましょう!

https://login.unity.com/ja/sign-in

自動でサインインされることもありますが、サインインと書かれたサイトに飛んだ場合以下画像の手順でサインインしてください。

サインインすると、以下のどちらかの画像のようになります。
これでUnity IDが作成されたことが確認できました!

Unity Hubのインストールとアカウント連携

この項の説明の内、インストール部分についてはMacOS特有のUIとなるため、Windowsの方でわからない方は以下の記事を参考にしてみてください
https://styly.cc/ja/tips/tomo-unity-install/
https://feynman.co.jp/unityforest/unity-introduction/how-to-install-unityhub/

Unity HubはUnityのプロジェクトやライセンス、Unityそのもののバージョンなどを管理するためのもので、Unityのプロジェクトは基本的にこのUnity Hubから開くことになります。
まず、以下のリンクからダウンロードサイトへ飛びます。

https://unity.com/ja/download

サイトを開いたら以下の画像のように、使用しているOS用のリンクをクリックしダウンロードします。


ダウンロード後に表示されるステップの手順でUnity Hubをインストールしてください。(以下の画像はMac版です)

インストールしたUnity Hubを開くと、サインインが求められるのでサインインしてください。
(Webサイトが開かれますが、サインインができるとUnity Hubに自動で戻ります。)

最後にPersonalライセンスを取得することに同意します。
これでUnity Hubのインストールからアカウント連携までは完了です!

Personalライセンスは無料のライセンスです。
別のライセンスを使用する場合、Unity Hubの左側にある「Licenses」タブをクリックし「Add license」を行なってください。
ライセンスについての詳細:https://unity.com/ja/products

Unityのインストール

この項ではUnityそのもののインストールからプロジェクトの作成までを説明します。
Unityには多くのバージョンが存在しますが、過去のバージョンを含め以下のリンクからダウンロードすることができるので、リンク先のサイトを開いてください。

https://unity.com/ja/releases/editor/archive

サイトにはUnityの過去のバージョンが一覧で表示されています。
以下の画像の手順でバージョン6000.0.64f1をインストールします。

Unity Hubが開かれたら、自分の使用しているPCのチップにあったものを確認し「Install」をクリックします。

Macの場合Apple SiliconとIntelの2種類が表示されます。
基本的にはRecommendedと記載されている方を選択すれば良いですが、不安であれば以下の手順で確認してください。

「Install」をクリックすると、オプションで何をインストールするか表示されます。
以下の画像のように、特に理由がなければAndroid Build SupportとiOS Build Supportのチェックを有効にしておくと、いずれ説明するシミュレーションモードでスマホ対応がしやすくなるのでおすすめです。
続けて「Continue」をクリックし、以下の画像の流れでインストールしましょう。

Android Build Supportのチェックが無効の場合、「Continue」ではなく「Install」という表示になります。
「Install」をクリックするとインストールが開始されるのでクリックしましょう。

これでインストールが開始されます!
インストール中の進捗などは以下の画像の手順で確認することができます。

完了するとInstallsのAll(インストール済みUnity一覧)にインストールしたUnityが追加されます。

ここまででUnityのインストールまでは完了です!
お疲れ様でした!
あと少し、Unityの起動までやってみましょう!

プロジェクトの作成

(トートロジーのような文章になってしまいますが…)Unityはプロジェクトという単位でプロジェクトを管理します。
ということで以下の画像を参考にプロジェクトを作ってみましょう!

以下の2枚目の画像で「Universal 3D」をクリックしている部分は、別のものを選択しても特に問題ありません。
どれを選択しても初期設定やテンプレートが異なるだけで、後から変更可能です。
状況に応じたおすすめは以下の通りです!
Universal 2D: 完全に2Dのみでゲームを作る場合
Universal 3D: 3Dを使う場合
High Definition 3D: 高品質、フォトリアルな3Dを使う場合

ここまですれば、プロジェクト作成が始まります。
しばらく待って、以下のような画面が表示されれば成功です!
(画面の細部は多少異なると思いますが、問題ありません。)
この画面をUnity Editorと呼びます。

作成したプロジェクトはUnity HubのProjects画面上に表示され、そこから開くことができます。

お疲れ様でした。ここまでで、Unity IDの作成からUnityのプロジェクトを作成するところまで全て完了です!

Unityの画面の見方

この項ではUnityの画面の見方を説明します。途中で説明するヘッダーメニューについてはMacとWindowsで位置や見た目に多少の差があるので、Windowsユーザーはそこだけ留意ください。

基本的な見方

Unityの画面は機能毎に分割されています。
機能の名前は以下の添付画像内の赤枠で囲われた部分のように、各分割された画面の左上に表示されるタブで見分けることができます。
例えば添付画像であれば、右の画面はInspector画面、左下の画面はGame画面が開かれている状態です。
(この記事の読者の画面配置と添付画像の画面配置は異なっていると思うのでご注意ください。)

複数のタブが横並びになっている場合、タブ名をクリックすることで切り替えることが可能です。

画面の位置はタブをクリックしながらカーソルを移動させることで自由に変更することが可能です。
初期配置を覚えても良いのですが、作るゲームによって使いやすいようにレイアウトを変えると良いと思います。
(後の項でおすすめのレイアウトを紹介しているので参考にしてみてください。)

画面中央上部には実行ボタン、上部にはヘッダーメニューがあります。

主要な画面の説明(業務レベル)

今後の記事で使いながら覚えれば問題ないですが、主要な画面の概要だけ説明を記載します。

Game(ゲーム)

Game画面に表示されている見た目が、実際にユーザーにが見るゲーム画面の見た目になります。
また、ゲーム画面に配置されたのボタンのクリックなど、ユーザーが行うインタラクションもこのGame画面上で行います。

Scene(シーン)

Unityではゲームの一つの場面を構成するものをScene(シーン)という単位で管理します。
Scene画面はGame画面とは異なり、様々な位置や方向からシーン内のオブジェクトを確認することができます。
また、配置されたオブジェクトをクリックして選択することや、選択中のオブジェクトの位置、回転、スケールを直感的に変更することが可能です。

Inspector(インスペクター)

Inspector画面では選択中のオブジェクトの詳細を確認、変更することができます。
この画面で、オブジェクトの位置、回転、スケールを数値で変更したり、オブジェクトに機能をつけたりすることができます。

Hierarchy(ヒエラルキー)

Hierarchy画面は開いているシーンに配置されているオブジェクト全ての親子関係を管理する画面です。
シーン内のオブジェクトを選択することや、シーン内に新しくオブジェクトを配置することもできます。
プロジェクトを作成し、最初に開かれているSampleSceneには、Main Camera(カメラ)と、Directional Light(ライト)とGlobal Volume(見た目調整用のオブジェクト)の3つだけが置かれています。

Project(プロジェクト)

Project画面はそのプロジェクト内のファイル一覧の画面です。
Project画面上でフォルダを開き、Finder(Windowsであればエクスプローラー)からファイル(画像など)をドラッグ&ドロップすることでも、ファイルをプロジェクト内にインポートすることができます。

Console(コンソール)

Console画面はログが出力されます。
エラーログなどもこのConsoleで表示されるので、実行ができない場合などは確認してみると良いです。
「Clear」ボタンを押すとその時点で発生しているエラー以外は全て消えます。

Animation(アニメーション)

Animation画面ではアニメーションを作成することができます。

知っておくと良い画面についてのTips(業務レベル)

この項では、知っておくと便利な画面についてのTipsを記載しています。

画面のおすすめの配置

慣れ的な部分もありますが、まだUnityに慣れていないのであれば、以下のような配置がおすすめです

  • Hierarchy画面とInspector画面は横並びにする
    • 行き来することが多いため
  • Console画面とProject画面は横並びにする
    • コード上でエラーが存在する場合、Console画面でエラーをクリックするとProject画面上で該当のファイルがあるフォルダが開かれるため(デザイナーはあまり関係ないかも知れませんが…)

また、横長画面のゲームであれば「Game」「Scene」を縦に並べ、縦長のゲームであれば「Game」「Scene」を横に並べるのがおすすめです。

画面はUnityのウィンドウ外にも配置できます。そのため、複数モニターある場合などは、Game画面だけ別のモニターに表示するといったこともおすすめです。

画面の開き方、閉じ方

新しい画面を開きたい場合、以下の手順で開くことができます。

  1. 開きたい場所にある画面の右上にある縦に3つ点が並んだボタンをクリック
  2. 「Add Tab」をクリック
  3. 新しく開きたい画面をクリック

同じ画面を複数開くことも可能です。次の項で説明する画面ロックと組み合わせることで、複数のInspector画面を使って複数のオブジェクトを見比べることや、複数のProject画面を使ってファイルを簡単に移動させることなどができます。

逆に画面を閉じたい場合は以下の手順で閉じることが可能です。

  1. 閉じたい画面を選択
    1. 選択中の画面はタブの上に細い青い線が表示される
  2. 閉じたい画面の右上にある縦に3つ点が並んだボタンをクリック
  3. 「Close Tab」をクリック

画面ロックの仕方

Inspector画面は、Hierarchy画面やProject画面でオブジェクトやファイルをクリックすることで表示される内容が変わっていきます。
他の画面も、色々な操作で自動で画面が切り替わることがあります。
そうなって欲しくない場合、画面をロックすることで表示を固定することができます。

ロック状態は各画面右上の南京錠マークをクリックすることで切り替えることが可能です。
ただし、その画面に何も表示されていない場合などロックできない時もあります。

まとめ

今回は、なぜデザイナーがUnityをやるのかということと、Unityの導入から画面の見方まで紹介しました。

次回から早速Unity上での画像配置を行なっていきたいと思います!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次