Commentful Webアプリでクライアントからデザインのフィードバックと承認ステータスを集める

Commentfulプラグインで作成したレビューリンクは、Commentful Webアプリを使ってブラウザで表示でき（Figmaアカウントは不要）、Figmaファイルに入らなくても誰でも静的デザインにフィードバックを残せます。

一般コメント、テキスト内容、画像内容のフィードバックを残す ​

レビュアーが一般コメントやテキスト・画像の変更依頼を伝えるためのフィードバックモードは3種類あります。

コメントを残す ​

Leave Commentsボタン（デフォルトのモード）をクリックすると、レビュアーはFigmaフレーム上の任意の場所にフィードバックピンを置き、デザインのその部分について一般的なコメントを残せます。

このフィードバックは、内容を確認してFigmaで手作業で対応する必要があります。こうした一般コメントには、Commentful FigmaプラグインやCommentful Webアプリから直接元のコメントに返信して、スレッド形式でやり取りすることもできます。

テキストの更新を依頼する ​

Request Text Updatesボタンをクリックすると、元のFigmaフレーム内でFigmaのテキストレイヤーがある位置にクリックできる領域が表示されるモードに切り替わります。

レビュアーは、これらのテキスト領域をクリックして、そのテキストレイヤーの文言の変更を依頼できます。

Commentful Figmaプラグインでは、それぞれのテキストの更新を対応するFigmaレイヤーに反映できます。

画像の更新を依頼する ​

Request Images Updatesボタンをクリックすると、元のFigmaフレーム内で画像塗りを含むFigmaレイヤーがある位置にクリックできる領域が表示されるモードに切り替わります。

レビュアーは、これらの画像領域をクリックし、自分のコンピューターから画像ファイルをアップロードして、そのレイヤーの画像の更新を依頼できます。

Commentful Figmaプラグインでは、それぞれの画像の更新を対応するFigmaレイヤーに反映できます。

一般コメントのスレッドに返信する ​

Leave Commentsモードで作成されたフィードバックピンには、Commentful FigmaプラグインやCommentful Webアプリから直接返信できます。

デスクトップ通知とメンション用ハンドルを有効にする ​

ブラウザでCommentfulのレビューリンクを表示しているときに、そのレビューのデスクトップ通知を有効にすると、新しいフィードバックが追加されたときに通知を受け取れます。

設定するには、Commentful WebアプリでNotificationsパネルを開き、次の手順を行います。

  1. Enable Notificationsをクリックします
  2. ブラウザで通知を許可します
  3. 必要に応じてDisplay NameとMention Handleを設定します
  4. All review activityとOnly when I'm @mentionedのどちらで通知を受け取るかを選びます

レビュアーが通知を有効にしてメンション用ハンドルを保存すると、ほかのレビュアーは新しいコメントや返信に@handleと入力して、そのレビュアーに直接通知できます。

コメント欄で@を入力すると、メンションの候補がその場に表示されるので、そのレビューリンクで通知を有効にしているレビュアーに簡単に通知できます。

デスクトップ通知はブラウザ・デバイスごとに有効になります。別のコンピューターやブラウザでも通知を受け取りたい場合は、そちらでも有効にする必要があります。

テキストの変更依頼を編集する ​

Request Text Updatesモードで作成されたフィードバックピンは、Commentful FigmaプラグインやCommentful Webアプリから直接編集できます。ピンをクリックしたあと、フィードバックのサイドバーでEditトグルボタンをクリックし、テキスト欄で内容を更新してから、Update Requested Text Changeボタンをクリックすると更新が反映されます。

ブラウザウィンドウ右上のShow All Feedbackボタンをクリックすると、現在のレビューリンクに寄せられたすべてのフィードバックを一覧で表示できます。

フィードバックのサイドバーが開き、現在のレビューを複数の形式で表示できます。

  • List View：フィードバックを1件ずつ読み進める
  • Kanban View：フィードバックをワークフローの列に整理する
  • Table View：レビューのフィードバックをよりコンパクトな形式でざっと確認する

サイドバーには、コメントやテキスト・画像のフィードバック本体に加えて、フィードバックの種類、投稿者、完了状態、期間で絞り込むフィルターと、フリーテキスト検索もあります。

ブラウザの外でフィードバックを確認したい場合は、Export Feedbackドロップダウンを使って、CSVファイルをダウンロードしたり、絞り込んだフィードバックをMarkdownやCSVとしてコピーしたり、AIにそのまま渡せる要約用プロンプトをコピーしたりできます。

フィードバックを検索する ​

単語を入力して、すべてのフィードバックをテキスト検索できます。検索対象は、Commentの内容、レビュアーのUsername（フィードバックを残す前にレビュアーが設定した名前）、またはPin Number（探したいピンの番号がわかっている場合）です。

完了済みのフィードバックとピンの表示を絞り込む ​

フィードバックのサイドバーには、次の3つのオプションがあるcompleted feedbackフィルターもあります。

  • Include completed feedback
  • Hide completed feedback
  • Hide completed feedback (and visual pins)

Hide completed feedback (and visual pins) を選ぶと、完了済みのフィードバックが、フィードバックのサイドバーと、レビューフレームの上に重ねて表示される番号付きピンの両方から非表示になります。まだ対応中の作業だけに集中しやすくなります。

デザインの上に浮かんでいる番号付きのPinアイコンボタンをクリックすると、Figmaフレーム上に残されたフィードバックピンを開けます。そのピンに残されたフィードバックが、ブラウザウィンドウの右側にポップアウトパネルとして表示されます。

フィードバックパネルの一覧でピンを確認している場合も、各フィードバック項目の横にあるPinアイコンボタンをクリックできます。そのコメントまで自動的にスクロールし、短いアニメーションで目立たせて表示するので、ページ上にたくさんのピンがある場合に便利です。

フィードバックをかんばんボードのステータスで整理する ​

Show All Feedbackパネルを開いた状態でKanban Viewタブをクリックすると、デザインに寄せられたフィードバックをカスタマイズ可能なステータスに分類することもできます。フィードバックカードをドラッグ＆ドロップで別の列に移したり、同じ列の中で並び順を変えたりできるほか、ステータスの列そのものの作成、名前の変更、並べ替え、削除も行えるので、フィードバックの対応状況を把握しやすくなります。

Figmaフレームの承認ステータスを設定する ​

レビュアーは、デザインにフィードバックを残すだけでなく、Approvalドロップダウンメニューを次のいずれかに変更して、各Figmaフレームの承認ステータスを設定することもできます。

  • Not Approved Yet
  • Approved (With Changes)
  • Approved

承認ステータスを変更すると、Commentful Webアプリのレビューリンクで、そのFigmaフレームの上に表示される色とステータスラベルが更新されます。これにより、各フレームの承認ステータスをひと目で確認できます。

Figmaフレームの表示モードを変更する ​

デフォルトでは、アップロードしたすべての静的なFigmaフレームが一度に表示され、レビュアーは縦横にスクロールしてすべてのフレームを確認し、必要な箇所にフィードバックを追加できます。

フレームの表示方法は、レビューリンクを表示しているときにページ左下の別のView Modeボタンをクリックすると変更できます。

ご自身やレビュアーは、Copy Link To This Frameアイコンボタンをクリックすると、レビューリンク内の任意のFigmaフレームへの直接リンクをクリップボードにコピーできます。

このリンクを貼り付けてブラウザで開くと、レビューリンク上のそのFigmaフレームまで自動的にスクロールし、色付きの枠線で強調表示されるので、どのフレームへのリンクかがすぐにわかります。

この機能は、レビュアーに確認やフィードバックをお願いしたい特定のフレームへのリンクを送るときに便利です。

レビュアー名を更新する ​

レビューリンクにフィードバックを残し始める前に、各レビュアーは自分の名前を設定する必要があります（誰がどのフィードバックを残したかを識別するためです）。

名前がまだ設定されていない場合は入力欄が自動的に表示されます。また、レビューリンクを表示しているときにページ右下のNameボタンをクリックすれば、いつでも手動で変更できます。

Commentful FigmaプラグインでレビューのShare Link URLタブにレビュアーの名前を追加しておくと、最初の共有リンクを送る時点でその名前をあらかじめ入力しておけます。

レビュアーがデスクトップ通知も有効にしている場合は、レビュアー名をもとにデフォルトのメンション用ハンドルが作られます。このハンドルはNotificationsパネルでカスタマイズできます。