Adobe XD 10月アップデートリリース！ 音声プロトタイプ、プラグイン対応などをAdobe MAXで発表 #AdobeMAX #AdobeXD
Adobe XD アップデート
Adobe MAXの開催にあわせた今月のAdobe XDアップデートには、音声プロトタイピング、新しいアニメーションのサポート、サードパーティ製プラグインといった重要な新機能が含まれています。
プロトタイピングはXDの中核機能ですが、音声トリガーとスピーチ再生がそこに加わることで、XDはスクリーン向けと音声デバイス向けの両方のプロトタイピングを1つのアプリ内でシームレスに連携できる、史上初にして唯一のUI/UXプラットフォームとなりました。アートボード間の遷移をシンプルに作成できるアニメーションの自動化機能を併用すれば、Webとモバイルだけでなく、Amazon AlexaやGoogle Assistantのような音声デバイスに向けても忠実度の高いプロトタイプを作成できます。
今月のアップデートにはXDへのサードパーティ製プラグイン対応も含まれます。これは、XDを開発者が新しくエキサイティングな連携機能や拡張機能を追加できるオープンプラットフォームとして発展させていくという私たちのコミットメントを示すものです。XDプラグインはXD上からリスト表示でき、その種類は今後も拡大する予定です。UIキットや他のアプリとの連携機能と同様に、すべてがXD上から直接アクセスでき、XDのカスタマイズや機能の拡張にご活用いただけます。
2018年10月XDアップデートの新機能
音声トリガーとスピーチ再生
スマートフォンから自動車や情報キオスクまで、音声エクスペリエンスは世界的に一般化しており、需要は増大しています。そのため、私たちは音声プロトタイピング能力をすべてのデザイナーに、音声プラットフォームそれぞれの複雑な仕組みを理解しなくとも使えるかたちで提供したいと考えました。Adobe XDは、音声トリガーとスピーチ再生の導入により、画面と音声のプロトタイピングを1つのアプリケーションで実現しました。その様子は以下のビデオでご覧ください。
音声トリガーは、プロトタイプモードでクリックやタップをトリガーとして定義するのと同じ方法で設定でき、ユーザーが特定の単語やフレーズを音声入力したことを条件にインタラクションを開始します。スピーチ再生は、デザイナーがパワフルな音声合成エンジンを操作できるようにし、音声アシスタントやスマートスピーカーのような新しいプラットフォームのためのデザインを可能にします。私たちは、XDに新たに加わった音声機能を継続的に強化していく予定です。ぜひフィードバックをUserVoiceにお寄せください。
プラグイン、UIキット、アプリ連携
私たちはXDに新たな機能を付加し、サードパーティ製アプリやサービスをXDと連携させることを目的に、コミュニティメンバーの開発者の方々と協力してきました。その結果生まれた第一弾のプラグインを公表できることを嬉しく思います。これらのプラグインはタスクの自動化、他のツールとの連携、デザイン内でのデータの活用など数多くの機能を実現します。また、Slack、JIRA、Microsoft Teamsといった市場で最も優れたコラボレーションおよび生産性向上アプリとの連携も実現しました。
https://blog.adobe.com/media_5d1e78a08def3b837503b85058812ebbb91c1349.gif
プラットフォームが開発者に開かれることにより、プラグインや機能連携のライブラリがますます充実していくことこそが、私たちがこの拡張機能という方針を採用した目的のひとつです。Adobe XDのためのプラグイン開発にご興味のある方は、Hello Worldを表示するプラグイン開発概要の解説記事やAPIのリスト（英語）をご確認ください。また、Adobe Fund for Design（英語）というデザイン基金へのお申込みもご検討ください。
自動アニメーション
XDで作成するプロトタイプの忠実度をより高めるための取り組みの一環として、私たちはこれまでオーバーレイ、固定エレメント、時間によるトランジションを追加してきました。今回はXDの最初のリリース以来最も大きなプロトタイピングに関する新機能となる「自動アニメーション」を追加しました。
自動アニメーションにより、プロトタイプにイマーシブな遷移アニメーションを簡単に追加できます。アートボードを複製し、サイズ、位置、回転角などオブジェクトのプロパティを調整し、自動アニメーションアクションを適用するだけで、アートボード間の遷移をアニメーション化できます。その動作を次のビデオでご確認ください。
自動アニメーションは想像以上に簡単に使える機能であるにもかかわらず、驚くほどインパクトのあるエフェクトとトランジションを生成できるため、エンドユーザーが使った際の感覚を、時間をかけずにチーム内に伝達することができます。アニメーションの再生はプレビューウィンドウとモバイルアプリのみの対応で、ブラウザ上でのプロトタイプ表示に対応していませんが、まもなくサポートする予定です。
ドラッグジェスチャー
XDのドラッグジェスチャーはアニメーションの自動化機能を一歩進めたもので、タッチ対応デバイスにおけるドラッグ操作エクスペリエンスを再現するものです。次のビデオでご確認いただけるように、異なるアートボード間をドラッグ操作でスムーズに移動する、画像カルーセルのようなエクスペリエンスの再現が可能です。
ドラッグジェスチャーは左右方向と上下方向の両方をサポートし、トラックパッド上ではクリックしてから左右または上下にドラッグすることでアニメーションが動きます。
リンクされたシンボル
頻繁に使うシンボルや複数ドキュメントに分散配置されたシンボルに加えられた変更すべてを簡単に把握できるようになりました。シンボルのリンクを保持できるようになりました。ソースドキュメントに変更を加えた際に、他のドキュメントに配置された、リンクされたシンボルすべてにその変更を反映するかどうかを決定できます。次のビデオで、シンボルを多用するデザインシステムのメンテナンスにおいてこの新機能がどれほど便利なのかを実感いただけるでしょう。デザイン対象のスクリーンの種類が増加の一途をたどる中、ひとつのソースドキュメントの編集を行うだけで、すべての対象ドキュメントに反映できるようになります。
リンクされたシンボル機能では、共有済みシンボルに編集が加えられるたびに通知が送られます。これは、リンク元のステッカーシートやスタイルガイドが常に更新されることを意味し、チームメンバーにとっても、ドキュメントが常に最新に保たれていることを簡単に確かめることができます。
Adobe Illustratorとの連携
本年初頭にPhotoshopのネイティブドキュメントをXDで開く機能を導入しましたが、私たちのチームは今回Illustratorのサポートに取り組みました。今月のリリースでは、.aiファイルを、すべてのレイヤー、アートボード、シンボルを保ったままXD上で開き、Illustratorアートワークの編集が行えるようになりました。
Illustratorで作成した緻密なベクターアートワークを高い忠実度をもってXDデザインに組み込んだり、Illustratorで作成したデザインをそのままXDに持ち込み、共有可能なインタラクティブプロトタイプに仕上げることも可能です。IllustratorとXDの連携については次のビデオでご確認ください。
この連携についてはUserVoice上で数多くのリクエストをいただきました。デザイナーの多くが、Illustrator上で作成したアートワークをXDの機能を活かしながら活用するソリューションを求めていました。これまでは、IllustratorデザインをXDにコピー＆ペーストしていたため編集ができませんでしたが、この2つのプログラムは今、シームレスに連携できるようになりました。
Adobe After Effectsへの書き出し
複雑なUIアニメーション、モーションスタディ、プレゼンテーション、モーション再生を伴うデジタルマーケティングコンテンツの制作が必要なとき、XDデザインを、業界をリードするアニメーションツールAfter Effectsに書き出せるようになりました。
XDのレイヤー、ベクター、アートワークは、迅速でシンプルな手順ですべて1対1の視覚的忠実度を伴ってAfter Effectsに書き出せます。XDデザイナーはAfter Effectsのパワフルなプラグインを使い、モーションをコードと仕様として書き出せます。より高度なアニメーションが必要な方々に大きな朗報です。
Perficient Digitalでアソシエートクリエイティブディレクターを務めるマックス モーガン（Maxx Morgan）氏はこう述べています。「当社クライアントのブランド表現としてマイクロインタラクションを使う機会が増えています。イメージをアニメーションにするには、After Effectsの詳細な設定機能が必要で、XDで作成したデザインが簡単にAfter Effectsに送ることができるため、アニメーション作成にロスタイムなしで取り掛かれるようになりました。」
https://blog.adobe.com/media_36ea107eceb8bb8cbd9d1d6cbfd3f634c3be18a0.gif
ソーシャルメディア
日本語でのアップデート情報やUI/UXデザインの情報は、本ブログ以外にもFacebookページ「Adobe XD Japan」で配信しています。ページを「いいね！」しておけば、自分のタイムラインに情報が流れてきますのでぜひご活用ください。また、Twitterでの配信は@AdobeXD（英語）が積極的に行っており、ハッシュタグ #AdobeXD を付けて投稿すればXDチームにも届きます。
日本のユーザーコミュニティ
日本のユーザーコミュニティが各地で立ち上がり、ほぼ毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。
東京 Adobe XD Meeting
福岡 Adobe XD Meeting
大阪 Adobe XD Meeting
仙台 Adobe XD Meeting
ご興味のある方はぜひご覧ください。
#MadeWithAdobeXD
Behanceでプロトタイプをシェアする際は、タグに#MadeWithAdobeXDを付け、使用ツールにAdobe XDを設定してください。AdobeXD ニュースレターで紹介させていただく場合があります。
この記事は、2018/10/15（米国時間）にポストされたOctober 2018 Release of Adobe XD: Voice-Based Prototypes and More Unveiled at Adobe MAXを抄訳したものです。