マニュアル キャンセル

インタラクティブプロトタイプの作成

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. カラーマネジメント
    5. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    6. ワークスペースの基本
    7. Adobe XD でのアプリ言語の変更
    8. UI デザインキットへのアクセス
    9. Adobe XD のアクセシビリティ
    10. ショートカットキー
    11. ヒントとテクニック
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトのストローク、塗り、ドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
    14. XD アセットのバックアップまたは移行
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー&ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード:191
      3. エラーコード:183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

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

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

複数の画面を目的のナビゲーションシーケンスにワイヤー接続し、複数のアートボードをワイヤー接続して複数のフローを編成できます。画面を設定した後は各フローを共有可能なリンクとしてレビュー用に共有し、フィードバックを収集して、様々なターゲットサーフェスに一度に公開できます。

ホーム画面の設定

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

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

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

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

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

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

    設定されたホーム画面

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

プロジェクトに複数のフローを設定する

複数のフローを使用すると、同じドキュメントからまたは同じファイル内で複数バージョンのデザインを作成して共有したり、同じアートボードのセットを多くのプロトタイプやデザインスペックで利用したりすることができます。各フローは詳細を共有しながらも、独自のワイヤセットを保持しているため、毎回すべての設定を元に戻したり、やり直したりする必要なしに、変更して再公開できます。

複数バージョンのデザインを作成する場合は、2 つ目のホームアートボードを設定し、それらをワイヤー接続して、各セットで固有のリンクを共有します。ホームアートボードはデザインの出発点として機能し、そこからワイヤをドラッグして異なるスクリーンに接続できます。
複数のプロトタイプで同じアートボードのセットを使用できるため、同じ作業を繰り返す必要はありません。すべて同じページでデザインを変更し、リンクを更新できます。

様々なフローを設定するもう 1 つの例として、複数のプラットフォーム(モバイル、デスクトップ、タブレットなど)を対象とする web サイトをデザインする場合に、各フローが別個のユーザージャーニーとなるように複数のインタラクションフローを定義して作成し、各フローを関係者と共有してフィードバックを収集することができます。

以下では、1 つ以上のホームアートボードを設定し、複数のフローを定義する方法について説明します。

ターゲット画面へのインタラクティブエレメントのリンク
複数フローの設定

  1. プロトタイプモードに切り替えます。
  2. ホームアートボードを設定して、デザインの開始点を定義します。
  3. 各フローを適切に管理するため、フローの名前を入力します。
  4. デザインが複数フローで構成されている場合は、各フローに対してホームアートボードを設定します。
  5. リンクする次のオブジェクトまたはアートボードをクリックします。矢印付きの接続ハンドルがオブジェクトまたはアートボードに表示されます。クリックしてドラッグし、目的のオブジェクトまたはアートボードでハンドルを離します。

オブジェクトやアートボードへのインタラクションの追加

画面を定義してワイヤー接続した後は、オブジェクトやアートボードにトリガーやアクションを追加してプロトタイプをより充実させることができます。これには、次の操作を行います。

  1. オブジェクトを選択し、その横にあるプラス記号(「+」)をクリックするか、プロパティインスペクターでプラス記号(「+」)をクリックします。「トリガー」と「アクションタイプ」を設定します。アクションタイプを選択したら、そのアクションタイプで選択できるオプション(「移動先」など)を設定します。

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

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

    A. 「タップ」、「ドラッグ」、「ホバー」、「時間」、「キー/ゲームパッド」、「音声」、「再生終了」のいずれかに設定します。 B. 遅延時間を秒単位で設定します。 C. 「トランジション」、「自動アニメーション」、「オーバーレイ」、「スクロール先」、「前のアートボード」、「オーディオ再生」、「スピーチ再生」、「ビデオ再生」、「Lottie 再生」のいずれかに設定します。 D. 必要に応じて、移行先のアートボードを変更します。 E. 「ディゾルブ」または「なし」に設定します。 F. イージング効果を選択します。 G. 持続時間を秒単位で入力します。。 

  2. トリガーに「タップ」を選択した場合、トランジションとトランジション以外のアクション(「音声」や「オーディオ再生」など)を組み合わせることができます。2 番目のアクションを追加するには、プロパティインスペクターで最初の「アクション」の「+」ボタンを「トランジション」、「自動アニメーション」、「オーバーレイ」、「スクロール先」、「ひとつ前のアートボード」のいずれかに設定し、2 番目の「アクション」の「+」ボタンを「オーディオ再生」または「音声再生」に設定します。

    最初のアクションに「オーディオ再生」または「音声再生」を選択した場合は、2 番目のアクションを追加することはできません。

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

    注意:

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

    複数のトリガーの組み合わせ
    複数のトリガーの組み合わせ


    デザイン内に、スクロールのリアルなシミュレーションを作成することができます。デザイン要素を特定の位置に固定するには、プロパティインスペクターで「スクロール時に位置を固定」を選択します。

  4. プロトタイプをプレビューするには、デスクトッププレビュー   をクリックします。

個々のデザインフローは、レビューやフィードバック収集用の共有可能なリンクとして管理し、公開できます。複数フローを共有する方法について詳しくは、「デザインおよびプロトタイプの共有」を参照してください。

ヒント

  • ワイヤーを編集または削除するには、編集するワイヤーを選択するか削除します。プロパティインスペクターから 1 つのインタラクションだけを選択して、そのインタラクションを編集することもできます。
  • プロトタイプモードでワイヤを一時的に非表示にするには、Option キー(macOS)または Alt キー(Windows)キーを押したままにします。
  • ワイヤーにカーソルを合わると、インタラクションの数とタイプを示すツールチップが表示されます。 
  • 定義したインタラクションを別のオブジェクトに適用するには、オブジェクトまたはアートボードを選択し「コピー」を選択した後、コピー先のオブジェクトまたはアートボードをクリックし、右クリックして表示されるコンテキストメニューで「インタラクションをペースト」を選択します。

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

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

    ひとつ前のアートボードの選択
    ひとつ前のアートボードの選択

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

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

    注意:

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

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

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

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

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

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

    注意:

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

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

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

注意:

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

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

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

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

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

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

    。
    プロトタイプのインタラクションの録画

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

詳細情報

インタラクティブ機能の基本については、以下のビデオをご覧ください。


関連リソース

アドビへのお問い合わせ

コミュニティで質問

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティにぜひご参加ください。皆様からのご意見や作品をお待ちしております。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合