Adobe XDをもっと使いこなすヒント！ 第63回 3D変形ツールの基本を学ぶ

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、3D変形ツールの使い方を紹介する5つのツイートを紹介します。

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、3D変形ツールの使い方を紹介する5つのツイートを紹介します。

Tip 1. 3D変形ツールを有効にする

オブジェクトを選択してから、プロパティインスペクタの3D変形アイコンをクリックすると、3D変形が有効になります。3D変形が利用可能な状態では、オブジェクトの中央にギズモと呼ばれる変形ツールが表示されます。

ショートカットキーは、Cmd+T (Mac)、Ctrl+T (Win) です。

Tip 2. オブジェクトに3D変形を適用する

オブジェクト上に表示されるギズモには3つのパーツが用意されています。2つの楕円は、X軸周りの回転とY軸周りの回転、中央の点は、Z軸方向の移動に使用します。目的のパーツを選択してドラッグすると、オブジェクトに3D変形を適用できます。

3D変形が有効な状態では、プロパティインスペクタに3D変形の値を指定するフィールドが表示されます。ここに任意の値を入力することで、オブジェクトに3D変形を適用できます。

Tip 3. 複数のオブジェクトを同時に変形する

複数のオブジェクトを選択してからギズモをドラッグすると、まとめて3D変形を適用することができます。同じ変形を複数のオブジェクトに適用したいときに便利な使い方です。

グループに対して3D変形を行うと、グループの軸が変形の基準になります。そのため、オブジェクトを個別に変形した時とは少し異なる見た目になります。

Tip 4. 3D変形を利用したアニメーション

3D変形を利用して、アニメーションを作成することが可能です。上の動画では、右側のアートボード上のオブジェクトに3D変形が適用されていて、クリックすると2つのアートボードを行き来するようにインタラクションが設定されています。アクションの種類に自動アニメーションが指定されているため、クリックするたびにアニメーションが再生されます。

いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？

次回をお楽しみに！