【Xd】Adobe Xdで作成したデータをIllustratorに書き出す方法と書き出し後の注意点【初心者向け】
はじめに
こんにちは。NNC の大土と申します。
今回はタイトルにもある通り、Adobe Xdで作成したデータをIllustratorに書き出すやり方と、書き出すときの注意点についてお話ししていきます。
XdはIllustratorやPhotoshopなどと比較すると動作が断然早く、またソフトを持っていないクライアントでもブラウザ上でデザインをチェック・コメントできたりなどの機能も充実しており、とても便利なソフトですよね。
ただ、Xdは画像の編集機能がやや乏しく、細かいパーツやグラフィックの制作はやはりまだまだIllustratorやPhotoshopに頼りたいところ。
また、納品をaiやpsd形式で希望されるクライアントもいらっしゃると思います。
実際にIllustratorに書き出す方法としては「PDF」「SVG」の2種類があるのですが、それぞれの違い、メリットデメリット、注意点について学ぶ機会があったので、こちらで紹介していこうと思います。
初めてXdデータの書き出しを行う方、作業に詰まっている方はぜひチェックしてみて下さい。
XdからIllustratorに書き出す方法（PDF編）
まずは、XdのデータをIllustratorに書き出す方法からご紹介していきます。
1つめはPDFで書き出し、それをIllustratorで読み込む方法です。手順としては3ステップなのでとてもシンプルです。
1.書き出し>選択したオブジェクトorすべてのアートボード を選択
すべてのアートボードの場合、次の画面で複数のPDFファイルにチェックを入れると個別に保存が可能です。
2.フォーマットを「PDF」に変更し保存
3.Illustratorで開く
これでXdデータをIllustratorで開くことができ、保存すればaiデータの作成が可能です。
Illustratorで開いた後、移動してきたデータをチェックしてみましょう。
PDFの注意点
ここからは注意点をお話ししていきます。
Xdで作成したグループ構造や名前は全てまっさらになる
急に怖いことを言いますが、そうなってしまいます…
データを開けてみるとレイヤー>グループ>クリップグループ の作りになっており、まずはクリッピングパスの解除が必要です。
クリッピングパスを解除した後、再度要素のグループ化、名前づけ、また必要に応じてレイヤー分けを行う必要があります。
特に細かい要素だと、グループ分けのときに位置がずれてしまったりする可能性もあるので、グループ化したらロックを掛けて要素を動かないようにしても良いと思います。
文字はアウトライン化される
重ねて怖いことを言いますが、こちらも注意点です。
前の項目の画像を見ていただくと、「menu」の文字が一文字ずつパスデータになっていることがお分かりいただけると思います。
文字情報はXdのデータのものをコピペで持ってくると良さそうです。
以上の注意点を踏まえると、XdデータをPDFにしてIllustratorで書き出すのは、
- ・文字情報が比較的少ないデザイン
- ・レイヤーの構成がそこまで複雑ではないデザイン
こんな場合におすすめの方法かと思います。
XdからIllustratorに書き出す方法（SVG編）
2つめはSVGで書き出し、それをIllustratorで読み込む方法です。こちらも3ステップなのでとてもシンプルです。
1.書き出し>選択したオブジェクトorすべてのアートボード を選択
SVGの場合は特に複数に書き出すチェックはなく、自動的にアートボードごとにデータを書き出してくれます。
2.オプションにて下記を設定し、書き出し
- ・フォーマット：SVG
- ・スタイル：プレゼンテーション属性
- ・画像保存：埋め込み
※ファイルサイズの最適化（縮小）のチェックについて、チェックを入れてしまうと、その後Illustratorで開いたときにグループやパーツの名称が全てリセットされてしまいます。（グループ構造は残ります）
3.Illustratorで開く
アラートにて「SVG Tiny に書き出し後に読み込むとクリッピングは失われます」と表示が出てしまいますが、こちらはOKを押して進みます。
さて、こちらもIllustratorで開き、データをチェックしてみましょう。緊張の一瞬です。。
SVGの注意点
SVGデータの場合、Xdで作成したレイヤーやグループ、名称は残る
嬉しいニュースですね。PDFと同じくレイヤー>クリップグループ の構成になっていますが、グループや名称などは残すことが可能です。
文字のアウトライン化はされない
こちらも吉報ですね。文字情報はそのまま文字として残すことができます。
データはPDFと比べると重め
こちらはやむを得ませんが、デザインデータの大きさによっても、個人の感覚によっても異なってきますが、PDFと比べてデータが重くなります。
画像データの読み込みで不具合が出る場合がある
よく見てみると、Xdで配置した画像がIllustrator上でダブってしまっているのが分かるかと思います。
解決方法として、そうなってしまった画像はXdから画像データとして書き出し、Illustrator上で配置するのがおすすめです。
以上の注意点を踏まえると、XdデータをSVGにしてIllustratorで書き出すのは、
- ・文字情報が比較的多いデザイン
- ・レイヤーの構成が複雑なデザイン
- ・グループ化情報は極力残しておきたい…！
こんな場合におすすめの方法かと思います。
まとめ
いかがでしたか？それぞれの違いや今回はどちらを選んだら良いか、の参考になっていればとても嬉しいです。
改めて、今回の記事のまとめです。
- ・XdデータをIllustratorに書き出す方法は、「PDF」「SVG」の2種類ある
- ・PDFの場合、グループ、レイヤーは全てまっさらになるが、動作が比較的早く、簡単な構造のデータであればおすすめ
- ・SVGの場合、グループ構造や名前はXdのものが引き継がれるが、画像データに不具合が出たり、データが重く作業がしにくい場合がある
メリット・デメリットを見極めた上で、そのとき最適な方法を選んでいきましょう！
