Revool RevoolのChrome拡張機能（無料）を使うと、ウェブサイトのスクリーンショットを撮影し、画面キャプチャに手書きやテキストのコメントを追加することができます。
ウェブサイトに限らず、ブラウザ上でURLで開けるコンテンツであれば、スクショを撮影してフィードバックコメントをつけられます。たとえば、PDFや動画、ウェブアプリなど、様々なコンテンツでもお試しください。
それでは早速、具体的なレビュー方法を見てみましょう。
無料のChrome拡張機能をインストール
準備として、拡張機能をインストールします。
こちらは、Revoolの開発した画面キャプチャをレビューキャンバスに読み込み、コメント描画するための拡張機能です。
ブラウザは、Chromeでのご利用がおすすめです。Microsoft EdgeなどのChromium互換ブラウザであれば、同じようにインストールすることができます。
以下のボタンからchromeウェブストアの拡張機能ページを開き、「Chromeに追加」ボタンをクリック、Revoolの拡張機能をインストール・有効化してください。
ブラウザに拡張機能アイコンをピン止め
インストールした拡張機能を使いやすいよう、ブラウザのヘッダーに拡張機能を固定しましょう。
アドレスバー脇にある、パズル状の拡張機能アイコンをクリックし、Revool Reviewの固定（ピン）マークをクリックしてください。
こちらの操作で、ブラウザのヘッダーにRevoolのアイコンが出てくるようになります。
ブラウザでウェブページを開く
画面キャプチャにコメントを追加したいウェブページをブラウザで開いてください。
たとえばRevoolのトップページを開くと、次のように表示されます。
LIVEレビューモードでページを読み込む
ブラウザのアドレスバー横にある、ピン止めしたRevoolアイコンをクリックすると、次のようなポップアップメニューが起動できます。
こちらで赤枠で囲った「ゲストLIVEレビューモードを起動」ボタンをクリックしてください。
すると、次のように画面上部にRevoolのヘッダーが表示されます。ヘッダーが表示されたら、画面キャプチャのための準備は完了です。
レビュー箇所の画面キャプチャを撮影
画面右にあるプラス（＋）ボタンをクリックすると、キャプチャモードが起動します。
もし、クリップボードに画像がすでに保存されている場合には、キャプチャモードは起動しません。
マウスホバー時のみ表示されるコンテンツなど、Revoolのキャプチャモードでの撮影ができない場合には、OS標準のキャプチャツールを使うことができます。
Windowsの場合には「PrtSc（プリントスクリーン）」または「Windows + Shift + S」、Macの場合には「Ctrl + Shift + Cmd + 4」で希望部分のスクショを撮ることができます。
キャプチャ画像は、自動的にクリップボードに保存されます。
キャンバスを起動し、画面キャプチャを読み込む
キャプチャモードで選択したエリアのスクリーンショット、または、クリップボードに保存されていた画像が自動でレビューキャンバスに読み込まれます。
希望通りのキャプチャ画像が読み込まれなかった場合には、一度キャンバスを右上の閉じる（×）ボタンで閉じてください。
初めてのキャンバス起動では、次のようなクリップボードへの許可ダイアログが表示されることがあります。キャプチャ画像の取り込みに必要ですので、許可してください。
許可を求める「確認ダイアログ」
スクリーンショット画像を取得した状態でレビューキャンバスを起動すると、「xxxxx.comがクリップボードへのアクセスを求めています」とのダイアログが出ます。
こちらで「許可する」を選択してください。
許可を行っても、キャンバスに画像が読み込まれない場合、一度キャンバス右上の「閉じる（×）」ボタンでキャンバスを閉じてください。
その後、改めてスクショを撮影、キャンバスを立ち上げてみてください。
すでに「確認ダイアログ」で許可をブロックしてしまった場合
Chromeの場合、ダイアログで一度ブロックすると、ブラウザのURL欄の右端に次のようなアイコンが出ます。アイコンをクリックすると、次のような画面が表示されます。
「xxxxx.comのクリップボードへのアクセスを常に許可する」を選び、完了をクリックしてください。
キャンバス上で、手書きやテキストコメントを追加
キャンバスの「ペン」のアイコンでは「線の描画」、「T」のアイコンで「テキストの追加」ができます。
たとえば、赤の線とテキスト、青の線とテキストを組み合わせることで別の修正指示をわかりやすく伝えることもできます。
キャンバス上で編集したキャプチャ画像を保存
画像へのコメント追加、デザイン修正指示などが完了したら、キャンバス上のボタンから保存ができます。
画像をクリップボードにコピー
編集したスクショ画像をクリップボードにコピーして保存します。クリップボードに保存された画像は、パワーポイントやHTMLメール、エディタなど希望のツールに貼り付けることができます。
画像をダウンロード
画像ファイルとしてダウンロードしたいときは、画像をダウンロードボタンをクリックします。編集された画面キャプチャファイルがPNG形式で、お使いのPCにダウンロード・保存されます。
ここまでで、ブラウザ画面のキャプチャ画像にコメントをつけ、保存することができました。
Revoolアカウントがあれば、チーム内や顧客とのコメント共有・タスク管理まで可能に
Revoolのアカウントがない場合には、公式サイトからアカウントを作成します。アカウント作成は、GoogleアカウントまたはEメールとパスワードで行うことができます。
ステータス管理やフラグ設定ができる、高機能なレビューキャンバス
Chrome拡張機能のみのゲストモードでは、編集した画像の保存までしかできませんでした。
Revoolアカウントユーザーの場合には、次のような機能が追加されます。
ステータス管理
未設定、ペンディング、確認中、進行中、レビュー中、完了の6段階のステータスを設定できます。
たとえば、クライアントから新規コメントはステータス「未設定」、ウェブディレクターが確認し、デザイナーに修正を指示したら「確認中」、実際の作業に取り掛かったら「進行中」など、各タスクの進捗状況が管理できます。
フラグ設定
デザイナー向け・コーダー向けタスクを表す「デザイン」「コード」フラグ、優先すべきタスクは「優先」フラグ、クライアントが要確認なら「注目」フラグで、担当者や補足情報を付与できます。
テキスト入力欄
差し替え用のテキスト、CSSやJavaScriptのコードなど、自由に長文コメントが入力できる入力欄が利用できます。コメントは検索にも利用でき、コピペも簡単なため、修正タスクに便利です。
コメント投稿
Revoolアカウントで作成したプロジェクトにコメントを投稿できます。コメントは、ページURL別に自動で保存されます。他のプロジェクトメンバーは、投稿されたコメントを確認・検索・更新することができます。
コメント一覧で、修正タスクのステータスを管理
投稿されたコメントは、一覧性の高いテーブル表示や内容を確認しやすいコンテンツ表示で確認できます。
プロジェクトに招待されたメンバーで共有され、ディレクターやエンジニア、デザイナーと協力しながら、動画の修正タスクとして管理することができます。
コメントのステータスは、未設定・ペンディング・確認中・進行中・レビュー中・完了が設定できるため、細かな進捗管理も可能です。
このように動画修正のプロジェクトでのタスクの抜けモレ、修正の先祖返りなどを防ぐことができます。
さいごに
ウェブサイト、ランディングページからウェブアプリ、SaaSのクラウドサービスまで、画面キャプチャからデザイン修正指示、デザインレビューを行うことはよくあります。
ウェブ業界では、デザイン校正、フィードバック報告にスクリーンショット画像をパワーポイントやエクセルに貼り付けて共有することもよくあります。
Revoolのようなツールを利用することで、社内でのデザインチェックやクライアントからのテストアップデータへの修正指示タスクを効率化してください。
