Adobe XdのPreview4が公開されたので触った感想

Adobe Xdが公開されてから四半期がすぎましたね。今月になってPreview4というバージョンが公開されたので、触ってみました。今までの更新と比べるとちょっと進化具合がよさげでしたよー!Adobe Xdってなんぞ?という方はこちらの記事からどうぞ!

Preview4でできるようになったこと

まずは今回のバージョンでできるようになったことを、ざっと見てみましょう。
・オブジェクト間の計測機能
・背景のぼかしとオブジェクトのぼかし
・プロトタイプの埋め込みタグ
・日本語UI
これらが実装されました!
早速、詳しく見ていきましょう。

計測機能

tool-adobexd-pre4-01
今回はこちらの画面を使って説明していきたいと思います。
要素やらデザインやらは、この記事のために適当に作ったので深く考えないでください(笑)

で、計測機能についてはオブジェクトにカーソルを合わせてalt/optionキーを押下すると周囲のオブジェクトとの距離を計測してくれるというものです。
うまくキャプチャが取れなかったので、キャプチャなしになってしまったのですが、今までもオブジェクトを動かしているときに距離が出ていたので、あのような感じだと思えばわかりやすいかなと思います。
便利な機能なのは間違いないのですが、僕のツールの使い方だとあまり利用頻度は高くないかも…という感じですかね。
実装に近くなった段階で、位置関係を把握したりするのには非常に有効だと思います!

背景のぼかしとオブジェクトのぼかし

tool-adobexd-pre4-02
今回から追加された、背景のぼかし昨日はオブジェクトを選択したときの設定パネルから設定できます。
画像はオブジェクト自体をぼかす方法。
こんな感じに設定すると…

tool-adobexd-pre4-03
選択したオブジェクトがぼけます。
選択範囲の下を見るとわかりますが、オブジェクト内だけでボケるのではなく、オブジェクト全体がボケているので外側にぼけあしが出てしまっている状態です。

tool-adobexd-pre4-04
これを解消するために、オブジェクトと同じ大きさのマスクを作ると、ぼけあしを消すことができます。
このぼけあしが出るというのをきちんと認識しておかないと、モックアップを確認するときに違和感を感じるかもしれませんね。
不要な時は消し忘れないように注意しましょう。

tool-adobexd-pre4-05
次に、背景のぼかしです。
背景のぼかしも、オブジェクト自体のぼかしと同様の箇所で設定できます。
背景のぼかしというのは、選択したオブジェクトを透過させて、その背景をぼかすという状態になります。

tool-adobexd-pre4-06
絵にするとこんな感じ。
本来のレイアウトの上層に一つレイヤーを作って、そのレイヤーに背景のぼかし処理を入れてみました。
オブジェクト自体がボケるわけではないのでぼけあしがはみ出たりすることはなく、複数の背景レイヤーにまたがってきれいにぼけていることが分かります。

tool-adobexd-pre4-07
こんな風に使うことができます。
モーダルウィンドウを開いた時の、操作面以外をぼけに変えたりできますね。
この機能めっちゃいいね。IllustratorとかPhotoshopにもほしい。。。

プロトタイプの埋め込みタグ

tool-adobexd-pre4-08
今まで、URLの共有に留まっていたプロトタイプですが、Webページなどに埋め込んで表示できるようにタグが吐き出せるようになりました!
これは便利ですね!

日本語UI

tool-adobexd-pre4-09
UIが日本語に対応したため、使いやすくなりました。

リリース解説ビデオ


リリース解説ビデオも用意されているようです。
詳しく知りたい方はこちらもどうぞ!

個人的には、今回のリリースでの一番の目玉はぼかし機能かな?と思います。
次点でプロトタイプの埋め込みコードかなぁ。。。
大きな修正だという触れ込みでしたが、想像していたよりは小さな改善だったなという印象でした。
ともあれ、今後のモック作りの主流になっていくのかもしれない。という可能性を感じさせるものではあるので、ぜひ触って覚えていきたいですね。