Adobeの新しいUXデザインツール Adobe XD を使ってみる

Adobe XD
2016年3月14日に Adobe Experience Design(以下、Adobe XD)が、Public Preview 1(Mac OS Xのみ)として公開されましたので早速使ってみました。ファーストインプレッションは、Sketchに似た簡易デザインツールのように見えましたが、WebサイトやアプリのUIを制作するDesignモードと、そのUI操作による画面遷移や画面遷移エフェクトなどを設定しプレビューができるPrototypeモードがあり、デザインツールとプロトタイピングツールを組み合わせた使い勝手の良い新しいUXデザインツールと言えます。

とても便利なデザインツール

ツールバーには、Rectangle(矩形)ツール、Ellipse(円形)ツール、Lineツール、PenツールがありUIに必要なオブジェクトを作ることができます。複数のオブジェクトを選択するばオブジェクトの合体や型抜きなどが簡単にできます。Illustratorのパスファインダーと同じ使い勝手なのでとても分かりやすいです。Illustratorで作成したオブジェクトをコピー&ペーストしてAdobe XDでそのまま使用出来ますので今まで制作したデータも活用することが可能です。

Adobe XD

画像のマスク処理は、矩形や円形のオブジェクトの上に画像をドラッグ&ドロップするだけでそのオブジェクトの形状に合わせてマスク処理がされます。直感的な操作でマスク処理が出来ますので、迷うことなくイメージしているデザインを制作出来ます。

Adobe XD

繰り返し表示させるリストアイテムなどを1つずつ複製して正しい位置に配置させる作業には手間がかかります。Repeat Gridを使うことによってサイズに応じて自動でリスト表示が生成されるオブジェクトに変換できます。また、繰り返しアイテム間のマージンも一つの部分を調整すればすべてのマージンが変更することが出来ます。さらに、リストアイテムにあるサムネイル画像は、写真をリストの数だけ選択しアイテムのサムネイル画像にドラッグ&ドロップすることでリストアイテムごとにサムネイル画像を変更することが出来ます。

画面遷移を作りプレビューするPrototypeモード

Prototypeモードに切り替えると、配置したオブジェクトに対して画面遷移のトリガーを設定することが出来ます。画面遷移を行ないたいオブジェクトを選択すると白い矢印が付いた青いタブが表示されます。そのタブを遷移させたい画面まで引っ張るだけで画面遷移の設定が出来ます。また、設定したトリガーをクリックすることで画面遷移の際のエフェクト効果や時間を設定出来ます。

Adobe XD

画面遷移の設定が完成したら、右上の再生ボタンをクリックしてプレビューします。別ウインドウでプレビューを表示されますので実際に操作して確認します。プレビューで確認するだけでなく録画機能で画面遷移の様子を録画することも可能です。さらにシェア機能も搭載されており、シェア用のリンクを作成してそのリンクを知らせることでデザインした画面遷移を手軽にブラウザ上で確認することが可能です。

現在は、Mac OS Xの英語版のみですが、日本語版、Windows版は年内の提供予定ですのでこれからのAdobe XDの動向に期待したいと思います。