Adobe XD 画像の書き出しで起きやすいトラップを回避する

XDでの画像書き出しの基本的な注意点

XDから画像を書き出す際は、オブジェクトまたはアートボードを選択したあと、「ファイル＞書き出し」か、レイヤーパネルでオブジェクトを選択したあとに「右クリック＞選択した項目を書き出し」します。

XDは、2022年2月16日のアップデート（v48.0.12）で 画像書き出しの設定が変更され、【デザイン倍率】の概念がなくなりました。以下に記載する注意点は v48.0.12 より以前のバージョンでのものとなります。

アップデート前は、アセット書き出しパネルが表示され、オプション【デザイン倍率】の選択から「1x」「2x」を選択できます。この「1x」「2x」は、XDデザインを等倍で作成しているか、Ratinaを念頭においた2倍サイズでデザインを作成しているかの指定になります。
ここで間違いやすいのは、XDデザインが等倍で作成されているのに、書き出し後の画像サイズを2倍にしようとして「2x」を選択してしまうと、実際の書き出した画像が1/2の半分のサイズで書き出されてしまうことです。
XDデザインは基本的に等倍で作成されているので「1x」を選択することで、デザイン通りの画像サイズで書き出されます。

Adobe XD（2022 年 2 月リリース）デザインアセットの書き出しエクスペリエンスの向上

画像書き出しサイズの指定

アップデート後は、【デザイン倍率】の選択項目が無くなり【書き出しサイズ】でサイズ（0.5x ~ 4x）が選択できるようになりました。アップデート前は【書き出し設定】のオプションにあった「Web」「iOS」「Android」も引き継がれており、一度に等倍・2倍などの画像セットを書き出すことも可能です。

「Web」「iOS」「Android」を選択した際の、それぞれの画像書き出しサイズは以下になります。

「Web」

• 1x（デザインと等倍）
• 2x（デザインの２倍）

「iOS」

• 1x（デザインと等倍）
• 2x（デザインの２倍）
• 3x（デザインの3倍）

「Android」

• ldpi – 低密度（75％）
• mdpi – 中密度（100％）
• hdpi – 高密度（150％）
• xhdpi – 超高密度（200％）
• xxhdpi – 超超高密度（300％）
• xxxhdpi – 超超超高密度（400％）

画像の劣化が起こる現象について

XDから書き出した画像がなんとなく綺麗ではない、鮮明ではないと感じた事があり、XDに元画像を貼り付けた段階で画像が圧縮されているのではないだろうかと考えました。
そこで、XDとPhotoshopで同じ元画像を使って、画像書き出しの検証をしてみました。

XDで書きだし

条件
元画像 4032×3024px
XDアートボード内で、800px（等倍）で配置

書き出し設定
フォーマット：JPG
画質：100％
書き出しサイズ：Web（倍率 1x、2x）=（800px, 1600px）

Photoshopで書き出し

条件
元画像 4032×3024px

書き出し設定
Web用に保存で画像サイズを1600px, 800pxで書き出し

XDとPhotoshopで、それぞれ2倍サイズで書き出した画像を並べて比べてみました。
ぱっと見た感じでは、並べて比較しても大きく違いは出ていないようです。

大きく拡大して比べてみても、若干XDの方が色素が薄くなっているようにも感じますが、ほとんど違いは出ませんでした。

2022年2月16日のアップデート（v48.0.12）で、「XDに読み込むときに、JPGが縮小されなくなった」との事なので以前のバージョンでは、XDに画像を配置した時点で画像圧縮がかかり劣化が目に見えて出てくる事もあったと思われます。これまでの案件で、画像書き出しの際に劣化が起こっていた原因はこの当たりにもあったのではないか…という結果となりました。

解決策

XDで画像書き出ししても目に見えて劣化はしないので、通常であれば特に問題はありませんが、メインビジュアルなどでお客様が高解像度の画像をご希望している際は、元画像やPhotoshop、Illustratorなどの素材をご提供いただくのが最善策となります。
XDやFigmaは、UI/UXデザインに特化したツールのため、お客様のご要望によっては素材の使い分けが必要になってくるのかと思います。

 

ブラウザでの表示について

XDの書き出しに特化した事ではないのですが、ブラウザで画像を確認した際になんだかボヤけているなと感じたときには画像サイズが偶数になっているかも確認が必要です。アセット書き出しの場合、デザイン元のオブジェクトが奇数や小数点になっていることもあるので見落としがちになってしまいます。XDなどのデザインツール上では表示に問題はありませんが、ブラウザの仕様で画像ににじみやボヤけがでてしまう問題が起きやすいため、画像サイズは割り切れる偶数を使うようにします。