マニュアル キャンセル

音声機能付きプロトタイプのデザイン

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    5. ワークスペースの基本
    6. Adobe XD でのアプリ言語の変更
    7. UI デザインキットへのアクセス
    8. Adobe XD のアクセシビリティ
    9. ショートカットキー
    10. ヒントとテクニック
    11. Adobe XD サブスクリプションオプション
    12. XD スタータープランへの変更
  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. エンタープライズ版のグループ共有
  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. 書き出しに表示されないサードパーティ製品

Adobe XD の音声機能は、ユーザーに画面上からの解放をもたらします。ここでは、音声コマンドと音声再生を使用したデザインとプロトタイプの作成方法を学習します。

音声プロトタイプと XD の統合

Adobe XD の音声機能を利用することで、設計者はメディアの音声をプロトタイプに組み込むことができ、モバイルアプリケーション内での音声検索の統合、カーナビゲーションシステムのターンバイターン方向の音声出力、または小売環境においてインタラクティブキオスクにこれらのいずれも組み込むなど多様なことをおこなえます。

Adobe XD は、音声コマンドを使用して音声をプロトタイピングワークフローにシームレスに統合し、音声アプリケーションの初期段階にデザイナーが関与できるようにします。

音声コマンドを使用すると、口頭コマンドを使用して対話を開始できます。トリガーとしてクリックまたはタップを使用するのと同様に、XD のプロトタイプモード内で特定の発話をトリガーとして追加できます。音声再生を使用すると、プロトタイプとのやりとりに使用できる強力なテキスト読み上げエンジンにアクセスすることができます。

音声デザインとプロトタイプ作成
音声デザインとプロトタイプ作成

XD の音声機能のメリット

  • 音声というメディアを使って、体験をデザイン、プロトタイプ化、共有できます。

  • 新しいプラットフォームやデバイスの体験(音声アシスタント、スマートスピーカーなど)を作成します。

  • 音声技術やコーディングに関する知識がなくても、他のプロトタイピングインタラクションのように音声を簡単に追加できます。

プロトタイプ内で音声を使用するための前提条件

  • XD バージョン 13.0 以降。音声機能を追加およびプレビューするために必要です。
  • 音声機能と対話するための信頼性の高いインターネット接続
  • 組み込み型またはオフラインのプロトタイプで音声コマンドを使用することはできません。

音声によって起動する場合のハードウエア依存性

  • Adobe XD は、使用されているデバイスのマイクにアクセスする必要があります。

  • スピーカーが有効になっていることを確認し、プロトタイプに組み込まれたスピーチ再生を聞くために適切な音量レベルに設定してください。

音声機能でサポートされている言語

Adobe XD の音声コマンドと音声再生機能は、ローカライズされたすべてのバージョンの XD で翻訳されています。音声コマンドと音声再生機能は、英語、ドイツ語、日本語、韓国語、中国語、スペイン語、ポルトガル語(ブラジル)、およびフランス語で利用できます。これらの機能は、お使いのコンピューター上の言語地域の設定に基づきます。

音声検出はアクセントに最適化されており、音声再生では、お客様の地域に応じたアクセント付きの様々な音声が提供されます。

音声プロトタイピングに関連する具体的な使用事例

音声プロトタイピングは、常に市場を占有する新しいデバイスを使用した急速に進化しつつあるテクノロジーです。Adobe XD を使用した音声プロトタイピングの例をいくつか紹介します。

  • モバイルアプリケーション内の音声検索
  • Amazon Alexa、Google Assistant、Microsoft Cortana などの音声アプライアンス用のサードパーティアプリケーション
  • カーナビゲーションシステムでのターンバイターン方向のスピーチ出力
  • 小売環境でのインタラクティブキオスク

音声プロトタイピングに関連する一般的なワークフロー

ワークフローの一部を以下に示します。

  • 音声コントロールをプロトタイプへの入力として追加し、統合をプレビューする。
  • アートボードでの音声入力に音声応答を追加する。
  • 音声対応の公開プロトタイプを他の設計者と共有したり、見込ユーザーに対して使用可能性をテストしたりできます。

音声コマンドを使用してプロトタイプを作成する

音声プロトタイプおよび音声再生応答を作成、公開、プレビューする方法の情報については、「音声コマンドを使用してプロトタイプを作成する」を参照してください。

プレビューモードでの音声コマンドの有効化

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

  • デスクトップまたはノートパソコン:スペースバーを押し続けます。
  • Adobe XD モバイルアプリケーション(#iOS /#Android):画面上の任意の場所で長押しのジェスチャーを使用します。画面上に指を置き(動かさずに)、指を戻す前に音声コマンドを使用します。
  • スマートフォンのモバイルブラウザー:画面の右下隅にあるマイクアイコンを押し続けます。
音声コマンド

音声機能の使用に関するベストプラクティス

  • 音声やスピーチを扱う際の共通のパターンは、実際には 1 回のインタラクションでそれらを結合しないことです。それらを一緒に使用するには、音声トリガーを使用して、最初のアートボードから 2 枚目のアートボードに移行します。次に、第 2 のアートボードで、スピーチ再生の時間トリガーを使用します。これは、音声トリガーを使用しているときのビジュアルレスポンスと音声再生を組み合わせたものです。
  • 複数の音声トリガーを同じアートボードに追加する場合は、プレースホルダーオブジェクトを使用します。例えば、複数の円をデザインモードとプロトタイプモードでアートボードに追加し、各円に異なる音声トリガーを追加します。円を隠すには、レイヤーパネル中の目のアイコンをクリックします。オブジェクトはアートボードに表示されませんが、それらに関連付けられた音声トリガーはプレビュー中も引き続き機能します。

音声関連のエラーや問題のトラブルシューティング

音声コマンドが正確に設定されていると仮定して、マイクの設定をチェックして、Adobe XD にマイクへのアクセス権があることを確認します。

Adobe XD は、発話を、利用可能な一連のコマンドに一致させるよう最善を尽くします。正確なマッピングを必要としませんが、どれだけ近づけるかはフレーズによって異なります。音声の操作で重要な部分は、Adobe XD がデザイン内の様々なフレーズをどのように処理するかをテストすることです。

デバイスがミュートされておらず、音量が上がっていることを確認してください。音声再生を検証するには、プロトタイプモードに入り、タップトリガーおよび音声再生を使用するオブジェクトにインタラクションを追加するのが良い方法です。プレビューモードで、オブジェクトをクリックして音声再生を聞きます。

一部のワイヤレスヘッドフォンは、音声トリガーや音声再生では正常に動作しない場合があります。問題がある場合は、ワイヤレスヘッドフォンを取り外してみてください。

デスクトップまたは web でのプロトタイプのプレビュー中に、音声によって開始される操作をトラブルシューティングできるようになりました。詳しくは、通知を使用して音声による操作をトラブルシューティングする方法を参照してください。

詳細情報

XD の音声トリガーについて詳しくは、以下のビデオをご覧ください。
視聴時間:9 分

その他の関連ヘルプ

アドビのロゴ

アカウントにログイン