Adobe XD で、ユーザーエクスペリエンスの検証に使用できるインタラクティブプロトタイプを作成する方法を説明します。

画面のデザインが完了したら、画面を相互に接続し、ユーザーがアプリまたは Web サイトをどのように操作できるかを実際に目で見て確認できます。

Adobe XD では、インタラクティブプロトタイプを作成し、画面またはワイヤーフレーム間の移動を視覚化することが可能です。インタラクションをプレビューしてユーザー操作性を検証し、デザインを繰り返すことで開発時間を節約できます。また、インタラクションを記録し、関係者と共有してフィードバックを得ることもできます。プロトタイプの特定の部分を詳しく確認するには、ズームインとズームアウトを使用します。

ホーム画面の設定

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

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

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

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

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

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

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

ターゲット画面へのインタラクティブエレメントのリンク

アートボードや画面をリンクする前に、アートボードに適切な名前を付けてください。これにより、特定の画面をリンクする先の画面を識別しやすくなります。

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

  2. リンクするオブジェクトをクリックします。

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

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

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

  4. プロパティインスペクターに表示されるインタラクションパネルでは、次のオプションを設定できます。

    • トランジションと継続時間:別のアートボードに移行する際にスクロール位置を保持するには、「スクロール位置を保持」を選択します。このオプションは、ナビゲーションバーや固定フッターのプロトタイプを作成するときに便利です。ユーザーが元のアートボードでスクロールした場合、次のアートボードは元のアートボードのスクロール位置を認識します。アートボードまたはアートボードの任意のエレメントをクリックしたとき、ある画面での元の場所を次の画面でも維持するようにスクロール位置を制御できます。このコントロールでは、プロジェクトファイル内で前後に繰り返しスクロールすることはできません。例えば、ユーザーがアートボード A で y=1000 まで下にスクロールした場合、アートボード B でもデフォルトで y=1000 に移動されます。元のアートボードにスクロールが定義されていない場合、「スクロール位置を保持」オプションは非アクティブになります。
    • オーバーレイ:メニューのドロップダウンやスライディングキーボードなどの状態やトランジションをシミュレートする場合は、「オーバーレイ」を選択します。

    ポップアップを閉じるには、Esc キーを押すか、ポップアップの外部をクリックします。

    オーバーレイの操作
    オーバーレイの操作
  5. 上記の手順を繰り返し、プロジェクト内のすべてのインタラクティブエレメントをリンクします。

    ヒント:

    プロトタイプモードで、インタラクションの作成手順を簡素化するには、以下の手順を実行します。

    • アートボード間でオブジェクトをコピー&ペーストできます。インタラクションを維持したままオブジェクトをコピー&ペーストできます。
    • インタラクションだけをコピー&ペーストすることもできます。オブジェクトをコピーし、別のオブジェクトを右クリックして、「インタラクションをペースト」を選択します。インタラクションのみがペーストされます。
    • エレメントを別の画面にリンクするには、もう一度ハンドルをクリックして目的の画面にドラッグします。
    • 特定のアートボードの接続を表示するには、アートボードのタイトルを選択します。
    • インタラクションを削除するには、ターゲットアートボードからドラフトエリアにコネクタの宛先ハンドルをドラッグします。
    ターゲット画面にリンクされたインタラクティブエレメント
    ターゲット画面にリンクされたインタラクティブエレメント

    A. ホーム画面 B. リンクされたアートボード C. 送信接続 D. 受信接続 

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

    注意:

    グレーのリンクは送信接続を示し、青いリンクは受信接続を示します。

時限式トランジションを使用する

Adobe XD の時限式トランジションを使用すると、オンボーディングフロー、異なる画面への自動リダイレクト、進行状況バーなど、より充実したプロトタイプエクスペリエンスを作成できます。タップしてトランジションをトリガーするように、「遅延」を使用してトランジション間隔を指定できます。例えば、オンボーディングワークフローを作成する際、「遅延」オプションを使用してアートボード間のリンクとトランジションを作成できます。

デザイナーとして、時間を設定して他のアートボードへのトランジションをトリガーすることもできます。例えば、オンボーディングフローをデザインしている場合、アプリケーションフローのスプラッシュスクリーンから時限式トランジションを開始し、複数のオンボーディング画面間で自動的にトランジションを実行することができます。

オンボーディングワークフローの時限式トランジションを作成する

時限式トランジション
時限式トランジション

A. トリガーを「時間」に設定する B. 時間遅延を設定する C. アクションを「トランジション」に設定する D. 移動先のアートボードを選択する E. アニメーション効果を選択する 
  1. XD で、プロトタイプ モードに切り替えます。

  2. コネクタを表示するには、アートボードを選択し、マウスをハンドルの上に合わせます。

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

  4. コネクターをクリックして、プロパティインスペクターのインタラクションパネルで、次のオプションを設定します。

    • トリガー:時間に設定します。
    • 遅延時間:トランジションの遅延時間を秒単位で設定します。
    • 間隔:トランジションの間隔を秒単位で設定します。
    • アクション:トランジションにアクションを設定します。
    トリガー、遅延、間隔、アクションを設定する
    トリガー、遅延、間隔、アクションを設定する

    A. 時間にトリガーを設定する B. 遅延を秒単位で設定する C. トランジションにアクションを設定する D. 間隔を秒単位に設定する 
  5. デスクトッププレビューアイコン を選択し、変更を表示します。

Web 上のプロトタイプリンクを確認する

  1. デスクトップアプリケーションで、右上隅にある「共有」ボタンをクリックし、「プレビューのための共有」を選択します。リンクが作成されたら、リンクをコピーしてブラウザーでプロトタイプを開くことができます。時限式トランジションは、XD デスクトップアプリケーションでデザインしたように機能します。

  2. 時限式トランジションを停止するには、左向き矢印キーまたは左向き矢印ナビゲーションボタンを押して、前の画面に戻ります。

  3. 初めてトランジションを停止すると、Adobe XD は時限式トランジションが停止したことを示す通知を表示します。再開するには、右向き矢印のナビゲーションボタンまたはキーボードの右向き矢印キーを押します。

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

  1. プロトタイプモードで、リンクするエレメントを選択します。小さい矢印が表示されたら、その矢印をクリックすると、自動的にアクションがひとつ前のアートボードに設定されます。また、エレメントをアートボードにリンクして、アクション/ひとつ前のアートボードを選択することもできます。

    ひとつ前のアートボードの選択
    ひとつ前のアートボードの選択
  2. アクションひとつ前のアートボードに設定すると、アイコンが変わります。

    ターゲットの設定
    ターゲットの設定
  3. プレビューウィンドウを使用して、リンクをプレビューします。

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

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

    ワイヤをアートボードからドラフトエリア(アートボード間のグレーの領域)にドラッグすることもできます。

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

    注意:

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

  2. ブラウザーでリンクをプレビューします。

    エレメントから以前に設定したターゲットリンクはすべて削除されます。

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

注意:

Adobe XD Windows 版では、プロトタイプの記録はサポートされていません。ただし、回避策が見つかっています。Windows + G キーを押して、ネイティブレコーダーを使用してプレビューウィンドウを記録します。

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

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

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

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

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

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

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

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