---
title: UVマッピング、テクスチャリング
slug: studio-guide-ja/wGez-uv
docTags: 
createdAt: 2024-09-02T08:34:13.133Z
---

:::hint{type="success"}
**👍 **ガイドを理解するのに役立つように、ページの下部にビデオが添付されています。
ガイドと一緒にビデオを見ると、より簡単にフォローできます！
:::



## UVマッピングとは？

- UVマッピングは、モデリングプロセス中に作成された3Dメッシュの面を2D平面にマッピングするプロセスです。これは、3Dの地図を2Dに展開するようなもので、UVマッピングによりテクスチャを追加することができます。このプロセスはアンラッピングとも呼ばれます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-TshJApKmh9cz7JZoqfGZT-20240904-102332.png)



## ステップ1：Blenderでアンラップ

UV中心のレイアウトに変更するために、上部のUV編集メニューを選択します。

- 左側にはUVエディターパネルがあり、右側には編集モードの3Dビューポートがあります。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-twGla-AJjBpn7tyxjCqOg-20240904-102332.png)



- 3Dビューポートで選択されたメッシュに対応するオブジェクトのUV部分のみが表示されます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-BMYTyY8LCFNZVBpDTZLg3-20240904-102332.png)



- 3Dビューポート内で選択 > すべてを選択すると、オブジェクトのすべてのコンポーネントがUVマップとして表示されます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-x70dyxlqee8QSeZYpC2xa-20240904-102332.png)



## STEP 2 : シームを作成

UVマップを操作するには、まずメッシュの別々のチャンクであるアイランドを作成する必要があります。エッジをシームとして考えることでメッシュを展開できます。

1. 既存のラインをシームとしてマークするには、オブジェクトのエッジを選択し、UV > シームをマークをクリックします。選択したエッジは赤色に変わり、シームとして機能します。

- シームのマークを解除したい場合は、UV > シームをクリアを選択します。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-o7ZGsMcyeRG781AO_2Kbh-20240904-102332.png)

:::hint{type="success"}
**👍 **UVマッピングのためにシームをマークする良い方法は、衣服のどこにシームがあるかを見つけてマークすることです。実際の衣服を参照してシームがどこにあるかを確認してください。
:::



## STEP 3: 展開

シームがマークされると、Blenderは自動的にメッシュ上でマークしたシームに沿ってUVマップを展開します。

1. オブジェクトのすべてのコンポーネントを選択し、次にUV > 展開を選択します。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-DONzbbTnxn5NDyLSiLpc_-20240904-102332.png)



- UVマップはUVパネルのシームに沿って展開されます。これで望むアイランドが作成されない場合は、マークしていたシームを確認して変更し、再度展開を試みてください。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-4VIoR7777pSwRDh0g_-fO-20240904-102332.png)



- UV > 展開を選択すると、ビューポートの左下に展開オプションのメニューが表示されます。ここから、マージンスライダーを使用してアイランド間の間隔を調整できます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-tQvCtOE5644-PfQA4Bozl-20240904-102333.png)

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-tcf_d_UcamR0AgwdXC4Zh-20240904-102334.gif)



## ステップ4: UVの編集

- UV編集パネルでは、3Dビューポートと同様に、頂点、エッジ、面、またはアイランドでUVを選択できます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-UxO0Q6XWNYn-h0rrHlbvX-20240904-102333.png)



- また、移動、回転、スケールなども可能です。UVコンポーネントを選択して変形することで、UVを目的の構造により適合させることができます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-v8ojkHlQdDgEE93M6sDTX-20240904-102333.png)



:::hint{type="danger"}
**❗️ 注意**UV編集パネルで頂点、エッジ、面などのコンポーネントを移動すると、テクスチャがかかり、歪んで見えることがあるので注意してください。
:::



- 分離したいコンポーネントを選択し、左側のツールからRip Regionsを選択すると、それらの部分が分離され、新しいアイランドが作成されます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-FsGx9fCQ7v0jJjXb7DAQx-20240904-102333.png)



- Rip Regionsで作成された新しいアイランドは、3Dビューポートではシームとして表示されず、オブジェクトが再度展開されると消えます。この時点で、UV編集パネルでUV > Seams to islandsを選択して、新しいアイランドに対応するシームを作成できます。



## STEP 5: レイアウト

UVレイアウトを正しく設定することは、テクスチャリングで良い結果を得るために重要です。最初に確認すべきことは、各アイランドの間に十分なマージンがあるかどうかです。そうでないと、テクスチャが切り取られたり、UVの境界で見えるようになったりします。

- 各アイランドの位置を手動で配置することもできますが、Blenderは自動的にそれを行う機能を提供しています。すべてのアイランドを選択し、UVパネルでUV > Pack Islandsを選択すると、UVが自動的にグリッドに合わせて整列されます。ただし、マージンなどの効率性のために追加の調整が必要になる場合があります。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-x_lfdyLAVuf29UUzmZOWW-20240904-102333.png)



- テクスチャ容量の制限を考慮して、各コンポーネントをサイズ変更してフィットさせます。高いレベルの詳細が必要なコンポーネントは、より多くのスペースを占有できます。逆に、シンプルまたは重要でないコンポーネントは、より少ないスペースを使用します。
- UVが斜めに整列している場合、ストライプなどの特定のパターンを使用すると不均一に見えることがあるため、可能な限り水平または垂直に整列させるのが最善です。



:::hint{type="danger"}
**❗️ 注意**
すべてのUVは長方形のガイドライン内に配置する必要があります。
:::



## STEP 6: 画像に抽出

1. UV編集パネルでUV > Export UV Layoutを選択して、UVを画像として抽出します。UV画像のファイル名が混乱しないように、既存のファイル名にuvMapを追加することをお勧めします。例: TOP\_turtleneck\_uvMap
2. 他の設定はそのままにして、Export UV LayoutボタンをクリックしてPNGファイルとして保存します。



## STEP 7 \:Texturing

テクスチャを作成および編集するには、画像編集ソフトを使用する必要があります。このガイドではPhotoshopを使用しましたが、Photoshop以外のさまざまなグラフィックツールを使用することもできます。

1. Photoshopを開き、新しいドキュメントを作成します。テクスチャは正方形である必要があります。ZEPETO Studioにアップロードできるテクスチャの最大サイズは512x512pxなので、そのサイズで作成してください。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Ob3e84fW35DQ8DzK-2NhM-20240904-102333.png)



2\. 保存したUV画像を新しい空のドキュメントにインポートします。PNGファイルは透明なので、テクスチャを配置するためのガイドとして機能します。

3\. いくつかのグラフィック要素を使用してテクスチャを装飾します。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-prVyBe9olUK8fZbdodA3m-20240904-102333.png)



:::hint{type="danger"}
**❗️ 注意**
作業中は、テクスチャがUVガイドを通過しないようにしてください。
:::



4\. テクスチャリングが完了したら、この画像をPNGとして抽出します。UVマップレイヤーを非表示にして保存することを確認してください。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-_hKDX81jTnfh2wvmAWZuY-20240904-102333.png)



5\. Photoshopで、ファイル > 書き出し > 書き出し形式メニューを選択します。このウィンドウで、PNGファイルとして保存され、ファイルサイズが512x512pxであることを確認できます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-oUcwAZC7s6L_UVnR6fm3F-20240904-102333.png)



6\. 画像を保存するには、エクスポートボタンをクリックします。この時、混乱を避けるために、既存のファイル名の後にcolorを追加してテクスチャ画像のファイル名を作成することをお勧めします。例: TOP\_turtleneck\_color



## STEP 8 \:Test the Texture

Blenderに移動して、テクスチャが正しく適用されているかどうかをテストできます。

1. Blenderで、マテリアルプロパティウィンドウに移動し、オブジェクトの新しいマテリアルを作成します。混乱を避けるために、既存のファイル名の後にshdを追加して作成することをお勧めします。例: TOP\_turtleneck\_shd 既存のマテリアルがある場合は、それを使用できます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-kgopi8bxDCoXrmyE5iPUV-20240904-102332.png)



2\. ベースカラーの横にある小さな円を選択し、イメージテクスチャをクリックします。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7TS1dVdq5gN7GT_i7VXJE-20240904-102333.png)



3\. Openボタンをクリックして、Photoshopで以前に保存したPNGファイルを表示します。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-0kWUbg715v7b3KYcp5Olc-20240904-102333.png)



4\. テクスチャはオブジェクトに適用されましたが、Viewportウィンドウでまだ表示されない場合があります。上部のViewport Shadingモードを変更してプレビューできます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-StYyJEynx00TRi-jPcfVK-20240904-102333.png)



::embed[[https://www.youtube.com/watch?v=i2-Engn-EO8](https://www.youtube.com/watch?v=i2-Engn-EO8)]{url="https://www.youtube.com/watch?v=i2-Engn-EO8"}