Adobe XDをもっと使いこなすヒント! 第29回 デザインをレビューのために公開する

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、デザインを共有するときの操作手順に関する7つのツイートを取り上げます。

Tip 1. レビュー用に公開URLを生成する

XDで作成したプロトタイプはWebにパブリッシュできるため、ブラウザが使える環境さえ手元にあれば、デザインやフローの確認が行えます。これにより、離れた場所にいるチームメンバーやクライアントに対しても、レビューを依頼することが可能です。

プロトタイプ共有のためのURLを生成するには、画面右上の「共有」ボタンをクリックして、「プレビュー用に共有」を選択します。パネルが開いたら「リンクを作成」ボタンをクリックすると共有リンクが作成されます。

Tip 2. 生成されたリンクを任意のWebページに埋め込む

生成されたリンクを任意のWebページに埋め込んで表示することが可能です。リンクが生成されたら、パネル上部にある「</>」アイコンをクリックすると、埋め込み用のコードをクリップボードにコピーできます。

上のビデオは英語ですが、「コードコピー完了」のメッセージが表示されたら目的のコードのコピーは成功です。ちなみに、コピーされるのは以下のようなコードです。

<iframe width="768" height="1120"
 src="https://xd.adobe.com/embed/../"
 frameborder="0" allowfullscreen>
</iframe>

Tip 3. 生成されたURLをコピーする

埋め込み用のコードではなくURLだけコピーしたい場合は、パネル上部の中央のアイコンをクリックします。そのままメール等で関係者に送れば、レビューを開始することができます。

リンク送信の前に、共有したデザインを確認しておきたい場合は、パネル上部の右端のアイコンをクリックすると、新しくブラウザのウインドウが開き、その中に共有されたデザインが表示されます。その際、XDに戻らなくても、ブラウザのアドレスバー内のURLをコピーして関係者に送れば、レビューが可能になります。

Tip 4. 特定のアートボードを表示させる

プロトタイプの特定の画面を直接見て欲しい場合、自分のブラウザ内に目的の画面が表示されるまでフローを進めた状態にして、その時にアドレスバーに表示されるURLを皆と共有する方法が使えます。

Tip 5. フルスクリーン表示のリンクを共有する

ブラウザで表示したとき、最初からフルスクリーンモードになるURLを共有したい場合は、共有パネルの「フルスクリーンで開く」にチェックしてから、共有リンクを生成します。

もう一つの方法です。上のビデオのように、ブラウザ内に表示したデザインをフルスクリーン表示に切り替えて、そのあと、アドレスバーからURLをコピーして共有する方法も利用できます。

Tip 6. クラウドのアセットとして管理する

共有されたプロトタイプは、assets.adobe.comの自分のアカウントのページに、公開済みのアセットとして登録されています。このページからは、不要になったリンクの削除等の作業が行えます。

アセットページを開くには、「共有」ボタンをクリックして、「リンクを管理」を選択します。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2019.03.7

Products Featured

  • Adobe XD

Tags

タグはありません