これまで、3D空間の中で形や光を作ってきました。
でも、ゲームやアプリを思い浮かべてみてください。
画面の隅にスコアが表示されていたり、クリックするためのボタンがあったりしますよね。
「3D空間にどうやって2Dの文字を置くの？」 その答えが、UnityのUIシステム 『uGUI（ユー・ジー・ユー・アイ）』 です。
実はこのUI制作、FigmaやPhotoshop、Illustrator などのデザインツールを使っている方にとって、最も馴染みやすく、かつ楽しい工程です。
今回は、Unityの中に 「2Dのデザインレイヤー」 を重ねる方法を学びましょう。
UnityのUIは「カメラの前の透明な板」
UnityでUIを作るとき、まず最初に登場するのが 『キャンバス（Canvas）』 です。
-
『ヒエラルキー』で右クリック ＞ 『UI』 ＞ 『Canvas』 を選択します。
-
すると、3D空間に巨大な「四角い枠」が現れます。
初心者がここで一番驚くのは、「3Dオブジェクトに比べて、キャンバスがめちゃくちゃデカい！」 ということです。
でも、心配いりません。
キャンバスは 「カメラのレンズの直前に置かれた、透明なデザインボード」 のようなものです。
3Dの世界の大きさとは別の、ピクセル単位の世界がここに広がっています。
デザイナーお馴染みの要素を置く
キャンバスができたら、その中にデザイン要素を置いていきましょう。
デザイナーに馴染みのある3つの要素を紹介します。
① 画像を置く：Image
-
作り方： Canvasの上で右クリック ＞ 『UI』 ＞ 『Image』
-
役割： アイコンや背景パネルです。
-
Tips： インポートした画像（PNGなど）のインスペクターで、
Texture Typeを 『Sprite (2D and UI)』 に変更するのを忘れずに！
これで、Photoshopのレイヤーのように扱えるようになります。
② 文字を置く：TextMeshPro
-
作り方： Canvasの上で右クリック ＞ 『UI』 ＞ 『Text – TextMesh Pro』
-
役割： 美しく、高解像度なテキストです。
-
Tips： Unity標準の「Text」ではなく、必ず 『TextMeshPro（テキストメッシュプロ）』 を使いましょう。
アウトラインやドロップシャドウなど、デザイナーが欲しい機能がすべて詰まっています。
③ 反応するボタンを置く：Button
-
作り方： Canvasの上で右クリック ＞ 『UI』 ＞ 『Button – TextMesh Pro』
-
役割： 押すと色が変わったり、何かが起きたりする要素です。
3. 「アンカー（Anchor）」はオートレイアウトの親戚
デザイナーを悩ませるのが、画面サイズが変わった時にUIがズレてしまう問題です。
これを解決するのが 『アンカー（Anchor）』 です。
オブジェクトを選択した時、インスペクターに出てくる「四角いマト」のようなアイコン（Rect Transform）をクリックしてみてください。
-
左上に固定（Top Left）： 画面を広げても、ロゴを常に左上に置く。
-
中央に固定（Center）： どんな端末で見ても、メニューをど真ん中に置く。
これは、Figmaの 「Constraints（制約）」 や Webデザインの 「レスポンシブ対応」 と全く同じ考え方です。
自分が作ったデザインを、どの角に「ピン留め」するかを決めるだけ。
そう考えれば簡単ですよね。
4. 2.5次元のデザインを楽しもう
Unityの面白いところは、「3D空間の中に2DのUIが浮かんでいる」 状態をリアルタイムで見られることです。
-
UIを少しだけ手前に配置して奥行きを出す。
-
ポストプロセッシングの「ブルーム」をかけて、UIの文字を光らせる。
このように、平面のデザイン知識と3Dの演出を組み合わせることで、従来のツールでは作れなかった 「リッチなユーザー体験」 が生まれます。
まとめ：あなたはすでに「UIのプロ」
今回は、デザイナーのホームグラウンドである 『uGUI』 について解説しました。
-
Canvas は、画面全体を覆うデザインボード。
-
Image と TextMeshPro で、いつものようにレイアウト。
-
Anchor は、FigmaのConstraintsと同じ「ピン留め」機能。
配置のセンスやタイポグラフィの知識は、あなたがこれまでのデザイン業務で培ってきたものがそのまま武器になります。
次回は、自分ですべて作らなくてもクオリティを劇的に上げる裏技。
世界中のプロの素材が手に入る 『アセットストア』 の活用術をご紹介します！
