超今更ながらXDを使ってみた

デザイナーの清水です。
AdobeXDが世に出て数年。リリース当時軽く触ってみてこんなものかと放置していたのですが、先日webデザイナーをしている先輩に会った際、Photoshopより頻繁に使ってる、爆速でデザインできる、使わないと損だ、などと熱く語られて、こいつはヤバいと焦り講習に行ったり本を買いしばらく使ってみた次第です。

Adobe XDとは？
Adobe XDは、webサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。ワイヤーフレーム、デザインカンプ、プロトタイプを作成し、クライアントや制作チームへの共有を一つのアプリで実現します。デザイナーだけでなくディレクターやプランナーも思い描いたアイデアをすぐにカタチに落とし込めます。（公式より）

リリースされた頃は確かに動作は軽いけど痒いところに手が届かないなって思っていたけれど、 久しぶりに使ってみてかなり快適になっていることに驚きました。こんなにマメにアップデートしているとは！ ワイヤーフレームの作成くらいにしか使えないのではないかという認識だったのだけれど、これメインでデザインいけちゃうんじゃないの！？　

ということで2週間ほど使ってみて個人的にステキだと思った機能をご紹介します。

ガイド

ガイドを引けるようになってる！
アートボードの上辺または左辺からドラッグして引き出すことで、フォトショやイラレと同じようにガイドを引くことができるようになってました！両端からの距離も常に表示してくれるのでPhotoshopやIllustratorのガイドより使いやすい印象で、きっちり作りたい自分にはとても助かる機能です。

フォトショップで画像を直接編集

XDに配置された画像を直接Photoshopで編集できるようになってる！！
今まで画像の編集をしたい場合はCCライブラリー経由でPSDデータを配置するしかなかったらしいが、画像を右クリックしてPhotoshopで編集を選べば簡単に修正可能に！いちいちライブラリーを呼び出す手間が省けるので時間短縮になります。

自動アニメーション

簡単にいうと始めと終わりの2つのアートボードをつなぐとその間のアニメーションを自動で作成してくれるという機能です。移動はもちろん、違った形のシェイプなら滑らかなアニメーションで形が変化します。
なにこれ楽しい！しばらく仕事を忘れてアニメーション作りに没頭してしまいました…。
トリガーを時間、タップ、ドラッグなどから選べます。トリガーにマウスオーバーがあれば最高なのですがそれはまだ実装されていないようです。

レスポンシブサイズ変更

オブジェクトのサイズを変更する際、空間関係を維持しながら様々な画面サイズに最適なサイズで適応させることができる機能。オブジェクトそれぞれにレスポンシブサイズ変更の指定をしてあげるとアートボードを伸ばした時に適切なサイズにしてくれます。ステキ！
レスポンシブデザインが当たり前になった今、デザイン時間の短縮に一役買う機能ですね。まだ本格的に使っていないのですがうまく使えば大幅な時間短縮になるのではないかと期待しています。

スポイト

XDの画面内はもちろん、画面外の色もサクッと持って来れます。他のアプリケーションでもできるけどね。

2週間使ってみて

もちろん代表的な機能のアセットやリピートグリッドなどは超便利だし、他にもオブジェクトの反転、多角形ツールの追加などどんどん進化を続けているXD。IllustratorやPhotoshopなどとの連携は不可欠だけれどこの軽さと操作性は魅力的！どちらかというとIllustrator寄りの操作感がPhotoshopが苦手な自分にとってはとても使いやすいです。今後案件によってはメインで使っていこうと思いました。