UI/UXデザインツール『InVision Cloud』入門

2-8. プロトタイプを共有して、コメント・フィードバックをもらう

InVision Cloudでのプロトタイプ作成はうまくできたでしょうか?プロトタイプが作成できたら、該当のプロジェクトをシェアして、フィードバックのコメントをもらいましょう。InVision CloudではURLを共有するだけで簡単にプロジェクトをシェアすることができます。

  • UIデザイン
  • UXデザイン
  • プロトタイピング

公開日:2019/04/07最終更新日:2019/04/07

スポンサーリンク

1.作成したプロジェクトを共有する

作成したプロジェクトを共有するには、プロジェクト一覧ページの右上、もしくはプレビューページの右下にある「SHARE」ボタンをクリックします。

一番下の段にある「public share link」をクリックすると、共有用のURLをコピーすることができます。

コピーしたURLを相手に送ると、相手がプロジェクトをプレビューすることができます。

これが共有されたプロジェクトのプレビュー画面です。

2.共同編集者を招待する

URLを共有するだけでは共同で編集することはできません。共同で編集出来るメンバーを招待するには、メールアドレスで招待を送ります。

一度招待したことがあるユーザーについては一覧にユーザー名が表示されるので、「+」ボタンをクリックするだけで招待ができます。

3.共有設定を変更する

InVision Cloudでプロジェクトを共有する際は、共有できる範囲などを細かく設定することができます。社外秘のプロジェクトなどを誤った範囲に共有してしまわないように気をつけましょう。

共有設定は「SHARE」ボタンをクリックして表示されたモーダル内の一番下の段にある「Link Settings」をクリックすると表示されます。

コメントを許可する

Allow commenting on screensをONにすると、コメントの追記が許可されます(デフォルトではON)

すべての画面へのアクセスを許可する

Allow access to all screens in prototypeをONにすると、共有されたプレビュー画面上で左右の矢印キーもしくは画面一覧からすべての画面を閲覧することができます。オフにするとホットスポットでつながった画面にしか移動できません。(デフォルトではON)

パスワードで保護する

Password ProtectをONにすると、共有されたユーザーはパスワードを入力しなければ閲覧することができなくなります。(デフォルトではOFF)

More Optionsをクリックすると、さらに複雑な共有設定が行なえます。

スタート画面を設定する

Start the share link atという項目から、最初に表示される画面を設定することができます。デフォルトではHomeになっている画面が設定されています。

※画面一覧で一番上になっているのがHomeとなります。

ホットスポットを無効にする

Hotspots enabledをOFFにすると、ホットスポット(リンク)を無効にできます。

ホットスポットのヒントを無効にする

通常ホットスポットの該当箇所にはヒントが表示されます。Prevent hotspots hintingをONにすると、ホットスポットのヒントを無効にすることができます。

4.ユーザーに識別を求める

Require user identificationをONにすると、共有されたプロジェクトを閲覧する際にメールアドレスと名前の入力を求められます。メールアドレスを入れれば誰でも見ることができますが、パスワードなどでロックをかけるものではありません。

5.プロジェクトにコメントを追加する

共有されたプロトタイプにコメントを追加してみましょう。

プレビューされた画面の右下にあるCommentsをONにします。

コメントしたい箇所をクリックすると吹き出しが表示されます。

コメントには絵文字を使うこともできます。

コメントには「いいね」を付けたり、返信コメントをつけることができます。

Mark as resolvedにチェックをつけると該当のコメントが「解決済み」というステータスに変わります。同時にコメントの番号が「✓」で表示されるようになります。

一度解決済みにチェックをつけると、該当のコメントは非表示になります。解決済みのコメントを見たいときは、画面右上にある「Show Resolved」にチェックをつけます。

コメント入力中に「@」を入力すると、ユーザーを指定してリプライを飛ばすことができます。ここには共有されたユーザーが表示されます。

6.コメントを確認する

プロジェクト内でもらったコメントをまとめて閲覧することができます。

プロジェクトの画面一覧の上部にある「COMMENTS」をクリックします。

項目をクリックすると、詳しい内容が確認できます。

コメントが書かれた画面を確認するには、画像の部分をクリックします。

この状態で左上にあるメニューをクリックすると、コメント一覧が表示されます。コメントはフィルターで絞り込みができます。

7.コメントの種類について

コメントについてはいくつかの種類が用意されています。コメントを追加する際にLeave a commentをクリックすると、選択することができます。

Private Comment

他人には表示されない自分用のコメントを残すことができます。

Note

ノートは一緒に共同編集にだけ見えるコメントを残すことができます。URLだけでシェアをした相手には見えません。

Tour Point

チュートリアルや新機能の紹介などに使える「ツアー」機能です。プレビューする際にここに書かれた内容が表示されます。 このように表示されます。

1ページに複数Tour Pointをつけると、next・prevボタンが表示されて行き来できるようになります。

Tour Pointの順番はorderで指定することができます。小さい番号から順番に表示されます。

コメント機能を活用して、プロジェクト内のコミュニケーションを円滑に進められるようにしていきましょう。

理解度チェック

スポンサーリンク

このレッスンの著者