3D 変形を使って透視図を作成

3D 変換機能により、オブジェクトの奥行きや遠近感を最小限の労力でデザインに反映させることができます。 任意のオブジェクトを水平軸と垂直軸に沿って回転させる機能と、Z 軸に沿って奥行きを適用する機能を組み合わせることで、3D アニメーション、遠近感のあるモックアップ、カードフリップのインタラクションなど、様々な視覚効果を模倣できます。 

始める前に

ここでの説明は、XD のデザインワークフローとプロトタイプワークフローとこれらの制限事項を理解しているものと想定します。

オブジェクトの奥行きと遠近感のシミュレート

3D 変形は、スクロールグループ、リピートグリッド、スタック、パディングなどの複雑な構成に適用できます。 3D 変形を有効にすると、X 軸と Y 軸に沿ってオブジェクトの方向を制御し、Z 軸に沿って深度を適用できます。

3D 効果をシミュレートするには、最初にプロパティインスペクターで 3D 変形を有効にしてから、ギズモ アイコンを使って向きを微調整し、最後にデザインオブジェクトに深度を適用します。

3D 変形を有効化

3D 変形を有効にするには、必要なオブジェクトを選択し、プロパティインスペクターの 3D 変形 アイコンをクリックします。

新しいオブジェクトコントロールが「変形」セクションに表示され、ギズモ アイコンが選択したオブジェクトの中央に表示されます。 アイコンは、上下左右に移動することができます。 
プロパティインスペクターで軸の値を変更したり、ギズモ  アイコンを回転させて、軸に沿ってオブジェクトを回転させたりすることができます。

X 軸または Y 軸に沿ってオブジェクトを回転

プロパティインスペクターで 3D 変形 アイコンを有効にした後、以下の手順に沿って X 軸と Y 軸にそってオブジェクトの方向を微調整します。

1. 回転するオブジェクトを選択します。 
2. プロパティインスペクターに方向の値を入力するか、オブジェクトの中心に表示されるギズモアイコンをクリックしてドラッグします。
3. これらの値を調整する際に、オブジェクトが必要な軸を中心に回転し始めることに注意してください。 

Z 軸に沿って奥行きを適用する

これで、3D 変形を有効にし、X 軸と Y 軸に沿ってオブジェクトを回転できるようになりました。次に、3 番目のディメンションとなる Z 軸の使い方を見てみましょう。 

カードの束にパースを付けてデザインしたり、カードを反転させるインタラクションを作成したりする場合、Z 軸上でオブジェクトを移動して、レイヤーの奥行きの感覚を作成できます。 Z 軸に沿って奥行きを適用する方法については、このイラストアニメーションをご覧ください。

注意事項

• 3D 変形 アイコンは、コントロールとギズモの表示と非表示を切り替えるだけです。 3D 環境の作成や、デザイン内に既に適用されている変形の無効化には役立ちません。
  

• X 回転または Y 回転するオブジェクトのサイズを変更すると、Z の奥行きの値も自動的に変更されます。これにより、コンテンツの順序が変更されます。 例えば、カードのグループをパースを付けてデザインする場合、各カードは同じ角度で回転しますが、奥行きは異なります。 複数のカードを選択してサイズを変更すると、必要に応じてサイズが変更されます。 ただし、Z 値はカードごとに変化して、その結果コンテンツの並び替えが発生します。

• オブジェクトの Z 奥行値を変更する場合に、XD は、「最前面へ移動」、「最背面へ移動」、「レイヤー」ペインからの順序変更など、レイヤーの順序付け方法をサポートしていません。

ビデオ：XD での 3D 変形の操作方法について説明します。

「Adobe XD の 3D 変形を使えば、デザインカンバス上で数回クリックするだけで、オブジェクトの奥行きや遠近感をシミュレートすることができます」 - Adobe XD プリンシパルプロダクトマネージャー、Dani Beaumont。

XD で 3D 変形を操作する方法については、以下のビデオをご覧ください。

視聴時間：3 分

ヒントとテクニック

XD での 3D 変形の操作方法の説明はこれで終わりです。以下に役立つヒントを示します。

• オブジェクトはいつでも 2D 状態にすばやくリセットできます。 選択したオブジェクトを右クリックして3D変形をリセットします。または、macOSでは⌥⌘T、WindowsではAlt + Ctrl + Tを使用して3D変形をリセットできます。
  
• 3D 変形のコントロールは、表示/非表示を切り替えることができます。 3D 変形の表示と非表示を切り替えるには、⌘T（macOS）および Ctrl + T（Windows）を使用します。

次のステップ

ここでは、デザインで 3D 変形を有効にして使用する方法について説明しました。 さらに一歩踏み込んで、アニメーション化する方法や、フィードバック用にデザイナーや関係者と共有する方法について確認してください。

ご質問または共有するアイデアがある場合