マニュアルキャンセル

Adobe XD での Illustrator アセットの操作

検索

最終更新日 : 2023年6月7日

Adobe XD ユーザーガイド
はじめに
デザイン
1. アートボード、ガイド、レイヤー
2. シェイプ、オブジェクト、パス
3. テキストとフォント
  1. 描画ツールとテキストツールの操作
  2. Adobe XD のフォント
4. コンポーネントとステート
5. マスキングと効果
6. レイアウト
7. ビデオと Lottie アニメーション
プロトタイプ
共有、書き出し、およびレビュー
デザインシステム
クラウドドキュメント
統合とプラグイン
XD iOS 版および Android 版
1. モバイルデバイスでプレビュー
2. Adobe XD モバイル版に関する FAQ
トラブルシューティング
1. 既知の問題と修正された問題
  1. 既知の問題
  2. 解決済みの問題
2. インストールと更新
3. 起動時のクラッシュ
4. クラウドドキュメントおよび Creative Cloud ライブラリ
5. プロトタイプ作成、公開、レビュー
6. 読み込み、書き出し、その他のアプリの操作

ここでは、Illustrator にあるアイコンやロゴデザインなどのベクターアートワークを Adobe XD に取り込む方法を説明します。

Adobe XD は、Illustrator と連携して、ロゴやアイコン、XD デザインで使用できる要素など、精度の高ベクターアートワークを取り込みます。読み込んだアートワークは XD でも編集可能なので、プロトタイプ作成に要する時間を短縮できます。

以下では、Illustrator から XD にアセットを取り込む数多くの方法、およびこれらのワークフローに関連するベストプラクティスと制限事項について説明します。

準備

Illustrator と XD は補完的な機能セットを備えているため、レイヤーとエフェクトを保持できますが、1 対 1 でマッピングされない機能が一部存在します。先に進む前に、サポートされている Illustrator 機能
についてご確認してください。

XD で Illustrator ファイルを操作する場合のその他の制限事項を次に示します。

Illustrator のアートボードをコピーして XD にペーストすることはできません。
テキスト要素を操作する際、XD では塗りつぶしに水平方向のスケールが読み込まれません。
ベクターを使用してリピートグリッドを作成することはできません。

XD と Illustrator の間をシームレスに操作できるように、アドビでは相互運用性のワークフローの改善に取り組んでいます。それまでの間、ご意見またはご提案をお持ちの方は、UserVoice でお知らせください。

Illustrator アセットを XD に取り込む方法

Illustrator で作成したデザインを XD に取り込むには、以下のようないくつかの方法があります。


Illustrator のデザインの起動または読み込み詳細情報	Illustrator からのべクターまたは SVG のコピー詳細情報	CC ライブラリのアセットの使用詳細情報

XD 57 以降のバージョンでは、Illustrator から sRGB カラープロファイルのあるアセットを、sRGB カラープロファイルのある XD ドキュメントにコピーすると、一貫したカラーが得られます。XD ドキュメントに管理されていないカラープロファイルがある場合は、カラープロファイルを sRGB に切り替えるよう促すメッセージが表示されます。

読み込んだアートボードのプロトタイプ

Illustrator のデザインを XD に読み込んだ後、次の手順で、読み込んだデザインを使用してプロトタイプを作成できます。

Illustrator を使用する場合、Illustrator のアートボードを XD で直接開いて XD のアートボードを作成できます。Illustrator のアートボードは XD のアートボード形式にシームレスに読み込むことができます。

また外出時でも、2 つのアプリケーションの間を行き来して、複数の視覚要素を微調整することができます。

XD のデザイン向上を図るには、リピートグリッド、ステート、自動アニメーション、音声プロトタイプ作成など、XD 固有の機能を適用できます。

XD による共有と共同作業

プロトタイプを共有しましょう。

Adobe XD を使用して、インタラクティブなプロトタイプをデザインして作成する主な利点の 1 つは、デザインとプロトタイプを共有して、関係者からフィードバックを収集できることです。
XD で共有モードを使用することで、デザインおよびインタラクティブプロトタイプを関係者と共有し、シームレスに共同作業を行うことができます。
関係者を招待して共同作業を行い、ドキュメントを同時に共同編集すると同時に、設計プロジェクトのバージョン履歴を維持できます。

XD からの共有によって、デザイン解像度に影響が及ぶ心配はありません。

XD 57 以降では、関係者に一貫したカラーレンディションを提供できます。これを実現するには、ドキュメントのカラープロファイルを sRGB に切り替えます。管理されていないカラープロファイルを持つドキュメントから選択したアートボードを共有しようとすると、関係者の作業時に生じる可能性のあるカラーの不一致について通知するメッセージが表示されます。詳しくは、カラーマネジメントを参照してください。

共有されたデザインは精度を失わずに最適化され、関係者からのフィードバックはリアルタイムで参照できます。開発者は、共有されたアセットとデザインスペックダウンロードしてコーディングに使用できます。

ビデオ： Illustrator のデザインを読み込む方法

「Photoshop ファイルを直接 Adobe XD に読み込むのと同じ手順で、Illustrator ファイルを読み込むことができます。このことは、デザイナーがロゴ、アイコン、その他の要素を取り込んで UI または UX プロジェクトで使用するのに最適です。」（Howard Pinsky、シニア XD エバンジェリスト）

Illustrator のデザインを XD に取り込む方法について詳しくは、この 2 分間のビデオをご覧ください。

よくある質問

SVG のサイズを拡大した場合に、要素間の間隔が歪みます。修正する方法を教えてください。

歪みは、SVG 関連のオブジェクトを読み込んだり、ペーストしたりしたときに、それらのオブジェクトを XD が別のオブジェクトとして認識する場合に発生します。歪みを防ぐには、プロパティインスペクターの「レスポンシブサイズ変更」オプションがオフに設定されていることを確認します。

Illustrator から SVG に書き出したデザインアイコンが、XD で歪んで見えるのはなぜですか？

一部の Illustrator 機能は XD に対応しておらず、ベクターとして転送されるか、まったく転送されません。SVG の機能は Illustrator よりも限定的で、フリーフォームグラデーションなどの機能は表現できません。XD でサポートされる Illustrator 要素について詳しくは、サポートされている Illustrator 要素
を参照してください。