プロトタイプモードに切り替えます。
- Adobe XD ユーザーガイド
- はじめに
- デザイン
- アートボード、ガイド、レイヤー
- シェイプ、オブジェクト、パス
- テキストとフォント
- コンポーネントとステート
- マスキングと効果
- レイアウト
- ビデオと Lottie アニメーション
- プロトタイプ
- 共有、書き出し、およびレビュー
- デザインシステム
- クラウドドキュメント
- 統合とプラグイン
- XD iOS 版および Android 版
- トラブルシューティング
- 既知の問題と修正された問題
- インストールと更新
- 起動時のクラッシュ
- クラウドドキュメントおよび Creative Cloud ライブラリ
- プロトタイプ作成、公開、レビュー
- 読み込み、書き出し、その他のアプリの操作
音声コマンド、音声再生、オーディオ再生を使用してデザインとプロトタイプを作成する方法について説明します。
音声コマンドを使ってアートボードやコンポーネントのステート間のインタラクションをトリガーしたり、音声、オーディオ、ビデオ、Lottie を再生したりすることができます。
「音声」をトリガーに設定し、音声コマンドを入力します。アクションタイプとして、「トランジション」、「自動アニメーション」、「オーバーレイ」、「スクロール先」、「前のアートボード」、「自動再生」、「音声再生」、「ビデオ再生」「Lottie 再生」のいずれかを選択します。例えば、モバイルアプリ内で音声検索を統合する場合は、音声と音声再生を使用してアートボード間を自動的にトランジションすることができます。
プロトタイプに音声コマンドを追加する
-
-
インタラクションを定義するには、ソースオブジェクトの青いコネクタ、コンポーネントのステート、またはアートボードをクリックします。プロパティインスペクターで、次のオプションを設定します。
- トリガー:「音声」に設定します。
- コマンド:音声コマンドをテキストで入力します。
- アクション:「トランジション」に設定します。
- 移動先:移動先のアートボードまたはコンポーネントのステートを設定します。
- アニメーション:用意されているオプションから選択してアニメーションを設定します。
- イージング:用意されているオプションから選択してイージングを設定します。
- デュレーション:トランジションの時間を秒単位で設定します。
A. トリガーを「音声」に設定 B. 音声コマンドをテキストで入力
A. トリガーを「音声」に設定 B. 音声コマンドをテキストで入力 C. コンポーネントのステートに対して移動先を設定
-
行った変更を表示するには、デスクトッププレビューボタン を選択します。
-
次のアートボードまたはコンポーネントのステートへのトランジションをプレビューするには、スペースバーを押しながら音声コマンドを繰り返します。
プロトタイプに再生を追加する
オーディオ再生を追加する
オーディオ再生アクションを使用して、プロトタイプに効果音を追加することができます。例えば、メールが正常に配信されたときに、確認のオーディオを再生できます。オーディオには、MP3 ファイルまたは WAV ファイルを読み込むことができます。
オブジェクトまたはアートボードにオーディオ再生を追加するには、次の手順を実行します。
-
プロトタイプモードで、オブジェクトまたはアートボードを選択します。
-
プロパティインスペクターで、次のオプションを設定します。
- 「+」をクリックしてインタラクションを追加します。
- トリガー:「タップ」に設定します。
- アクション:「オーディオ再生」に設定し、オーディオファイルを参照して追加します。
オーディオの自動再生は、Safari の設定で自動再生を有効にしている場合のみ Safari で機能します。XD プロトタイプリンクの自動再生を有効にする方法については、「Safari でサウンドの自動再生を有効にする」を参照してください。
1 つのトリガーで複数アクションを追加する
1 つのトリガーで「トランジション」や「自動アニメーション」などのメインのトランジションアクションには、「オーディオ再生」などのトランジション以外のアクションを追加できます。例えば、2 つのアートボード間をトランジションするためにクリックすると、マウスのクリック音が鳴るように設定できます。
プロトタイプに複数のアクションを追加するには、次の手順を実行します。
-
プロトタイプモードで、複数のアクションを追加するオブジェクトまたはアートボードを選択します。
-
プロパティインスペクターで、次のオプションを設定します。
- 「+」をクリックしてインタラクションを追加します。
- トリガー:「タップ」に設定します。
- 最初の「アクション」の「+」ボタン(トランジションアクション)を「トランジション」、「自動アニメーション」、「オーバーレイ」、「スクロール先」、または「前のアートボード」のいずれかに設定します。
- 2 番目の「アクション」の「+」ボタン(トランジション以外のアクション)を「オーディオ再生」または「音声再生」に設定します。
プロパティインスペクターにある 2 番目の「アクション」の「+」ボタンは、トリガーを「タップ」に設定した場合のみ有効になります。最初のアクションに、「オーディオ再生」や「音声を再生」など、トランジション以外のアクションを設定した場合、2 番目の「アクション」の「+」ボタンは有効になりません。
音声再生を追加する
オブジェクトまたはアートボードに音声再生を追加するには、次の手順を実行します。
-
ワイヤーをソースアートボードからデスティネーションアートボードにドラッグします。
-
音声再生を追加するには、プロパティインスペクターで、以下のオプションを選択します。
- トリガー:「時間」に設定します。
- ディレイ:音声再生の開始のタイミングとして適用される遅延時間を秒単位で設定します。
- アクション:「音声を再生」に設定します。
- 音声:音声再生用の声を選択します。
- 音声:音声再生用のテキストを入力します。
A. トリガーを「時間」に設定 B. 遅延時間を秒単位で設定 C. アクションを「音声再生」に設定 D. 音声を設定 E. 音声再生するテキストを入力します。
-
変更をプレビューするには、デスクトッププレビューアイコン をクリックします。
-
次のアートボードへの音声再生付きトランジションをプレビューするには、スペースバーを押しながら音声コマンドを繰り返します。
プロトタイプにナレーションを追加する
-
プロトタイプモードで、フローの開始点が設定されるホーム画面を選択し、デスクトッププレビューボタンをクリックします。
-
録音ボタンの横にあるドロップダウン矢印を選択して、「マイクを有効にする」を選択します(macOS)。Windows の場合は、Gamecenter の OS レベルのコントロールでマイクを有効にします。記録時は、インターフェイス上で点滅する赤いアイコンに注意してください。
-
録音した音声を mp4 ファイルとして保存し、関係者と共有したり、ソーシャルメディアに投稿したりすることができます。
これは、XD からのオーディオ出力(音声再生など)を直接キャプチャするものではありません。マイクは、ユーザーの設定に応じて出力を認識するか録音します(システムマイクは、システムスピーカーから音声再生が再生されるのを認識します)。
Web 上でプロトタイプまたはデザインスペックリンクを共有してレビューする
-
デスクトップアプリで、右上の共有アイコンをクリックして、「デザインレビュー」(プロトタイプの場合)または「開発」(デザインスペックの場合)を選択します。
-
プロトタイプをプレビューするとき:
- デスクトップまたはノートパソコン:スペースバーを押し続けます。
- Adobe XD モバイルアプリ(iOS および Android):画面上の任意の場所で長押しのジェスチャーを使用します。画面上に指を置き(動かさずに)、指を戻す前に音声コマンドを使用します。
- スマートフォンのモバイルブラウザー:画面の右下隅にあるマイクアイコンを押し続けます。
-
デザインスペックをプレビューするとき、開発者は音声コマンドと音声再生をテキストとして読み取るか表示することができます。
デザインスペックでは音声インタラクションはサポートされていません。
Safari では、デフォルトでサウンドの自動再生が無効になっています。XD プロトタイプリンクでサウンドの自動再生を有効にするには、以下の手順に従います。
- Safari で XD プロトタイプリンクを開きます。
- macOS のメニューバーで、Safari/環境設定に移動します。
- 「web サイト」タブで、左側のペインにある「自動再生」を選択します。
- 以下の web サイトでのメディアの自動再生を許可ウィンドウで、xd.adobe.com の横の「すべてのメディアを自動再生」を選択します。
この設定により、XD プロトタイプリンクのサウンドが、設定以降、自動的に機能するようになります。
Chrome でプロトタイプを実行しているときに、再生アクションに問題があるというエラーが発生する場合は、Chrome の設定でサウンドを有効にします。
XD プロトタイプリンクでサウンドを有効にするには、Chrome 設定で以下の手順に従います。
- Chrome のアドレスバーに chrome://settings/content/sound と入力し、Enter キーを押します。
- 「動作のカスタマイズ」セクションで、「音声の再生を許可するサイト」の横にある「追加」をクリックし、「https://xd.adobe.com」を追加します。
この設定により、XD プロトタイプリンクのオーディオが、再生されるようになります。
通知を使用して音声インタラクションをトラブルシューティングする
デスクトップまたは web でのプロトタイプのプレビュー中に、音声によって開始される操作をトラブルシューティングできるようになりました。デザインスペックをレビューする関係者もまた、この機能を使用して、Adobe XD でのプロトタイプの操作方法について理解を深めることができます。
プレビュー中にプロトタイプと対話する前に、「通知を表示」メニューオプションがオンであることを確認します。このメニューオプションは Adobe XD の起動時に、デフォルトでオンになっています。
XD に音声入力した各コマンドは、現在のアートボードまたはコンポーネントのステートにあるすべての音声トリガーに対して照合されます。一致する音声トリガーが見つからない場合は、次の通知が届きます。「一致した結果が見つかりませんでした : {音声入力したコマンド}」。XD が認識した内容を目視確認すると、一致した結果が見つからない理由を個々の音声入力について解明できます。
一致した結果が見つからない理由はいくつかあります。入力した音声コマンドが、アートボードまたはコンポーネントのステートのインタラクションで使用されていないことが考えられます。また音声認識サービスが予期しない結果を返している可能性もあります。
例えば、インタラクションに「2 ドル」というフレーズが音声コマンドとして追加されているが、音声入力時に、音声認識サービスが返しているのは「$ 2.00」という結果である場合があります。通知の中で言葉の代わりに数字が使われていることからもわかるように、言葉の代わりに数字を使用するようにインタラクションを変更できます。