マニュアル キャンセル

外部アセットの操作

  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. 書き出しに表示されないサードパーティ製品

Photoshop、Illustrator、Sketch、および Web ブラウザーからアセットを Adobe XD に取り込み、アセットを After Effects にエクスポートする方法について説明します。

XD では、Photoshop や Illustrator などの他のアドビアプリケーション、また Sketch などのサードパーティ製品や Web ブラウザーからアセットを読み込むことができます。XD でこれらのアセットをさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。XD から After Effects にアセットをエクスポートして、アセットをさらに改良することもできます。

アプリに応じて、複数の方法で外部アセットを操作できます。

Photoshop および Illustrator のファイルを XD ファイルに変換する場合は、「開く」を使用します。これらのファイルの内容を既存の XD ファイルに追加する場合は、「読み込み」を使用します。

Photoshop の操作

Photoshop デザイン素材を XD に取り込むには、次のいずれかの方法を使用します。

  • ファイル>>開く」を選択して、.psd ファイルを XD で直接開きます。次に、他の XD ファイルやワイヤインタラクションと同様に XD でファイルを編集し、プロトタイプまたはデザインスペックとして共有することができます。
  • ファイルインポートを選択して、.psdファイルを XD に読み込みます。
  • Photoshop からビットマップコンテンツやベクターコンテンツをコピーして、XD にペーストする。 
  • Photoshop デザイン素材をライブラリパネルから XD カンバスにドラッグする。詳しくは、Adobe XD での Creative Cloud ライブラリを参照してください。
  • .psd ファイルを OS のクリップボードにコピーして、「アピアランスをペースト」オプションを使用して画像を画像の塗りとして直接貼り付ける。

詳しくは、Photoshop のデザイン素材の操作を参照してください。

Photoshop からの SVG のコピー&ペースト

Photoshop から SVG をコピー&ペーストするには、Photoshop でシェイプまたはベクターレイヤーを右クリックして、「SVG をコピー」をクリックし、それを XD に貼り付けます。

Illustrator からのデザイン素材の読み込み

XD で Illustrator ファイルを開くか、読み込むことができます。

さらに、Adobe Illustrator からベクターおよびビットマップ画像をコピーして XD にペーストすることで、Illustrator ファイルを開いたときや読み込んだときに同じ忠実性と編集可能性を維持することもできます。Illustrator ファイルは別のドキュメントとして開くのではなく、開いているドキュメント内に配置されます。スマートオブジェクトはビットマップではなく展開されたレイヤーとして読み込まれ、調整レイヤーが保持されます。ただし、Illustrator のアートボードをコピーして XD にペーストすることはできません。

また、ベクターファイルを OS のクリップボードにコピーし、「アピアランスをペースト」オプションを使用して画像を直接画像の塗りとしてペーストすることもできます。

Creative Cloud ライブラリに保存された Adobe Illustrator デザイン素材をライブラリパネルから XD カンバスにドラッグして XD に読み込むこともできます。詳しくは、Adobe XD での Creative Cloud ライブラリを参照してください。

XD から Illustrator への SVG のコピー&ペースト

XD のベクターコンテンツをクリップボードにコピーして、完全に編集可能なレイヤーとして Adobe Illustrator にペーストできるようになりました。

XD から Illustrator にコンテンツをコピーしてペーストするには:

1. XD でシェイプまたはベクターを右クリックし、コンテキストメニューから「コピー」を選択します。

2. Adobe Illustrator から、編集/ペーストを選択して、ベクターコンテンツを貼り付けます。

XD で Illustrator ファイルを開く

Illustrator デザイン素材の XD への移行
Illustrator デザイン素材の XD への移行

Illustrator(.ai)ファイルを XD で直接開き、XD ファイルに変換することができます。ファイルを開いたら、XD、ワイヤインタラクションでファイルを編集し、プロトタイプまたはデザインスペックとして共有することができます。

XD で Illustrator ファイルを開くには、次の操作をおこないます。

  • XD で、ファイル/開くを選択します。目的のフォルダーに移動し、 .ai ファイルを選択して、XD で開きます。 キーボードショートカットの command + O(Mac)、または Ctrl + O(Windows)を使用することもできます。
  • XD でファイルを開くために(Mac 上のみ)、Ai ファイルを XD アイコンにドラッグします。
  • Illustrator ファイルを右クリックして、サブメニューから Open with(以下で開く)/XD を選択します。

XD で Illustrator ファイルを開くときに、すべてのエレメントが完全に忠実に再現されるわけではありません。サポートされるエレメントおよびサポートされないエレメントのリストについては、XD で Illustrator を開く際にサポートされるエレメントを参照してください。

Illustrator ファイルの読み込み

Illustrator ファイルを XD に読み込むには、ファイル/インポートを選択します。読み込まれた Illustrator ファイルにアートボードがある場合、それらのアートボードは XD アートボードの下に配置されます。XD アートボードの下にスペースがない場合、読み込まれたアートボードは使用可能なスペースに配置されます。読み込まれたファイルにアートボードがない場合、そのデザイン素材はカンバスの中央に配置されます。読み込まれたファイルにアートボードがない場合、そのデザイン素材はカンバスの中央に配置されます。

Sketch からのデザイン素材の読み込み

Sketch デザイン素材を XD に移行するための複数の方法
Sketch デザイン素材を XD に移行するための複数の方法

  • XD で直接 .sketch ファイルを開くことができます。次に、他の XD ファイルやワイヤインタラクションと同様に XD でファイルを編集し、プロトタイプまたはデザインスペックとして共有することができます。詳しくは、XD で Sketch ファイルを開くを参照してください。
  • Sketch からデザイン素材をコピーして XD にペーストすることもできます。詳しくは、Sketch からの選択したデザイン素材の読み込みを参照してください。
  • XD の編集機能を維持したまま、Sketch から XD に直接コピー&ペーストすることもできます。
  • また、.psd ファイルを OS クリップボードにコピーして、アピアランスをペーストオプションを使用して画像を直接画像の塗りとして貼り付けます。
  • Sketch コンテンツは XD デザインシステムに変換できます。詳しくは、Sketch ライブラリの変換を参照してください。

XD で Sketch ファイルを開く

Sketch(.sketch)ファイルを XD で直接開き、XD ファイルに変換できます。ファイルを開いたら、XD、ワイヤインタラクションでファイルを編集し、プロトタイプまたはデザインスペックとして共有することができます。

開くことができるのは、Sketch バージョン 43 以降を使用して作成した Sketch ファイルのみです。古いファイルがある場合は、最新バージョンの Sketch を使用してファイルを保存してから、XD でファイルを開きます。

XD で Sketch ファイルを開くには、次のいずれかの操作をおこないます。

  • ファイル/開くをクリックします。必要なフォルダーに移動し、.sketch ファイルを選択して XD で開きます。
  • Sketch ファイルを XD アイコンにドラッグして XD でファイルを開きます(Mac のみ)。
  • Sketch ファイルを右クリックして、コンテキストメニューから Open with(以下で開く)/XD を選択します。

キーボードショートカットの command + O(Mac)または Ctrl + O(Windows)を使用することもできます。

XD で Sketch ファイルを開く場合、すべてのエレメントが完全に忠実に再現されるわけではありません。サポートされるエレメントとサポートされないエレメントのリストについては、Sketch ファイルを XD で開くときにサポートされる機能を参照してください。

Sketch からの選択したデザイン素材の読み込み

  1. Sketch で 1 つ以上のレイヤーまたはグループを選択し、「書き出し可能にする」をクリックします。

  2. 形式として SVG を選択し、Sketch から XD にレイヤーをドラッグ&ドロップします。

    コンテンツは編集可能なベクターコンテンツとして XD に挿入されます。

Sketch ライブラリの XD デザインシステムへの変換

これで、Sketch コンテンツを XD に移動し、デザインシステムで作業を続けることができます。Sketch のシンボルと要素は XD コンポーネントに変換されるだけでなく、リンクされたデザイン素材として使用することもできます。

  1. XD でデザインシステムを開きます。
  2. アセットパネルから、「アセットをリンク」をクリックします。アセットパネルに既にアセットが存在する場合は、プラスアイコン(+)をクリックします。
  3. アセットをリンクウィンドウで、「Sketch ライブラリを変換」を選択し、ファイルピッカーから Sketch ファイルを選択します。XD はソース Sketch ドキュメントを変換し、それをクラウドドキュメントとして自動的に保存して、カラー、文字スタイル、コンポーネントを XD ドキュメントにリンクします。
  4. 複数の Sketch ライブラリで作業する必要がある場合は、アセットパネルのプラスアイコンをクリックし、別の Sketch ライブラリを再度読み込みます。 

Sketch ライブラリとコンポーネント

以下のガイドラインに従って、XD のコンポーネントを操作してください。

  1. 変換されたコンポーネントをアートボードにドラッグします。 
  2. ソースコンポーネントを編集するには、コンポーネントインスタンスをクリックし、右クリックして「元のドキュメントでマスターを編集」を選択します。
  3. デザイン素材を編集するには、アセットパネルからデザイン素材を選択します。
  4. 変更が適用されたら、作業ドキュメントに切り替えます。
  5. 更新」をクリックして変更を確定します。

詳しくは、コンポーネントの操作を参照してください。

詳細情報

Sketch ライブラリから XD デザインシステムへの変換について詳しくは、このイラストアニメーションをご覧ください。

視聴時間: 30 秒

1

Web ブラウザーからのデザイン素材の読み込み

すべての最新の Web ブラウザーから直接アートボードに画像をドラッグできます。アートボード上のオブジェクトに画像をドラッグすることもできます。この操作をおこなうときは、画像がオブジェクトに収まるように自動的に画像サイズが調整されます。

また、.psd ファイルを OS クリップボードにコピーして、アピアランスをペーストオプションを使用して画像を直接画像の塗りとして貼り付けます。

他のファイルの読み込み

PNG、JPG、TIFF、GIF、SVG、サポートされているビデオLottie ファイルなどのアセットを読み込むには、次のいずれかの操作を実行します。

  • ファイル/読み込みをクリックし、ファイルを参照して選択します。
  • Finder または Windows エクスプローラーから XD にファイルをドラッグします。画像ファイルコピー&ペーストすることもできます。

After Effects へのエクスポート

デザイン素材を After Effect にエクスポートする
デザイン素材を After Effect にエクスポートする

XD からは、After Effects 2018 以降のバージョンにのみエクスポートできます。古いバージョンがインストールされている場合は、「After Effects への書き出し」オプションが無効になります。このオプションを有効にするには、Creative Cloud デスクトップアプリケーションにログインして、After Effects を最新のバージョンに更新します。

After Effects を使用して XD デザインをカスタムアニメーションまたはマイクロインタラクションに変えたい場合は、次のようにします。

  • XD で、After Effects でアニメーション化するレイヤーまたはアートボードを選択します。 
  • ファイル/書き出し/After Effects を選択します。After Effects が装置にインストールされていない場合、このオプションはグレー表示されます。キーボードショートカットの ⌥⌘F(Mac)、または Ctrl + Alt + F(Windows)を使用することもできます。After Effects は起動するか(閉じている場合)、フォアグラウンドに移動します(背景で実行している場合)。
  • 選択したレイヤーまたはアートボードは、After Effects プロジェクト内のネイティブシェイプ、段落スペースを含むテキスト、アセット、内側または外側の線、ネスト化されたコンポジションとして転送されます。同じ After Effects プロジェクトに複数のデザイン素材転送を実行し、段階的に、または複数の XD ファイルからアニメーションを作成することができます。

XD コンテンツを After Effects に書き出す場合、すべてのエレメントが完全に忠実にサポートされるわけではありません。 サポートされるエレメントとサポートされないエレメントの詳細なリストについては、XD ファイルを After Effects に書き出す際にサポートされるエレメントを参照してください。

読み込みと書き出し

読み込みと書き出しの制限については、Adobe XD でファイルを読み込めないまたは書き出せない理由に関する記事
を参照してください。

アドビのロゴ

アカウントにログイン