画期的UXデザインツール「Adobe XD」、プレビュー版が無償公開に

米Adobe Systemsは14日、UI・Webデザインプロトタイピングツール「Adobe Experience Design（以下、Adobe XD）」のパブリックプレビュー版第1弾を公開した。Mac OS Xのみの対応となるが、Adobe IDを保有するユーザーであれば、誰でも無料で試すことができる。

「Adobe XD」は、Webサイトやスマートフォン向け、タブレット端末向けアプリのUIおよびUXをインターフェイスデザインからプロトタイピングまでワンストップで提供する便利ツール。「Project Comet」として案内されていたものの製品版となる。

ツールは、UIを制作するDesignモードと、UI操作による画面遷移や画面遷移エフェクトなどの設定を行い、プレビューチェックが行えるPrototypeモードの2モードからなる。ユーザーはこの2モードを使い分け、制作を進めていく。

まず「Adobe XD」を起動すると、どの画面サイズでデザインを始めるか、テンプレート選択の画面が表示される。ここで例えば「iPhone 6」を選択したとしても、後からiPadやWebなど他の画面サイズを加えることが可能だ。下部にある「サンプルファイル」を選択すると、簡単なステップに従い、この「Adobe XD」ツールでできる操作を実際に体験することができる。

基本的なApple iOS、Google Materialデザイン、Microsoft WindowsのUIパーツ群は、「UI KITS」に収められており、これらをベースに制作を行えば、デザイン工程を大幅にスピードアップさせることも可能だ。

起動画面でデザイン画面サイズを選択すると、そのサイズのアートボードが開く。ツールバーの「Artboard」を選ぶと、さらに新しいアートボードを追加でき、画面サイズはマウス操作で自由に調整できるほか、プリセットサイズから選択し追加することもできる。

UIに用いるオブジェクトは、ツールバーの「Rectangle」「Ellipse」「Line」「Pen」ツールを用いて作っていく。「Rectangle」では、「Illustrator」の矩形ツールのような角丸指定が可能で、パスファインダーのようなオブジェクト結合も可能だ。対象オブジェクトをダブルクリックするだけでパス編集モードに変更できるなど、素早く快適に思い通りの操作が行える。

なおこのように「Adobe XD」上で作成するほか、「Photoshop」や「Illustrator」で作成した素材を取り込むこともできる。デスクトップに画像ファイルを用意しておけば、そこから直接ドラッグ＆ドロップで配置することも可能で、矩形・円形のオブジェクトを作成しておくと、そこに画像を配置することで、オブジェクトの形状で自動マスク処理をさせられる。

検索結果のリスト表示などをデザインするときには、繰り返し表示させたいオブジェクトを全て選択し、「Repeat Grid」をクリックすると、サイズに応じて自動でリスト表示生成を行うオブジェクトに変換できる。コピーしたアイテムは「プロパティ」と「コンテンツ」に属性が別れており、1つのアイテムで間隔の調整やアイコン位置調整を行うと、コピーした全アイテムに設定を反映・一括変更させることが可能だ。一方、文字や画像などのコンテンツは、コピーも含め個々に独立しているため、固有の値を設定・編集できる。

「Prototype」モードに切り替えると、配置オブジェクトの全てで画面遷移トリガーの設定が行える。検索入力フォームを選択すると、白矢印が付いた青いタブが表示され、これを遷移させたい特定の画面まで引っ張っていけば、画面遷移設定は完了だ。遷移時の画面スライドやイージング効果なども設定できる。

設定した画面遷移をチェックする際は、専用ビューワーでプレビューするほか、録画機能でその様子を録り、詳細まで確認することもできる。

完成したUI・UXデザインは、画面遷移設定を含めた全体として、手軽に他の人と共有することができる。シェア用のリンクを作成し、これをチーム内メンバーなどに知らせれば、ブラウザ上で手軽に確認可能となる。

「Adobe XD」は、現状英語版のみ、Mac OSのみの提供となっているが、年内には日本語版、Windows版も公開となるそうだ。iOS、Android向けの専用アプリ提供、Comp CCやCCライブラリ、Adobe Stockなどとの連携対応も予定されている。まずは試しにその操作感を体験してみては。

（画像はいずれも公式ブログ発表記事より）




Adobe Systems　公式ブログ　該当発表記事
https://blogs.adobe.com/creativestation

「Adobe Experience Design（Preview）」
http://www.adobe.com/products/experience-design