マニュアル キャンセル

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

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    5. ワークスペースの基本
    6. Adobe XD でのアプリ言語の変更
    7. UI デザインキットへのアクセス
    8. Adobe XD のアクセシビリティ
    9. ショートカットキー
    10. ヒントとテクニック
    11. Adobe XD サブスクリプションオプション
    12. XD スタータープランへの変更
  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. エンタープライズ版のグループ共有
  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. 書き出しに表示されないサードパーティ製品

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

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

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

共有

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

デザインを共有する準備

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

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

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

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

複数フローの共有

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

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

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

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

デザインを準備

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

プリセットの操作

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

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

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

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

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

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

デザインスペックやプロトタイプを共有するには

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

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

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

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

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

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

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

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

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

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

リンクを更新

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

プリセットを変更

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

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

リンクを管理

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

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

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

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

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

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

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

レビュー担当者

ビデオ:XD の新しい共有エクスペリエンスの使用

「アイデアを Adobe XD に伝える方法はたくさんあります。プロトタイプの流れの提示から、利害関係者のレビューの編成、または開発者のハンドオフの一部として仕様を最終的に提供するまで、あらゆるものがあります。これらのすべての機能を簡単に操作できるように、新しい共有エクスペリエンスに移行し、機能を拡張しました」— Dani Beaumont、主席プロダクトマネージャー XD

次のステップ

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

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

1

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

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

アドビのロゴ

アカウントにログイン