※この記事は2017年2月1日に執筆された記事です。現在は仕様が異なる可能性があります。

---

最近流行りのAdobe XDが良いと聞いて、せっかくの機会なのでこの「WebNAUT」のリニューアルのワイヤーフレーム作成に使ってみました。今回はその時の使用感をお伝えしていきたいと思います！

11月にベータ版のリリースがあってとても便利になったのですが、ワイヤーフレームを作っていたのが10月頃だったので、まずは当時の「Adobe XD Preview 7 」を使ってみての感想です。

その前に、Adobe XDとは？

Webサイトやスマホアプリのデザインツールであり、プロトタイプツールです。PhotoshopやIllustratorのようにデザインを作成するだけでなく、
このアプリケーション内でプロトタイプを作成することもできます。その名前の通り、ユーザー体験を設計するうえで助けになるツールです。
Adobe XD公式サイト

良かった点

学習コストが低い

普段Illustrator、PhotoshopといったAdobe製品使ってる人に馴染むように作られています。機能もピンポイントに絞られてることもあり30分あればスイスイ使えるようになると思います。

噂に聞くリピートグリットがすごい

差分パーツを繰り返し作成することができるリピートグリッド機能ですが、特にWebNAUTのようなメディアサイトだと、記事サムネイルのパーツをよく使うので複製が楽になります。

スウォッチが便利になった

色変えるときの下に、出てくる。1クリックで登録も反映も簡単。今まで使ったスウォッチの中でも1番便利に感じました。

チームでの共有が楽にできる

書き出した画像でチームと共有する場合でも、⌘+E→書き出し先指定→アートボード全てPNG書き出し。と、簡単に素早く共有出来ます。
アートボードの名前がそのままファイル名になるので管理もしやすいですね。

悪かった点

プロトタイプ作成後のリンク貼り作業に手間がかかる

特にヘッダーなど共通パーツでは、一個一個リンクつけていくの大変です。厳密なプロトタイプを作成しようとすると時間がかかるので、あくまでざっくりしたイメージを共有する目的で使うことが良いと思います。

ガイドが引けない

今回はワイヤーフレーム作成なので多少オブジェクトやテキストがズレてても気になりませんが、デザイン工程として使うには不便になりそうに思えました。

Photoshop/Illustratorとの互換性が低い

デザイン工程に入る時に、個々のオブジェクト(テキストやベクター)として他のソフトに持っていけないので、また新しく作ることになってしまいます。

オンラインで共有機能は誰でも見れる…？

非常に便利な機能ですがパスワード制限などを掛けることができず、情報漏洩が不安なので今のところ実務では使えていません。
しかし、ロードマップには「プロトタイプリンクの共有に関する管理強化」があり、今後のアップデートで機能追加されることが期待できます！
[Adobe XD のロードマップについて]https://helpx.adobe.com/jp/experience-design/kb/missing-features.html

新しくなったからまた触ってみました

下記は11月にリリースされたベータ版に搭載された新機能です。せっかくなのでまた使ってみました。

欲しかったシンボル機能

実は最初に使っていて1番苦労した点はシンボル化ができずに、ヘッダーの要素を後から変えるだけでも苦労しました。しかしシンボル機能のおかげで、ヘッダーなど共通パーツへの変更が全てのアートボードに反映されるので画期的に便利になりました。

デバイスプレビュー

USB経由、もしくはCreative Cloud経由(アップロードしたファイル)で使用することができます。USB経由ではPCでの操作反映後タイムラグなしでスマホで確認することができます。基本的には作業しながら使う場合はUSB経由が便利だと思います。Creative Cloud経由はアップロード済みのデザインをプレビューするので、PCの操作がそのまま反映されるわけではありませんが、外出時などにも確認することができます。どちらもリンクの付いたプロトタイプとして使うことも可能です。

追加されたら嬉しい機能

プリント対応

チームやクライアント様と共有する際は、デバイス(プロトタイプ)と併せて、印刷されたものを見たり書き込んだりしながらディスカッションするシーンが多いかと思います。今回は一度画像で書き出してから印刷していたので、もっと便利になると嬉しいですね。

アートボードがいい感じに(?)整理される機能

1つのファイルで多くのページを作成するので、ちゃんと管理しないと散らかって混乱します。上手いことこれが整理される機能であったり、良いやり方がないかなと思っています。

デザイン工程で使うのは難しい…？

レイヤースタイルや画像を加工するなどの機能は備えていないため、ベクターではできない装飾が必要とされるサイトの作成に向いていないようです。シャドウやぼかしを掛けることはできますが、やはりPhotoshopのような複雑な処理を掛けることはできません。

しかし、シンプルなデザインのWebサイト、アプリや、素早いプロトタイプでの検証が要求されるサービス系のデザインにおいては、デザイン工程でも実用的かもしれません。

少なくともワイヤーフレーム作成には優秀！

普段はIllustratorを使ってワイヤーフレームを作成していましたが、慣れたソフトよりも、特化してるだけあってシンプルで使い心地が良いです。ソフト自体が軽いこともあり効率化・スピードアップに繋がると思います。悪かった点として書いた内容も使い方次第で改善できるかもしれませんね。

今後のアップデートにも期待！

ベータ版ではありますが、アップデートも早く、Web制作の痒い所に手が届く機能が厳選されて搭載されていました。とにかく多機能にするのではなく、機能が絞られてることによる使い心地のよさが実現されているように感じました。今後のAdobe XDのアップデートも楽しみにしております！
下記のサイトより最新情報や使い方を見ることができます。

Adobe Creative Station
Twitterアカウント