XDの共有機能を徹底理解する
冬のSALEという名前に惹かれ、服やら雑貨を爆買いしてしまって、カードの引き落としが怖いです。
ということで（？）今回はAdobe XDについて触れていきたいと思います。
XDとは
“Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。(公式サイトより)”
現在進化し続けているXDですが機能を大きくまとめると、
- ワイヤーフレーム、デザインカンプの作成
- プロトタイプ（画面遷移）の設定
- 共有、コメント
となっていますが、今回は3つ目の共有、コメントについてお話しします。
私は基本的に一人でデザインをし、制作までしているんですが、
これから進んでいく案件でUI / UXについて他のメンバーとの共有がとてつもなく重要（というか必須）になってくるので、
これを機にXDの共有機能について、こんなに便利なんだ！と実感していただければと思います。
修正内容を一括で管理
ところで、修正内容がテキストファイルなどの別ファイルなどにまとめられていて、「行方不明…どこいった。」「この修正どこのこと言ってんの？」
となったことありませんか？
それを一気に解決してくれるのが、共有とコメント機能。
共有
共有はURLひとつで可能なので、XDをインストールしていない人に対しても簡単に共有することができます。
XDの制作画面の右上の共有をクリックすると共有の操作ができます。
プレビュー用に共有と開発用に共有の2種類があり、この二つの特徴と違いについては後ほど触れていきます。
コメント
共有されたものに対し、閲覧者がコメントを残せる機能です。ピン留機能もあるので、どこに対してコメントしているのかも視覚化されています。
コメントに対し、返信ができたり、解決済み・未解決の分別も可能です。
共有の種類
先ほど記述したように、共有にはプレビュー用に共有と開発用に共有の2つがあります。
両方とも、コメント機能は備わっていて、URLで簡単に共有できます。
デザインを確認するための共有でコメントもできる。じゃあなにが違うの？
ということで、簡単に違いを説明します。
プレビュー用に共有
この共有は、デザインの他に画面遷移を共有できます。
XD製作者がプロトタイプを設定していることが前提条件になりますが、設定されていなくても画面の共有自体は可能です。画面遷移のボタンになっている部分がわからなくなってしまっても、何もないところをクリックすると光るので、すぐに見つけることもできます。
プレビュー用に共有のリンクを設定するときには、パスワード設定も可能です。その時に、「コメントを許可」にチェックをいれないと、閲覧者がコメントできなくなるので注意が必要です。（デフォルトではチェックが入っています。）
開発用に共有
デザインの仕様をWEBで公開できる共有機能です。
レイアウト、カラー、文字スタイルなどを検証することができる上、コピーが可能なので実際に組んでいくときにとても楽！エンジニアに優しい機能ですね。
リンクを管理
どちらの共有でも、いくつもリンクを作成することができます。コメントはリンクごとに管理されています。
これらのリンクは「リンクを管理」から一覧でき、管理できます。
まとめ
少しお恥ずかしい話になるのですが、私がこんなに便利なXDの共有機能を理解しきっていなかった時、
発生していた確認フレーズの作業としては、打ち合わせの時にXDファイル実際に開いて、アートボード付近に直接修正や要望を書き込むという作業でした。
デザインの邪魔になるし、見栄えも悪い…。それに加えて、私が入力してるタイミングで確認作業がいちいち止まるという事に。最悪ですね〜
XDのいいところを半分くらい潰してます。
XDからリンクの更新をクリックすれば、共有したリンクも簡単に最新のものに更新できるので、わざわざファイルを送り直すということもいりません。
社内での共有でも十分機能しますが、クライアント先などの遠隔の相手にもかなり有効になるんじゃないかなと思います。
