Adobe XDをもっと使いこなすヒント! 第17回 アセット書き出しのオプション

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、アセットの書き出し方法に関連する7つのツイートを取り上げます。

Tip 1. 書き出しパネルを表示する

画像アセットを書き出すには、対象となるオブジェクトを選択してから、Cmd+E (Mac) または Ctrl+E (Win) キーを押下します。すると、画像を書き出すためのパネルが表示されます。
メニューからパネルを開く場合、mac OSでは「ファイル」>「書き出し」>「選択済み」と選択します。Windowsでは、ハンバーガーメニューをクリックし、「書き出し」>「選択済み」と選択します。

オブジェクトではなく、アートボードを選択してこの操作を行うと、アートボード自体を画像として書き出すという指示になります。画面一覧をPDF化する場合などに便利な機能です。

ちなみに、書き出される画像の名前にはレイヤー名が使われます。アートボードを書き出した場合は、アートボード名が画像の名前に使われます。

Tip 2. 書き出す形式を選択する

XDからは、PNG、SVG、JPG、PDFのいずれかの形式を選択して、アセットを書き出せます。
PNGへの書き出し以外は、選択の必要があるオプションはひとつだけです。JPGの場合は画像の品質を選択、PDFの場合はひとつのPDFにまとめるか、アセットごと別のPDFに分けるかを選択して書き出します。

SVGへの書き出しも、オプションは埋め込み用かリンク用かの選択のみです。ただし、境界線が常に「中央」が指定されているものとして扱われる点に注意が必要です。カンバス上で「中央」以外が指定されている画像をSVGに書き出した場合は書き出される画像のサイズが変わります。(境界線については第12回をご覧ください)

Tip 3. PNGアセットの書き出しオプションを選択する

さて、PNG書き出しを行う場合です。ここでは、「書き出す対象」と「デザインの倍率」の2種類のオプションを選択することになります。

書き出す対象は4種類から選択できます。「デザイン」以外の選択肢では、以下のように複数の画像がまとめて書き出されます。

  • Web
    • 1Xと2X
  • iOS
    • 1Xと2Xと3X
  • Android
    • ldpi – 低密度(75%)
    • mdpi – 中密度(100%)
    • hdpi – 高密度(150%)
    • xhdpi – 超高密度(200%)
    • xxhdpi – 超超高密度(300%)
    • xxxhdpi – 超超超高密度(400%)

もうひとつのオプションである、デザインの倍率が用意されている理由は、例えば、Web用に1Xと2Xのアイコンを書き出す際に、

  • 等倍でデザインしておいて、2X画像は2倍に拡大して書き出す
  • 2倍の大きさでデザインしておいて、1X画像は半分に縮小して書き出す

を書き出し時に指定できるようにするためです。XDに対して「このアセットは等倍でデザインされているから、高解像度画面用の画像は拡大して!」と伝えられるのです。

選択できるデザインの倍率は、書き出す対象に対応して変わります。例えばiOSには3種類の選択肢が提供されます。これは、1Xと2Xと3Xのどれを基準にデザインされていても対応できるようにするためです。Androidなら選択肢は6種類です。具体的には上のビデオをご覧ください。

「デザイン」は、アセットをそのまま書き出したいときに選ぶオプションのため、倍率を選択するオプションは無効になります。

アイコンに使用する画像を書き出す場合は、等倍でデザインすることが推奨されています。書き出し時に縮小を行うと線がぼけてしまう可能性があるためです。

Tip 4. バッチ書き出し機能を使う

書き出す時に毎回アセットを選択する代わりに、あらかじめ選択しておいたアセットを書き出す機能がバッチ書き出しです。同じ組み合わせのアセットを、繰り返し書き出す場合に便利です。

バッチ書き出しを使うには、対象となる要素に事前にマークを付けておきます。この操作はレイヤーパネルで行います。上のビデオのように、マウスオーバーで表示されるアイコンをクリックすると、書き出し対象に追加されます。一般的なオブジェクトだけでなく、グループやシンボルも選択できます。

選択が完了したら、Shift+Cmd+E (Mac) または Shift+Ctrl+E (Win) キーを押下すると、バッチ書き出しが行われます。

Tip 5. プラグインを利用して書き出す

アセットの書き出しには、他のアプリとの連携や、プラグインも利用できます。例えば、Zeplinを使っている環境であれば、XDからZeplinのプロジェクトにデザインデータを出力できるため、既存のワークフローをそのまま利用できます。上のビデオでその様子が確認できます。

アセット書き出しができるプラグインとしては、以下のようなものがあります。CSSやHTMLの書き出しから、アプリのコードを生成するものまで、幅広く揃っています。

  • Web Export
  • Yotako
  • Lightning Storm CC
  • Copy SVG Code
  • Copy CSS to Clipboard

いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!


最大68%OFF!11月30日(金)まで
ブラックフライデーSALE

PhotoshopIllustratorなど、あらゆる制作を支えるCreative Cloudが、今だけ最大68%OFF

詳しくはこちら


POSTED ON 2018.11.21

Products Featured

  • Adobe XD

Tags

タグはありません