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

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

プロトタイプワークフロー

プロトタイプの操作

共有プロトタイプは、本質的にインタラクティブです。レビュー担当者は、下部のナビゲーションコントロールをタップしてプロトタイプを操作したり、ドラッグ、トランジション、オーディオ、音声再生などの操作を実行してシミュレーションを行ったりできます。

  • ブラウザーでレビュー用のプロトタイプリンクを開いた場合、ユーザーのプロフィールアイコンをクリックして、XD の Web アプリケーションヘッダーでユーザーアカウントの詳細を表示できます。 
プロトタイプの操作
A. ユーザープロフィール B. 通知 C. サポートとフィードバック D. フルスクリーンモード E. ズーム設定 
  • 自分に関わるプロトタイプ全体のすべてのアクティビティ/通知を表示するには、通知ベルアイコンをクリックします。 
  • ヘルプにアクセスする場合やフィードバックを送信する場合は、疑問符のアイコンをいつでもクリックできます。
  • 共有プロトタイプをズームインまたはズームアウトするには、「ズーム」設定を使用します。必要に応じて、あらかじめ定義されたズーム増分(25%、50%、75%、100%、150%、200%)から選択できます。または、タッチパッドでピンチズームジェスチャを使用するか、Cmd/Ctrl キーを押しながらマウスホイールを使用して小さい増分でスクロールします。
  • 共有リンクの場合、開く既定のズームレベルは前と同じです。
  • プロトタイプの下部にある左右の矢印コントロールボタンをクリックして、プロトタイプのアートボード間を移動できます。「ホーム」をクリックすると、最初のアートボードビューに戻ります。
  • ブラウザーアプリケーションでコメントをクリックすると、そのコメントに対応するアートボードが画面に表示されます。 
  • ワイヤーを使ったプロトタイプでのユーザーテストのためのより高度に制御された環境を作るために、Web プロトタイプでページ割り付けとナビゲーションコントロールを隠すことができます。

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

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

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

A. ホーム B. ひとつ前のアートボード C. 次のアートボード 
ナビゲーションコントロールが無効の場合
ナビゲーションコントロールが無効の場合

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

グリッドビュー

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

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

テスト
A. グリッドアイコンとリンク名 B. 名前で画面を検索 C. コメントパネルを折りたたむ 

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

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

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

コメントの追加

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

前提条件

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

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

  • Adobe XD のすべての画面コメントの表示機能を使用すると、プロトタイプでの関係者からのフィードバックの管理がさらに簡単になります。コメントパネルの左下の「すべての画面のコメント」トグルボタンを使用して、複数のアートボードにわたって追加されたコメントをシングルビューで一覧表示します。  トグルは、公開されているデザインスペックまたはプロトタイプリンクではデフォルトでオンになっています。
  • 左の青いハイライトは、現在のアートボードに対するコメントを示します。現在のアートボードのものではないコメントセットをクリックすると、そのアートボードに移動してコンテキストを最初に設定できます。 
  • コメントパネルの右上隅の通知アイコンの上の 3 という数字は、複数のアートボードにわたる未解決のコメントを示します。
コメント機能
コメント機能

A. コメントの追加 B. コメントの表示 C. 現在のアートボードのコメント D. 「すべてのコメント」トグルボタン E. コメントのフィルター 
  • 1 つのリスト内のすべてのコメントを表示し、各コメントをクリックして、影響するアートボードに直接移動してコメントを返信、解決、または削除できます。
  • フィルターアイコンを使用して、レビュー担当者の名前、時間、またはコメントのステータスに基づいて、コメントをフィルターすることができます。 
コメントのフィルター
コメントのフィルター

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

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

詳細はプロトタイプをレビューを参照してください。 

Android または iOS モバイルデバイスで、モバイルブラウザーを縦向きモードで使用して、共有プロトタイプにコメントを追加するには、次の手順に従います。

  1. モバイルブラウザーで共有プロトタイプを開き、ピンチジェスチャーを使用してナビゲーションモードを開きます。

    そのプロトタイプに対するコメントの数とともにコメントアイコンが表示されます。このコメントアイコンは、所有者がプロトタイプに対してコメントオプションを有効にしている場合にのみ表示されます。 

    ナビゲーションを取得するにはピンチします
  2. コメントパネルを表示するには、コメントアイコンをタップします。このパネルでは、コメントを追加したり、既存のコメントを削除または編集したり、コメントを固定したりできます。 

    コメントパネル
  3. ピンアイコンをタップしてから、画面上の任意の場所をタップしてピンマーカーを配置します。コメントとピンを確定するには、コメントを入力し、紙飛行機のアイコンをタップします。 

    ピンマーカー