マニュアル キャンセル

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

  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 で共有プロトタイプを使用する方法について説明します。

プロトタイプ

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

 

コメント機能
コメント機能

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

コメントのフィルター
コメントのフィルター

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

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

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

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

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

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

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

    ナビゲーションを取得するにはピンチします

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

    コメントパネル

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

    ピンマーカー

アドビのロゴ

アカウントにログイン