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

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

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

ホーム画面の設定

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

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

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

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

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

    アートボードがホーム画面として設定された後にホームアイコンが青に変化する
    アートボードがホーム画面として設定された後にホームアイコンが青に変化する

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

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

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

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

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

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

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

  4. 表示されるポップアップウィンドウでは、次の項目を指定できます。

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

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

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

    ヒント:

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

    • アートボード間でオブジェクトをコピー&ペーストできます。インタラクションを維持したままオブジェクトをコピー&ペーストできます。
    • インタラクションだけをコピー&ペーストすることもできます。オブジェクトをコピーし、別のオブジェクトを右クリックして、「インタラクションをペースト」を選択します。インタラクションのみがペーストされます。
    all-connectors
    ターゲット画面にリンクされたインタラクティブエレメント

エレメントを別の画面にリンクするには、もう一度ハンドルをクリックして目的の画面にドラッグします。

特定のアートボードの接続を表示するには、アートボードのタイトルを選択します。

インタラクションを削除するには、ターゲットアートボードからドラフトエリアにコネクタの宛先ハンドルをドラッグします。

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

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

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

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

時限式トランジション
時限式トランジション
  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 キーを押すか、「録画」をもう一度クリックします。

    preview-record
    プロトタイプのインタラクションの記録

  3. 記録を保存する名前と場所を指定します。記録は .mp4 ファイルとして保存されます。

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

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