IllustratorのアピアランスをXDにそのまま引き継ぎたい時に知っておくべき4つのこと

別記事にて、illustratorからXdにインポートする時に気をつけたいことを色々まとめましたが、今回はアピアランスを掘り下げてみます。
Illustratorで便利なアピアランスですが、XDにも搭載されています。と言っても Illustratorと違いシンプルなので、できることは限られます。
しかし適切な作り方をすれば引き継げるアピアランスもあります。
ということで今回は IllustratorからXDにアピアランスをインポートする時に知っておきたいことをまとめました。

※この情報は Illustratorバージョンが2019、XDのバージョンが19.2.22.3で検証している情報です。特にXDは頻繁にアップデートされているので、バージョン違いに伴う記事の内容の相違はご了承ください。

1 前提として知っておきたい、XDのアピアランスでできること
2 IllustratorのアピアランスはXDの機能を超えない設定にしよう
3 グループのアピアランスは分割されるので、単体オブジェクトにしておこう
4 パスまたはテキストと画像とでは、引き継げるアピアランスが違う
- 4.1 illustrator→XD オブジェクト毎の引き継げるアピアランス一覧
5 illustratorのどこの設定が引き継がれるのか
6 まとめ

前提として知っておきたい、XDのアピアランスでできること

Xdのアピアランスは、illustratorほど多機能ではありません。対応している機能は以下です。

塗り
境界線
透明度
角丸（個別設定対応）
シャドウ
背景のぼかし
オブジェクトのぼかし

IllustratorのアピアランスはXDの機能を超えない設定にしよう

XDのアピアランス機能を超える設定をillustratorで行った場合、そのオブジェクトはXdインポート後には分割される、または適切に表示されない等の現象がみられました。

例えば塗り。Xdのアピアランスではillustratorのように同じアピアランスの設定を重ねる、ということができません。塗りを複数重ねても、バラバラに分割されたオブジェクトとして配置されます。

また、別記事でも紹介したように、 IllustratorのパターンもXdは認識してくれないので、真っ黒になってしまします。

それから光彩(内側)やワープなど、Xdにはない効果も同様に分割されてしまいます。

このように、Illustrator上のアピアランスは、Xdのアピアランス機能を超えない作りであることが必要になります。

グループのアピアランスは分割されるので、単体オブジェクトにしておこう

Illustratorではグループ自体にアピアランスを設定出来ますが、そのオブジェクトをXdに読み込んでもバラバラに分割されてしまうようです。
アピアランスを引き継がせたいオブジェクトは、必ず単体のオブジェクトにしましょう。

パスまたはテキストと画像とでは、引き継げるアピアランスが違う

IllustratorでアピアランスをXdに合わせたとしても、パス・テキスト・画像でそれぞれ引き継げるアピアランスに差があるようです。ということで表にしてみました。

illustrator→XD オブジェクト毎の引き継げるアピアランス一覧

	パス	テキスト	画像
塗り	○	○	–
境界線	○	○	–
透明度	○	○	○
角丸（個別設定対応）	○	×	–
シャドウ	○	○	×
背景のぼかし	–	–	–
オブジェクトのぼかし	○	○	×

「背景のぼかし」に該当する機能はillustratorには見当たりません。
また、別記事でも紹介しましたが、画像へのドロップシャドウをかけた場合は、XDに読み込んだ時に写真とシャドウのオブジェクトがバラバラに分割されます。

illustratorのどこの設定が引き継がれるのか

XDの各アピアランスが、illustratorのどこの設定が該当するのか整理しました。

■塗り・線・不透明度

illustratorのアピアランスにある塗り・線・不透明度の設定がそのまま引き継がれます。

■角丸

アピアランスの角丸でも、シェイプの角丸でも、どちらでも引き継いでくれるようです。

■シャドウ

効果>illustrator効果>スタイライズ>ドロップシャドウがXDのシャドウに該当します。

■オブジェクトのぼかし

illustratorのPhotoshopフィルターの方の「ぼかしガウス」がXDの「オブジェクトのぼかし」にあたるようです。illustrator効果の「ぼかし」ではないので注意。
また、この「ぼかしガウス」を50pxを超える値を設定しても、XDでは上限である50pxになってしまいます。