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

by akihiro kamijo

Posted on 03-07-2019

連載

Adobe XDをもっと使いこなすヒント!

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

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

#adobexd #protip Share an interactive prototype with your clients and stakeholders by selecting Share > Share for Review. @AdobeXD pic.twitter.com/lfNHhlyhNt

— Elaine Chao (@elainecchao) January 18, 2019

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

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

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

#adobexd #protip Once you have your prototype link through Share for Review, you can easily embed your interactive prototype on your webpage or on your @Behance page by selecting the embed link directly in the share popup. @adobexd pic.twitter.com/XVTAJ1Ghi4

— Elaine Chao (@elainecchao) January 21, 2019

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

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

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

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

#adobexd #protip Launch your shared prototype in your web browser by clicking on the rightmost icon, or copy the link from your center icon to share with others. @adobexd pic.twitter.com/RraqaqmAlr

— Elaine Chao (@elainecchao) January 22, 2019

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

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

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

#adobexd #protip Want to send your clients (or coworkers) to the right screen? Just navigate to it in the browser, and copy/paste the URL to send them directly to that page instead of the home screen. @adobexd pic.twitter.com/Nh1NW7cGQO

— Elaine Chao (@elainecchao) February 12, 2019

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

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

#adobexd #protip Create a URL that launches your client or stakeholder directly into full screen mode by hitting the “full screen” checkbox when you share. @adobexd pic.twitter.com/IhgmxNgvZC

— Elaine Chao (@elainecchao) February 12, 2019

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

#adobexd #protip Another way you can launch your client or stakeholder into fullscreen mode is to open your prototype, navigate to full screen mode, and then copy/paste the URL in your browser. @adobexd pic.twitter.com/Hcnuvkp5R2

— Elaine Chao (@elainecchao) February 13, 2019

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

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

#adobexd #protip You can also find your shared web prototypes in https://t.co/NTl8IiGff3 under “Published.” @adobexd pic.twitter.com/6spfLcJvhB

— Elaine Chao (@elainecchao) January 23, 2019

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

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

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

次回をお楽しみに!

Topics: クリエイティブ, UI/UX & Web

Products: