マニュアル キャンセル

音声コマンドや音声再生を使用したプロトタイプの作成

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. カラーマネジメント
    5. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    6. ワークスペースの基本
    7. Adobe XD でのアプリ言語の変更
    8. UI デザインキットへのアクセス
    9. Adobe XD のアクセシビリティ
    10. ショートカットキー
    11. ヒントとテクニック
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトのストローク、塗り、ドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
    14. XD アセットのバックアップまたは移行
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー&ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード:191
      3. エラーコード:183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

音声コマンド、音声再生、オーディオ再生を使用してデザインとプロトタイプを作成する方法について説明します。

音声コマンドを使ってアートボードやコンポーネントのステート間のインタラクションをトリガーしたり、音声、オーディオ、ビデオ、Lottie を再生したりすることができます。

音声」をトリガーに設定し、音声コマンドを入力します。アクションタイプとして、「トランジション」、「自動アニメーション」、「オーバーレイ」、「スクロール先」、「前のアートボード」、「自動再生」、「音声再生」、「ビデオ再生Lottie 再生」のいずれかを選択します。例えば、モバイルアプリ内で音声検索を統合する場合は、音声音声再生を使用してアートボード間を自動的にトランジションすることができます。

プロトタイプに音声コマンドを追加する

  1. プロトタイプモードに切り替えます。

  2. インタラクションを定義するには、ソースオブジェクトの青いコネクタ、コンポーネントのステート、またはアートボードをクリックします。プロパティインスペクターで、次のオプションを設定します。

    • トリガー:「音声」に設定します。
    • コマンド:音声コマンドをテキストで入力します。
    • アクション:「トランジション」に設定します。
    • 移動先:移動先のアートボードまたはコンポーネントのステートを設定します。
    • アニメーション:用意されているオプションから選択してアニメーションを設定します。
    • イージング:用意されているオプションから選択してイージングを設定します。
    • デュレーション:トランジションの時間を秒単位で設定します。
    音声トリガーを設定する
    アートボードに音声トリガーを設定

    A. トリガーを「音声」に設定 B. 音声コマンドをテキストで入力 

    コンポーネントのステートに対して「音声」トリガーを設定
    コンポーネントのステートに対して「音声」トリガーを設定

    A. トリガーを「音声」に設定 B. 音声コマンドをテキストで入力 C. コンポーネントのステートに対して移動先を設定 

  3. 1 つのオブジェクト、コンポーネントのステート、またはアートボードに対して、複数のインタラクションを定義するには、次の手順を実行します。

    1. 選択して、その上で「+」をクリックします。またはプロパティインスペクターで「+」をクリックします
    2. プロパティインスペクターでプロパティを設定します。

    トリガーのうち、タップ、ドラッグ、ホバー、時間は 1 回しか適用できず、音声キー/ゲームパッドは何度でも適用できます。

    2
    複数のトリガーを使用して、さらに多くのインタラクションを定義

  4. 行った変更を表示するには、デスクトッププレビューボタン を選択します。

  5. 次のアートボードまたはコンポーネントのステートへのトランジションをプレビューするには、スペースバーを押しながら音声コマンドを繰り返します。

プロトタイプに再生を追加する

オーディオ再生を追加する

オーディオ再生アクションを使用して、プロトタイプに効果音を追加することができます。例えば、メールが正常に配信されたときに、確認のオーディオを再生できます。オーディオには、MP3 ファイルまたは WAV ファイルを読み込むことができます。

オブジェクトまたはアートボードにオーディオ再生を追加するには、次の手順を実行します。

  1. プロトタイプモードで、オブジェクトまたはアートボードを選択します。

  2. プロパティインスペクターで、次のオプションを設定します。

    • +」をクリックしてインタラクションを追加します。
    • トリガー:「タップ」に設定します。
    • アクション:「オーディオ再生」に設定し、オーディオファイルを参照して追加します。

    オーディオの自動再生は、Safari の設定で自動再生を有効にしている場合のみ Safari で機能します。XD プロトタイプリンクの自動再生を有効にする方法については、「Safari でサウンドの自動再生を有効にする」を参照してください。

1 つのトリガーで複数アクションを追加する

1 つのトリガーで「トランジション」や「自動アニメーション」などのメインのトランジションアクションには、「オーディオ再生」などのトランジション以外のアクションを追加できます。例えば、2 つのアートボード間をトランジションするためにクリックすると、マウスのクリック音が鳴るように設定できます。

プロトタイプに複数のアクションを追加するには、次の手順を実行します。

  1. プロトタイプモードで、複数のアクションを追加するオブジェクトまたはアートボードを選択します。

  2. プロパティインスペクターで、次のオプションを設定します。

    • +」をクリックしてインタラクションを追加します。
    • トリガー:「タップ」に設定します。
    • 最初の「アクション」の「+」ボタン(トランジションアクション)を「トランジション」、「自動アニメーション」、「オーバーレイ」、「スクロール先」、または「前のアートボード」のいずれかに設定します。
    • 2 番目の「アクション」の「+」ボタン(トランジション以外のアクション)を「オーディオ再生」または「音声再生」に設定します。
    複数アクション
    1 つのオブジェクトまたはアートボードに複数のアクションを設定する

    プロパティインスペクターにある 2 番目の「アクション」の「+」ボタンは、トリガーを「タップ」に設定した場合のみ有効になります。最初のアクションに、「オーディオ再生」や「音声を再生」など、トランジション以外のアクションを設定した場合、2 番目の「アクション」の「+」ボタンは有効になりません。

音声再生を追加する

オブジェクトまたはアートボードに音声再生を追加するには、次の手順を実行します。

  1. ワイヤーをソースアートボードからデスティネーションアートボードにドラッグします。

  2. 音声再生を追加するには、プロパティインスペクターで、以下のオプションを選択します。

    • トリガー:「時間」に設定します。
    • ディレイ:音声再生の開始のタイミングとして適用される遅延時間を秒単位で設定します。
    • アクション:「音声を再生」に設定します。
    • 音声:音声再生用の声を選択します。
    • 音声:音声再生用のテキストを入力します。
    音声再生の使用
    音声再生の使用

    A. トリガーを「時間」に設定 B. 遅延時間を秒単位で設定 C. アクションを「音声再生」に設定 D. 音声を設定  E. 音声再生するテキストを入力します。 

  3. 変更をプレビューするには、デスクトッププレビューアイコン  をクリックします。

  4. 次のアートボードへの音声再生付きトランジションをプレビューするには、スペースバーを押しながら音声コマンドを繰り返します。 

    音声再生のプレビュー
    音声再生のプレビュー

プロトタイプにナレーションを追加する

  1. プロトタイプモードで、フローの開始点が設定されるホーム画面を選択し、デスクトッププレビューボタンをクリックします。

  2. 録音ボタンの横にあるドロップダウン矢印を選択して、「マイクを有効にする」を選択します(macOS)。Windows の場合は、Gamecenter の OS レベルのコントロールでマイクを有効にします。記録時は、インターフェイス上で点滅する赤いアイコンに注意してください。

  3. 録音した音声を mp4 ファイルとして保存し、関係者と共有したり、ソーシャルメディアに投稿したりすることができます。 

    これは、XD からのオーディオ出力(音声再生など)を直接キャプチャするものではありません。マイクは、ユーザーの設定に応じて出力を認識するか録音します(システムマイクは、システムスピーカーから音声再生が再生されるのを認識します)。

Web 上でプロトタイプまたはデザインスペックリンクを共有してレビューする

  1. デスクトップアプリで、右上の共有アイコンをクリックして、「デザインレビュー」(プロトタイプの場合)または「開発」(デザインスペックの場合)を選択します。

  2. プロトタイプをプレビューするとき:

    • デスクトップまたはノートパソコン:スペースバーを押し続けます。
    • Adobe XD モバイルアプリ(iOS および Android):画面上の任意の場所で長押しのジェスチャーを使用します。画面上に指を置き(動かさずに)、指を戻す前に音声コマンドを使用します。
    • スマートフォンのモバイルブラウザー:画面の右下隅にあるマイクアイコンを押し続けます。
  3. デザインスペックをプレビューするとき、開発者は音声コマンドと音声再生をテキストとして読み取るか表示することができます。 

    デザインスペックでは音声インタラクションはサポートされていません。

Safari でサウンドの自動再生を有効にする

Safari では、デフォルトでサウンドの自動再生が無効になっています。XD プロトタイプリンクでサウンドの自動再生を有効にするには、以下の手順に従います。

  1. Safari で XD プロトタイプリンクを開きます。
  2. macOS のメニューバーで、Safari環境設定に移動します。
  3. web サイト」タブで、左側のペインにある「自動再生」を選択します。
  4. 以下の web サイトでのメディアの自動再生を許可ウィンドウで、xd.adobe.com の横の「すべてのメディアを自動再生」を選択します。

この設定により、XD プロトタイプリンクのサウンドが、設定以降、自動的に機能するようになります。

Safari でメディアの自動再生を有効にする
Safari でメディアの自動再生を有効にする

Chrome でサウンドを有効にする

Chrome でプロトタイプを実行しているときに、再生アクションに問題があるというエラーが発生する場合は、Chrome の設定でサウンドを有効にします。

XD プロトタイプリンクでサウンドを有効にするには、Chrome 設定で以下の手順に従います。

  1. Chrome のアドレスバーに chrome://settings/content/sound と入力し、Enter キーを押します。
  2. 動作のカスタマイズ」セクションで、「音声の再生を許可するサイト」の横にある「追加」をクリックし、「https://xd.adobe.com」を追加します。

この設定により、XD プロトタイプリンクのオーディオが、再生されるようになります。

Chrome 設定で XD プロトタイプリンクのサウンドを有効にする
Chrome 設定で XD プロトタイプリンクのサウンドを有効にする

通知を使用して音声インタラクションをトラブルシューティングする

デスクトップまたは web でのプロトタイプのプレビュー中に、音声によって開始される操作をトラブルシューティングできるようになりました。デザインスペックをレビューする関係者もまた、この機能を使用して、Adobe XD でのプロトタイプの操作方法について理解を深めることができます。

プレビュー中にプロトタイプと対話する前に、「通知を表示」メニューオプションがオンであることを確認します。このメニューオプションは Adobe XD の起動時に、デフォルトでオンになっています。

通知を表示
音声プロトタイプの通知を表示

XD に音声入力した各コマンドは、現在のアートボードまたはコンポーネントのステートにあるすべての音声トリガーに対して照合されます。一致する音声トリガーが見つからない場合は、次の通知が届きます。「一致した結果が見つかりませんでした : {音声入力したコマンド}」。XD が認識した内容を目視確認すると、一致した結果が見つからない理由を個々の音声入力について解明できます。

一致した結果が見つからない理由はいくつかあります。入力した音声コマンドが、アートボードまたはコンポーネントのステートのインタラクションで使用されていないことが考えられます。また音声認識サービスが予期しない結果を返している可能性もあります。

例えば、インタラクションに「2 ドル」というフレーズが音声コマンドとして追加されているが、音声入力時に、音声認識サービスが返しているのは「$ 2.00」という結果である場合があります。通知の中で言葉の代わりに数字が使われていることからもわかるように、言葉の代わりに数字を使用するようにインタラクションを変更できます。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合