--- title: UIキャンバスの設定 slug: world-sdk-guide-ja/ui docTags: createdAt: 2024-09-02T08:34:13.136Z --- モバイルデバイスは、さまざまな画面サイズと解像度で提供されています。ZEPETO Worldでは、UnityのCanvasを使用してUI要素を表現するため、Unityには同じ制限があります。 以下のガイドは、できるだけ多くのデバイスにUIを表示するための中立的な設定を提供します。 したがって、すべてのモバイルデバイスに正確にフィットするUIを表現することはできませんが、ほとんどのデバイスでUI要素を類似の位置に配置することを目指しています。 ## 縦画面モードのCanvas設定 ### 1. 縦画面モードのCanvas設定は以下の通りです。 - UIスケールモード : スクリーンサイズに合わせてスケール - 参照解像度 : - X : 750 - Y : 1334 - スクリーンマッチモード : 幅または高さに合わせる - 幅に合わせる ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ZFlryhQcXUh4gTfaiE5u5-20240904-102416.png) ### 2. SafeAreaの設定 - Canvasオブジェクトの子としてSafeAreaというオブジェクトを作成します。 - インスペクターパネルで、Add ComponentボタンをクリックしてZepeto Screen Safe Areaコンポーネントを追加します。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-OyU_5I9sXjpl5jxbNc0Ok-20240904-102416.png) :::hint{type="success"} 👍 **ヒント** - Zepeto Screen Safe Areaコンポーネントは、特定の端末のノッチエリアとホームバーに覆われたUIを、iOS画面の内部に移動させます。 - Zepeto Screen Safe Areaの影響を受けるUIオブジェクトは、サブオブジェクトとして含めることができます。 ::: ### 3. 右上ボタンエリアの設定 レイアウトグループを通じてサブオブジェクトとして要素が追加されるたびに、右上のボタンエリアを自動的に左と右に整列させます。 SafeAreaの下に新しいオブジェクトを作成し、以下のコンポーネントを設定します。 - レクト変換 - PosX : -22, PosY : -22 - 水平レイアウトグループ - 間隔: 20 - 子の整列 : 左上 - コンテンツサイズフィルター - 水平フィット : 推奨サイズ ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-FVr0et_A3JH7USaiC-l_B-20240904-102416.png) ### 4. ボタン設定 ボタンエリアの子としてボタンオブジェクトを作成します。ボタンは自動的に整列され、以下の設定が適用されます。 - 幅 : 62 - 高さ : 62 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-USjoq7mFO4edckCs0gaOV-20240904-102416.png) ### 5. デバイスでの確認 今、ワールドをビルドしてモバイルデバイスで確認すると、次の画像に示すように右上隅にボタンが表示されます。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Lf0dZIjOnPJiAi4QvDUh3-20240904-102416.png) :::hint{type="danger"} **❗️ 注意** ZEPETOアプリのネイティブ環境に表示される左のホームボタンとチャットボタンの正確な位置とサイズは、Canvasを通じて一致させることができません。 ::: ### 6. 左上のUIを設定する 画面の左側にUI要素を設定するには、ステップ3で設定した右側の領域でいくつかの変更を行う必要があります。変更が必要な設定は以下の通りです。 - RectTransform - PosX : 22, PosY : -22 - Horizontal Layout Group - Spacing : 20 - Child Alignment : Upper Left ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ZuK-BpUEXG0nU_nLzrKcE-20240904-102416.png) ## 横画面モードのキャンバス設定。 ### 1. 横向きモードのキャンバス設定は以下の通りです。 - UIスケールモード : スクリーンサイズに合わせてスケール - 参照解像度 : X : 750, Y : 1334 - スクリーンマッチモード : 幅または高さに合わせる - 幅に合わせる ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-nG2aSDm9HzlM1FOSI8cyX-20240904-102416.png) ### 2. SafeArea設定。 - Canvasオブジェクトの子としてSafeAreaというオブジェクトを作成します。 - インスペクターパネルで、コンポーネントを追加するボタンをクリックしてZepeto Screen Safe Areaコンポーネントを追加します。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-HiNfF_Bn0Omu3JeIbhI1J-20240904-102416.png) :::hint{type="success"} 👍 **ヒント** - Zepeto Screen Safe Areaコンポーネントは、特定の端末のノッチエリアとホームバーに覆われたUIを、iOS画面の内部に移動します。 - Zepeto Screen Safe Areaの影響を受けるUIオブジェクトは、サブオブジェクトとして含めることができます。 ::: ### 3. 右上のボタンエリアを設定します。 右上のボタンエリアを設定し、レイアウトグループを通じてサブオブジェクトとして要素が追加されるたびに自動的に左右に整列させます。 SafeAreaの下に新しいオブジェクトを作成し、以下のコンポーネントを設定します。 - Rect Transform - PosX : -22, PosY : -22 - Horizontal Layout Group - 間隔: 20 - 子要素の整列 : 左上 - Content Size Filter - Horizontal Fit : Preferred Size ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-_v6ORyeXdGmpYhLtf_ZQc-20240904-102416.png) ### 4. ボタン設定 ボタンエリアの子としてボタンオブジェクトを作成します。ボタンは自動的に整列され、以下の設定が適用されます。 - 幅 : 62 - 高さ : 62 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-umScbu67uGqBtFiAZwaIe-20240904-102417.png) ### 5. デバイスでの確認 今、世界を構築してモバイルデバイスで確認すると、次の画像に示すように右上隅にボタンが表示されます。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ceRMQJHGYDBaIfc_DXYzx-20240904-102417.png) :::hint{type="danger"} **❗️ 注意** ZEPETOアプリのネイティブ環境に表示される左のホームボタンとチャットボタンの正確な位置とサイズは、Canvasを通じて一致させることができません。 ::: ### 6. 左上のUIの設定 画面の左側にUI要素を設定するためには、ステップ3で設定した右側の領域にわずかな変更を加えるだけで済みます。変更が必要な設定は以下の通りです。 - RectTransform - PosX : 22, PosY : -22 - 水平レイアウトグループ - 間隔 : 20 - 子要素の配置 : 左上 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-cYsJ6I-t3zbFYGkmdKmCF-20240904-102417.png)