--- title: "VR ユーザーインターフェース (UI) " content_type: tutorial url: "https://learn.unity.com/tutorial/11-user-interface-jp?language=ja" language: ja difficulty: beginner duration_minutes: 45 unity_version: - "2019.3" - "2019.2" - "2019.1" - "2018.4" - "2018.3" supported_unity_versions: - name: "2019.3" url: "https://learn.unity.com/tutorial/11-user-interface-jp.md?language=ja&version=2019.3" - name: "2019.2" url: "https://learn.unity.com/tutorial/11-user-interface-jp.md?language=ja&version=2019.2" - name: "2019.1" url: "https://learn.unity.com/tutorial/11-user-interface-jp.md?language=ja&version=2019.1" - name: "2018.4" url: "https://learn.unity.com/tutorial/11-user-interface-jp.md?language=ja&version=2018.4" - name: "2018.3" url: "https://learn.unity.com/tutorial/11-user-interface-jp.md?language=ja&version=2018.3" available_languages: - name: "en" url: "https://learn.unity.com/tutorial/11-user-interface.md?language=en" - name: "ja" url: "https://learn.unity.com/tutorial/11-user-interface-jp.md?language=ja" last_updated: "2026-08-04T14:23:02.000Z" --- # VR ユーザーインターフェース (UI) TextMesh Pro と Google Fonts で鮮明なテキストを作成し、安定した Precision Grab インタラクションを設定します。 以下の方法を学びます： - Text Mesh Pro を使った Crisp Text の作成 - Google Fonts からカスタムフォントをインポートしてText Mesh Pro で使用する - 手への「ジャンプ」を回避する Precision Grab Interactable オブジェクトについて ## 1. ワールド空間での新しいキャンバス [Video](https://connect-mediagw.unity.com/h1/20200728/videos/bcf68445-70b4-4068-bd8d-7e0de55e2540_11.6_New_Canvas.mp4) ([Transcript (ja_jp)](https://connect-mediagw.unity.com/h1/20200728/2c65ab51-3f5e-4ec8-a7d4-a13a871ac5a3_11.6_New_Canvas.vtt.vtt)) 1. GameOBject > UI > Canvas の順に選択します。 2. Inspector 内では「Render Mode」が World Space に設定されています。 3. Width (幅) を 3、Height (高さ) を 4 に設定し、X position (位置) を -4.23、Y position (位置) を 2.06 に設定します。 4. キャンバスを Y 軸で -90 度回転させます。 5. テキストの追加（右クリック > UI > TextMeshPro）TMP がない場合は、Window > Package Manage と移動してインストールしてください。 6. Inspector で、テキストの Width を 3 に、Height を 4に設定します。 7. フォントサイズを 0.7 に設定し、テキストを Center (中央) に配置します。 ![新しいキャンバスの Text Mesh Pro のテキスト](https://connect-mediagw.unity.com/h1/20190521/learn/images/4e705339-f3e3-41be-a474-4c132757547d_tmp.PNG) ## 2. Google カスタムフォント [Video](https://connect-mediagw.unity.com/h1/20200728/videos/83335012-cdc4-4f30-ab5d-3ff0bd6ea87a_11.10_Custom_Fonts.mp4) ([Transcript (ja_jp)](https://connect-mediagw.unity.com/h1/20200728/421751bf-4239-4954-87aa-8dc3c2484832_11.10_Custom_Fonts.vtt.vtt)) 1. fonts.google.com にアクセスし、フォントを選び、「＋」ボタンをクリックします。 2. 表示されるボックスで「1 Family Selected」をクリックし、ダウンロードボタンをクリックします。 3. フォントを取り出し、TTF（TrueType Font）を Unity にドラッグして取り込みます。 4. フォントを TextMeshPro (TMP) で使えるようにするには、Window > TextMeshPro > Font Asset Creator の順に進みます。 5. Font Asset Creator ウィンドウで、取り込んだフォントを「Source Font File」フィールドへドラッグします。 6. 「Generate Font Atlas」ボタンをクリックします。 7. 「Save As」をクリックし、フォルダーへ保存（Assets > TextMeshPro > Resources > Fonts & Materials フォルダーの順に選択）したら、Font Asset Creator ウィンドウを閉じます。 8. Hierarchy から TextMeshPro Text を選択した状態で、新しく作成した TMP Font Asset（F アイコン）を Inspector ウィンドウの「Font Asset」フィールドへドラッグします。 ## 3. テキストフォーマット [Video](https://connect-mediagw.unity.com/h1/20200728/videos/674631ac-f6c4-426a-8726-bbddf6f619ee_11.11_Formatting_Text.mp4) ([Transcript (ja_jp)](https://connect-mediagw.unity.com/h1/20200728/302b0d54-d6de-45b4-ac45-0c54d909e3df_11.11_Formatting_Text.vtt.vtt)) 1. 「Jump Start!」が 1 行に収まるようにフォントサイズを調整します（私は .41 を使用）。 2. Inspector ウィンドウで「Underlay」(ドロップシャドウ) を追加します。設定を使いました：Offset X: .46、Offset Y: -.82、Softness: .137 3. Hierarchy の中で、TMP テキストを複製し（Control + D）、タイトルを「JumpStartText」とし、新しいコピーを「Directions」とします。 4. Inspector のテキストフィールドに、指示（クランプを接続する順番）を追加します。私は以下のテキストを使いました： 1. Red Good 2. Red Dead 3. Black Good 4. Black Dead 5. テキストの左揃え（左揃えボタンをクリック） 6. Hierarchy でキャンバスを選択し、Y の位置を下に移動させます。私は .42 を使ったので、それほど高い位置にはありません。 ## 4. テキストのビルボード背景 [Video](https://connect-mediagw.unity.com/h1/20200728/videos/bfd7ad5a-e732-43e9-bd9d-e7531c9cbb5d_11.40_Billboard_Cube.mp4) ([Transcript (ja_jp)](https://connect-mediagw.unity.com/h1/20200728/059f956a-1b48-4a7e-9a92-d8810e8a700a_11.40_Billboard_Cube.vtt.vtt)) 1. Assets > VRTK > Prefabs > Interactions > Interactables の順に選択して Interactable プレハブキューブ（先ほど使用したものと同じなので、後でこれを小さな「クリップボード」サイズの指示に縮小することができる）をドロップします。 2. キューブの scale を X:1, Y:2.59, Z:3.2 に、position をX:-4.85, Y:1.31, Z:-0.8 に設定 3. Hierarchy で、Interactable プレハブの名前を「Billboard」に変更します。 4. Canvas を Billboard にドロップして、子オブジェクトにします（ビルボードとキャンバス＆テキストを一緒に動かせるようになる）。 ## 5. クリップボードサイズについて [Video](https://connect-mediagw.unity.com/h1/20200728/videos/2ee1cd0d-f6da-4a8e-a253-ea2910a144d6_11.41_Clipboard_Cube.mp4) ([Transcript (ja_jp)](https://connect-mediagw.unity.com/h1/20200728/8b5a22c3-aa18-4c66-856e-c95a934ca247_11.41_Clipboard_Cube.vtt.vtt)) 1. Hierarchy の中で、Billboard を複製（control + D）し、名前を「Clipboard」とします。 2. Clipboard のスケールを X:0.1, Y:0.2, Z:0.2 に設定します。 3. 頂点スナップ（Control + Drag）で Clipboard をクランプテーブルに移動させます。 4. オプション：Test SZ と Cylinder を Hierarchy で選択し、Inspector ウィンドウの上部にあるボックスをオフにすることで、邪魔な「Test SZ」と Cylinder を非表示にします。 ![上記の手順を経た結果](https://connect-mediagw.unity.com/h1/20190522/learn/images/cf635d3e-941a-4a64-9c8b-5c6fce1eb1d9_clipboard2.PNG) ## 6. 調整して、正確にオブジェクトを掴む [Video](https://connect-mediagw.unity.com/h1/20200728/videos/b22a9b2a-b271-4881-ab22-2f9da8a988f8_11.7_Clipboard_Adjustments.mp4) ([Transcript (ja_jp)](https://connect-mediagw.unity.com/h1/20200728/97955895-3ddb-4e14-9cf8-3f3142f096cb_11.7_Clipboard_Adjustments.vtt.vtt)) 1. Hierarchy で、Clipboard 内の Canvas を選択します。X の位置を調整して、キューブに近づけます。私は X: 0.51 を使用しました。 2. Play モードでは、現在、Clipboard を手に取ると、手の上で予期せぬ方向に「スナップ、 snap」します。もっと正確に変更しましょう。 3. Hierarchy の中で、Clipboard > Interaction Logic > Interactable.GrabLogic > Actions > PrimaryAction の順に展開し、Interactable.GrabAction.FollowAction を選択します。 4. Inspector で、Grab Offset のドロップダウンメニューを「Precision Point」に設定します。 クランプを掴んだとき（手の向きに合わせてジャンプする）と、クリップボードを掴んだとき（ジャンプしない）の違いを試してみましょう。