先日、ついに「Adobe Experience Design CC (Preview)」（以下、Adobe XD）が公開されました。
以前からAdobe初の”UXデザイン”に特化したアプリケーションとして話題になっていた「Adobe XD」ですが、一体何ができるのでしょうか？ 実際に使ってみながらご紹介します。
デザインとプロトタイピングの行き来ができる
デザインソフト「Sketch」や、プロトタイピングツール「POP」「Prott」など、UXデザインをするためのツールはたくさんあります。「Adobe XD」の一番の特徴は、「Sketch」などが行っていた”デザイン”のプロセスと、それに遷移をつけて動くモックアップにする”プロトタイピング”のプロセスを、１つのアプリケーションだけで可能にした所でしょう。
XDファイルを開くと、アートボード（画面）の一覧が表示されます。この画面は「デザインモード」です。やや簡素な印象ですが、レイアウトの制作や画像やテキストの挿入を行うことができます。
一通りデザインが完成したら、画面左上のタブを「Prototype」に切り替え、そのままプロトタイピングに移ることができます。Adobe XDは先ほどの「デザインモード」と、この「プロトタイピングモード」の二つのモードに分かれており、この二つを行き来しながら作業することになります。
デザインとプロトタイピングで別々のツールを使用している場合、デザインを少しでも修正したら画面を再度書き出し、それをもう一度プロトタイピングツールに読み込んで画像を差し替える…といった面倒な手順が必要ですが、「Adobe XD」の場合は変更も即反映してくれるため、スムーズな制作が可能です。個人的には、このデザインとプロトタイピングを行き来しながら制作できるところが「Adobe XD」を使う一番のメリットであるように感じました。
デザインモードで使用できるツールがまだ少ないので（グラデーションがかけられない、複雑な形状の図形は作れない、PsファイルやAiファイルとの互換性に課題が残るなど）ここが充実すれば、かなり快適な体験ができる予感がします。
「Repeat Grid」が使える
デザインモードで使用できるツールが少ないと書いてしまいましたが、「Adobe XD」独自の機能もあります。それが「Repeat Grid」。リスト表示など同一のオブジェクトを使う機会が多いUXデザインに特化した機能です。
「Repeat Grid」を適応させたいオブジェクトを選択し、画面右上の「Repeat Grid」を押すと、オブジェクトの枠線が緑色に変わります。これを下にグッと引っ張ると…
ニュル～ッと下に同じオブジェクトがどんどん生成されていきます。初めて見た時は「おおっ」となりました。
オブジェクト間のマージンも、１つを変更すれば一気に変わってくれます。
共有に強い
ここまで作業してきたファイルですが、画面デザイン+遷移のデータが１つになっているため、当然ながらデータの共有もスムーズです。XDファイルを１つ送るだけで今の進捗を全て伝えられる上、そこに修正を加えていくことも可能なので便利ですね。
また、これも独自の機能として、遷移を実際に動かしている様子を録画することができます。あたかも本当にアプリが動いているかのような動画をワンタッチで作成でき、プレゼンの際に使用すると良さそうです。
画面上部の「Play」らしきボタンを押し、録画を開始すると、
こんな動画を作ることもできます。
まとめ
まだ機能も少なく、すぐにこれだけでデザインを作るのは難しいものの、デザインを作るのはこのソフト、プロトタイピングをするのはこのツール、アプリ使用中のイメージを録画するのは別のアプリ…など、バラバラだった行程を一つにまとめようとしている所にとても可能性を感じた「Adobe XD」。
今回はPreview版とのことで、今後アップデートは順次行われ、Windows版やiOS・Android向けのアプリケーションの提供のほか、Adobe CCとの連携も強化されていくとのことなので、これからの進化をワクワクしながら見ていきたいと思いました！
