コンテンツへスキップ

手動スクリーンショットと自動クリックキャプチャの比較

作業の長さ、操作の制御、取りこぼし、セットアップ、編集、最終的な成果物を基準に、手動スクリーンショットと自動クリックキャプチャのどちらを使うかを選びます。

14分で読めます生産性作成者:Temposhot Team

Action Capture recording clicks in another app as ordered steps

ソフトウェアの操作手順を文書化するとき、通常は1ステップにつき1枚のスクリーンショットを撮ります。ショートカットで手動で撮ることも、マウスをクリックするたびにツールに撮影させることもできます。どちらの方法でも同じ元画像ができますが、作業の中断の回数、取りこぼしたステップ、最後に必要になる編集作業が異なります。

以下の比較では、同じ作業を両方の方法で文書化した結果を使います。作業は、Webの経費精算アプリで領収書2枚を添付して経費報告を提出することです。ダッシュボードから確認画面まで20回のクリックが必要です。同じMacと同じテストアカウントを使い、1回目はmacOSのスクリーンショットショートカット、2回目はTemposhot Action Captureで文書化しました。

作業例から得た4つの数値。作業は20ステップ、手動のショートカット撮影では手動の入力操作が60回、手動撮影で取りこぼしたステップは1件、クリックキャプチャの後に削除した余分なフレームは3件。

手動スクリーンショットとクリックキャプチャの概要

項目手動スクリーンショット自動クリックキャプチャ
撮影のきっかけユーザーのショートカット受け付けられたマウスクリックごと
ステップごとの中断停止、キー操作、ドラッグ、作業への復帰が必要なし
取りこぼしたステップ長い作業では起きやすいまれ。すべてのクリックが撮影される
余分なフレームまれ発生する可能性あり。レビュー時に削除する
ステップのタイトル手入力クリックされた要素から生成
クリック位置手動で追加有効にすると自動でマーク
組み立て名前変更、並べ替え、文書への貼り付けDocumentでステップが既に順番どおりに並ぶ
適した用途意図して選ぶ1〜5の状態1つの操作パス内の10ステップ以上

各工程にかかった時間

2つの方法の差は、撮影時間そのものよりも、その後の作業にありました。手動撮影では、各ステップで一時停止が必要だったため、作業自体が約6分から約14分に延びました。より大きな差は、クリックキャプチャでは不要になるファイルの扱いと組み立ての作業でした。

工程ごとの所要時間の比較。撮影は手動が約14分、クリックキャプチャが約6分。ファイル処理は約8分と0分、タイトルは約12分と約4分、クリック位置のマークは約10分と0分、組み立ては約9分と0分。合計は約53分と約10分。

これらは1人の作成者が1回行った際の時間で、ベンチマークではありません。比率は作業内容によって変わります。長い文字入力と少ないクリックからなる作業では差が縮まり、短いクリックが多い作業では差が広がります。

両方の方法で共通する点

どちらの方法にも同じ準備が必要です。テストアカウント、サンプルデータ、個人の通知が表示されない画面を用意します。どちらの方法も、同じピクセルのPNGスクリーンショットを作成します。どちらも、新しいアカウントでガイドに従う別の人による最終確認が必要です。

違いは時間の使い道にあります。手動撮影では、作業中と作業後に操作そのものに時間を使います。クリックキャプチャでは、設定と短いレビューに一度だけ時間を使います。

少数の状態を意図して撮る場合は手動スクリーンショットを使う

手動撮影が適しているのは、各スクリーンショットが個別の判断である場合です。

  • リリースノート用の変更前と変更後のペア。
  • サポートチケット用の単一のエラーダイアログ。
  • 表示したい項目をすべて配置してから撮る設定画面。
  • クリックすると消えるホバーメニューやツールチップ。

macOSのショートカットでこの用途をカバーできます。Shift+Command+4で領域を撮影し、Spaceキーを押すとウィンドウの撮影に切り替わります。Shift+Command+5では、キーを押すと閉じるメニュー向けに5秒または10秒のタイマーを追加できます。

編集の手間を減らす手動撮影の習慣

後の編集を減らす手動撮影の習慣が3つあります。Shift+Command+4の後にSpaceキーを押してウィンドウ全体を撮影すると、すべてのフレームのサイズが揃います。Shift+Command+5とOptionsメニューを使うと、デスクトップではなく専用フォルダに保存できます。

撮影するたびに、ステップのタイトルをテキストファイルに1行ずつ書きます。撮影後に20個のタイトルを入力すると、20枚の画面を思い出す必要があります。撮影中に書けば、1件あたり数秒で済みます。

手動で撮ったファイルの保存先

macOSは既定で、ショートカットで撮ったスクリーンショットをデスクトップに保存し、ファイル名に日付と時刻を付けます。20ステップで20個のファイルができます。ファイル名は撮影時刻を示すだけで、画面の内容は示しません。名前順に並べると順序は保たれますが、撮り直したファイルは一覧の末尾に並びます。

タイムスタンプ付きのスクリーンショットファイルが並ぶデスクトップフォルダのツリー。10時41分から10時55分までのファイル、一覧の末尾にあるステップ7の撮り直し、そして各画像を貼り付ける必要がある経費ガイドの下書き文書。

ステップ7の撮り直しは、よくある失敗です。このファイルはステップ20の後に並ぶため、作成者は組み立ての際に手動で移動する必要があります。

1ステップの手動撮影の流れ

手動撮影の各ステップは、同じ流れを繰り返します。流れ自体は短いものの、20ステップでは編集を始める前に、個別の入力操作が60回になります。

1ステップの手動撮影の流れ図。Shift+Command+4を押す、領域をドラッグする、離すとファイルがデスクトップに保存される、フォーカスをブラウザに戻す、そのステップで説明する操作を行う。

長いソフトウェア操作のパスにはクリックキャプチャを使う

クリックキャプチャは、クリックそのものがステップになる作業に適しています。アカウントの設定、複数の画面にまたがる構成変更、経費報告の提出などです。作業を通常の速度で1回行うと、ツールが各クリックの時点で画面の状態を記録します。

Temposhot Action Captureでは、Start Action Captureを選び、対象をActive Window、Full Screen、Specific Window、Capture Areaのいずれかから選択します。Temposhotは、受け付けられた各クリックの直前に対象の状態を保存します。そのため、スクリーンショットには、クリック後に読み込まれた画面ではなく、クリックしようとしていた画面が写ります。

Action Capture recording clicks in another app as ordered steps

この作業の対象を選ぶ

Action Captureの4つの対象は、それぞれ異なる作業の形に合います。経費報告では、20ステップに何を含め、何を除くかが選択の基準になりました。

対象経費報告への適合性
Active Windowクリックされたウィンドウに追従するため、Finderのアップロードダイアログが独立したステップの画像になる
Full Screenすべてのステップにメニューバー、Dock、開いている他のアプリが写る
Specific Windowすべてのステップをブラウザのウィンドウに限定する。今回の実行で選択
Capture Areaフォームだけが必要な場合に有用だが、サイドバーのステップは領域外になる

Active Windowでも機能し、Finderのダイアログ自体が写ったはずです。作成者は、ガイドの見た目を統一するため、すべてのページをブラウザに残す方を選びました。

経費報告の実行を設定する

経費報告は1つのブラウザウィンドウで完結するため、Specific Windowを選ぶと、各ステップから他のアプリを除外できます。領収書は別ウィンドウであるFinderのダイアログからアップロードします。Capture outside clicksを有効にすると、ブラウザウィンドウを撮影しながら、これらのクリックもステップとして記録されます。

作業例の設定パネル。対象はSpecific Window、Capture every mouse clickを選択、Capture outside clicksはオン、Parse clicked elementsはオン、Mark clicked areaはRectangle Medium、手動撮影ショートカットはShift+Command+2。

20ステップの実行は、無料プランのAction Captureの上限である1回あたり5ステップを超えます。無料プランでは、実行はステップ5で一時停止し、保存された5ステップを残します。Temposhot Proでは、ステップ20まで続行できます。

撮影前に一度リハーサルする

慣れないフォームでは、最初の試行に回り道が含まれるのが普通です。開いたメニューを閉じ直す、フィールドを誤った順番で入力するなどです。すべてのクリックが撮影されるため、回り道のたびに削除すべきページが1つ増えます。下書きの報告書で1回リハーサルすると、記録する実行からこれらの回り道が除かれました。

リハーサルでは、ホバーのツールチップと遅れて表示されるバナーが表示される位置も分かりました。事前に把握していたため、手動のショートカットを2回押す操作は、その場の反応ではなく計画の一部になりました。

実行の様子

クリックキャプチャの実行は約6分かかりました。これは、文書化せずに作業した場合とほぼ同じです。フローティングツールバーにステップ数が表示されたため、各クリックが記録されたかどうかを簡単に確認できました。

クリックキャプチャ実行のタイムライン。0:00にCommand+3を押してStart Action Captureを開始、1:50までに1件目の領収書をアップロード、2:40にホバーツールチップを手動で撮影、3:30までに2件目の領収書、5:20に送信、6:05にCommand+periodでキャプチャを終了してDocumentを開く。

中断と取りこぼしを比較する

手動で撮影する20ステップの作業では、ショートカットの押下が20回、領域の選択が20回、作業への復帰が20回必要です。中断のたびに、ステップを忘れる可能性があります。特に、ダイアログを閉じる、タブを切り替えるといった小さな操作で起きやすくなります。このような小さなステップが抜けることは多くあります。

クリックキャプチャは中断をなくします。その代わり、余分なフレームが増えます。誤クリックや空白領域のクリックもステップとして記録されるためです。レビューで余分な3ステップを削除するほうが、取りこぼした1ステップを補うために作業の一部をやり直すより通常は速く済みます。

作業の切り替えにかかる負担

手動撮影の各ステップでは、注意が作業から撮影ツールへ移り、また作業へ戻ります。経費報告では、作成者は次に添付する領収書、その領収書に必要なカテゴリ、撮影済みのスクリーンショットを覚えておく必要がありました。取りこぼしは、1件目の領収書をアップロードした直後に起きました。追跡すべき状態が最も多い場面です。

クリックキャプチャでは、考えるべき作業だけが残ります。作成者の注意はフォームに留まり、フローティングツールバーのステップ数が、ファイルを見なくても各クリックを確認させます。

例で起きた取りこぼし

手動の実行では、作成者は1件目の領収書をアップロードした後、カテゴリメニューでMealsを選ぶステップ9の撮影を忘れました。ガイドは完成しているように見えましたが、レビューアーが従って送信したところ、検証エラーが出ました。ステップ9を作り直すには、新しい下書きの報告書を開き、領収書を再度アップロードして、画面を1枚撮影する必要がありました。

クリックキャプチャの実行では、20ステップに対して23フレームが生成されました。そのうち2件はスクロール中に空白のページ部分をクリックしたもの、1件は金額フィールドのダブルクリックでした。3件とも、Pagesパネルから1分足らずで削除できました。

クリックキャプチャで取りこぼしが少ない理由

クリックキャプチャでは、クリックがトリガーになるため、クリックを忘れることはありません。取りこぼす可能性があるのは、クリックを伴わないステップです。キーボードショートカット、入力した値、ホバーの状態が該当します。また、Temposhotは短い間隔で続けて行われたクリックを無視するため、1回の操作で重複したステップが生成されることはありません。

キーボードだけで行うステップには、手動撮影ショートカットを使い、クリックなしでステップを追加します。例では、カテゴリフィールドのツールチップはホバーしたときだけ表示されたため、Shift+Command+2で撮影しました。

撮影の制御と編集の作業を比較する

手動撮影では、各ショットの構図とタイミングを完全に制御できます。その後に編集作業が続きます。トリミング、ファイル名の変更、並べ替え、矢印の追加、ステップのテキスト入力です。

クリックキャプチャでは、これらの判断を一度だけ行う設定に移します。

  • マウスクリックの撮影モード: すべてのクリック、修飾キーを押した場合のみ、修飾キーを押した場合を除外、または撮影しない。
  • タイトルのテンプレート: 解析されたクリックには、要素名が入った Click "[[element-name]]" のようなタイトルが付きます。解析されなかったクリックには Click here が付きます。
  • 視覚的な注釈: クリック時の撮影にカーソルを表示し、クリックした範囲を円または四角形でマークします。

Documentエディタでは、ゼロから組み立てるのではなく、調整します。BalancedやCloseなどのフレーミングレベルで操作の周囲を切り抜き、Blur、Click Marker、Step Numbers(Pro)で一般的な編集を行います。

例で生成されたタイトル

生成された20個のタイトルのうち、15個は操作の名前を正しく示しました(例: Click "New expense report")。4個はClick hereになりました。クリックされたコントロールが、macOSのアクセシビリティを通じて読み取れる名前を提供しなかったためです。1個はアイコンボタンを、表示されているツールチップではなく内部ラベルで示しました。

生成されたタイトルと最終タイトルの比較。Click New expense reportはそのまま採用し、Click hereの2件はアップロード領域と日付選択を示すように書き直し、アイコンのラベルはAdd a second receiptに書き直した。

タイトル5件の修正に約4分かかりました。手動撮影で20件のタイトルすべてを入力するには、約12分かかりました。

清書作業で使うエディタのキー

清書作業の大半は、Documentエディタの数個のキーで行えます。クリックマーカーは実行時に作られるため、手動の作業ではテキストと、必要な場合に矢印を追加するだけです。

清書作業で使うショートカット一覧。Vで選択、Tでフィールドのテキストラベル、Aでアップロード領域への矢印、Bで法人カード番号のぼかし、Nでステップ番号、Fでページのフレーミング、Deleteで余分なページオブジェクトを削除。

探索的な作業向けのクリックモードを選ぶ

Capture every mouse clickは、リハーサル済みの作業に適しています。経路が初めてで、先にメニューを探ると予想される場合は、Capture only while a key is heldを使います。これは、選択したキーを押している間のクリックだけを保存します。他のクリックは無視されるため、探索してもフレームは増えません。

Skip clicks while a key is heldは逆の動作です。ほとんどのクリックを保存し、キーを押している間のクリックは寄り道としてマークされます。Don't capture mouse clicksを選ぶと、実行はショートカットだけの撮影になります。これはDocument内で手動撮影を行う方法と同じです。

完成した成果物を比較する

手動スクリーンショットは、最終的にバラバラのファイルになります。ガイドにするには、各ファイルを文書に貼り付け、キャプションを1件ずつ書く必要があります。

Action Captureの成果物はDocumentです。順序付きのステップがあり、各ステップにはスクリーンショット、タイトル、説明の欄があります。PDFとして書き出せるほか、PNG、JPG、WebPのページとして、またはZIPパッケージとして書き出せます。既存のスクリーンショットを扱う場合は、既存のスクリーンショットからガイドを作る方法で、それらをDocumentに読み込む手順を説明しています。

両方の方法で同じ成果物を作る

手動スクリーンショットからもDocumentを作成できます。Create Document fromの下にあるImages…で作成し、Finderで20個のファイルを選択すると、ページがその順序で表示されます。この結果には後から書くタイトルがあり、クリック位置はありません。そのため、これらのページではFocus on actionのフレーミングは使えません。

クリックキャプチャで作成した経費報告のDocumentは、既定の設定で20ページのPDFとして書き出されました。設定はA4、横向き、表紙、ステップ番号、ページ番号です。Export PDFダイアログで設定を変更するにはTemposhot Proが必要です。

20ページの構図をそろえる

ブラウザウィンドウを全画面で撮影すると、小さなフォームの項目がPDFで見えにくくなります。Page InspectorでFramingを有効にすると、各ページがクリック位置を中心に、WideからTightまでの5段階のいずれかで表示されます。経費報告では、20ページすべてにBalancedを使い、日付選択のステップ2件にはCloseを使いました。

手動ショートカットで追加したページにはクリック位置がありません。FでCustomのフレームを設定しない限り、ウィンドウ全体を保持します。

作業に例外がある場合はハイブリッド方式を使う

実際の作業の多くには、クリックでは表示されない状態が少数あります。ホバーメニュー、キーボードだけで行うステップ、一定時間後に表示される確認などです。Action Captureでは、実行を止めずにこれらを扱えます。

  • 手動撮影ショートカット(既定はShift+Command+2)を押すか、フローティングツールバーでCapture nowを選択します。
  • メッセージの確認など、記録したくないクリックの前にPause captureを使い、その後Resume captureを選択します。
  • ほとんどのクリックが試行的で、実際のステップが少数の場合は、クリックの撮影をonly with a modifierに設定します。

遅れて表示される確認のためのハイブリッド実行

金融アプリは、最後のクリックから約2秒後に「Report submitted」バナーを表示し、その後非表示にします。バナーが表示されている間はクリックが発生しないため、クリックキャプチャだけではこのバナーを取りこぼします。

番号付きの4ステップ。最後のステップとしてSubmit reportをクリックする、約2秒間バナーを待つ、Shift+Command+2を押してクリックなしでバナーを撮影する、Command+periodを押して実行を終了する。

クリーンなクリックキャプチャ実行のためのルール

クリックキャプチャ実行の「やること」と「やらないこと」の一覧。やること: 撮影せずに作業を1回リハーサルする、テストアカウントを使う、別のアプリを確認する前に撮影を一時停止する。やらないこと: スクロール前に空白の領域をクリックする、実行中にメールを確認する、ダブルクリックに頼る。

判断の基準

次の基準で選びます。

  • 5件未満で、それぞれを意図して選ぶスクリーンショット: 手動。
  • 1回だけ文書化する5〜10ステップ: どちらでも可。クリックキャプチャは組み立ての時間を省けます。
  • 10ステップを超える場合、または更新後に再び文書化する作業: クリックキャプチャ。
  • 大部分がホバー状態とキーボードのステップ: 手動、または手動ショートカットを使うAction Capture。

他の3つの作業に基準を当てはめる

管理コンソールでユーザーのパスワードをリセットする作業は6クリックで、1年に1回文書化します。どちらの方法でも構いません。4つの設定ページにまたがるシングルサインオンの設定は約30クリックで、ベンダーの更新ごとに変わります。クリックキャプチャを使います。2つのグラフスタイルの違いを示すには、意図して撮る2枚のスクリーンショットが必要です。手動を使います。

作業の長さよりも、クリックが手順そのものであるかどうかが重要です。ホバー状態が3つある4クリックの作業は、手動で文書化するほうが簡単です。

クリックキャプチャの実行後のレビューのチェックリスト

撮影で削減した時間が意味を持つのは、レビューが速く、かつ漏れがない場合だけです。書き出しの前に、すべてのDocumentで同じレビューを行います。

経費報告のDocument用のチェックリスト。余分なフレームを削除する、Click hereのタイトルをすべて書き直す、アイコンボタンのマーカーの位置を確認する、ホバーのツールチップのページが含まれているか確認する、法人カード番号と社員名をぼかす、テストアカウントでガイドに一度従う。

よくある質問

クリックキャプチャは動画を記録しますか?

いいえ。受け付けられたクリックごとに1枚のスクリーンショットを保存します。実行中に行った手動撮影も保存されます。

クリックせずにステップを撮影できますか?

はい。Shift+Command+2(既定の手動撮影ショートカット)を押すか、フローティングツールバーでCapture nowを選択します。

対象のウィンドウ外のクリックを除外できますか?

はい。Specific WindowとCapture Areaの対象では、Capture outside clicksで、対象の外のクリックをステップとして作成するかどうかを制御します。

ステップ数に上限はありますか?

無料版には、Action Captureのステップ数の上限があります。Temposhot Proでは、その上限を超えて撮影を続けられます。

スクリーンショットはクリックの前の画面ですか、後の画面ですか?

クリックの前です。Temposhotは、受け付けられた各クリックの直前の対象の状態を保存するため、ステップには読者がクリックすべきコントロールが表示されます。

クリックキャプチャのDocumentに手動スクリーンショットを混ぜられますか?

はい。Pagesパネルの追加メニューにある**Upload images…**を使い、新しいページを必要な位置にドラッグします。

キーボード中心の作業でもクリックキャプチャは機能しますか?

一部のみ機能します。入力したテキストとキーボードショートカットは撮影を起動しません。重要なキーボード操作のあとに手動撮影ショートカットを使うか、そのステップをページの説明に記載します。

クリックで新しいウィンドウやタブが開いた場合はどうなりますか?

Active Windowを選んでいる場合、次のステップにはクリックを受けたウィンドウが表示されます。Specific Windowを選んでいる場合、ステップは選択したウィンドウを表示し続け、Capture outside clicksで、新しいウィンドウでのクリックをステップとして作成するかどうかを決めます。アプリやブラウザウィンドウをまたぐ作業では、Active Windowを選びます。

クリックを明確な手順ガイドに変える

Action Captureで実際の作業を1回実行し、生成されたDocumentを前回の手動ガイドと比較します。Action Captureのガイドで、各設定を説明しています。

action-capturestep-by-stepdocumentationcomparison

繰り返し撮影するスクリーンショットを、完成したデータに仕上げます

Temposhotは、タイマーまたはクリックごとに撮影し、結果をPDF、画像、ZIP、MP4で書き出します。

関連記事