8/30〜|ライターのダイチが運営している個人メディア「ダイブログ」とPENGIN BLOGを統合しました

【超便利】AdobeXDのデータ共有方法を徹底解説!(エラー対処法もご紹介)

みなさんはどのようにして、クライアントや制作メンバーにデザインデータを共有していますか??

「デザインは出来たけど、クライアントへの共有はどうすれば良いの?」
「もっと効率よくフィードバックって出来ないのかな?」
「コーダーとのやり取りが上手くできない、ミスが多い…!」

いざ、だれかに共有するタイミングでいろんな迷いが生じますよね。

そんなお悩みの方にオススメなのがXDの共有機能!

この記事ではXDでのデータ共有方法について詳しく解説していきます。

読み終える頃には【デザインデータを適切な方法で迷わず共有することができる】ようになりますよ!

共有前の「プロトタイプ作成方法」はこちらの記事で解説しています!

【徹底解説】XDでアニメーション付きプロトタイプを作ってみよう!

これからデザイン制作の仕事を始める方、チームで制作し始めた方にオススメの内容です!

AdobeXDの共有機能=他ツールより優れている

デザインツールはいくつかありますが、他人とデータを共有するならXDがオススメです。PhotoshopやIllustratorにはない3つのメリットをご紹介します。

ワンクリックで共有URLの発行が可能

XDにはデザイン確認用URLが簡単に発行できる機能があり、これがワンクリックで作成可能なんです。

生データを送り合わなくてもチェックできてしまうのは、送りて・受け手双方の負担が減りますよね!

「公開リンク」「非公開リンク」「パスワードリンク」などセキュリティレベルも調整できます。

デザインフィードバックも可能

デザイン内にコメントを自由にマッピングして記録することができます(メンションをつけることもできます)

コメント機能

コーダー用のデザインカンプとして渡すことも可能

XDファイルで共有
アプリ上で開く。コーダー(共有された側)もデザインを編集することが可能。
URLカンプを共有
ブラウザ上で開く。ソフトなしでも確認可能。コーダー(共有された側)は編集不可。

上の通り共有形式は2種類ありますが、URL共有でもコーディングに必要なデータの取得は可能。

URL共有であればコーディング作業時にデザインが崩れるリスクを避けることもできます!

AdobeXDでの共有方法

リンク共有の基本画面

XD共有で抑えておきたい基本はこの3点のみ!

  • リンク発行は、「共有」タブ→【リンク作成】ボタンをクリック
  • 他人と共有中のデータを修正しても、【リンクを更新】ボタンでデータリンクは自動更新される
  • webページに埋め込みたい場合、iframeのコードアイコンをクリックすればコードのコピーが可能

次から選択できる設定項目について触れていきます。

表示設定

表示設定項目

新規リンクを作成する際、表示設定を行います。5つの項目「デザインレビュー」「開発」「プレゼンテーション」「ユーザーテスト」「カスタム」から選択します。

デザインレビュー

デザインレビュー
【デザインレビュー】で共有された画面

作成しているデザインとフードバックコメントが表示されます。

  • クライアントに見せる、確認してもらう
  • デザインのフィードバックを収集したい

デザイン作成段階で表示させることが多いです。

開発

開発
【開発】で共有された画面

開発者(コーダーなど)に渡す場合に選びます。

共有された側(開発者)はデータ自体を編集できません。

コーディングの際に必要なデザインスペック(タイポグラフィやオブジェクトのサイズなどの細かい設定)が表示されるのはこの表示だけなのでご注意を。

↓↓ さらに詳細な作業フロー実践的なテクニックを知りたい方は、以下の記事を参考にしてみてください!実務に役立つポイントがまとまっています!

【保存版】AdobeXDからのコーディング方法を徹底解説!【初心者必見】

プレゼンテーション

プレゼンテーション
【プレゼンテーション】で共有された画面

フルスクリーンで共有されるシンプルな共有設定のため、クライアントやプロジェクト関係者にデザインをプレゼンテーションする際に使われます。

他にも「ホットスポットのヒント」や「ナビゲーションコントロール」といったデフォルト機能があり、デザイン全体を確認するのに適しています。

補足
  • ホットスポットのヒント:画面の適当な箇所をクリックすると、クリックで操作可能な領域を表示
  • ナビゲーションコントロール:「ホーム画面へ」、「戻る」、「次へ」のボタン表示

ユーザーテスト

コメントなどの補足情報は表示されず、実際のサイト表示のようにフルスクリーンでデザインが表示されます。

ユーザーの感覚をテストするのに最も適している表示設定です。

カスタム

カスタム
共有する際のカスタム設定画面

共有する相手や目的によって使いやすい仕様に変更することができる表示です。

下記の項目に✔を入れることで、デザインの視聴体験をカスタマイズできます。

  • コメント機能
  • ホットスポットのヒントを表示
  • フルスクリーン
  • デザインスペック(コーダー向けのデザイン詳細情報)

共有の公開範囲

「リンクのアクセス」からは共有される公開範囲を設定できます。

リンクの作成方法
リンクのアクセス

リンクを知っているすべてのユーザー

知っていれば誰でもアクセスができる、保護されていない状態です。

▼設定方法
  1. 「共有」タブをクリック
  2. リンクへのアクセス「リンクを知っているすべてのユーザー」を選択
  3. 【リンクを作成】ボタンでリンク発行

招待されたユーザーのみ

招待されたユーザーのみへの共有方法

招待された人のみがアクセスできるよう、セキュリティで保護された非公開リンクの作成ができます。

▼設定方法
  1. リンクへのアクセス「招待されたユーザーのみ」を選択
  2. 【リンクを作成】ボタンでリンク発行
  3. アイコンをクリックし、共有者(メールアドレスまたはアカウント)を追加
  4. 【招待】ボタンをクリック

共有者の権限(閲覧のみ、共有可能)も設定することができます。

  • 閲覧のみ」:共有者が「コメントの表示、追加」が可能
  • 共有可能」:レビュー担当者がデザインスペックの再共有が可能。権限リクエストの編集もできます。

パスワードを知っているユーザー

パスワードリンクの発行方法

パスワードを知っている関係者だけが共有データにアクセスできるようになります。

▼設定方法
  1. リンクへのアクセス「パスワードを知っているユーザー」を選択
  2. 任意のパスワードを設定
  3. 【リンクを作成】ボタンでリンク発行

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

アートボードを選択して共有

任意のアートボードを選択して共有することもできます。

▼共有方法
  1. 「プロトタイプ」タブで、任意のアートボードをクリック
  2. 【ホームマーク】をクリックしてONにする
  3. 「共有」タブでアートボードが選択されているか確認し、リンク発行(更新)
任意のアートボードを選択

「プロトタイプ」タブで、任意のアートボードをクリックし、【ホームマーク】を表示させてクリックします。

任意のアートボードのみリンク発行

「共有」タブで、任意のアートボードが選択(色濃く表示)されているので、【リンクを作成】ボタンで発行しましょう。

データの更新履歴確認方法

「ドキュメント履歴」機能により、クラウドドキュメント上で保存履歴を参照することができます。

ドキュメント履歴の説明

時刻と日付のスタンプに基づいて名前が付けられ、定期的に自動保存されます。この1つ1つのスタンプで保存されたデータをバージョンと呼びます。

この自動保存されたバージョンは、30日後に期限切れとなります。

永続的に保存したい場合は、ブックマークブックマークボタン)をクリックして保護しましょう。

バージョンに名前をつけることも可能です。

▼名前を付ける方法
  1. バージョン名の横「・・・」→「このバージョンに名前を付ける」をクリック
    または 日時スタンプをダブルクリック
  2. チェックマーク✔をクリック で保存

また、バージョン情報は以前の状態に復帰することはできません。(常に最新の状態)

バージョンを開いてコンテンツをコピーし、現在のバージョンに貼り付けることはできます。

共有リンクの削除方法

発行したリンクは削除することができます。

▼削除方法
  1. アプリ左画面「リンクを管理」を選択
  2. ブラウザ上に「Creative Cloud」サイトが表示されたら、削除したいデータにカーソルを移動
  3. サムネイルの下に表示される「・・・」アイコンをクリック
  4. 「完全に削除」を選択

↓ブラウザで「Creative Cloud」サイト「公開用のアイテム」タブで、「・・・」をクリックして削除しましょう。

リンクの削除

URLが共有できない場合

共有時によくあるエラー内容エラーコードについても説明します。

エラーコード 44:xx

Adobe Creative Cloud にアップロードできなかった場合に出るエラーです。

  • 接続したい端末のネットワーク状況が悪い
  • 極端に大きいアードボードを共有しようとしている

原因となるパターンは主に上の2点。

接続のネットワークに問題なければ、出力のビットマップサイズが制限を超えていないか確認が必要です。

書出し可能な最大サイズは 64,000,000なので、例えばアートボードのサイズ(幅 x 高さ)が 8,000 x 8,000 = 64,000,000 を超える場合はエラーとなります。

アートボードの幅と高さの組み合わせが上限内に収まるようにしましょう!

エラーコード 55:xx

Creative Cloud」で保存しているプロトタイプを共有している場合に出るエラーです。

例えば共有元のプロトタイプを削除した後、 XDファイルで更新ボタンをクリックするとエラーが発生します。

この場合、XDのボードから「新しいリンク」を発行してから共有するようにしましょう。

エラーコード 4005

Adobe ID(メールアドレス)の確認を行っていない場合エラーが発生します。

アドビから確認用メールが届いているかどうか、確認してみましょう。

それでも解決出来ない場合は、以下のAdobe公式サイトを確認してみてください。エラー内容ごとに問合せ先も記載されています。

>>【Adobe XDマニュアル】公開ワークフローの問題と解決策はこちら

(注意)無料プランは発行可能な共有リンクが1つだけ

XDには無料プランも含め3種類のプランがあります。

XDのプラン比較
引用:XDの個人向け価格 | 無料スタータープランの情報 | Adobe XD

無料プランだとリンク作成数に制限があります。

同時に複数プロジェクトを作業する場合、有料プランをオススメします。

まとめ

今回は「XDでのデザインデータ共有方法」についてご紹介しました。

数クリックで簡単に共有できるので簡単ですね!

適切な使い方さえ理解できれば、ストレスなく情報共有することができます。

当記事で紹介した方法を抑えて、正しい情報共有ができるデザイナーを目指して頑張りましょう!