マニュアル キャンセル

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

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

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

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

XD と Illustrator での操作

準備

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 要素
を参照してください。

次のステップ

ここでは、Illustrator で作成したデザインアセットを使用する方法について説明しました。次のステップでは、インタラクティブプロトタイプを作成する方法や、フィードバックを得るためにデザイナーや関係者と共有する方法について説明します。

お客様からのフィードバックを心よりお待ちしております。

コミュニティで質問

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

ヘルプをすばやく簡単に入手

新規ユーザーの場合