はじめに
今回は、Unityで画面の色やUIといった操作画面を調整する方法を紹介します。
Unity初心者向けの内容になります。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-16.jpg)
画面の色を変える(テーマ)
画面の色は「明るい色」と「暗い色」の2つを選べます。
Edit → Preferences…を開きます。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-01-2-730x1024.jpg)
General → Editor Themeの所から「Light」か「Drak」を選びます。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-02-1.jpg)
これで、画面の色(テーマ)を変えれます。
ちなみに私はライトテーマ派です。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
画面全体が明るい方が、目の瞳孔が狭まるので…
目に入る光が少ないので、疲れにくいという考えです。
文字の大きさを変える
Edit → Preferences…を開きます。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-07-1-731x1024.jpg)
UI Scaling → Use custom scaling valueを選択。
ここの%を変える事で、文字の大きさを変えれます。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-09-1.jpg)
設定後は再起動が必要になります。
文字を小さくすると、使える画面の面積が増えます。
文字が大きいと、字が読みやすくなります。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-06-2.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
大きさと画面の占有率はトレードオフの関係なので…
自分に合う大きさを自由に設定をしてください。
(私は225%に設定してます)
画面の要素を追加する
Scene、Hierarchy、Inspectorといった要素は画面右上の3つの点をクリック。
→ 「Add Tab」の所で表示することができます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-29-5.jpg)
選択すると、Hierarchyなどを表示できます。
このあたりの要素は、2つ以上表示させることができます。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-08-1.jpg)
また、ここに表示されて無い画面は「Window」から表示できます。
例えば、Window → Analysis → Freame Debuggerを選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-02-8.jpg)
これで、Frame Debuggerのような、ちょっと変わった画面も表示できます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-03-8.jpg)
ちなみに、Frame Debuggerの使い方はこちらで解説。
画面を分割する
次は画面を分割し、自分が使いやすいように設定してきます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-01-13.jpg)
画面は文字の書かれてる所をクリック。
→ ドラッグ&ドロップで「移動、分離、ウインドウ分割」などが行えます。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_01.gif)
あと、増やしたウインドウは分離 → 「×」ボタンで消せます。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_02-1.gif)
以上が、画面を分割する方法です。
同じ画面を2つ表示するメリット
私は「Scene」と「Project」を2画面表示してます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-12-9.jpg)
Sceneはウインドウごとに表示されるもの設定やアングルを変えれます。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_08-1-1023x679.gif)
このように、画面を増やす事で複数のビューを使えるのがメリットの1つです。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-10-1.jpg)
Lock機能+2ウインドウの活用法
Projectは何も設定してないと、他の画面に表示物が同期します。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_10-1024x370.gif)
なので、表示したいモノを表示。
右上の3つの点 → 「Lock」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-13-7.jpg)
これで、他の画面に表示物が同期しなくなります。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_11-1-1024x370.gif)
この機能はInspectorでも使えます。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-11-1.jpg)
これで、カメラとマテリアルのInspectorを同時表示することが可能です。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-12.jpg)
これで、カメラとオプジェクトの設定を同時に触れるようになります。
便利なのでご活用ください。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-13.jpg)
このテクニックを使うために、私は下図の様な画面構成にしてます。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-14.jpg)
同じ画面分割にSceceやInspectorを複数表示てるのは…
角度の差分や「Lock」のオン/オフみたいな差分です。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
意図してこの形を作ったというより…
使っていくうちにこの形になりました。
Inspectorのプレビューを表示する
Inspectorにはプレビュー機能があります。
これは、下の2本線の所で表示できます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-15-5.jpg)
「クリック」or「ドラッグ&ドロップ」でプレビューを表示できます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-16-7.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
将来、ここにアニメーションのプレビューを出す必要が出てくるので…
覚えておくと、後々役立ちます。
Projectの表示方法を変える
Projectは右下で表示の大きさを変えることができます。
一番小さくすると、文字が横に並んだ表示になります。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-14-6.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
また、Ctrl+中ホイールを上下でも大きさを変えれます。
Sceneビューの調整
次は3Dモデルが表示される「Scene」について解説します。
マニュピレーター表示調整
マニュピレーターは「Q,W,E,R,T,Y」キーで切り換えれます。
左上の表示と同期します。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_03-1-1024x656.gif)
なので、左上の表示は要らないと思います。
こちらは上部にある2本線を右クリック → Hidedで消せます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-03-10.jpg)
以上が、マニュピレーター表示調整です。
Main Cameraビューの表示切替
カメラビューは、Hierarchyでカメラを選択すると出てきます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-04-10.jpg)
邪魔な場合は、Hierarchyでカメラ以外のモノを消してください。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-05-9.jpg)
以上が、Main Cameraビューの画面の表示切替です。
透視図法 / 平行投影の切り替え
透視図法 / 平行投影は、3Dオペレーションの文字が書かれてる所をクリックで変更できます。
「ISO」や「Persp」と書かれてる所です。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_04-1.gif)
透視図法は普通の見え方です。
俗にいう遠近法、パースがあります。
![](https://signyamo.blog/wp-content/uploads/2024/01/image-16-16.jpg)
なので、距離による変化で形がちょっとだけ変形します。
![](https://signyamo.blog/wp-content/uploads/2024/01/image-19-16.jpg)
平行投影は、この距離による変化を無くした表示です。
![](https://signyamo.blog/wp-content/uploads/2024/01/image-49-5.jpg)
詳細はこちらで解説してます。
以上が、透視図法 / 平行投影の切り替えです。
3Dオペレーションの非表示化
3Dオペレーションにも2本線があります。
こちらを右クリック → 「Hide」で非表示化できます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-06-10.jpg)
以上が、3Dオペレーションの非表示化です。
オーバーレイ要素の管理
ここまで紹介した要素は「オーバーレイ要素」と呼ばれるものになります。
こちらは Sceneの3つの点をクリック → 「Overlay Menu」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-07-9.jpg)
ここの目ボタンで表示 / 非表示を切り替えれます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-08-9.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
Overlaysのチェックで全ての要素を表示 / 非表示化
「Default」と書かれてる所で、画面の状態を保存+読み込みできます。
あと、オーバーレイ要素は2つの線をクリック → ドラッグで「移動」や「結合」できます。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_05-1-1023x296.gif)
2本線を右クリック → 「Collapse」で縮小表示もできます。
こちらは、クリックするとその内容を呼び出せる形です。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-10-7.jpg)
3Dオペレーションも同じオーバーレイ要素なので… 同様の処理が使えます。
縮小表示すると、クリックで呼び出す形になります。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-09-7.jpg)
私はこのような画面にしました。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-11-8.jpg)
画面右側に設定したオーバーレイ要素は、画面の縮小で真っ先に消えます。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_06-2-1023x296.gif)
以上が、オーバーレイ要素の管理方法です。
3Dビューの表示調整
Scene上部の電球アイコンで光源のオン/オフ
四角形2つマークで背景のオン/オフ
グリットマークで地面をオン/オフできます。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_07-1.gif)
球マークをクリックすれば、光源やカメラアイコンのオン/オフができます。
![](https://signyamo.blog/wp-content/uploads/2024/04/gif_09-1023x679.gif)
以上が、3Dビューの調整方法です。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-11-8.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
そして、この操作をする為に…
「View Options」と「Grid and Snap」を最大サイズで左上に置きました。
画面を日本語に翻訳する
Unityは画面を日本語化できます。
Edit → Preferences…を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-4-1-731x1024.jpg)
Languages → Editor languageを「日本語」に設定。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-03-1.jpg)
これで画面を日本語化できます。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-04-1.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
ただし、既存のUnity解説記事は…
日本の記事でもほとんど「英語画面」で書かれてます。
なので、翻訳してしまうと同じボタンを見つけれない現象が発生します。
(中~上級者、ちょっと画面を画面が変わってもUnity使えるよ!という人向けの機能)
…個人的には初手で翻訳は、逆に難易度を上げると思ったので一番最後に入れました。
まとめ
今回は、Unityで画面の色やUIを調整する方法を紹介しました。
・画面の色、文字、言語は「Edit → Preferences…」から変更可能
・画面の要素は右上の3つの点か「Window」より表示可能
・画面はドラッグ&ドロップで分割可能
・Sceneの操作系は「Q,W,E,R,T,Y」キーで表示可能
・Sceneのオーバーレイ要素は折りたたんだり動かせる
また、他にもUnityや3DCGについて解説してます。
ぜひ、こちらもご覧ください。
コメント