コラム

こんにちは。ここです。

今回はAdobe XDで制作したデータの便利な共有方法についてご紹介します。

これまでカンプやワイヤーフレームを制作する際に、IllustratorやPhotoshopを利用してきた方は多いと思います。これらの場合ですと、クライアントに共有する方法はどれも手間がかかります。クライアントがAdobe製品を利用していない場合、JPGなどで書き出して画像で見せるかPDFファイルを出力して見せるかあるいは紙面で見てもらうしか方法はなかったからです。これらの方法ですと、修正があった場合に同じ作業を何度も繰り返さなければなりません。細かな修正が入るたびに印刷や書き出しを行うのはなるべく避けたいですよね。

これらの煩雑な作業を省略するのに便利なのが「Adobe XD」です。Adobe XDにはURLを生成しそのURLにアクセスするとデータを閲覧することができる機能があります。この機能により、デザイナーからクライアントまで誰もが書き出しなどの手順を経ずにデザインを確認することが可能になりました。詳しい操作方法を次から見ていきましょう。

便利な共有機能

XDデータを開くと、左上にタブが出現します。その一番右に位置する「共有」をクリックします。すると共有のために画面に切り替わり、右側にURLの設定をする設定画面が現れます。

・リンク・・・・・・・・新規で作成する場合は「新規リンク」を選択します。
・表示設定・・・・・・・後述する五つのカテゴリから適したものを選択します。
・リンクへのアクセス・・アクセス範囲を設定します。

まずは「リンク」です。
前述のように新規の場合は「新規リンク」を設定します。ですが、どんどん作っていくうちに増えたリンクを整理しなければならない場面もあると思います。その際に「リンクを管理」を選択するとこれまでに制作したリンクが一覧となってみることができます。

次に「表示設定」です。「デザインレビュー」「開発」「プレゼンテーション」「ユーザーテスト」「カスタム」の五つのカテゴリがあります。

「デザインレビュー」
最も多く使用されている設定です。どの設定にするか迷った場合はこれにしてください。

「開発」
「開発」は「デザインレビュー」とは異なり、コーディングの際に必要な情報、フォントや色やオブジェクトのpx数などデザインデータの細かい部分まで表示します。

「プレゼンテーション」
その名の通り、プレゼンに特化したデザインです。コメントなどの機能は省略されていてシンプルな共有設定です。常にフルスクリーンで共有されるのでプレゼンテーションの際は最適です。
「ユーザーテスト」
「ユーザーテスト」はユーザーを招待してデザインをテストするための設定です。「プレゼンテーション」以上にシンプルな作りになっていて、フルスクリーンで表示するだけになります。実際の使用感がわかります。

「カスタム」
「カスタム」はこれらの機能をカスタムできる設定です。コメントを許可したりなどユーザーの使いやすい仕様にすることができます。

最後に「リンクへのアクセス」です。「リンクを知っているすべてのユーザー」「招待されたユーザーのみ」「パスワードを知っているユーザー」の中から誰にアクセスを許可するのかを設定します。XDによって生成されるURLは複雑ですので、安易に漏洩することはないですが、必要に応じてパスワードを設定することも可能です。「パスワードを知っているユーザー」を選択し、パスワードを設定してリンクを作成するとパスワードによって保護することができます。

修正を反映するには？

ここまでで、URLの作成、共有ができたと思います。それでは修正した後のリンクの変更はどうするのでしょうか？
答えはいたって簡単です。既にリンクが用意されたXDデータを編集し、共有のタブを選択するとリンク設定の「リンクを作成」のボタンが「リンクを更新」に変わっています。そこをワンクリックするだけでデータの更新が完了します！

まとめ

以上、XDのデータ共有についてお話してきました。XDはほかにも便利な機能満載ですので機会があればまた説明できればと思います。

最後までお付き合いありがとうございました。少しでもお役に立てれば嬉しいです。