LOG IN

Adobe XDからの画像書き出し

by Kazuma Sekiguchi

これは「Adobe XD Advent Calendar 2016」の18日目の記事として公開するものです。


Windows版も公開され、ますます使いやすくなったXDですが、現状では作成したプロトタイプからWebサイト作成のための画像を簡単に書き出す機能が備わっていません。
ただ、レイヤー機能の実装に伴い、レイヤーごとの書き出しが可能になったため、ある程度の対応が可能になりました。今回はそれをご紹介します。今回の内容はAdobe Experience Design CCのバージョン0.6.2.7 β版(2016年11月公開版)に基づく内容のため、今後の開発状況やバージョンによって 内容に変更が生じます。

今回は上記のようなプロトタイプを作成し画像を書き出したいと思います。右側の4枚の画像はリピートグリッドを利用して後から画像を流し込んでいます。まずは、レイヤーを表示しておきます。

リピートグリッドを利用して画像を当てはめているため、グループの扱いとなり、長方形だけがレイヤーとして表示されます。レイヤーの表示を非表示にすると画像だけが消えることから全てが同じレイヤーとして扱われていることが分かります。この構造は書き出し時にちょっと問題になることがあるため、気をつけておきたいポイントです。

書き出したいレイヤーを選択したら右クリックして、「書き出し」を選択します。書き出しダイアログでは、形式を選択し、書き出し対象を選択できます。書き出しフォーマットは、PNGとPDF、SVGの3種類から選択可能です。PNGはアルファチャンネル付きの24bit画像として書き出されるため、容量が大きくなる可能性もあります。現状では、JPEGでの書き出しはできません。

書き出し対象はなぜか「書き出し先」という名前になっていますが、「デザイン」、「Web」、「iOS」、「Android」と選択ができます。基本的には、Retinaを含めた高解像度環境向けに画像を拡大したものを書き出すかどうかの設定です。例えば、Webでは@2x、iOSでは@3xも書き出されます。
基本的にWebサイト用途であれば、Web用に書き出すか、デザイン用に書き出すと便利です。Web用に書き出すと@2xも付いてきますが、不要な場合は、「デザイン」として書き出すと@1xのみになります。

長方形を選択した状態で書き出したのが上部の画像ですが、1枚だけ書き出されます。リピートグリッドを利用すると一気に画像を流し込むことが可能で便利なのですが、書き出す際には、レイヤー内で更に選択している長方形だけを書き出すことになるため、注意が必要です。書き出す際には、リピートグリッドから分離し、それぞれのグループに分けた上で、必要な部分を選択していけば、一気に書き出すことが可能です。

円形などに流し込んでマスクを掛けている場合は、マスクが適用された状態で書き出されるため、問題になることは無いでしょう。
唯一の問題は、JPEG形式に対応していないため、写真画像も全てPNGとして書き出すしか無いこと、と思いきや、SVG形式を選択し、「リンク」を選択し、「ファイルサイズを最適化(縮小)」を選択すると画像はJPEG形式で書き出されます。但し、この場合は、もともとXD内に配置した画像が配置したときに置いてあった場所に無いことが条件です。配置した画像が変わらず同じ場所にある場合は、その画像が利用され、XDから書き出されることがありません。
もう1点注意は、マスクが無効になって書き出されます。そのため、あまりXDからJPEG書き出しは向いていません。今のところは、PNGで書き出したものをJPEGに変換して利用するのが良いでしょう。

今後何らかの形でJPEG形式を含めた全ての画像が最適に書き出されるようにはなると思いますが、当面はこのような方法で利用しましょう。快適なXD生活を!


Kazuma Sekiguchi
OTHER SNAPS