Adobe XDをもっと使いこなすヒント！第47回共有モードでアートボードを公開する手順

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

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、XDに新しく追加された共有モードを使ってアートボードを共有する方法についての7つのツイートを紹介します。

Tip 1. 共有するアートボードを選択する

#AdobeXD #ProTip When you switch to Share Mode, you will automatically see what will be included in the share. If you have a home artboard set, all artboards connected to it are included. @AdobeXD pic.twitter.com/sElxP6lNWV

— Elaine Chao (@elainecchao) January 8, 2020

共有モードでは、アートボードを共有するためのリンクを作成できます。プロトタイプモードでホームアートボードを設定していた場合は、共有モードに切り替えると、ホームアートボードとそこから遷移可能なアートボードが自動的に選択されます。

すべてのアートボードを共有対象にしたいときは、プロトタイプモードに戻り、ホームアートボードの左上のアイコンをクリックすると、ホームアートボードの設定を解除できます。

Tip 2. 共有目的に応じてオプションを選択する

#AdobeXD #ProTip In Share Mode, you can select between presets depending on what your target audience is, or control the parameters yourself via the “Custom” selection. @AdobeXD pic.twitter.com/eYOCEtIz0J

— Elaine Chao (@elainecchao) January 9, 2020

共有する前に、共有する目的に応じてオプションを選択します。共有モードには目的別に4つのプリセットが用意されており、デザインレビューや、開発者へのデザインスペック共有がしたいときは、リストから選べばこの作業は終了です。

「カスタム」を選択すると、より詳細なオプションを自分で選ぶことができます。

Tip 3. 共有リンクを作成する

#AdobeXD #ProTip Click on “Create New Link” to create a web prototype. Afterward, you can update the link with additional changes to either your work on canvas or changes to your prototype settings. @AdobeXD pic.twitter.com/A1O5VrAG2q

— Elaine Chao (@elainecchao) January 10, 2020

オプションを選択して「リンクを作成」をクリックすると、公開用のURLが生成されます。リンクを作成した後に、デザインやプロトタイプに変更を行った場合は、「リンクを更新」をクリックすればWebに共有したプロトタイプを更新できます。

#AdobeXD #ProTip Make sure you copy a fresh URL when you update to and from full screen; your new link will have information in it that will launch your prototype with no visual distractions. @AdobeXD pic.twitter.com/rzmr8hkVrn

— Elaine Chao (@elainecchao) January 15, 2020

カスタムのオプションを使ってフルスクリーン表示の設定を切り替えた場合は、新しいURLをコピーするのを忘れないようにしましょう。

Tip 4. コメントの可否を設定する

#AdobeXD #ProTip Enable commenting in Share Mode’s custom setting to offer your recipients the ability to comment directly on your interactive web prototypes and design specs. @AdobeXD pic.twitter.com/eJzuWwRu5c

— Elaine Chao (@elainecchao) January 14, 2020

コメントの許可、不許可を設定したい場合は、カスタムのオプションから、「コメントの許可」を指定します。これにより、他の人がWebに公開されたプロトタイプやデザインスペックに対してコメントできるかどうかを切り替えられます。

Tip 5. 共有するページの操作方法を指定する

#AdobeXD #ProTip Hotspot hints enable your stakeholders to see a brief prompt of the clickable areas are in your prototype. Turn it off when testing your prototype to get the cleanest results! @AdobeXD pic.twitter.com/Ine1jIchPl

— Elaine Chao (@elainecchao) January 16, 2020

共有したプロトタイプには、ホットスポットと呼ばれる機能があります。画面の適当な箇所をクリックすると、クリックして操作可能な領域を表示してくれます。カスタムのオプションの「ホットスポットのヒントを表示」をオフにすると、ホットスポットが表示されなくなります。ユーザビリティの確認をしたいときなどに利用できそうなオプションです。

#AdobeXD #ProTip Want to turn off the ability to page through the web prototype? Turn off the controls when publishing your prototype in Share Mode. @AdobeXD pic.twitter.com/m1eW8PTSTK

— Elaine Chao (@elainecchao) January 17, 2020

プロトタイプの下部には通常ページ送りのコントロールが表示されます。これも非表示にしたい場合は、カスタムのオプションの「ナビゲーションコントロールを表示」をオフにします。これにより、ページを順番に見る操作はできなくなります。

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

次回をお楽しみに！