【検証】XDの画像書き出し、最適な設定方法は?間違っていると画像が荒いことに…(2021年5時点)

どうも、はるです。

XDでデザインを作っていると、書き出した画像の画質が悪い?気のせい?と言う話題が周りで上がっています。

気にはなっていたのですが、検証ができていなかったので、
今回きちんと検証しようと思います。

比較しやすいように、すべて同じ画像で書き出しをします。

私のように間違った認識をしていると、XDの画像書き出しを2倍に書き出している!と思っていても、実は2倍どころか小さくなっているということになってしまうので、気をつけてくださいね。

XDのバージョンは最新の40.0.22です。

わかりやすいように、実際に書き出したものをWordPress上にあげていますが、実際のとは多少異なると思います。

目次

XD 画像書き出しの検証

XDに画像を入れた状態

フリー写真素材ぱくたそさんから、ダウンロードした画像です。サイズM(1600ピクセル×1067ピクセル)です。

ダウンロードしただけの、解像度はこの様になっています。

XDに画像を入れたところ、サイズが…

この画像をXDに入れたところ、サイズは800ピクセル×533.5ピクセルに。
写真を大きくしたい方は、サイズを大きくしたり調整すると思います。

この時点で画像が最初のときより、大きさが半分になっていますね。

サイズを変えずにそのまま書き出しした場合

とりあえず、まずは大きさを変えずにそのままの状態で書き出しをします。

Web 1xの状態

1xに選択しても、2枚の画像が出力されます。

以下の画像が、Web/倍率1x/画質100%で書き出したものです。

こちらは小さい方の画像。

こちらは2xのものですね。解像度は変わりはないようです。

Web 2xの状態

こちらも、2枚の画像が出力されます。

Web/倍率2x/画質100%で書き出したものです。

こちらは、書き出しすると、かなりサイズが小さくなっていますね。

あれ?小さくなっている!見間違いかなと思ったのですが…。何度やっても同じでした。

スマホサイズ(375ピクセル)にして書き出し

つづいて、今の画像を375ピクセルにして、書き出しをしてみました。

Web 1xの状態

こちらも、2つの画像が出てきました。

375ぴったりですね。解像度の変化はありません。

こちらは、750ピクセルで書き出されています。

Web 2xの状態

2xで設定したところ、188ピクセルに。2倍どころか小さくなっています。

こちらはサイズは変わらず。

XDで書き出しをするのであれば1xの書き出しで

もし、XDで画像を書き出しするのであれば、1xでの書き出しで、画像の後ろに2xと書かれている方を使うほうが良いですね。
2xっていうのが2倍なのかなと思っていたら、そうじゃなかったというのが罠ですね。紛らわしい。

お客さんによっては高解像度の方が良いという場合もあるので、その場合はXDを経由しないほうがよさそうです。

まとめ
  • XDにいれると、画像の解像度が下がる
  • 書き出しの設定によってサイズは変わるものの、解像度はどの設定にしても同じ
  • 一番大きいサイズの書き出し画像は、1xで、最後に「2x」と名前がついているの方

XDはUI/UXデザインツールであって、Photoshop・Illustratorの代用にはならない

以上のことから、私の結論として、XDはあくまでもUI・UXをデザインするためのツールであって、PhotoshopやIllustratorの代用にはならないという考えに至りました。

解像度が低くても気にならないという方には良いかもしれません。しかし、せっかく作った写真画像やデザインをXDに入れた時点で、解像度が低くなるので非常に残念な感じになってしまいます。

XDで入れた画像を書き出しで、どのサイズにしても基本的には解像度の変化はありません。あくまでもXDはデザインの確認用という認識をしていたほうが良さそうです。

実際のデータはPhotoshopやIllustratorの読み込み・もしくはCanvaなどで対処するほうが良さそうと感じました。

まぁそれができちゃったら、Photoshop・Illustratorでデザインする必要がなくなっちゃいますもんね。

この記事が参考になったら、うれしいです。

この記事が気に入ったら
フォローしてね!

この記事がよかったらシェアしてくれるとうれしいです!

この記事を書いた人

はる(田宮榛乃)のアバター

はる(田宮榛乃)

フリーランスのはるです。ブログを書いたり、動画編集なども行っています。時短になるものや便利なWEBのツールなどを紹介しています!

目次
閉じる