トリガーとしてキーボードおよびゲームパッドを使用してプロトタイプを作成する方法について説明します。
キーボードおよびゲームパッドのトリガー

Adobe XD では、キーボードショートカットとゲームパッドのトリガーを使用して、ネイティブのデスクトップアプリケーションとゲーム機をシミュレートし、充実したゲームエクスペリエンスを実現できるようになりました。プロトタイプをつなぐとき、トリガードロップダウンリストから「キー/ゲームパッド」を選択し、任意のキーを割り当てることができます。これらのトリガーは、タップドラッグ時間音声などの他のトリガーと同時に使うことができるため、デスクトップアプリケーション、ゲーム、プレゼンテーションなどのさまざまなユースケースのプロトタイプを作成することができます。

その後、プレビューウィンドウ、Web ブラウザー、またはモバイルアプリケーションでのこれらのアニメーションを再生または録音し、関係者と共有して共同でレビューを行うことができます。これにより、ユーザーエクスペリエンス全体にリッチなレイヤーを追加しながら、より優れたプロトタイプストーリーを伝えることができます。

キーボードトリガーを使用する

特定のデスクトップアプリケーション、アクセシビリティ、ショートカットまたはゲームのプロトタイプを作成するときは、プロトタイプとやり取りするためにキーボードが必要です。この要件を念頭に置いて、Adobe XD には、キーボードショートカットをトリガーとして使用してプロトタイプの画面間を移動する機能が導入されました。プロトタイプをつなぐときは、「キー」を選択します。次に、キーボードの任意のキーを押し、アートボード上のオブジェクトへのトリガーとして割り当てることができます。つまり、同じアートボードから複数のトリガーを使用することができます。

キーボードトリガー
キーボードトリガー

また、command + S、Ctrl + R などのショートカットを使用し、キーと修飾子を組み合わせてトリガーを定義することもできます。スペースキーや、ファンクション、スリープ、音量、電源などの他のシステムレベルのキーは使用できません。同じアートボード上の同じショートカットに複数のトリガーを割り当てると、最後のトリガーが有効になり、プレビュー中にトリガーされます。

ゲームパッドトリガーを使用する

ゲームプロトタイプをテストするには、実際のゲームコントローラーハードウェアを使用してプロトタイプを制御できる必要があります。現在のところ、実際のコントローラーを使用してプロトタイプとやり取りしたりテストしたりできるプロトタイプツールはなく、自社製ソリューションは時間と手間がかかります。

Adobe XD には、トリガーとしてゲームパッドを使用してプロトタイプ内の画面間を移動するプロトタイプを作成できる統合ソリューションが用意されています。Bluetooth または USB 経由で XD を Xbox One(モデル 1708)または DualShock 4(モデル CUZ-ZCT2U および CUH-ZCT1E)に接続し、「キー/ゲームパッド」を選択します。次に、接続したゲームパッドの任意のキーを押し、アートボード上のオブジェクトへのトリガーとして割り当てることができます。

ゲームパッドトリガー
ゲームパッドトリガー

アートボードまたはオブジェクトにこれらのトリガーを追加して、アートボードごとに複数のゲームパッドトリガーを設定することもできます。ただし、プロトタイプのデザインとプレビューには必ず同じコントローラーを使用してください。そのため、たとえば、Xbox コントローラーを使用してデザインされた場合、デスクトップまたは Web でのプロトタイテストにも、Xbox コントローラーの使用が必要です。

モバイルおよびモバイル Web エクスペリエンス

XD では、デスクトッププレビューアプリケーションおよび Web プロトタイプでのキーボードゲームパッドサポートがサポートされます。モバイルユーザーの場合、キーボードやゲームパッドデバイスが接続されていないため、「タップ」を使用してアートボード間を移動できます。

サポート対象ゲームコントローラー

アートボードにトリガーを追加するには、次のサポート対象ゲームコントローラーを使用します。

コントローラー

Mac(USB)

Mac(Bluetooth)

Win(USB)

Win(Bluetooth)

Xbox One

サポート対象

サポート対象

サポート対象

DualShock 4   

サポート対象

サポート対象

サポート対象

サポート対象

Xbox One コントローラー(ブラウザーサポート)

Chrome(Mac)

Chrome(Windows)

Firefox(Mac)

Firefox(Windows)

IE

Edge

Safari

USB

サポート対象

サポート対象

サポート対象

サポート対象

Bluetooth

サポート対象

サポート対象

サポート対象

サポート対象

サポート対象

DualShock コントローラー(ブラウザーサポート)

Chrome(Mac)

Chrome(Windows)

Firefox(Mac)

Firefox(Windows)

IE

Edge

Safari

USB

サポート対象

サポート対象

サポート対象

サポート対象

Bluetooth

サポート対象

サポート対象

サポート対象

コンソールフロープロトタイプを作成する

  1. プロトタイプモードで、キャンバス上のすべてのアートボードを選択して、アートボード間のワイヤーを表示します。

  2. コネクタをソースアートボードのレイヤーから移動先のアートボードにドラッグします。最初のエレメントをワイヤで接続すると、そのエレメントのアートボードがホームアートボードとして設定されます。

  3. 「トリガー」ヘッドアップディスプレイで、以下のオプションを設定します。

    • トリガー:トリガーの種類を「キーとゲームパッド」に設定し、キーボードまたはゲームパッド上の任意のキーを選択して、スペースバーおよびその他のシステムレベルキー(ファンクション、スリープ、音量、電源など)を除くトリガーを割り当てます。
    • アクション:利用可能なオプション(「トランジション」、「自動アニメーション」、「オーバーレイ」、「音声再生」、または「前のアートボード」)を選択します。
    • 移動先:移動先アートボードをドロップダウンリストから設定します。
    • アニメーション:ドロップダウンリストからオプションを選択します。

    キーボードトリガー
    キーをトリガーとして設定

    A. トリガーの種類を「キー」に設定 B. キーボードキーを割り当て C. アクションを設定 D. 移動先アートボードを設定 
    ゲームパッドトリガー
    ゲームパッドトリガーを設定

    A. トリガーの種類を「ゲームパッド」に設定 B. ゲームパッドキーを割り当て C. アクションを設定 D. 移動先アートボードを設定 
  4. デスクトップ上の変更をプレビューするには、デスクトッププレビューアイコン「   」を選択します。

  5. XD デスクトップアプリケーションからプロトタイプを関係者と共有するには、「共有」をクリックして「プレビューのための共有」(プロトタイプの場合)または「開発のための共有」(デザインスペックの場合)を選択します。

    デザインスペックやプロトタイプでゲームパッドやキーボードのトリガーにアクセスする方法については、デザインスペックでゲームパッドまたはキーボードのトリガーを使用する、ならびにゲームパッドまたはキーボードのトリガーを使ってプロトタイプにアクセスするを参照してください。

     

機能の制限

  • XD は、モバイルアプリケーションまたはモバイル Web ブラウザー上のゲームパッドおよびキーボードのプロトタイプをサポートしていません。ただし、それらのプロトタイプではタップして画面を切り替えることができます。
  • モバイル Web 上のプロトタイプを表示するには、画面をタップして閲覧します。 
  • キーボードショートカットの中には、特定のプラットフォームやブラウザーでは正常に動作しないものがあります。
  • 操作を最適化するため、必ず Chrome ブラウザーを使用してください。他のブラウザーでコントローラーを使用することはできませんが、代わりにプロトタイプを通じてタップすることができます。
  • 特定のブラウザーにマッピングされているサポート対象コントローラーのみを使用してください。 
  • キーボードをトリガーとして割り当てるときは、スペースキーや他のシステムレベルキー(ファンクション、スリープ、音量、電源など)以外のキーを使用できます。
  • キーが割り当てられていないハードウェアでプロトタイプをプレビューしている場合、トランジションを表示できません。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー