米ロサンゼルスで開催中のAdobe MAX 2018で、Adobe XDの大型アップデート（バージョン13）が、発表されました。音声コントロールやアニメーション機能など、面白い機能がたくさん搭載されています。本記事では、ユーザー目線で新機能を紹介します。
音声操作用のUIデザインに！ 音声コントロール機能が搭載
AlexaやGoogle Homeなど、音声ユーザーインターフェース（VUI）の需要は高まっています。Adobe XDの最新版では、音声コントロールとスピーチ機能が搭載されました。次のようなことができます。
- 音声入力を促すスピーチを再生
- 音声入力を認識し、画面遷移
Adobe XDを使って、「tonkotsuboy」と呼びかけると画面遷移するサンプルを作成しました。音声付きで紹介していますので、音量をONにしてご覧ください。
公式のサンプルでは、Alexaのコントロールを想定した使い方が紹介されています。
マイクロインタラクションの実装に！ 自動アニメーション機能が搭載
XDの最新版では、マイクロインタラクションに役立つ自動アニメーション機能が搭載されました。画面遷移時にサイズや位置などの異なった部分が、自動的にアニメーションされます。
この機能を使ってサンプルを作りました。画面をドラッグすると猫の写真がアニメーションしながら切り替わるシンプルなサンプルです。ドラッグも今回の新機能の1つで、フリック操作のプロトタイピングに役立つでしょう。
XDで作成したアニメーションはAfter Effectsへの書き出しが可能とのこと。動き確認のためのプロトタイプで使うもよし、After Effectsで作り込んでUIアニメーションにするもよし。XDの使い方が大きく広がるアップデートと言えるでしょう。公式サンプルもあわせてご覧ください。
拡張機能でXDをより便利に！ プラグイン機能の公開
XDでサードパーティー製の拡張機能が使えるようになりました。基調講演では、多言語のアートボードを自動的に作成する拡張機能などが紹介されていました。
拡張機能の公式サイトでは、すでに多くのプラグインが公開されています。レイヤー名を一括置換できる拡張機能「Rename It」を手元のXDで試してみました。
また、XDのプラグインはHTML・JavaScriptといったウェブの技術で開発できます。詳しくはAdobe Creative Stationの記事「はじめてのAdobe XDプラグイン開発！定番のHello Worldを表示させてみよう」にて解説されています。
なお、ICSでは近日中にAdobe XDの拡張機能を公開する予定です。さっそく拡張機能の開発に着手したら、思った以上のスピードで仕上がってきたのです。開発しやすいのは、ウェブの技術で開発できるからですね。公開をお楽しみください。
XDの新たな可能性を感じたアップデート
今回のアップデートは自動アニメーション・音声コントロールなど、従来では想像できなかったようなXDの新機能が盛りだくさんでした。
Adobe XDの動作の軽さ、リピートグリッドの便利さが魅力だと言う国内のユーザーが増えています。デザインツール・プロトタイピングツールとしてAdobe XDの需要はますます高まっていくでしょう。
たとえば、ツイッターで実施されたアンケートでXDがPhotoshopやIllustratorについで人気を得ている結果となっています。別々の人がアンケートしているのに、似たような結果になっているのは面白いですね。
まだ触ったことがない方は、是非一度Adobe XDでのデザインを体験してみてください。
