今回の記事では、Adobe XDでデザインを作成した際の共有方法について学びます。
デザインデータは、クライアントや開発者間で共有していく必要があります。
デザインデータの共有方法は案件によって異なる場合があります。
相手がAdobe XDのアプリを持っていないことを想定して、適切な共有方法でデザインのすり合わせを行いましょう。
- Adobe XDでの共有の仕方がわかる
目次
共有モードの表示のさせ方
共有モードを起動する
Adobe XDには３つのモードが用意されています。
- デザインモード：デザインを作成する
- プロトタイプモード：デザイン内の細かい設定を行う
- 共有モード：デザインデータを共有するための設定を行う
XDのアプリ内からデータを共有する際は、画面上部のメニューから「共有」を選択します。
共有モードのままだとデザインの変更はできないので、共有後は「デザインモード」に戻すのを忘れないように気をつけましょう！
リンクを知っているすべての人に共有
Adobe XDのデザインデータは、リンクからデザインデータを共有することができます。
共有モードに変更後、画面右側のパネルでは、以下の項目を変更できます。
- リンクの名前
- 表示設定
- リンクへのアクセス権限
設定ができたら、最後に「リンクを作成」をクリックすると共有のためのリンクが生成されます。
特定の相手のみに共有
Adobe XDのデザインデータは、特定の相手とのみ共有することができます。
「招待されたユーザーのみ」に共有する場合は、人型のアイコンをクリックし招待したい相手のメールアドレスを入力します。
✅注意点
リンクを作成後、デザインデータに何か変更を加えた場合は、 改めて「リンクを更新」をクリックしましょう。
更新をしないままだと、リンクからデザインを確認した際に、 デザインを修正した箇所が反映されないままになってしまいます。
パスワードを設定して共有
共有するリンクにパスワードを設定することができます。
リンクへのアクセスを、「パスワードを知っているユーザーに共有」を選択すると、閲覧時にパスワードの入力が必要になります。
案件などでセキュリティ面を気にする方はパスワードの設定も行いましょう。
デザインレビューの共有
「デザインレビュー」モードでの共有の仕方です。これは最も汎用性が高い共有方法です。
共有の仕方としては、最初に表示設定がデザインレビューになっていることを確認します。
デザインレビューとは：デザインレビューはデザイナーが作成したデザインを共有し、フィードバックをもらうことです。
開発チーム内であったり、クライアントに見てもらうことで方向性や内容の齟齬が起きることを防ぎます。
できたリンクを開くと、上記のような画面になります。
ページ数を切り替えることでアートボードを変えることができます。
実際のようにスクロールして下までデザインを確認することも可能です。
共有された人は、デザインのコメントをつけることができます。
開発モードで共有
続いて、Webなどを実際に開発する段階になったときに、デザインの参照として便利な「開発モード」についてです。
共有されたリンクを開くと、コードなどの情報をを確認することができるようになります。
プレゼンテーションで共有
プレゼンテーションモードは、デザインをクライアントなど他者にプレゼンすることに特化した共有の仕方です。
まず表示設定をプレゼンテーションにし、リンクを更新します。
リンクを開くと、プレビューが全画面に表示されます。
escキーを押すと、上記のような画面に戻ります。
ユーザーテストで共有
ユーザーテストモードで共有した際も、プレゼンテーションのときと同じように表示されます。
動きを見ることができるので、プロトタイプを追加している際に適しています。
カスタムして共有
表示設定をカスタムにした場合は、いくつかの機能を組み合わせて共有ができます。
共有相手に合わせて、必要なものをつけたり、減らしたりできます。
任意のアートボードだけを共有する方法
続いては、選択したアートボードだけを共有したい場合の方法です。
1枚の場合
画面上部のメニューで「プロトタイプ」を選択します。 次に、任意の1枚を選んで、先ほどの共有画面に移ります。
すると共有されるボードが1枚になります。
複数枚の場合
複数のアートボードを共有したい場合は、同じようにプロトタイプにした状態で、選びたいアートボード同士をつなげます。
共有にすると、しっかり2枚だけが選択されていることが確認できます。
ローカルに保存して共有する場合
最後に、リンクではなくパソコン上にファイルとして保存し、共有する方法です。
Adobe XDでは、基本的にクラウド上のファイルとして保存されます。
デザインデータをファイルで送りたい場合は、ローカルドキュメントとしてパソコンに保存する必要があります。
Adobe XDのメニューで「ファイル＞「ローカルドキュメントとして保存」を選択します。
クリックすると保存場所の選択ができ、パソコン上に保存ができます。
まとめ
このように、実はXDにはさまざまな共有方法があります。特にWeb制作においては開発モードが便利なので、ぜひXDデータからのコーディングの際は使用してみてください！
