マニュアル キャンセル

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

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    5. ワークスペースの基本
    6. Adobe XD でのアプリ言語の変更
    7. UI デザインキットへのアクセス
    8. Adobe XD のアクセシビリティ
    9. ショートカットキー
    10. ヒントとテクニック
    11. Adobe XD サブスクリプションオプション
    12. XD スタータープランへの変更
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトの線、塗りおよびドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー&ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード:191
      3. エラーコード:183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

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

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

3D 変形の操作
3D 変形を使用して作成された反転操作

Adobe XD を初めてご使用ですか?

無料体験版アプリを入手

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

アプリケーションを更新

新機能のご紹介

この機能を試す

サンプルファイルを入手

.xd; 13 MB

始める前に

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

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

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

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

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

3D 変形を有効化

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

3D 変形を有効化

ギズモを移動

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

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

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

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

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

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

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

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

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

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

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

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

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

Z 軸に沿ってオブジェクトを移動する

  1. 必要なオブジェクトを選択します。
  2. ギズモ アイコンの中心点にカーソルを合わせます。
  3. アンカー アイコンが表示され、選択したオブジェクトを上下に移動できるようになります。

注意事項

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

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

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

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

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

視聴時間:3 分

ヒントとテクニック

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

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

次のステップ

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

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

コミュニティで質問

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

アドビのロゴ

アカウントにログイン