Adobe XDの2020年3月リリース！音声付きプロトタイプ、アンカーリンクなど #AdobeXD
Adobe XD アップデート
強力なプロトタイピングツールであるAdobe XDを使えば、実際の最終製品と同様の見た目と操作感を備えた、没入感のあるUXを作成できます。XDのプロトタイプモードを使用して、デザインにモーションとアニメーションを追加し、インタラクティブでクリックできるプロトタイプを作成。デスクトップ、モバイル、さらにAmazon Alexa対応デバイス（英語）でそのプロトタイプをプレビューできます。
Adobe XDの今月のリリースでは、自動アニメーションや音声プロトタイピングといったXDの既存機能を発展させた、新しいプロトタイピング機能を導入しています。また、その数200を超えてなお拡大を続けるプラグインのエコシステムから、私たちお気に入りのXDプラグイン「zeroheight（英語）」をご紹介します。
XDの最新バージョンをダウンロードするか、Creative Cloudデスクトップアプリを使ってXDをアップデートすることにより、新機能にアクセスできます。これまでと同様、みなさんの要望をUserVoice（英語）にお寄せいただき、Twitter（英語）、Facebook、あるいはコミュニティフォーラム上（英語）で展開されているXDの将来についての対話にぜひご参加ください。
3月アップデートに含まれる新機能をご紹介します。
オーディオ再生でプロトタイプにオーディオを追加します
オーディオは人間のエクスペリエンスにとって重要な要素です。ユーザーがメッセージを送信するときに再生される「シュッ」という効果音、フォームが正常に送信されたときに鳴るチャイム、あるいはブランドサウンド（Netflixロゴのアニメーションに付属するもののような）など、私たちにとってオーディオは、体験をよりよく理解する助けとなり、絶えず状況を知らせてくれるものです。オーディオは、エクスペリエンス内を行き来する際のガイドであり、ブランドとのより深いつながりを醸成するものでもあります。
XDに新しく追加された「オーディオ再生」機能により、Adobe XDのプロトタイプにオーディオを追加し、デザインプロセスにオーディオを組み込めるようになりました。オーディオ再生により、サウンドエフェクトまたは「イヤーコン（耳で聞くアイコンとしてのサウンドクリップ）」を使ってユーザーを誘導したり、イベントの状態を伝えたり、成功かエラーかを示すだけでなく、デザインにブランドサウンドを追加して新しいやり方でユーザーにブランドを訴求することができるようになります。Audio UXとVeritronicの報告（英語）によると、ブランド化されたオーディオデザインは、ユーザーエンゲージメントと好感度に有意な影響を与える可能性があるとされています。
使い方は、プロトタイプモードでアクションとしてオーディオ再生を選択するだけです。たとえば、ユーザーがボタンをタップしたときに音声を再生する場合は、カンバス上のボタンコンポーネントを選択、トリガーとして「タップ」をクリックし、アクションとして「オーディオ再生」を選択します。ドロップダウンが表示されるので、コンピューターからオーディオファイルをアップロードするか、アップロード済みのファイルを選択します。インタラクションを作成したら、XD画面の右上隅にある再生ボタンのクリックにより、プロトタイプをプレビューできます。ユーザーがボタンをタップすると、オーディオファイルが再生されます。
「タップ」トリガーへの応答には、「トランジション」や「オーディオ再生」など複数のアクションを追加することもできます。これにより、オーディオ再生だけでなく別のアートボードまたはステートへのトランジションもすべて1か所で設定することができます。また、「タップ」トリガーは、画面の変化を伴うアクション（トランジション、オーバーレイ、自動アニメーションなど）とそうでないもの（オーディオ再生と音声再生）の両方をサポートするようになりました。
この新しいオーディオ再生機能をすぐに体験いただけるように、アドビのエクスペリエンスデザイナーであるサム アンダーソン（Sam Anderson）がサウンドのライブラリを作成しました。ライブラリはBehanceからダウンロードできます。
プロトタイプにアンカーリンクを追加して、すばやくナビゲーションする
アンカーリンクは、同じWebページ上の特定のポイントにユーザーを導くリンクの一種です。縦に長いWebサイトやテキスト記事がある場合は、アンカーリンクを使用してナビゲーションを高速化し、使いやすさを向上できます。使用例として、ナビゲーションメニュー、索引、目次などがあげられます。
今回のアップデートでは、このアンカーリンクをAdobe XDにも導入しました。ユーザーがボタンまたはリンクをクリックしたときに、同じアートボード上の特定のポイントに自動スクロールするUXのプロトタイプが作成可能になります。アンカーリンクは、プロトタイプ上にページ内ナビゲーション、目次、および「トップに戻る」ボタンなどを追加する際に役立ちます。
アンカーリンクの作成は簡単です。プロトタイプモードで、カンバス上のオブジェクト（ボタンまたはナビゲーションメニューリンクなど）を選択し、リンクしたいポイントまでプロトタイプワイヤーをドラッグします。その際、ワイヤーは自動的にオブジェクトに接続します。プロパティインスペクター上ではデフォルトでトリガーが「タップ」に、アクションが「スクロール先」に設定されます。つまり、オブジェクトをタップすると目的地までスクロールします。また、プロパティインスペクターまたはカンバス上で「Yオフセット」を指定することもできます。これは、「スクロール先」アクションの到達点を目的とするポイントのどれだけ上（または下）にするかの距離を設定するもので、固定ナビゲーションバーなどの要素の実装に役立ちます。
UserVoiceに最も多く寄せられたご要望の1つだったAdobe XDのアンカーリンク対応が実現したことを嬉しく思います。アンカーリンクは、コンポーネントステート、スクロール位置の保持、コンテンツに応じたレイアウト、レスポンシブサイズ変更などの他の機能と組み合わせてWebサイトのデザインに活用できる機能です。
Adobe XDのアンカーリンクとオーディオ再生を利用するには、XDの最新バージョンをダウンロードするか、Creative Cloudデスクトップアプリを使用してXDをアップデートします。
zeroheight for Adobe XDを使ったデザインシステムのドキュメント化
Adobe XDを使ってデザインシステムを作成すれば、アセットとコンポーネントをチームで共有することができます。これらのアセットを各自のデザインで利用する際、元のドキュメントにリンクバックしておけば、デザインシステムを使用するすべてのユーザーが、元のドキュメント側の変更を即座に利用できるようになります。Adobe XDを使ったデザインシステム作成の詳細については、こちら（英語）をご覧ください。
デザインシステムの作成自体はほんの始まりに過ぎません。そのシステムを、どのようにプロダクト開発プロセス全体を横断して実装し、誰もが正しい情報にアクセスできるようにするかが本題なのです。そこで登場するのがzeroheight for Adobe XDプラグインです。
zeroheight for Adobe XDプラグインを使えば、XDで作成したデザインシステムからzeroheight（英語）にアセットとコンポーネントをアップロードし、それを使ってデザインシステムドキュメントのウェブサイトを作成し、共有することができます。これにより、ブランディングに則った、美しく、常に最新版として参照できるデザインシステムが短時間で作成可能です。これをチームや関係者で共有すれば、誰もが即座に使えるようになり、デザインシステムの遵守の促進にもつながります。zeroheightは、デザインとクリエイティビティの未来をかたちづくる人々ならびに企業に助成金と投資を提供するAdobe Fund for Design（英語）によってサポートされています。
お使いいただくには、無償のzeroheight試用版にサインアップ（英語）し、zeroheight for Adobe XDプラグインをダウンロードします。zeroheightの詳細については、パートナースポットライト記事（英語）をご覧ください。
この記事は2020/3/11にポストされたMarch 2020 Release of Adobe XD: Prototype with Audio, Anchor Links, and Moreを抄訳したものです。