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

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

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

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

特定のデスクトップアプリケーション、アクセシビリティ、ショートカットまたはゲームのプロトタイプを作成するときは、プロトタイプとやり取りするためにキーボードが必要です。この要件を念頭に置いて、Adobe XD には、キーボードショートカットをトリガーとして使用してプロトタイプの画面間を移動する機能が導入されました。

プロトタイプをつなぐときは、「キー/ゲームパッド」を選択します。次に、キーボードの任意のキーを押し、個々のオブジェクトまたはアートボード全体へトリガーとして割り当てることができます。つまり、同じアートボードから複数のトリガーを使用することができます。

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

A. トリガーをキーボードショートカットに設定 B. キーボードショートカットキー C. アクションを自動アニメーションに設定 D. 移動先アートボード 

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

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

ゲームのプロトタイプをテストする最も効果的な方法は、実際のゲームコントローラハードウェアを使用することです。Adobe XD では、接続されているゲームパッドコントローラーを使用してデスクトッププレーヤーまたは Web ブラウザーで XD プロトタイプの操作をしたり、ゲームパッドを使用して画面を切り替えるためのトリガーとしてプロトタイプを作成したりできます。 

Xbox One を Bluetooth 経由で接続するか、DualShock 4 コントローラーを Bluetooth または USB 経由で接続し、「キーとゲームパッド」を選択します。次に、接続したゲームパッドの任意のキーを押し、アートボード上のオブジェクトへのトリガーとして割り当てることができます。

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

A. ゲームパッドのトリガーを選択 B. ゲームパッドショートカットキー C. アクションを自動アニメーションに設定 D. 移動先アートボード 

アートボードまたはオブジェクトにこれらのトリガーを追加して、アートボードごとに複数のゲームパッドトリガーを設定することもできます。ただし、プロトタイプのデザインとプレビューには必ず同じコントローラーを使用してください。そのため、例えば、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. インタラクションを定義するには、アートボードで「+」ボタンをクリックするか、プロパティインスペクターで「+」をクリックして、プロパティインスペクターで次のオプションを設定します。

    • トリガー:トリガーの種類を「キーとゲームパッド」に設定し、キーボードまたはゲームパッド上の任意のキーを選択して、スペースバーおよびその他のシステムレベルキー(ファンクション、スリープ、音量、電源など)を除くトリガーを割り当てます。
    • アクション:利用可能なオプション(「トランジション」、「自動アニメーション」、「オーバーレイ」、「音声再生」、または「前のアートボード」)を選択します。
    • 移動先:移動先アートボードをドロップダウンリストから設定します。
    • アニメーション:ドロップダウンリストからオプションを選択します。これは、「アクション」を「トランジション」に設定した場合にのみ適用されます。
  4. 1 つのオブジェクトに対して複数のインタラクションを定義するには、既にインタラクションが定義されているオブジェクトを選択し、アートボードの「+」ボタンをクリックするか、プロパティインスペクターで「+」をクリックします。

    トリガーのうち、タップ、ドラッグ、ホバー時間は 1 回しか適用できず、音声キー/ゲームパッドは何度でも適用できることに注意してください。

    1
  5. デスクトップ上の変更をプレビューするには、デスクトッププレビューアイコン  を選択します。 

  6. XD デスクトップアプリケーションからプロトタイプを関係者と共有するには、共有表示設定を選択し、「デザインレビュー」または「開発」を選択します。

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

リーガルノーティス   |   プライバシーポリシー