XD でプロトタイプを使用する方法について説明します。
Working-with-prototype

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

プロトタイプを使用する前提条件

レビュー担当者は、プロトタイプにコメントするには、Adobe ID を使用してログインする必要があります。エンタープライズユーザーである場合は、アカウント管理者に問い合わせて、権限と資格情報を提供してもらいます。

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

ゲストとしてログインし、コメントし、(ブラウザーの終了または更新により)セッションを終了し、再度ゲストとしてログインした場合、以前のコメントに対する権限はありません。一方、Adobe ID を使用してログインした場合は、以前のコメントを編集できます。

プロトタイプに関連する一般的なワークフロー

プロトタイプの操作

  • ブラウザーでレビュー用のプロトタイプを開いた場合、ユーザーのプロフィールアイコンをクリックして、XD の Web アプリケーションヘッダーで自分のプロフィールを表示できます。 
プロトタイプの操作
プロトタイプの操作

A. サポートとフィードバック B. 通知 C. ユーザープロフィール 
  • 自分に関わるプロトタイプ全体のすべてのアクティビティ/通知を表示するには、通知ベルアイコンをクリックします。 
  • ヘルプが必要な場合やフィードバックを送信する場合は、疑問符のアイコンをいつでもクリックできます。
  • プロトタイプの下部にある左右の矢印コントロールボタンをクリックして、プロトタイプのアートボード間を移動できます。ホームをクリックすると、最初のアートボードビューに戻ります。
  • ブラウザーアプリケーションでコメントをクリックすると、そのコメントに対応するアートボードが画面に表示されます。 
  • ワイヤーを使ったプロトタイプでのユーザーテストのためのより高度に制御された環境を作るために、Web プロトタイプでページ割り付けとナビゲーションコントロールを隠すことができます。このためには、XD でリンクを作成するときに、共有プレビュー用に共有ナビゲーションコントロールを表示を選択します。

ナビゲーションコントロールが以下の場合:

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

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

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

コメントの追加

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

デスクトップブラウザーの場合は、次のように操作します。

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

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

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

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

モバイルブラウザーの場合は、次のように操作します。

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

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

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

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

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

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

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