xd_preview1

連載  /  

アドビの新しいUXデザインツール、Adobe XD (Preview 1) 登場!使い方をクイックに解説

BY 公開

みなさんお待ちかねの”Project Comet”改め、Adobe Experience Design(以下、Adobe XD)が、本日3/14にPublic Preview 1(Mac OS Xのみ)として公開されました。Adobe IDがあればどなたでも無償ですぐにお試しいただけますので、まずはクイックに使い方を解説したいと思います。

Adobe XD (Preview)の2つのモードを使い分けよう

Adobe XDには、スマホやタブレット、PC向けのWebサイトやアプリのUIを制作するDesignモードと、そのUI操作による画面遷移や画面遷移エフェクトなどを設定し、プレビューができるPrototypeモードがあります。この2つのモードを使い分けましょう。

まずはこちらの動画をご覧ください。

いかがでしょうか?これまでのアドビのツールでは見たことがない動きが出てきたかと思います。それでは順番に解説していきます。

Adobe XDのスタート画面

Adobe XDを起動すると、どの画面サイズからデザインを開始するかテンプレートを選択できます。仮に「iPhone 6」を選択したとしても、後から自由に他の画面サイズを追加することができます。
サンプルファイルを選択すると、簡単なステップに従ってAdobe XDでできることを体験できます。

xd_quick_start

その他、UI KITSにはApple iOS、Google Materialデザイン、Microsoft Windowsの典型的なUIパーツ群が含まれており、これらを使ってデザイン制作のスピードアップをはかれます。

xd_quick_start_02

UIデザインを行うDesignモード

自由度の高いアートボード

起動画面でiPhone 6を選択すると、iPhone 6の画面サイズのアートボードが開きます。

xd_quick_design_01

アートボードはツールバーの「Artboard」ツールを選択することで追加できます。画面サイズはマウス操作で自由に設定できる他、プリセットの画面サイズから選択して追加することもできます。
Adobe XDはゼロから開発したツールで非常にパフォーマンスがよいため、大量にアートボードを配置してもあまり動きが鈍くなることはありません。

xd_quick_design_02

進化したデザインツール

ツールバーのRectangle(矩形)ツール、Ellipse(円形)ツール、Lineツール、Penツールを活用することでUIに必要なオブジェクトを作ることができます。RectangleツールはIllustratorの矩形ツールのような角丸指定ができ、複数のオブジェクトを選択することで、Illustratorのパスファインダーのようなオブジェクトの結合などができます。特にAdobe XDのパス操作は非常に直感的であり、オブジェクトをダブルクリックするだけでパス編集モードに変更でき、簡単にパスの追加(パス上をクリック)したり、削除(Deleteキー)することができます。
combineobjects

自動でマスク処理される画像の配置

デスクトップなどから画像ファイルを直接ドラッグ&ドロップすることで、どこにでも画像を配置することができます。また、矩形や円形のオブジェクトを用意しておけば、そこにドラッグ&ドロップすることでそのオブジェクトの形状で自動マスクされます。

xd_quick_design_04

繰り返しアイテムを簡単デザインできるRepeat Grid

検索結果のリスト表示などをデザインする場合は、繰り返し表示させるリストアイテムをすべて選択して「Repeat Grid」を選択することで、サイズに応じて自動でリスト表示が生成されるオブジェクトに変換できます。

xd_quick_design_05

オブジェクトの選択領域が青から緑に変わり、ハンドルが表示されます。ハンドルを下に引き下げれば繰り返しアイテムが自動生成されます。繰り返しアイテム間のギャップ(隙間)も一箇所調整すれば、すべて一括で変更されます。

xd_quick_design_06

Repeat Gridではオブジェクトのサイズや位置、カラーなどのプロパティは共通の値を設定できます。したがって、繰り返しアイテム内のフォントカラーを変えたり、位置を修正するとすべてのアイテムに変更が反映されます。

一方で、文字や画像などのコンテンツ部分には、各繰り返しアイテム内で固有の値を設定できます。特に、繰り返しアイテムへの画像の配置は複数の画像ファイルを一括でDrag&Dropすることで、一気に個別の画像配置が完了することに注目です。

xd_quick_design_07複数の画像ファイルを一括して配置

xd_quick_design_08
一気に個別の画像配置が完了!

ユーザーが体験する画面遷移をデザインするPrototypeモード

直感的な画面遷移設定

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

xd_quick_proto_01

録画もできるプレビュー機能

Adobe XDは画面遷移のプレビューを手軽にできます。専用ビューワーで確認するだけでなく、録画機能で画面遷移の様子を録画することもできます。

xd_quick_proto_02

手軽なシェア機能

制作したデザインは画面遷移を含めた状態で他の人へシェアすることができます。シェア用のリンクを作成して、クライアントやチームに知らせることで、ブラウザ上で手軽に確認することができます。試しに、この解説で使っているプロジェクトをシェアしてみました。ブラウザ上で画面遷移を試すことをご確認ください。

xd_quick_proto_03

まずはお試しください

まだAdobe XDは英語版のみのPublic Preview 1の段階であり機能も多くはありません。初めての製品なので難しく感じるかもしれませんが、一度使ってみると非常に簡単に使えることが分かると思います。ぜひ、この機会にお試しいただき、みなさまのフィードバックをお寄せください。日本語版、Windows版は年内の提供予定です。

なお、3/17(金)夜8時のライブストリーミング放送、Creative Cloud道場でもAdobe XDを解説しますのでお見逃しなく!

今後のロードマップ

現在はMac OS X版のみですが、Windows 10版および、iOSとAndroid向けの専用アプリもリリース予定です。また、PhotoshopやIllustratorだけでなく、Comp CCやCCライブラリ、Adobe Stockなどとの連携も順次進めていく予定です。詳しくはAdobe XDに今後追加される機能をご覧ください。

AdobeXDの参考情報(英語)

チュートリアル:https://helpx.adobe.com/content/help/en/experience-design/tutorials.html
カスタマービデオ:http://bit.ly/1RbIHJO
FAQ:https://helpx.adobe.com/content/help/en/experience-design/help/faq.html
フォーラム:https://forums.adobe.com/community/experiencedesign

  AUTHOR

Keisuke Todoroki

アドビ システムズ 株式会社 / デベロッパーマーケティングスペシャリスト。 1999年、早稲田大学理工学部を卒業後、大手印刷会社に勤務。主にEC分野で J2EE開発に携わるが、Flexとの衝撃的な出会いを機にRIAの世界へ。 2008年4月、アドビシステムズ入社。 アドビのWebツール全般のマーケティングを担当。