Adobe Xdファースト・インプレッション

こんにちは！クリエイティブ部のさーやです。

Adobeから遅れてきた本命？デザインツール「Adobe Experience Design」(通称Adobe Xd)がリリースされましたね。まだプレビュー版とはいえ、巷での評判もなかなか良いようで、私も早速使ってみました！

というわけでこの記事ではAdobe Xdのファースト・インプレッションをお届けします。

Adobe公式ブログに使い方が詳しく書いてありますのでこちらもあわせてどうぞ。

https://blogs.adobe.com/creativestation/web-how-to-play-with-adobe-xd

前置き

本題に入る前に、私の担当業務や作業環境について紹介させていただきます。主な業務はアプリやWebページのデザインで、現在は以下のアプリケーションを使用しております。

弊社の場合、プロトタイピングツールはUIデザインがある程度固まってから導入する場合が多いです。ちなみに界隈ではSketchが大流行中ですが、諸般の事情により今もPhotoshopメインで頑張っています。 (個人的にはSketchは好きです。軽いし！複数サイズ書き出し便利だし！)

あのPhotohopのモッサリ感はどこにいったのか、今のところAdobe製品らしからぬ軽快さで動きます。（アップデートされてどんどん重くならないことを願っています）

操作感もPhotoshopよりSketchに近いので、スケッチャーの皆様でも違和感なく使えると思いました。

今までのワークフローだと、

という、ボタンの色変えるだけといった簡単な修正でも地味〜な手間のかかる流れでしたが、 Xdだとデザイン作業とプロトタイピング作業の画面をタブで切り替えれば、変更内容が即時反映されます。

トライ&エラーを繰り返しやすく、より多くのパターンが試せそうです。

iOSやAndroidの標準UIも元から用意されています。ただ、今のところ起動した時しか呼び出せない仕様のようなので、制作中いつでも開けるように改善してほしい！

特に受託開発の場合、Webやクラウドサービスに上げられないのがほとんどだと思います。 Xdはオフライン環境でデザインもプロトタイピングもできます。

ちなみに先日記事にしましたPixateもオフラインでできます！（注：もちろんクラウドにあげて他の人と一緒に作業することもできます）

Adobe製品なのだから当たり前！なんですが、これがネックになってPhotoshopから乗り換えられなかった方も多いはず。同じAdobe製品という安心感（？）もあり、Sketch導入を見送った方の乗り換え先になるかも。

Adobe公式ブログでこれからのアップデートについて言及されています。 https://blogs.adobe.com/creativestation/web-adobe-xd-preview-roadmap

この中で、私的に特に気になるのは以下の項目。

他Adobe製品とオブジェクト連携ができれば、XdでベースのUIを作成。PhotoshopとIllustratorは複雑なパーツを作成する時のみに使用 …なんていうXd起点での作業ができそうです。

現状レイヤー無しでもそれなりに使えているのですが、いざ作りこみに入るとどうしても複雑な構造になってくるのでやっぱり必要かなと思います。特定のレイヤーを絞り込む、ということも結構ありますしね。

今はSafari等のブラウザにて確認ができますが、全画面表示にならないので、プレビューなのに実際の表示とは異なってしまいます。なので専用アプリが作られるのはありがたいです。縦/横用の表示が実際の端末の向きと紐付いている機能もつけてほしいところ。

またブログの内容にはないですが、Adobe製品同士の「完璧な」互換性にも期待したいところです。クライアントにai/psdを納品しないといけない場合など、ai/psdが扱えることは必須項目となります。現状psd書き出しは出来るようですが、読み込みができないのは改善してほしいポイントです。

しばらくは様子見！といった方が多いかな？と思いますが今からバリバリ現場投入していきたいなら、こんなケースに使うのがいいのではないでしょうか。

Xd、魅力的な点はあれど、これだけで作業を完結させるのは正直まだちょっとキビシイ状態です。とはいえ、まだプレビュー版。正式版がどうなっていくのか、期待したいですね。