マニュアル キャンセル

デザインおよびプロトタイプの共有

関係者、開発者、または仲間のデザイナーとデザインやプロトタイプを共有する方法について説明します。

XD の新しい共有モードに搭載された共有機能が一元的な場所に統合され、デザインの共有や、利害関係者および仲間のデザイナーとの共同作業が容易になりました。

デザインレビュー開発、プレゼンテーション、ユーザーテスト、カスタムなどの組み込みのプリセットを使用すると、ドキュメントを共有し、共有リンクを管理できます。

共有

以下では、デザインを共有するために準備し、プリセットを使用して簡単に共有可能なリンクを作成変更共有管理する方法をご紹介します。

デザインを共有する準備

デザインを整理し、適切なコントロールを追加して、関係者と共有することができます。多くの場合、デザインは複数のバージョンが作成され、様々な関係者と共有されます。このようなシナリオでは、複数のフローを使用することで、同じドキュメント内で異なるバージョンのデザインをすべて 1 か所で作成して共有できます。 

ログイン画面、登録画面、プレイリストなど、様々なワークフローが含まれたインターフェイスの設計では、複数フローが最もよく使われます。

例えば、XD でランディングページ、ソーシャルネットワークの投稿、メール、広告をデザインする場合、同じドキュメント内かつ 1 か所で異なるバージョンのデザインを作成して共有できます。

以下では、デザインドキュメントで複数のフローを定義し、それらのドキュメントへの共有可能なリンクを作成する方法を説明します。

複数フローの共有

デザインドキュメントでフローを定義してワイヤー接続した後は、様々なターゲットサーフェス間で共有可能なリンクを使用してフローを共有します。

複数のフローを関係者と共有するには、次の手順に従います。

  1. 共有モードに切り替えます。
  2. ドキュメントに定義されているすべてのフローが共有モードで表示されます。
  3. 定義したフローを共有モードで選択し、必要なアクセス設定を行った後、共有可能リンクとして公開します。
  4. 作成した様々なフローをカンバス上で視覚化します。フローを選択すると、そのフロー内のすべてのアートボードが XD によって自動的にハイライトされます。
  5. リンクを作成」をクリックして、フローの共有可能なリンクを生成します。選択した特定のフローについて、最終更新日時など、最終公開リンクの詳細が共有モードで自動的に表示されます。

公開されているフローは、デザインカンバスで アイコンが表示されます。これにより、最後に公開されたリンクを視覚的に特定し、関連するリンクをクリップボードにすばやく貼り付けることができます。

デザインを準備

A. iOS(iPhone)フローのホームアートボード B. 公開されたフローをコピーするアイコン C. iPhone のワイヤー接続されていないアートボード D. iPad のフロー名 

XD 57 では、アドビは XD のカラーマネジメント機能を改善し、関係者に一貫したカラーレンディションを提供できるようにしました。これを実現するには、ドキュメントのカラープロファイルを sRGB に切り替えます。管理されていないカラープロファイルを持つドキュメントから選択したアートボードを共有しようとすると、関係者の作業時に生じる可能性のあるカラーの不一致について通知するメッセージが表示されます。詳しくは、カラーマネジメントを参照してください。

プリセットの操作

XD では、デザインの共有可能なリンクを簡単に作成するためのシナリオベースのプリセットが用意されています。例えば、レビュー用のデザインリンクを作成する場合、用意されているプリセットの中から要件に合ったものを選択するだけで、リンクのアクセス権限を設定して、関係者と共有できます。コメントオプションやナビゲーションコントロールの面倒な設定を行う必要はありません。

組み込みプリセットを使用して、リンクアクセス権の設定、デザインまたはプロトタイプのレビューリンクを更新または管理する方法についての説明をお読みください。

デザインレビュー 開発 プレゼンテーション ユーザーテスト カスタム
デザインやプロトタイプに関するフィードバックを収集する 開発者とデザインスペックを共有 デザインを利害関係者に提示するために最適化する ユーザーを招待してデザインをテストする デザインの視聴体験をカスタマイズ
プリセットのデフォルト設定
  • コメント
  • ホットスポットのヒント
  • ナビゲーション
    コントロール
  • コメント
  • ホットスポットのヒント
  • ナビゲーション
    コントロール
  • デザインスペック
  • ホットスポットのヒント
  • ナビゲーション
    コントロール
  • フルスクリーン

  • フルスクリーン
  • コメント
  • ホットスポットのヒント
  • ナビゲーション
    コントロール
  • フルスクリーン
  • デザインスペック

または、アートボードが設定され、ワイヤー接続されたら、次のいずれかを選択できます。

  • 単一のアートボードを共有:これには、プロトタイプモードでアートボードを選択し、それをホームアートボードに設定します。他のアートボードとのインタラクションは必ず削除してください。
  • すべてのアートボードを共有:プロトタイプモードでアートボートを選択します。共有する前に、すべてのアートボードがホームアートボードに接続されていることを確認してください。

アートボードとインタラクションフロープロトタイプモードで定義した後は、デザインスペックまたはプロトタイプを共有できます。定義されたインタラクションフローのタイトルが、タイトルパネルに表示されます。デザインのニーズに応じてタイトルを変更できます。

表示設定」ドロップダウンで、いずれかのプリセットを選択し、リンクアクセス権限を設定してデザインスペックまたはプロトタイプを共有します。「リンクを作成」をクリックします。URL がリンク設定パネルに表示されます。

共有可能なデザインスペックとプロトタイプに対するリンクアクセス権限を設定するには、公開リンク、非公開リンク、またはパスワードリンクを使用します。

プロトタイプまたはデザインスペックを共有するとき、公開リンクまたは安全な非公開リンクを発行することを選択しても、任意の時点でアクセス設定を相互に変更することができます。 

リンクアクセス許可の設定
リンクアクセス権限の設定

リンクアクセス設定を公開から非公開に、または非公開から公開に変更する場合:

  • リンク URL は同じままです。
  • リンクに追加された招待者は保持されます。

パスワードリンクの発行後は、リンクアクセス設定を変更できません。アクセス設定を変更する場合は、新しいリンクを作成する必要があります。

いいえ、XD ドキュメントの新しいリンクを作成する必要はありません。デザインまたはプリセットを変更すると、レビュー用に共有した既存のリンクを更新できます。

例 1:プロトタイプ内に複数フローを作成してレビュー用に共有した場合、作成したすべてのリンクが URL ピッカーに表示されます。「リンクを更新」をクリックして、更新するリンクを選択できます。

リンクを更新

例 2 - プロトタイプリンクを作成してフィードバック用に共有し、そのプロトタイプを開発者と共有する場合は、表示設定に移動し、開発に切り替えて「リンクを更新」をクリックします。

プリセットを変更

リンクを更新すると、以前のコメント、変更、会話を維持しながら、最新のプリセット情報を使って同じ URL が更新されます。

XD ドキュメントの公開されたリンクを管理するには、XD からリンクを管理 Web サイトに移動します。

リンクを管理

2. Creative Cloud の Web サイトから、公開されたリンクをコピーまたは削除できます。

1. URL ピッカーから「リンクの管理」を選択します。

エンドツーエンドの共有ワークフロー体験

デザイナーは、利用可能なサンプルプリセットのいずれかを使用して、デザイン内またはプロトタイプ内でフローを共有するとともに、さらに再共有するための権限を設定できます。レビュー担当者は、セキュリティで保護された非公開リンクへのアクセスまたは表示について、他のレビュー担当者からのリクエストを追加、削除、または許可できます。
レビュー用にデザインを共有する方法、およびレビュー担当者がデザインやプロトタイプをさらに再共有できるように設定する方法については、このサンプルアニメーションをご覧ください。

デザイナーのワークフロー

レビュー担当者は、メールから招待されたレビューにアクセスし、共有されたデザインやプロトタイプについてコメントを提供できます。

レビューの招待にアクセスして共有デザインにコメントする方法については、このアニメーションをご覧ください。

レビュー担当者

詳細情報

XD のプロトタイプについて詳しくは、以下のビデオをご覧ください。
視聴時間:5 分

次のステップ

利害関係者とデザインおよびプロトタイプの共有を開始しました。さらに一歩踏み込んで、プロトタイプおよびデザインスペックにコメントする方法について説明します。

ご質問または共有するアイデアがある場合

1

デザインやプロトタイプを共有する際に問題が発生しましたか?この記事で解決方法をご確認ください。

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

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

新規ユーザーの場合