Adobe XD の簡単な使い方&レビュー

Pocket

現在プレビュー版が公開されているAdobe製のプロトタイプツール。
単にデザインを作るだけでなく、実際の画面の動きを含めてより本番に近い状態で確認できるツールです。

しかも、Photoshopのような複雑な操作なしに簡単に画面遷移やレイアウトを作成できるため、簡易的なWebデザインツールとしても優秀。

この記事ではAdobeXDのレビューと使い方を紹介します。

AdobeXD、それは意識高いFireworks!

AdobeXDとは?-14
Fireworksが消えてから数年。Web制作業界では未だに現役で動いてるとこも多いと聞きます。FireworksはWebに最適化されたPhotoshopみたいなもので、すごくシンプルで初心者でも使いやすかったんですよね。

AdobeXDを使ってるとそのFireworksが意識高くなって帰ってきた!と直感的に感じました。

まずそのシンプルな機能と操作性。Photoshopみたいにできることが多すぎで何がなんだかわからないということがありません。ただ、他にはない機能やUIなので最初ちょっと戸惑うかもしれませんが、慣れれば非常に強力なツールになりそうですね。

一方似たようなツールにAdobe Museがありますが、こちらはどちらかというとDTPに近い手触り感で、カチャカチャした印象が気になったので使ってませんでした。

AdobeXDの方はヌルッとしていて直感的で必要最小限のシンプルな機能が使いやすい印象ですね。まだPreview版なのでここからどう進化していくか非常に楽しみです。

Adobe XD の簡単な使い方

ここからは実際にAdobeXDのチュートリアルを触りながら使い方をチェックしてみたいと思います。

AdobeXDはPhotoshopのような機能満載ツールと異なり、チュートリアルを一通りやれば大体のことはできるようになっている感じ。こちらのチュートリアルもすごく参考になるので、この記事と合わせてチェックしてみてください。

AdobeXDのインストール方法

※現在(2016/11/9)のところMacのみ公開中とのことです。Windowsの方はもうしばらくお待ちください。

Macの方はAdobe XDのページからダウンロードし、通常のアプリと同じようにインストールすることができます。
Adobe XD インストール方法-12

タブレットやスマホでプレビューを開く場合は各OS用にアプリが用意されています。そちらもインストールしておきましょう。
Adobe XD インストール方法-13

インストールしてアプリを開くとチュートリアルを開始ボタンがあるのでとりあえず押してみます。ここからはAdobeXDの画面や使い方をチェックしてみます。

Adobe XD の画面構成

左にあるのはツールバー。選択範囲や長方形ツールなどPhotoshopと比べて非常に少なくシンプル。
Adobe XD 画面構成-01

その隣にレイヤーパネル。配置したオブジェクトのレイヤーが一目でわかります。
Adobe XD 画面構成-02

中央にはワークスペース。上部のタブでデザインとプロトタイプの2つのモードを入れ替え可能です。デザインモードは通常の描画操作、プロトタイプモードでは画面遷移設定が可能。
Adobe XD 画面構成-03

一番右にあるのはプロパティパネル。表示は固定ですがPhotoshopのようにごちゃごちゃしてない分スッキリ。
Adobe XD 画面構成-04

画面構成だけ見ても非常にシンプルで最低限必要な機能に絞られており、Photoshopのような複雑性がないことがわかります。

Adobe XD のリピートグリッドの使い方

細かい操作については別記事で書くとして、AdobeXDの特徴的な機能をいくつかピックアップして紹介したいと思います。

まずはこちらのリピートグリッド。簡単に言うと繰り返し要素をスペース付きでコピーできるツールです。
Adobe XD リピートグリッドの使い方-05

上の画像のように緑色の枠(ボタン押すと出現)をぐい〜っと引っ張っていくだけで、あら不思議、コンテンツ間のスペースまでついてリピートしてくれるのです。
Adobe XD リピートグリッドの使い方-06

後からデザインの変更があった時も、1つの要素だけを編集すればすべてに適用可能。さらに、コンテンツ間のスペースは一箇所をドラッグで操作すれば他のスペースも同じように変更されます。
Adobe XD リピートグリッドの使い方-07

Photoshopでも繰り返しは出来ますが、レイヤーを手作業でコピーしていく必要があり、編集も個別に行う必要があります。それに比べれば非常に簡単に繰り返し要素を作成できる機能になってます。

AdobeXDの画像取り込み

画像の取り込みではマスクをかけたり、リサイズしたりといった作業が必要になりますが、AdobeXDなら長方形や楕円オブジェクトに画像をドラッグ&ドロップするだけ。
Adobe XD 画像取り込み方法-08

すると自動的にリサイズとマスキングされて表示されます。
Adobe XD 画像取り込み方法-09

この機能も非常にありがたいですね。細かいこと考えずにサクサク作業が進みます。

AdobeXDのアニメーション付き画面遷移

ワークスペースの上部にある「プロトタイプ」タブをクリックすることで使用可能になる画面遷移機能。どんなオブジェクトでもクリックすると右側に矢印が出るのでそれをアートボードと繋げるだけで、簡単に画面遷移の設定ができます。
Adobe XD アニメーション付き画面遷移の使い方-10

また、ここでは遷移のアニメーションを設定できます。
Adobe XD アニメーション付き画面遷移の使い方-11

モバイルアプリなど画面遷移がたくさん発生する場合はこの機能が活躍します。細かい設定なしで矢印をドラッグするだけなのですごく楽。

このほかの細かい部分は以下のリンク先にあるチュートリアル動画にうまくまとめられています。この動画からもわかるように、単なるワイヤーフレームツールとしてだけでなく、高品質なプロトタイピングツールとして非常に優秀なツールですね。
Webやモバイルアプリのデザインを作成する

AdobeXD対応UIKitをダウンロードして追加する

AdobeXDでは標準で3つのUIkitが付属しています。でも実際プロトタイプを作成する場合、なんか足りないなぁと感じるのが正直なところ。そんな時はこちらのサイトにアクセスしてみてください。

DesignMine
AdobeXD対応UIKitをダウンロードする-15

ここではAdobeXD向けのUIkitを無料でダウンロードして追加することができます。ワイヤーフレームやBootstrapのUI、アイコン、レスポンシブレイアウトなんかもあるのでWeb制作もかなり捗りますよ!

次は?

次回はAdobeXDを使っていい感じのWebプロトタイプを作成してみます。
それではまた 🙂