【デザイン】Adobe初のUXデザインツール「Adobe XD」を使ってみた所感

こんにちは、デザイナーのスタミです。

今更ですが、今年の3月にMac版のみリリースされたAdobe XD（Adobe Experience Design CC Preview）は一度触ってみて、良かったら実務に取り入れなければと思っていたので、実際に触ってみました。

●Adobe Experience Design CC （Preview）http://www.adobe.com/jp/products/experience-design.html

Adobe XD（Adobe Experience Design CC Preview）とは

Adobe XDは、モバイルアプリやWebサイトのデザインに便利なUXデザインツールです。
今までは、ディレクターやデザイナーが協力しながらワイヤーフレームを作るのであれば紙に描いたりPowerpointで作ったりしていましたし、本番のデザインを作る時はPhotoshopやIllustrator、Sketchなどのデザインツールを使うのが一般的でした（メンバー全員がAdobeやSketchのユーザーであれば、ワイヤーフレームの段階からガンガン使うと思います）。
さらに、実際の画面遷移などを実際に再現するプロトタイプを作るために、弊社ではprottなどのサービスを使ったりしていました。
個人的な感覚ですが、Adobe XDはこれらの間を取るツールという印象を受けました。
よりリアリティのあるワイヤーフレームを簡単に作れて、それをそのままサクッとプロトタイプに落とし込める超時短ツールですよ。
実際の動きはプロモーションビデオでご確認ください。
本番のデザインを作ることには向かないとは思いますが、もし書き出しの機能がしっかりしていたら、フラットなビジュアルのデザインであれば普通に作れちゃうなぁという印象です。
その辺はまだよく見ていませんが、アップデートも積極的に行っていく予定みたいなので遅かれ早かれ今後主流になっていくのではないでしょうか。

しかもこれだけ使えて、Adobe IDさえあれば誰でも無償でダウンロード可能ということなので、この手の分野に携わっている人であれば非デザイナーでも一度触ってみるべきだと思います（ただし2016年6月現在Mac版のみ）。

Sketchとの違い

Sketchにだいぶ近いところがあるなと思うのですが、決定的に違うのはXD上で作った画面を流用してそのままプロトタイプを作れるところです。もしかしたらSketchも今後のアップデートで対応する可能性もありますが、現状では明らかな差となっています。
性能の部分では、XDの方はオブジェクトのサイズ変更がとても安定しているところが地味に素晴らしいです。個人的にはSketchの一番の弱みはグループ化したオブジェクトのサイズ変更や書き出しサイズの精度だと思っているので、これも決定的な差です。この辺はさすがのAdobeクオリティですね。
加えてコスト面では、今までSketchはAdobe製品と比較して安く済むのでディレクターなどの非デザイナーでも手を出しやすかったりしましたが、XDに関してはドカンと無償提供なのでこれも大きな差となるでしょう。
一方でかなり簡素に作られていて、レイヤー管理の概念無しという驚愕の仕様だったりするので、人によっては使いづらかったりするかもしれません。あくまでワイヤーフレームを作る用途であればほとんど問題にならないと思いますし、Powerpointだと思って使えばそんなに違和感無い気もします。

Adobe XDの便利な機能

プロモーションビデオでも紹介されている通り＆ほぼ前述で紹介してしまったのですが、XDの推し機能は以下の3点のようです。

・繰り返し表示したい要素は範囲指定でサクッと表示できる
例えばメッセージアプリを開発しようとした時、必ずメッセージ一覧画面があると思います。
この画面を作る時、今までであればリストの１段目を作り、それをコピーして全面に配置していました。
これでも充分だったとは思いますが、普通にやる場合はデザイン変更の度にコピー&配置のやり直しが発生したり、段ごとの余白も調整するたびに反映の作業が必要でした。
XDではこの作業を大幅にカット。繰り返し表示したいオブジェクトを選んで範囲を指定するだけで、範囲内に繰り返し表示されされ、1段ごとの余白も一括で自由に調整可能です。また、元となった1段目を修正すれば、繰り返している全箇所に反映されます。この辺の機能を積むことによってレイヤー管理の概念を無くすというバランスなのかもしれませんね。
Sketchのシンボル機能などを上手く活用すればこの辺は割とサクッとできると思いますが、いままでAdobe製品しか使ったことがなく、あまりプラグインなども使いこなす方ではないという方にとっては、デフォルトでこの機能が積まれていることは結構画期的じゃないでしょうか。

・面倒な画像配置からマスクによる整形をドラッグアンドドロップで
これも繰り返し表示に関連するところですが、ユーザーアイコンや写真が並んでいる画面を作る時に、ダミー画像一種類を延々繰り返すプロトタイプだとリアルな雰囲気が出せないんですよね。でも、地味な割に手間のかかかる作業なのでできれば全箇所違う画像に差し替えはやりたくない…という問題がありました。XDなら、マスクとして扱うための枠さえ用意しておけば、あとは画像を枠の数分用意してフォルダから直接ドラッグアンドドロップするだけではめ込みまで完了します。
よりリアルなプロトタイプを追求する時にはとっても便利な機能ですよね。

・作った画面をそのまま使って画面遷移を再現したプロトタイプに落とし込める
別のツールをかませなくても、一つのXDファイルの中でデザインから画面遷移まで設定、プレビュー、録画までできてしまいます。
ただ遷移がわかるようにするだけではなく、操作する指の部分の動きもわかるようにプレビューされるので、おまけで付いている機能ではなくちゃんと作られているなと思います。

実際の操作については以下のブログ記事などを参考にしてみてください。

●Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた – Webクリエイターボックスhttp://www.webcreatorbox.com/webinfo/adobe-xd/

●Adobe XDでLINEデザインを作ってみた【使い方解説】 – STAND4U
http://stand-4u.com/tool/adobe_xd.html

総括

全体的にこれは是非取り入れてみたいと思う要素ばかりでした！
そして弊社は全員がMacを使っているので割と条件が揃いやすい方だとは思うのですが、とは言えプロジェクトメンバー全員がこれを中心に資料共有をしながらアプリ開発を行うという次元を想像してみたら、現段階ではそれは無いなと。
いくらXDでワイヤーフレームやプロトタイプを作ることができても、設計書や画面フロー図などのドキュメントをOffice系ソフトで作成するという作業から解放される日はまだまだ遠く、それであればやはり誰もが操作しやすいPowerpointで作っておくのが正義？というところに戻ってしまいます。
テンション上がりきらずという感じですね。
そこの問題を解消される日はいつ頃になるのでしょう（こういった要望が人よりもシビアと言われている私です）。