XDで拡大縮小した時に素材が崩れる！上手なリサイズ方法は？

Webデザイン

XDで拡大・縮小した時に素材が崩れてしまう…

こんばんは、フォトピザです。

XDを使っていて、拡大縮小時の素材の崩れに悩む方も多いのでは無いでしょうか？
今回はこういった疑問を解決していきます。

見るべきポイントはたった2つです。
それではどうぞ！

拡大縮小時に素材が崩れる時に見るべきポイント

リサイズ時に動画のように素材が崩れてしまっていたら、疑うべき箇所は2箇所です。

ここですね。
縦横比のオン / オフを切り替える機能ですが、オフになっていることが地味によくあります。
オンにしないと縦横比は固定されませんので注意しましょう。
特にXDを使い始めで、UIに慣れていないと見落としている可能性があります。

ここも見落としポイントです。

「レスポンシブサイズ変更」がオンになっていた場合は、オフに切り替えましょう。

オフにした状態で再度みてみましょう。

オフにするとうまくいきましたね。
※ちなみに縦横比を維持したままの拡大・縮小はshiftを押しながら行ってくださいね！
Adobeユーザーならお馴染みの操作ですね。illustrator、photoshopも同様にshiftを押しながらリサイズします。

レスポンシブサイズ変更を、オンにするとどうなる？

画像やテキストなどの幅をリサイズさせたとき、要素同士が位置関係をある程度保ちながらサイズや位置をいい感じに調整してくれるというもの。様々なデバイスのデザインを素早く作成するできますね。文章だと難しいので下の動画をみてください。

既にコーディングされた後のデータのような挙動をしてくれます。

これ、すごく便利です。ただ使い方に少し慣れが必要なのと、今回のように単純にサイズを変えたい場合だと逆に邪魔になってしまうこともあります。使い分けが大事ということですね。

上の動画でサイズ変更はうまくいっていますが、実をいうと線幅が変わっていません。
なので、オブジェクトのサイズを小さくすると、線幅がそのままなのでどんどんアイコンが太っていってしまいます。サイズ変更に線幅が連動していないんですね。

これは、結論からいうと変わりません。（2020/9時点）
割と不便だと思いますが、現在は仕様として実装されていないようです。

なので僕はどうしているかというと、illustratorを一度経由し「パスのアウトライン」をかけた上で再度XDに戻しています。線データではなく、パスになってしまえばいいわけですからね。

今回のまとめです。リサイズがうまくいかない時は以下のようにしてみましょう。

リサイズが変な時は

XDでは特に複雑なオブジェクトの時は、大抵サイズ変更で詰まる印象があります。
なので大体イラレを経由させることが多いです。ただXDはまだまだ発展途上なので、Adobeユーザーとしては、今後も期待ですね。

それでは本日はここら辺で。

あなたにはこちらの記事もオススメ