XD での共有プロトタイプの操作

最終更新日 : 2022年3月11日

XD で共有プロトタイプを使用する方法について説明します。

Adobe XD では、デザイナーとレビュー担当者間でプロトタイプを共有して簡単に共同作業を行うことができます。レビュー担当者は、次の方法でプロトタイプを操作できます。

まず、プロトタイプのリンク設定とオプションについて説明します。

設定とオプションの説明

プロトタイプリンクでは、アカウント設定の確認、ズーム設定の調整、通知の確認、および他の関係者の招待を行うことができます。

A. 招待 B. ズーム設定 C. フルスクリーンモード D. サポートとフィードバック E. 通知 F. アカウントの設定

招待：他の関係者をプロトタイプリンクに招待するには、招待をクリックします。関係者を招待する場合、アクセスレベルを「閲覧可能」または「共有可能」に設定できます。「招待」ボタンを表示するには、アドビアカウントにログインする必要があります。
ズーム設定：プロトタイプリンクをズームインまたはズームアウトするには、ズーム設定を使用します。必要に応じて、あらかじめ定義されたズーム増分（25％、50％、75％、100％、150％、200％）から選択できます。または、タッチパッドでピンチズームジェスチャを使用するか、Cmd/Ctrl キーを押しながらマウスホイールを使用して小さい増分でスクロールします。プロトタイプリンクが開くデフォルトのズームレベルは、以前と同じままです。
全画面モード：全画面アイコンをクリックすると、プロトタイプが全画面モードで表示されます。全画面モードを終了するには、Esc キーを押します。
サポートとフィードバック：ヘルプにアクセスする場合やフィードバックを送信する場合は、疑問符のアイコンをいつでもクリックできます。
通知：自分に関わるプロトタイプ全体のすべてのアクティビティ/通知を表示するには、ベルアイコンをクリックします。
アカウント設定：ユーザーアカウントの詳細を表示するには、プロファイルアイコンをクリックします。

プロトタイプの操作

共有プロトタイプは、本質的にインタラクティブです。トリガーを使用してプロトタイプを操作できます。タップ、ドラッグ、キーボード、ゲームパッド、音声入力など、デザイナーが定義したトリガーを使用して、トランジション、オーディオ、スピーチ、ビデオ、Lottie 再生などのアクションを実行します。画面下部のナビゲーションコントロールを使用することもできます。

注意事項

プロトタイプリンクのロード画面に、ビデオが自動的に再生されるように設定されている場合、ビデオは常にミュートになります。画面の下部に表示されるメッセージで、「ミュート解除」をクリックします。
[Safari のみ] Safari では、デフォルトでサウンドの自動再生が無効になっています。 XD プロトタイプリンクでサウンドの自動再生を有効にする方法については、Safari でサウンドの自動再生を有効にするを参照してください。 XD プロトタイプリンクの自動再生を有効にすると、今後ビデオのミュートを解除する必要がなくなります。

ビデオが他のインタラクションとどのように連携するかについては、インタラクションとビデオ再生動作についてを参照してください。

ビデオのミュート解除 — 画面の下部にある青いバナーの「ミュート解除」をクリックします。

プロトタイプのナビゲート

プロトタイプの下部にある左右の矢印コントロールボタンをクリックして、プロトタイプのアートボード間を移動できます。「ホーム」をクリックすると、最初のアートボードビューに戻ります。

ブラウザーアプリケーションでコメントをクリックすると、そのコメントに対応するアートボードが画面に表示されます。

ワイヤーを使ったプロトタイプでのユーザーテストのためのより高度に制御された環境を作るために、web プロトタイプでページ割り付けとナビゲーションコントロールを隠すことができます。

これには、XD でリンクを作成するときに、共有／表示設定／カスタム／ナビゲーションコントロールを表示を選択します。詳しくは、プロトタイプの共有を参照してください。

ナビゲーションコントロールの設定：

有効（デフォルト設定）：プロトタイプ web アプリケーションに、ホーム、戻る、次へボタンが表示されます。
無効：プロトタイプ web アプリケーションナビゲーションコントロールとアートボード番号は表示されません。定義済みのホットスポットを使用してプロトタイプを操作し、ホームボタンをクリックして、ホーム画面に移動できます。モバイルでプロトタイプを開いたとき、オンボーディング画面を表示でき、左右の山形は非表示になり、スワイプジェスチャーは無効になっています。

A. ホーム B. ひとつ前のアートボード C. 次のアートボード

プロトタイプフローにワイヤーがある場合は、プロトタイプの公開時にナビゲーションコントロールを表示するように選択できます。

グリッドビュー

関係者やデベロッパーは、プロトタイプやデザインスペックのグリッドビューを使用して、最も適切なアートボードにすばやく簡単に移動できます。

グリッドビューに切り替えるには、共有プロトタイプの右上隅にあるリンク名またはグリッドアイコンをクリックします。

A. グリッドアイコンとリンク名 B. コメントパネルを折りたたむ

グリッドビューでは、次の操作を実行できます。

すべての画面のサムネール表示
特定のアートボードに対するコメント数の表示
特定のアートボードを名前で検索
リンクされた画面アイコンをクリックして、特定のアートボードにリンクされたすべての画面を表示

A. アートボードに対するコメント数 B. リンクされた画面のアイコンをクリックすると、リンクされた画面が表示されます C. アートボード「First Cards」にリンクされた画面

コメントの追加

プロトタイプをレビューし、共有プロトタイプにコメントを追加することで、デザイナーとフィードバックを共有できます。プロトタイプリンクは新しいコメントの追加により常にアップデートされた状態になります。

前提条件

最初のインスタンスでログインせずに、公開中のデザインとプロトタイプにコメントできます。

Adobe ID を使用してログインしたり、ゲストとしてコメントしたりできます。ゲストとしてログインするには、パネルの上部にある「ゲストとしてログイン」をクリックします。名前の入力を求めるメッセージが表示されたら、名前を入力し、CAPTCHA コードを入力します。

コメントは、「コメントの作成」セクションで入力できます。 Enter キーまたは Shift+Enter キーを押してコメントボックスに新しい行を作成し、Ctrl / Command+Enter キーを押して追加したコメントを送信します。
コメントを追加した後は、コメントスレッドの横にあるオプションを選択して、コメントを「解決」、「編集」、および「削除」できます。ただし、他のユーザーが追加したコメントは、編集または削除できません。
コメントパネルの左下にある「すべてのコメント」トグルボタンを使用して、複数のアートボードにわたって追加されたコメントをシングルビューで一覧表示します。 トグルは、公開されているデザインスペックまたはプロトタイプリンクではデフォルトでオンになっています。
注釈やピンを非表示にするにはクリックし、アイコンを使用してレビュー担当者名、時間、またはコメントのステータスに基づいてコメントをフィルタリングします{2}。
左の青いハイライトは、現在のアートボードに対するコメントを示します。現在のアートボードのものではないコメントセットをクリックすると、そのアートボードに移動してコンテキストを最初に設定できます。
コメントパネルの右上隅の通知アイコンの上の 3 という数字は、複数のアートボードにわたる未解決のコメントを示します。

A. 招待オプション B. ズーム設定 C. フルスクリーンモード D. サポートとフィードバック E. 通知 F. ユーザープロフィール G. コメントのメニューオプション H. コメントのフィルター I. 注釈を非表示 J. 「すべてのコメント」トグルボタン

A. コメントのフィルター（レビュー担当者別） B. コメントのフィルター（時間別） C. コメントのフィルター（ステータス別） D. 追加したフィルターのクリア E. 追加されたフィルターの表示

共有プロトタイプの一部であるアニメーションや記録を再生したり、再生時にコメントを追加したりすることもできます。
コメントの追加時に @mention を使用して、プロトタイプ上の他のレビュー担当者の一覧を表示できます。このオプションを使用した場合、他のレビュー担当者は、メールで通知を受け取るか、Creative Cloud デスクトップアプリケーションから通知を受け取ります。通知がクリックされると、レビュー担当者は参照先のアートボードに転送されます。

アートボードを XD で削除すると、アートボードへの web 上のコメントが利用できなくなります。