先日発表された新たなUXデザインツールAdobe Experience Design(Preview)※以下略称がAdobe XD。
を触ってみたので、いつもラフデザインはSketch、アプリのデモはProttを使っているので、使用感などを比較したいと思います。
あくまで個人的な所感に基づくものです。
まずはAdobe XDの詳細は公式ブログに記載されています。コチラから
動画だけ見たい方は下記でどうぞ
環境
OS X Yosemite(バージョン10.10.5)
MacBook Pro(13-inch,mid 2014)
プロセッサ 16GB
Adobe Creative Cloud利用
Sketch 3.5.1利用
Prott利用
起動や動作について
描画速度では、Adobe XDが早く感じます。
大きな写真素材を利用すると、動きが不安定になることがあるSketchですが、大きな素材をたくさん利用しても動作に関しては、Adobe XDは全く問題ありませんでした。
起動は同じぐらいかなー。っていうのが印象です。
初回起動のこの画面は非常に利用しやすいと感じました。
Sketchの場合は真っ白なキャンバスからスタートなので。（その後設定できますが。）
なのでAdobe XD勝利！
UIについて
これは好みが分かれると思いますが、Adobe製品（Photoshopやイラレ）が得意でない私にはSketchのほうが利用しやすく感じました。
なぜならAdobe XDに関しては、Adobe製品特有の「ショートカット覚えてね」的な感じで、操作ボタンの表示があまりないので、素材の表示レイヤーを一つ上にするだけでメニューバーに行かなければ操作できません。
ちなみに、Adobe XDにはレイヤー構成を見る場所がないので、これも少し不便に感じました。
Sketchは、下記のようにサイドバーにレイヤー構成が見えるので、序列を変更するのにとっても便利に感じています。しらす丼ちらしは、気にしないでくださいね（笑）
なので、Sketch勝利！
機能（デザイン面のみ）について
デザイン性の要素としては、単独ソフトでみるとSketchの勝利です。
Adobe XDに関しては、Photoshopやイラレありきでデザインするような設計になっていると感じました。
なかでもSketch側で気に入っている「Gaussian Blur」がないのが残念。。。
あと、Sketchはプラグインが多いので便利です。
ただし、Adobe XDでは写真の下記のような整形が簡単にできるのでこの機能は非常に素晴らしいなーと感じました。
テストサイト（アプリ）の共有について
こちらは、Adobe XD単独とSketch ＋ Prottの組み合わせの勝負になるのですが、速さでいうとAdobe XDが圧倒的に早いです。
なんせSketchでは、書き出しを行った後Prott側に素材をもっていき、そこからリンク設定という形になるかつ、ウェブでの扱いなので、通信環境により作業がはかどらないことがあります。
Prottypeの動画が簡単に取れるのも大変素敵な機能でした。こんな感じのものがすぐに動画にできるので。
ローカル環境で諸々調整して、最後に共有することができるAdobe XDの共有の速さは圧倒的に良いと感じました。
ただ、一点不満が共有リンクがとても簡単に発行できるのですが、パスワードかけられない。。。クライアントに見せるなどの対応もあるのでそこらへんも考慮して今後修正していただければと思いました。
総括するとAdobe XDの勝ち！
プロトタイプ作成について
アプリを作るであればPrott、ウェブだけであればAdobe XDで十分って感じです。
アプリという意味合いでいうと、操作性などに関しては、Prottのほうが設定項目がたくさんあるので非常に実際のアプリをイメージした操作を設定できます。
単純なタップやクリックだけでの操作であればAdobe XDで十分かと。
ここはアプリを作るか、ウェブを作るかで分かれるので勝敗はドロー！
価格について
Sketch & Prottの勝ち！こちらは、Sketchを一回$99（日本円だと11,200円ぐらい※ブログ記載日換算）で
Adobe XDは、Creative Cloudの契約が必要になるので、月額約5,０００円程度かかります。
Abobe製品が全部使えるって考えると安いと思うのですが、全部覚えるの大変。。。
総括
アプリ開発なら、Sketch & Prott。
ウェブの製作が多いのであれば、Adobe XDだと思いました。
ただし、まだ出たばかりで今後様々なアップデートをしていくと思うので今後に期待です。
とりあえずウェブ製作のワイヤーなんだけど、限りなくデザインに近いものを作成するために活用したいと思います。
最後に一時間ぐらいでAdobe XDの操作方法覚えながら作ったProttypeを共有しておきます。お時間あれば見てみてください。
コチラから
