Adobe XD で没入感のあるインタラクティブ体験を作成する場合に 3D オブジェクトをシミュレートする方法の詳細をお探しですか?ここではその方法について説明します。

3D 変形を使えば、3D 空間にデザインコンポーネントを加えるとともに、デザインオブジェクトに新しいディメンションを加えられます。

回転を水平軸と垂直軸に沿ったオブジェクトにおこなうとともに、深度の適用をおこなうことで、3D アニメーション、奥行のモックアップ、カードフリップインタラクションなどの効果を模倣できます。

3D 変形による作業
3D 変形を使用して作成された反転操作

Adobe XD を既にお持ちですか?

アプリケーションを更新

新機能のご紹介

実際に試す

サンプルファイルを入手

.xd; 13 MB

準備

ここでの説明は、次の情報に精通していることが前提となります。

デザインオブジェクトに 3D 効果を適用する前に、次の制限に精通してください。

  • 3D 変形されたコンテンツをメインコンポーネントに変換すると、自動的に 2D にリセットされます。
  • コンポーネントインスタンスでは 3D 変形をオーバーライドできますが、メインコンポーネントからはグローバルな編集が不可能です。
  • 3D 変形は、コンポーネントの中には適用できません。
  • 3D 変形をホバーステートかタップステートに適用すると、そのオブジェクトのすべてのステートに変形が適用されます。

  • 3D 変形されたグループのカンバス上で、パディング、スタック、およびリピートグリッドのスペースを編集することはできません。 
  • 要素の順序は、レイヤーパネルからのみ変更できます。カンバス上のスタック要素をドラッグ&ドロップで並べ替えることはできません。
  • 3D で画像を回転すると、一部の画像で画像劣化が発生します。
  • コンポジションのオブジェクトが、スクロールするアートボード、スクロール可能なグループ、またはネスト化 3D 変形で固定オブジェクトを持つ場合、プレビュー上で影の見え方はわずかに異なります。
  • グループのサイズを変更しても、3D 変形されたオブジェクトのサイズは変わりません。
  • 3D 変形されたオブジェクトのベクターを編集したり、オブジェクトを反転することはできません。また次の場合、3D 変形は適用できません。
    • デベロッパースペック
    • アートボード
    • SVG の書き出しと読み込みのワークフロー
    • ベクターの編集

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

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

3D 変形を有効化

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

3D 変形を有効にする方法については、このイラストアニメーションをご覧ください。

3D 変形を有効にする
  1. 現在のデザインセッション内で、必須のオブジェクトを選択します。
  2. プロパティインスペクターでアイコンをクリックします。新しいオブジェクトコントロールはプロパティインスペクターの「変形」節に表示され、ギズモアイコンは選択したオブジェクトの中央に表示されます。

オブジェクトの回転

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

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

X 軸と Y 軸に沿ってオブジェクトを回転する方法については、このイラストアニメーションをご覧ください。

X 軸を中心に回転するオブジェクト

Y 軸を中心に回転するオブジェクト

選択したオブジェクトを水平軸に沿って配置します。

選択したオブジェクトを Y 軸に沿って配置します。

選択したオブジェクトを Y 軸に沿って配置します。

選択したオブジェクトを垂直の Y 軸に沿って配置します。

Z 軸を使用して奥行きを適用する

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

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

Z 軸に沿ってオブジェクトを移動する
  1. 必要なオブジェクトを選択します。
  2. ギズモの中心点にカーソルを置き、選択したオブジェクトを上下に移動します。

注意事項

  • アイコンは、コントロールとギズモの表示と非表示を切り替えるだけです。3D 環境の作成や、デザイン内に既に適用されている変形の無効化には役立ちません。
  • X 回転または Y 回転するオブジェクトのサイズを変更すると、Z の奥行きの値も自動的に変更されます。これにより、コンテンツの順序が変更される場合があります。例えば、カードのグループをパースを付けてデザインする場合、各カードは同じ角度で回転しますが、奥行きは異なります。複数のカードを選択してサイズを変更すると、必要に応じてサイズが変更されます。ただし、Z 値はカードごとに変化して、その結果コンテンツの並び替えが発生します。

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

ヒントとテクニック

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

  • オブジェクトはいつでもその 2D ステートに素早くリセットできます。選択したオブジェクトを右クリックし、3D 変形をリセットします。3D 変形のリセットは、macOS で「⌥⌘T」、Windows で「Alt + Ctrl + T」によりおこなうこともできます。
  • 3D 変形のコントロールは、表示/非表示を切り替えられます。3D 変形の表示と非表示の切り替えには、macOS で「⌘T」、Windows で「Ctrl + T」を使用します。

次のステップ

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

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

Have a question or an idea

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティにぜひご参加ください。皆様からのご意見や作品をお待ちしております。