【速報】Adobe XDが大型アップデート
自動アニメーションや音声コントロール、
拡張機能が目玉

79
34
20

米ロサンゼルスで開催中のAdobe MAX 2018で、Adobe XDの大型アップデート(バージョン13)が、発表されました。音声コントロールやアニメーション機能など、おもしろい機能がたくさん搭載されています。本記事では、ユーザー目線で新機能を紹介します。

音声操作用のUIデザインに! 音声コントロール機能が搭載

AlexaやGoogle Homeなど、音声ユーザーインターフェイス(VUI)の需要は高まっています。Adobe XDの最新版では、音声コントロールとスピーチ機能が搭載されました。次のようなことができます。

  • 音声入力を促すスピーチを再生
  • 音声入力を認識し、画面遷移

Adobe XDを使って、「tonkotsuboyトンコツボーイ」と呼びかけると画面遷移するサンプルを作成しました。音声付きで紹介していますので、音量をONにしてご覧ください。

公式のサンプルでは、Alexaのコントロールを想定した使い方が紹介されています。

マイクロインタラクションの実装に! 自動アニメーション機能が搭載

XDの最新版では、マイクロインタラクションに役立つ自動アニメーション機能が搭載されました。画面遷移時にサイズや位置などの異なった部分が、自動的にアニメーションされます。

この機能を使ってサンプルを作りました。画面をドラッグすると猫の写真がアニメーションしながら切り替わるシンプルなサンプルです。ドラッグも今回の新機能の1つで、フリック操作のプロトタイピングに役立つでしょう。

公式サンプルもあわせてご覧ください。

拡張機能で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でのデザインを体験してみてください。