Adobe XDは、シンプルかつ直感的で使いやすいのが特徴です。しかし、書き出しのやり方で困った人も多いのではないでしょうか。
この記事を読めば、すぐにXDで画像を書き出せるようになるので、ぜひご一読ください。
Adobe XDで画像を書き出す方法
画像の書き出し形式
XDで書き出せる画像形式（フォーマット）は次の4つです。
- PNG
- SVG
- JPG
Web制作に特化しているソフトなので、設定しやすいように選択肢が決められています。
デザインやコーディングを行う人は、主にPNGとJPGで書き出しを行うことが多くなると思います。形式の他にも書き出しサイズ（倍率）も自由に設定できるのでシーンに合わせて使い分けましょう。
1xは、XD上の素材を等倍サイズで書き出すことができます。
特に理由がないようであれば、この設定で問題ないですが、コーディング用に画像を書き出す場合は、Retinaディスプレイを考慮して2xで書き出すのがおすすめです。
等倍サイズに加えて2倍や3倍サイズも書き出してくれる「Web」や「iOS」なども設定できるので、シーンに合わせて使ってみましょう。
pdfやsvgも選べるので、Webサイトのデザインを印刷したい時やベクター画像として保存したい場合も用途に合わせて書き出すことができます。
選択した画像を書き出す手順
選択した画像を単体で書き出したい場合は、shiftキーを押しながら任意の画像を選択しましょう。XD上にある画像であれば、アートボードを跨いでも複数の画像を書き出すことができます。
選択ができたら、次のショートカットもしくはマウス操作で選択したオブジェクトを書き出す設定をしましょう。
ショートカット
- Winの場合）Ctrl + E
- Macの場合）Command + E
マウス操作
ファイル＞選択したオブジェクト…
手順はこれで以上です！あとは保存先や書き出し形式などを設定して保存しましょう。1枚や2枚など、サクッと保存したい時におすすめの方法となります。
画像を一括で書き出す
前述したように任意の画像を選択して書き出す方法もありますが、書き出す対象の素材が増えるほど選択に手間がかかってしまいます。
その場合は、画像を一括で書き出す方法も覚えておきましょう。
まず、対象の画像を選択した状態でXD画面右にあるサイドバーを見てみましょう。
サイドバーの下のほうを見ると「書き出しの対象にする」というチェックボックスがあるので、ここにチェックをいれます。
設定はこれだけです！
書き出したいすべての画像に設定ができたら、次のショートカットもしくはマウス操作を押して、書き出しの設定をしましょう。
ショートカット
- Winの場合）Ctrl + shift+ E
- Macの場合）Command + shift+ E
マウス操作
ファイル＞すべての書き出し対象…
あらかじめ「書き出しの対象にする」にチェックを入れておけば、素材を選択しなくてもショートカットキーですぐに書き出すことができるので、とても便利です。
選択したアートボードを書き出す手順
複数あるアートボードのうち1枚だけ書き出したい場合は、前述した「選択した画像を書き出す手順」と同じ方法で保存ができます。
アートボード名の部分をクリックしましょう。
選択ができたら、画像を単体で書き出す時と同じように次のショートカットもしくはマウス操作で書き出します。
ショートカット
- Winの場合）Ctrl + E
- Macの場合）Command + E
マウス操作
ファイル＞選択したオブジェクト…
Adobe XDで画像を書き出す時の注意点
- 書き出しサイズ（旧デザイン倍率）の見方
- 元画像の大きさによっては書き出した画像が劣化する
書き出しサイズ（旧デザイン倍率）の見方
「2xサイズで書き出しているのに1/2のサイズになる」という人は、最新版のXDにアップデートをしましょう。
書き出しを行う際の「書き出しサイズ」は、2021年10月のアップデートが行われる前は、「デザイン倍率」という名称でした。
書き出しサイズに変更されたことにより、2xは2倍サイズで書き出されるようになりましたが、デザイン倍率で設定していた頃は、どの倍率で書き出すかではなく、オブジェクトやアートボードがどの倍率で設定されているのかを表していたため、2xに設定すると1/2で書き出されました。
これで混乱している人は多くいましたが、最新版にアップデートされたことで分かりやすくなっています。
元画像の大きさによっては書き出した画像が劣化する
Retinaディスプレイ用に書き出しサイズを2倍にする場合は、元画像の大きさに注意しましょう。
例えば、元サイズと表示サイズ共に500pxの画像を設定している場合、2xで書き出すと画像が広がることになるので、劣化してしまいます。
Retinaディスプレイ用に書き出す予定がある場合は、元画像は表示サイズの2倍にして、XD上で画像を縮小しながら使いましょう。
Adobe XDで画像を書き出そう！
Adobe XDで書き出す方法や注意点について、解説しました。書き出しは、最終的に行う工程になるので後回しにしてしまいがちですが、用途に合わせて最適な書き出し方法を理解していれば、作業効率もアップします。
画像は、デザインのクオリティを左右する重要な要素にもなるので、最適な書き出しができるようぜひマスターしておきましょう！