Adobe XDをもっと使いこなすヒント！ 第29回 デザインをレビューのために公開する
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の自分のアカウントのページに、公開済みのアセットとして登録されています。このページからは、不要になったリンクの削除等の作業が行えます。
アセットページを開くには、「共有」ボタンをクリックして、「リンクを管理」を選択します。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！