Adobe XDをもっと使いこなすヒント！ 第30回 共有されたデザインにコメントする

連載

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

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

Tip 1. 共有相手にコメントを許可する

#adobexd #protip When you share a prototype with comments enabled, your viewers will see the comments sidebar enabled by default, and can leave comments on your design. @adobexd pic.twitter.com/2QsV12nm6G

— Elaine Chao (@elainecchao) January 24, 2019

プロトタイプを共有する際「コメントを許可」にチェックした状態で共有リンクを作成すると、共有相手には、コメント欄付きの状態でアートボードが表示されます。

アートボードをはっきり見たいときは、コメント欄が邪魔に感じられるかもしれません。右上のアイコンをクリックして、コメント欄を非表示に切り替えると、アートボードの表示領域を大きくすることができます。

#adobexd #protip When the comment panel is docked, the icon shows you a comment count to help you keep track where there are comments. @adobexd pic.twitter.com/Zw10o1nIiK

— Elaine Chao (@elainecchao) February 1, 2019

コメント欄を閉じているとき、コメントの数を知らせる数字がアイコンの横に表示されます。これにより、コメント欄を閉じている状態でも、コメントの状況を確認できます。

Tip 2. 共有されたデザインにコメントする

#adobexd #protip Reply to a comment to create a collapsible thread, which is useful for more complicated conversations about a specific issue. @AdobeXD pic.twitter.com/QX1LVLQK2A

— Elaine Chao (@elainecchao) January 25, 2019

コメント欄内の「コメントを記入」と書かれたフィールドに、表示中のアートボードに対するコメントを入力して、Enterキーを押すか、フィールドの下にある「送信」ボタンをクリックすると、コメントが投稿され、コメント欄内に表示されます。

各コメントの左下に表示される「返信」をクリックして、コメントに対するディスカッションを開始できます。ディスカッションを折りたためるように、返信があるコメント欄には、三角形のアイコンが表示されます。ディスカッションをネストすることはできません。

Tip 3. デザインの特定の場所とコメントを関連付ける

#adobexd #protip Click on the pin in the comment field to leave a numbered marker on your shared prototype to help give context for your comment. @adobexd pic.twitter.com/GBXVharxti

— Elaine Chao (@elainecchao) January 28, 2019

特定の箇所に対するコメントであることを明確にしたいとき、コメントフィールドのピン形のアイコンをクリックすると、プロトタイプの任意の場所に目印を配置できるようになります。

#adobexd #protip Forget to click that pin icon when you left the comment, or leave the pin in the wrong place? No problem – you can move your pins easily by editing the comment. @adobexd pic.twitter.com/ai0ILNuO0Z

— Elaine Chao (@elainecchao) January 29, 2019

ピンの配置は、コメントの投稿後でも可能です。その場合は、投稿したコメントを選択し、表示されるピンのアイコンをクリックします。後は、アートボードの任意の場所をクリックすれば配置完了です。

ピンの位置を後から変更したい場合は、プロトタイプ上のピンをマウスでドラッグします。

Tip 4. ピンとコメントの対応を確認する

#adobexd #protip Easily figure out which comment you’re looking at – either hover over the pin on the design, or over the comment in the panel. The pins will change to blue to show you which one you’re currently viewing. @adobexd pic.twitter.com/hWSVkyDQjk

— Elaine Chao (@elainecchao) January 30, 2019

対応するピンとコメントにはそれぞれ同じ数字が表示されます。そして、コメントまたはマーカーのどちらかの上にマウスポインターが移動すると、対応するマーカーのペアが青色に変化します。これにより、ピンの数が多くなっても簡単に対応するコメントを見つけられます。

ピンの上にポインターを移動しても、対応するコメントが隠れているときは、コメント欄に青いマーカーが表示されません。そんな時は、ピンをクリックすると、対応するコメントがコメント欄内にスライドしてきます。

Tip 5. 不要になったコメントをアーカイブする

#adobexd #protip Resolve your comment with a single click from the comments panel. It moves to its own “resolved list.” And, of course, you can move it back to active pretty easily as well. @adobexd pic.twitter.com/36C2JPryLA

— Elaine Chao (@elainecchao) January 31, 2019

対応が完了して不要になったコメントは、「解決」をクリックして、コメント欄から削除できます。この時、コメントは「解決済み」にステータスが変更された状態で保持されています。

解決済みのコメントを再表示するには、コメント欄下のフィルターアイコンをクリックして、開いたパネル内の「ステータス」から、「解決済み」を選択します。すると、「解決済み」ステータスのコメントだけが表示されるようになります。（上のビデオは最新の仕様とはUIが異なります）

Tip 6. 全アートボードに対するコメントを表示する

#adobexd #protip New in the January release: view all of your comments on your shared prototype in one location by switching on the “Show All Comments” toggle at the bottom of the panel. @adobexd pic.twitter.com/BIlyLwFD29

— Elaine Chao (@elainecchao) February 4, 2019

コメント欄の下にある「すべてのコメント」トグルボタンをオンにすると、全アートボードに対するコメントを表示できます。コメントをクリックすると、コメントと関連付けられたアートボードに表示が切り替わります。

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

次回をお楽しみに！