design
岩瀬 莉奈

2020.6.1デザイン 

Webデザイナー

岩瀬 莉奈

【Adobe XD】任意のアートボードをURLで共有する方法

こんにちは!デザイナーの岩瀬です。

前回、AdobeXDのプラグインを色々追加したことで、ここ最近かなり業務が快適になりました。
(前回の記事→ 【Adobe XD】便利だと言われているプラグインを追加して使ってみた

今回は、AdobeXDの「共有」機能を使用し、様々なURL共有の仕方、任意のアートボードのみを共有する方法を
書いていきたいと思いますので、参考になれば嬉しいです!
(現時点でのXDのバージョンは29.0.32になります。)

まず初めに、デザインレビュー表示で共有する方法です。私は一番よく使います。
01 共有タブをクリックします。共有されるアートボードが青枠で表示されます。
02
表示設定を【デザインレビュー】、リンクへのアクセスを【リンクを知っているすべてのユーザー】、もしくは【招待されたユーザーのみ】を選択します。
【リンクを知っているすべてのユーザー】を選択した場合、8桁のパスワードをかけられます(大文字・小文字・数字を含む)。
【招待されたユーザーのみ】を選択した場合、招待の送り先のメールアドレスを聞かれます。こちらはパスワード不要です。
最後に「リンクを作成」をクリックします。
03 リンクが作成されると、リンク設定の部分に青くURLが表示されます。
このURLをコピーして、共有したい相手に送りましょう。
04 URLが送られた相手は、パスワードを入力すると、画像のような画面が表示されます。

開発で共有

05 続いて、開発表示で共有してみます。
表示設定を【開発】にして、「リンクを更新」をクリックします。
06 URLが送られた相手は、パスワードを入力すると、画像のような画面が表示されます。
細かい情報が見られるようになりました。

プレゼンテーションで共有

08 続いて、プレゼンテーション表示で共有してみます。
表示設定を【プレゼンテーションで】にして、「リンクを更新」をクリックします。
07 URLが送られた相手は、パスワードを入力すると、画像のような画面が表示されます。
アートボードが白すぎて分かりにくいですが、画面の中央にフルスクリーンで表示されています。

ユーザーテストで共有

09 続いて、ユーザーテスト表示で共有してみます。
表示設定を【ユーザーテスト】にして、「リンクを更新」をクリックします。
07 URLが送られた相手は、パスワードを入力すると、画像のような画面が表示されます。
プレゼンテーション表示と同じように、フルスクリーンで表示されます。
escキーを押すことで、フルスクリーンを解除することができます。
10 フルスクリーンを解除すると、ページ送りの数字は表示されず、ホームアイコンのみ表示されます。
プロトタイプで動きを付けた場合、動きを再生後、ホームアイコンをクリックすることで、TOPに戻ることができます。

任意のアートボードのみを共有

続いて、任意のアートボードのみを共有をする方法を説明していきます。
11 まずは、複数のアートボードの中から、1枚だけを共有する方法です。
プロトタイプタブを選択し、表示させたいアートボードに、クリックでホームマークを付けます。
12 共有タブをクリックすると、アートボードが1枚だけ選択されていることが分かります。
リンクを更新し共有すると、青枠のアートボードだけが表示されます。
13 続いて、任意の複数のアートボードを共有する方法です。
プロトタイプタブを選択し、1枚目に表示させたいアートボードに、クリックでホームマークを付けます。
その後、共有したいアートボード同士を順番に繋げていきます。
14 共有タブをクリックすると、アートボードが2枚だけ選択されていることが分かります。
リンクを更新し共有すると、青枠のアートボードだけが表示されます。
参考になりましたでしょうか?
最後まで読んでいただきありがとうございました!
現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ