こんにちは、Unityエンジニアのオオバです。

お悩みさん
お悩みさん
  • UIデザイナーがUnityをさわる上で知っておくべき機能って何?
  • 知っておくと便利な機能を知りたい
  • オオバ
    オオバ
    本記事ではこれらの悩みを解決します。

    最近はUnityをガッツリさわるUIデザイナーが増えました。
    UIデザイナーがUnityをさわる理由の1つは
    UIレイアウトを自分でやりたい ということ。

    UIレイアウトとは、ボタンや画像といったUIの
    位置やサイズの調整 です。

    というのもエンジニアではどうしてもデザイナーのニュアンスが伝わらない時があるのです。
    「神は細部に宿る」 という言葉の通り、
    最終的なクオリティは細かい作業になります。

    それはデザイナーの目があってこそ。
    エンジニアには見えない世界があるのです。

    だからこそ デザイナーがにはUnityをさわってほしい と考えています。

    本記事ではUIレイアウトに必要な Unity必須機能 を3つ紹介します。
    ぜひとも UnityをさわるUIデザイナー の方に読んでいただきたいです。
    もちろんUnity初心者の方にもオススメの内容です。

    UIレイアウトを効率化させる機能を覚える

    【Unity】UIデザイン必須ツール3選_0

    先に結論から。
    こちらの3種を覚えておくと良いでしょう。

    UIのレイアウトは基本的にシーンビューを見ながら行います。
    その際に 高頻度で使用する必須機能 を厳選しました。

    より効率を上げるために
    ショートカットとセットで紹介していきます。

    またTwitterでもUIデザイナー向けの便利機能の発信をしています。
    興味ある方はチェックしてみてください。

    →11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら

    Unity必須機能 1. ハンドツール

    ハンドツールはUIレイアウトに超必須機能です。
    シーンビュー内の視点を感覚的に移動できます。

    Unityを使う上でかなり多用します。
    ショートカットとセットでまとめた表がこちら。

    機能ショートカット
    視点の移動⌘ + オプション + マウスドラッグ
    カーソルズームマウスホイール
    画面の中心ズーム⌘ + オプション + マウスホイール

    【Unity】UIデザイン必須ツール3選_1

    Unityエディタ画面左上の 手のアイコン をクリックしても良いですが、
    ショートカットを覚えておく方が良いでしょう。

    視点の移動

    ⌘ + オプション + マウスドラッグ

    【Unity】UIデザイン必須ツール3選_2

    カーソルズーム

    マウスホイール

    【Unity】UIデザイン必須ツール3選_3

    カーソルを中心にして
    ズームイン、ズームアウトします。

    画面の中心ズーム

    ⌘ + オプション + マウスホイール

    【Unity】UIデザイン必須ツール3選_4

    シーンビューを中心にして
    ズームイン、ズームアウトします。

    Unity必須機能 2. 移動・回転・レクトツール

    移動と回転はUIレイアウトに必須です。特に「移動」ですね。
    加えて レクトツール が超絶便利なので紹介します。

    機能とショートカットをまとめた表がこちら。

    機能ショートカットアイコン
    移動ツールwキー
    【Unity】UIデザイン必須ツール3選_5
    回転ツールeキー
    【Unity】UIデザイン必須ツール3選_6
    レクトツールtキー
    【Unity】UIデザイン必須ツール3選_7

    Unityエディタ画面左上のツールアイコンもセットで掲載していますが、
    ショートカットを覚えた方がよいです。

    移動ツール(ショートカット : wキー)

    移動ツールには3種類の機能があります。

    【Unity】UIデザイン必須ツール3選_8

    機能操作方法
    自由移動
    【Unity】UIデザイン必須ツール3選_9
    X軸制限の移動
    【Unity】UIデザイン必須ツール3選_10
    Y軸制限の移動
    【Unity】UIデザイン必須ツール3選_11

    ※Z軸の移動はUIレイアウトでは使わないため割愛

    回転ツール(ショートカット : eキー)

    【Unity】UIデザイン必須ツール3選_12

    UIレイアウトにおける回転は
    Z軸制限の回転しか使いません。

    【Unity】UIデザイン必須ツール3選_13

    青色の円をクリックしてドラッグします。

    レクトツール(ショートカット : tキー)

    【Unity】UIデザイン必須ツール3選_14

    最後に超絶便利な レクトツール の紹介です。
    あまり耳慣れないかも知れません。
    ショートカットは tキー です。

    【Unity】UIデザイン必須ツール3選_15

    このように感覚的に
    UIパーツのサイズを変更できます。

    スライスされたパーツ(縦横に永遠に引き伸ばせるパーツ)
    のリサイズに便利です。

    Unity必須機能 3. 複製ショートカット(⌘ + d)

    最後の必須機能は 「複製ショートカット」
    複数のパーツをたくさん配置したいときがあります。
    そんなときは⌘ + d

    【Unity】UIデザイン必須ツール3選_16

    瞬時に複製してくれます。

    大量に同じものを配置したいとき
    時間節約になるためオススメです。

    またヒエラルキーだけでなく、
    プロジェクトビューでも使用可能 です。

    まとめ : UIデザイナー向け今さら聞けないUnityの超基本必須ツール3選

    この3種類の機能は
    ↓↓ショートカット含めて丸暗記 しましょう。

    むしろこれらのツールを使わないと
    UnityでUIレイアウトするのは厳しい!

    オオバ
    オオバ
    大雑把にパーツを配置するために座標を数値で入力したくない

    今回知らなかった人はぜひとも使っていただき、
    効率的なUnityのUIレイアウト に役立てていただければと思います。

    最後に今回つかわせてもらったUIパーツアセット。
    👉 GUI PRO Kit - Casual Game

    【Unity】UIデザイン必須ツール3選_17

    一通りのソシャゲ系の素材が入っているため、
    サクっとものづくりするときに便利 です。
    ※PSDも同梱されています

    もし有料アセットの買い方がわからないという方は、
    コチラの記事を参考にしてみてください。

    「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
    ぜひチャンネル登録をお願いします!

    最後まで読んでいただきありがとうございました!
    すばらしいUnityライフをお過ごしください。

    オススメ記事
    検証環境