B'scre8

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

2019.11.10

691

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

目次 [非表示]

1. Illustratorからの乗り換えストレスが少ない
2. Web制作に特化した機能の数々
3. 総括

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

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

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

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

リピートグリッド機能

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

プロトタイプ機能

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

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

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

ファイルの共有

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

アセット機能

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