インタラクティブプロトタイプは、ユーザーエクスペリエンスのテスト、最適化、完成に使用できます。ここではインタラクティブプロトタイプの作成方法を説明します。

画面のデザインが完了したら、インタラクティブプロトコルを作成して、ユーザーがアプリケーションや Web サイトをどのように操作できるかを実際に目で見て確認します。

目的のナビゲーションシーケンスで画面を接続し、実際のユーザーとしての疑似体験が可能です。

ホーム画面の設定

ホーム画面とは、アプリケーションまたは Web サイトの最初の画面のことです。ユーザーは、ホーム画面からアプリまたは Web サイトへの移動を開始します。

また、プロトタイプをプレビューする場合、何も選択されていないときは、ホーム画面からプレビューが開始します。つまり、初期設定では、ホーム画面は最初にワイヤーを追加したアートボードに設定されます。

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

  2. ホーム画面として設定するアートボードをクリックします。左上隅にグレーのホームアイコンが表示されます。

  3. ホームアイコンをクリックします。ホームアイコンが青に変わり、アートボードが正常にホーム画面として設定されたことが示されます。

    ホーム画面として設定するオプション
    ホーム画面として設定するオプション
    設定されたホーム画面
    設定されたホーム画面

    別のアートボードをホーム画面として設定するには、そのアートボードに関連付けられているホームアイコンをクリックします。公開されたすべてのアートボードを表示するには、関連するすべてのアートボードをリンクします。

画面の接続

アートボードをリンクしてインタラクティブプロトタイプを作成するには、インタラクティブ要素をターゲットオブジェクトまたはアートボードに接続してアートボードを接続します。アートボードや画面をリンクする前に、アートボードに適切な名前を付けてください。これにより、リンク先の画面を識別しやすくなります。

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

  2. リンクするオブジェクトまたはアートボードをクリックします。矢印付きの接続ハンドルがオブジェクトまたはアートボードに表示されます。ハンドルにマウスポインターを重ねると、カーソルがコネクタに変化します。

    ターゲット画面へのインタラクティブエレメントのリンク
    ターゲット画面へのインタラクティブエレメントのリンク
  3. クリックしてマウスのドラッグを開始すると、コネクタが表示されます。接続先のアートボードまたは画面でマウスを放します。

    最初のエレメントをワイヤーで接続すると、そのエレメントのアートボードがホームアートボードとして設定されます。 

  4. プロトタイプの魅力を高めるために、トリガーとアクションを導入することができます。これには、カンバスで「+」ボタンをクリックするか、プロパティインスペクターで「+」をクリックし、画面に表示されたオプションを設定します。

    例えば、プロトタイプのナビゲーションエクスペリエンスを強化する場合、アクションを「スクロール先」に設定してアンカーリンクを追加できます。これについて詳しくは、アートボード内でのナビゲーションリンクの作成を参照してください。

    プロトタイプの作成オプション
    プロトタイプの作成オプション

    A. 「タップ」、「ドラッグ」、「ホバー」、「時間」、「キー/ゲームパッド」、「音声」のいずれかに設定します。 B. 遅延時間を秒単位で設定します。 C. 「トランジション」、「自動アニメーション」、「スクロール先」、「音声再生」のいずれかに設定します。 D. 必要に応じて、移行先のアートボードを変更します。 E. 「ディゾルブ」または「なし」に設定します。 F. イージング効果を選択します。 G. 持続時間を秒単位で入力します。 
  5. タップ」をトリガーとして選択した場合、トランジションとトランジション以外(音声やオーディオ再生など)というように、2 つのアクションを組み合わせることができます。複数のアクションを追加するには、プロパティインスペクターの最初の「アクション」の「+」ボタンを「トランジション」、「自動アニメーション」、「オーバーレイ」、「スクロール先」、「ひとつ前のアートボード」のいずれかに設定し、2 番目の「アクション」の「+」ボタンを「オーディオ再生」または「音声再生」に設定します。

    最初のアクションにオーディオ再生または音声再生を選択すると、2 番目のアクションを追加できなくなることに注意してください。

  6. また、複数のトリガーを組み合わせれば、アートボード上の様々なオブジェクトにトリガーを分散させずに高度なインタラクションを作成することもできます。これには、カンバスで「+」ボタンを使用するか、プロパティインスペクターで「+」をクリックし、手順 4 と同様に「トリガー」、「アクション」、「移動先」を選択します。

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

    複数のトリガーの組み合わせ
    複数のトリガーの組み合わせ
  7. プロトタイプをプレビューするには、デスクトッププレビュー をクリックします。

チュートリアル

「プロトタイプ作成ワークフローの進化に伴い、デザインと対話する方法が増えています。タッチ、ドラッグ、タップのジェスチャからキーボードショートカットや音声認識まで、あらゆるトリガーを使用できるだけでなく、それらを組み合わせて様々なインタラクションをトリガーできます。」- Dani Beaumont(Adobe XD、プリンシパルプロダクトマネージャー)

このチュートリアル〜トレーニングでは、複数のトリガーを組み合わせて様々なインタラクションを実現する方法をご紹介します。

視聴時間:1 分


ヒント

ワイヤーを編集または削除するには、対象のワイヤーを選択して操作を行います。プロパティインスペクターから 1 つのインタラクションだけを選択して、そのインタラクションを編集することもできます。

ワイヤーにカーソルを合わると、インタラクションの数とタイプを示すツールチップが表示されます。

定義したインタラクションを別のオブジェクトに適用するには、オブジェクトまたはアートボードを選択し「コピー」を選択した後、コピー先のオブジェクトまたはアートボードをクリックし、右クリックして表示されるコンテキストメニューで「インタラクションの貼り付け」を選択します。

ひとつ前のアートボードにリンクする

  1. プロトタイプモードで、リンクするエレメントまたはアートボードを選択します。小さい矢印が表示されたら、その矢印をクリックして 1 つ前のアートボードにドラッグし、アクション/前のアートボードを選択します。

    ひとつ前のアートボードの選択
    ひとつ前のアートボードの選択
  2. アクション」を「前のアートボード」に設定すると、ワイヤーの端に曲がった矢印アイコンが表示されます。

    ターゲットの設定
    ターゲットの設定

    アートボードからワイヤーのリンクを解除する場合は、ワイヤー上の任意の場所をクリックして、目的のアートボードからドラッグして外します。

  3. プレビューウィンドウを使用して、リンクをプレビューします。

アートボードのリンクを解除する

  1. プロトタイプモードで、移動先/なしを選択します。

    ワイヤー上の任意の場所をクリックして、目的のアートボードからドラッグして外すこともできます。

    アートボードのリンクを解除する
    アートボードのリンクを解除する

    なし」オプションは、アートボードがターゲットにリンクされている場合にのみ使用できます。

  2. ブラウザーでリンクをプレビューします。エレメントから以前に設定したターゲットリンクはすべて削除されます。

インタラクションのプレビューおよび録画

Adobe XD Windows 版では、プロトタイプの録画はサポートされていませんが、解決策として、Windows + G キーを押して、ネイティブレコーダーを使用することでプレビューウィンドウを録画することができます。

プロトタイプとインタラクションをテストするには、プロトタイプをプレビューします。また、プレビューを録画し、その録画を .mp4 ファイルとして保存することもできます。.mp4 ファイルを共有することも選択できるため、関係者にプロトタイプのチュートリアルを表示(またはレビュー)して、フィードバックを得ることができます。

  1. デスクトッププレビューアイコンをクリックします。プレビューウィンドウが表示され、アートボードがフォーカスされた状態で表示されます。

    画面間の移動をテストするには、インタラクティブエレメントをクリックします。

    プレビューウィンドウでプレビューしながら、プロトタイプのデザインとインタラクションを編集できます。変更は直ちにプレビューに反映されます。

  2. インタラクションを録画するには、プレビューウィンドウで録画アイコンをクリックします。終了するには、Esc キーを押すか、録画アイコンをもう一度クリックします。

    。
    プロトタイプのインタラクションの録画
  3. 録画データを保存する名前と場所を指定します。データは .mp4 ファイルとして保存されます。