米ロサンゼルスで開催中の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でのデザインを体験してみてください。