【Adobe XD】Illustratorからの乗り換えもノンストレスで!UIデザインに特化した機能に感動

こんにちは、デザイナーの野尻です。
最近、食わず嫌いで手を触れてこなかったAdobe XDに触れる機会があり、その便利さに驚愕(今更)した経緯がありました。
まだ触った程度ではありますが、本格的に活用したくなる便利さを体感できましたので、今回は普段使いのIllustratorと比較して紹介したいと思います。

Illustratorからの乗り換えストレスが少ない

最初使うことになったとき、正直「イラレでいいじゃん」という拒絶反応が少々あったのですが、実際に触ってみた感想は「初見でも案外いける」でした。
その理由のひとつが「ショートカットがAdobe製品で統一されている」にあります。
感覚的に使い慣れたショートカットが意外と使えることが多く、初見でもIllustratorとほぼ同じ感覚で使用することができました。
以前トライしてみたSketchと比べても感覚的にかなり使いやすい印象です。
効率化を求めて新しいツールを使ったはずが逆に非効率的、という本末転倒な状況が起きにくい。まずこれは大きいです。

Web制作に特化した機能の数々

使ってみて、びっくりするくらい便利な機能が盛りだくさんでした

リピートグリッド機能

連続した特定のパターンを任意の領域に複製できる機能です。
例えばお知らせのブロックをひとつ作ると、それを任意の範囲にリピートすることができるというものなんですが、これが思いの他便利!
リピート要素をコピペして、整列していた手間を省けるだけでなく、リピート要素内のオブジェクト配置を変更すると、リピートされた要素の配置も変わる!(非常にイイ!)
個人的には「整列」の手間を省くことができることが非常に大きく、作業効率が向上する予感を大いに感じています!

プロトタイプ機能

WF(ワイヤーフレーム)を作成したとき、作成したビジュアルから、そのままプロトタイプ作成に移行することができます
最近はプロトタイプを作成する機会がなかったのですが、以前は下記のような手順でプロトタイプ作成していました

①ビジュアルを画像として出力
②外部サービスにアップ
③外部サービスでリンクなどを設定
④修正が入ると①に戻る

改めてみると結構大変ですね、、、
これがひとつのツール内でできるようになった、事実上①②の作業を省くことができるのは非常に効率的だと感じました!

ファイルの共有

これは前提としてXDのインストールなどがからんでくるので、基本的には社内での連携に便利な機能です。
作成したファイルをクラウド上で共有できるので、複数人で作業するとき、例えばデザイナーとコーダーが分業のときなどはものすごく便利な機能ですね!
余談ですが、今回私がXDを触るきっかけになったのは、クライアントがXDを導入していたためとなります。

アセット機能

プロジェクト内で使用しているカラー、文字スタイル、シンボルなどを特定のルールで管理することができる機能です。
例えば、ボタンのカラーを登録して、そのアセットを配置していくと、あとでボタンのデザインやカラーを変更したいときに、一括で変更ができるというもの。
まだあまり使っていない機能ですが、非常に便利そうですね!

要素のレスポンシブ表示

Illustratorと決定的に違うのがこの部分なのかと思います。
例えば文字を含む要素のブロックを拡大縮小するとき、

Illustorator

中身の文字も拡大縮小される

XD

範囲内でレスポンシブに拡大縮小される

これは実際に動かしてみると、ちょっと感動すら覚えます。

細かい便利機能

・動作が軽い
・画像の投入が楽(自動的にマスクしてくれる)
・等間隔への整列に強い
などなど
UIデザインに特化した様々な便利機能を兼ね備えています!

Adobe XDをもっと使いこなすヒント!
https://blogs.adobe.com/japan/serialization/web-xd-protips/

総括

非常に便利です!
これまでUIをデザインするうえで、「ここは変えたくない」と思ってしまうような面倒な作業を、一括で操作できるようにすることで、よりUIの完成度を高めるためのトライアンドエラーをしやすくなるというところが大きいと思います!

野尻

この記事を書いた人: 野尻

ビーズクリエイト Webに関する色々を担当しています。

あわせて読みたい