Adobe XD Advent Calendar 2016の16日目の記事です。
個人的にXDは、デザイナーさんよりもディレクターさんにさわってほしいツールだと思っているので、今日はそのことを書きます。

そもそも Adobe XDとは

webデザインとプロトタイプが同時にできるツールです。
世間ではXDと呼ばれていますが、正式にはAdobe Experience Designといいます。

個人的にXDを使ってみることにした

UI・UXの勉強会でアプリのデザインをする機会があったので、前から気になっていたXDをさわってみることにしました。
実際に作ったアプリ画面のデザインはこんなかんじ。

発表時には、実際の導線（動き）も含めてプレゼンしました。

実際に使ってみた感想

使ってみてまず感動したのが、普段PhotoshopやIllustratorでwebデザインをしてるときに感じている、めんどくさい部分がカバーされているということ。
そもそも、Photoshopは写真編集ツール、Illustratorはイラストや紙もの用の編集ツールであり、web用に作られたツールではありません。
それがXDではちゃんとweb用として開発されてこともあり、かゆいところに手が届くという感じ。

あと、めちゃくちゃ軽いのもうれしいところ。アートボードを大量生産してるにも関わらず、一度も落ちることなく、快適に作業できました。

デザインツールとしてもよいけれど…

最近出たツールということもあり、他のデザインツールと比較すると、まだまだ発展途上なところもあります。
ただ、デザインツールとしては今後に期待…！という部分はあるものの、プロトタイプツールとしては、今からでもどんどん使っていきたい！と感じました。

ワイヤーフレームだけでは見えてこない問題点

ディレクターさんがPowerPointなどを使ってワイヤーを書いてますって会社さん、ありますよね。
作業フロー的にはディレクターがサイトマップとワイヤーフレームを作り、それをデザイナーがデザインし、最後にエンジニアがそれをコーディングするという流れ。

でもサイトマップとワイヤーフレームの情報だけでは、サイトの導線設計の問題点はなかなか見えてきません。
コーディングが完了してから、サイト全体を回遊してみると「なんか違う…」、「思っていたより使いづらい…」と感じたことがある人もいると思います。
そういった問題も、プロトタイプで「導線の見える化」をしておくことにより、最初の段階に解消できるようになります。

プロトタイプを作るメリット

プロトタイプを作ることにより、「ここのページにはこういう情報もあったほうがいいよね」とか、「ここは1ページにまとめてしまわないで、新しくページを作った方がいいかも」という風にブラッシュアップしていけます。

特にスマートフォンサイトの場合、なんでもかんでも1ページに詰め込むのではなく、どこにどれだけの情報量をいれるか、精査しなくてはいけません。
気づいたら一部のスマホページがおそろしく長くなってる…という人は一度プロトタイプを導入してみるといいんじゃないかなと思います。

XDがおすすめの理由

操作が簡単で導入しやすい

プロトタイプを作っていくうちに、気づくと作りこむことが目的になってしまう…なんてこともあります。
でも本当に大事なことは、プロトタイプを作ることにより、現状の問題点をいち早く発見できること、そしてチーム間でコミュニケーションがとれることだと思います。
機能的には誰かと共有できて、すぐに改善できればよいので、そこまで高機能でなくていいのかなと思ってます。

XDは操作も比較的シンプルなので、PowerPointなどのOffice系を使いこなせる人であればわりとすんなり入っていけると思います。
学習コストが比較的低いというのは大事で、なんとなくの感覚で使えるのがXDの魅力かなと思います。
特に事前学習なしでも、ある程度さわれるとは思いますが、先にどんな具合か見ておきたいという人は、公式サイトにチュートリアルが上がってるのでそちらをどうぞ。

Windowsでも使える

以前まではMacのみ対応でしたが、最近Windowsにも対応しました。
　

毎月アップデートしてる

Adobeも開発に力を入れているようで、毎月アップデートされてます。
まだ英語版しかないですが、フィードバック専用サイトもあります。
どんどん、使えるデザインツールになっていってるので今後が楽しみですね。

最後に

いろいろと書きましたが、現時点でプロトタイプを作るのにはXDが最強!…というわけではなく、案件やプロジェクトに関わるメンバーによって使い分けていった方がいいと思っています。

レスポンシブでページ数が多いのであれば、Bootstrapなどを使ったhtmlベースのプロトタイプの方がよいのかもしれませんし、アニメーションを重視したサイトであればもうちょっと動きをつけられるツールを使った方がいいのかもしれません。

最近では、いろんなプロトタイプツールが出ています。
いろんなツールをさわってみて、今の案件に合うツールを選択できるといいですね。