チュートリアル用スクリーンショットの機密情報を墨消しする方法

チュートリアルのスクリーンショットは共有を前提に作られるため、そこから情報が漏れます。サイドバーの氏名、ヘッダーのメールアドレス、アドレスバーのトークンは、ガイドのコピーすべてに残ります。

この記事では、チュートリアルに機密データを入れないための方法と、すでに写り込んでいるものを取り除く方法を説明します。手順は、macOS 上の Temposhot の Document エディターを使う前提です。

例として使うのは、Web の会計アプリで請求書リマインダーを設定する方法を、サポートチーム向けに示す15ステップのガイドです。最初の下書きには9か所の情報漏えい箇所がありました。以下の各セクションでは、それぞれをどのように見つけて削除したかを示します。

キャプチャ前に安全なデータを使う

最も安全な墨消しは、実在しないデータを使うことです。録画の前に、次のように画面を準備します。

• 「Sample Customer」のような架空の氏名と、サンプルのメールドメインを持つテストアカウントでサインインします。
• メール、チャット、カレンダー、パスワードマネージャーのウィンドウを閉じます。
• macOS の Focus モードをオンにして、通知バナーが表示されないようにします。
• クリックするフィールドのブラウザの自動補完候補を消去するか、別のブラウザプロファイルを使います。
• Action Capture で Specific Window または Capture Area を選び、他のアプリが画面に入らないようにします。

非公開の画面を開く前に、フローティングツールバーの Pause capture を使います。終わったら Resume capture で再開します。

ブラウザで漏れる情報

ブラウザのウィンドウには、ページ自体よりも多くの個人情報が含まれます。ブックマークバーには社内ツールや取引先の名前が表示されます。タブバーには開いている他のページのタイトルが表示され、プロフィールボタンには写真やイニシャルが表示されることがあります。

請求書ガイドでは、ブックマーク、拡張機能、タブがそれぞれ1つだけの別のブラウザプロファイルを使いました。これにより、最初のクリックの前に、全15ステップから3件のリスクを除外しました。不要な要素のないプロファイルの作成には約5分かかり、以降のすべてのチュートリアルで再利用できます。

実行中の通知

クリックの瞬間に表示される通知バナーは、そのステップの一部になります。バナーには送信者名やメッセージの1行目が表示されることが多いです。Focus モードで大半のバナーは抑えられますが、カレンダーのアラートやシステムメッセージは表示されることがあります。

バナーがステップに入った場合は、閉じるまで待ち、次のクリックの前に Capture now を選びます。手動キャプチャのショートカットは、初期設定で Shift+Command+2 です。実行後は、Pages パネルでバナーが写ったステップを削除し、その後に続く正常なコピーを残します。

非公開の実行用に Action Capture を設定する

Configure Action Capture の設定により、どの画面がステップに入るかが決まります。設定は Mac に保存され、以降の実行で再利用されます。以下の値は、請求書ガイドの2回目の録画で使用したものです。

Capture outside clicks がオフの場合、他のアプリでのクリックはステップになりません。Include toolbar in captures がオフの場合、フローティングツールバーは保存された画像に含まれません。Specific Window をターゲットにすると、メニューバーとその Wi-Fi 名もすべてのフレームから除外されます。

解析されたタイトルが画像の内容を繰り返す場合

Parse clicked elements は、macOS のアクセシビリティ機能を通じて、クリックされたコントロールの名前を読み取ります。「Send reminder」という名前のボタンをクリックすると、Click "Send reminder" というタイトルが生成されます。顧客の行をクリックすると、その顧客名を含むタイトルが生成されます。

最初の下書きでは、ステップ5のタイトルが Click "Dana Whitfield" でした。これはライブアカウントの実在の顧客です。後でスクリーンショットにはぼかしを入れましたが、タイトルには依然として名前が残っていました。タイトルは書き出した PDF のテキストになるため、画像と同じレビューが必要です。

テストアカウントを準備する

実際らしく見えるサンプルデータは、ぼかしの枠よりも手順を分かりやすくします。請求書ガイドのテストアカウントには、架空の氏名を持つ顧客が6人、example.com のメールドメイン、1001から始まる請求書番号がありました。顧客一覧が写る3ページは、このアカウントで再キャプチャしました。

アカウントの準備には約20分かかりました。同じ3ページの顧客一覧にぼかしを入れる方が一度の作業は短く済みますが、ガイドを更新するたびにぼかしをやり直す必要があります。

表示されているすべてのリスクを洗い出す

各ページを確認し、端の小さな文字も含めて、次の情報を探します。

分類	隠れやすい場所
個人の氏名と写真	サイドバー、コメント、アバター、「last edited by」
連絡先	ヘッダー、プロフィールメニュー、フォームの入力欄
アカウント番号と注文番号	表、URL、ページタイトル
認証情報とトークン	アドレスバーのクエリ文字列、設定画面、ターミナルの出力
社内情報	プロジェクト名、他の取引先、社内 URL
デバイスの情報	メニューバーの項目、Wi-Fi 名、ユーザー名を含むファイルパス

キャンバスを拡大して小さな文字を確認します。拡大表示は画面の見え方だけを変え、書き出されるサイズは変わりません。

請求書ガイドの9か所の情報漏えい箇所

確認は、キャンバスの各隅を拡大しながらページごとに行いました。ほとんどの漏えいは、録画中に作成者が見ていなかった場所にありました。アドレスバーだけで2か所ありました。

ステップ5のタイトルは顧客名の漏えいに含まれるため、件数は9件のままです。画像だけを修正してタイトルを残すと、名前がガイドに残ります。

アドレスバーとクエリ文字列

Web アプリは識別子を URL に含めます。/customers/48213/invoices のようなパスは、実在の顧客 ID を露出します。?session= や ?token= のようなクエリ文字列には、アカウントへのアクセスを許可する値が含まれることがあります。

請求書ガイドのステップ12では、アドレスバーにトークン付きの完全なリセットリンクが表示されていました。このステップに必要なのはページであり、URL ではありません。アドレスバーの下から始まる Capture Area をターゲットにすると、すべての URL をガイドから除外できました。

画像の外にあるテキスト欄

Document 内のページには、画像の横に Page title と Description があります。書き出し設定で含めると、両方が PDF に出力されます。「Open Dana's account and select Reminders」のような説明文は、スクリーンショットと同じ名前を漏らします。

説明文を、画像内で見つけたすべての氏名と番号で検索します。書き出しファイル名も重要です。画像の書き出しは、ページタイトルから名前が付けられます。

サンプルデータ、トリミング、ぼかし、削除の方法を選ぶ

リスクに応じて方法を選びます。

リスク	方法
多くのページに現れるデータ	サンプルデータで再キャプチャ
ステップに必要な範囲の外にあるデータ	Framing でトリミング
必要な範囲内の小さなフィールド	ぼかし
認証情報、トークン、リカバリーコード	値を隠して再キャプチャするか、ページを削除

ぼかしは手軽ですが、トリミングと再キャプチャは元に戻せる情報を残しません。アクセスを許可する情報には、再キャプチャを使います。

方法を順番に選ぶ

上の表は、短い質問の順序になります。最初の方法は情報を残さないため、この順序で確認します。ぼかしは最後に使います。

ページ自体を削除する場合

録画中に偶然写っただけのページもあります。受信トレイの確認メールや、リカバリーコードを表示するページのステップは、読者にとってほとんど価値がなく、リスクが最も高くなります。このようなページは削除し、そのステップの内容を次のページの説明文に記載します。

Pages パネルでページを右クリックし、Delete page を選びます。残りのステップは順序を保ちます。PDF の書き出しで Step numbers がオンの場合、番号は新しいページ順に従います。

ステップ12のセッショントークンは、順序の重要性を示しています。最初の書き出しではぼかしで隠しましたが、Document 内の元の画像にはトークンが有効な状態で残っていました。そのため、セッションをサインアウトした後にページを再キャプチャしました。

作業の文脈を失わずにトリミングする

トリミングはリスクを取り除くと同時に、読者の注目を絞り込みます。Document エディターで F を押して Framing を開きます。

Action Capture のページでは、Focus on action がクリック位置の周囲をフレーミングします。レベルは Wide から Tight まであり、Close と Tight では周囲の大部分を取り除きます。その他のページでは Custom を選び、範囲をドラッグして Apply framing を選びます。

読者が操作する場所を見つけられる文脈は残します。パネルのタイトル、ツールバー、ダイアログのヘッダーなどです。トリミングを狭くしすぎて、どの画面の手順か分からなくなると、別の問題が生じます。各コントロールは注釈とフレーミングのガイドで説明しています。

ステップ1と15のメニューバーをトリミングする

ステップ1と15は、Full Screen をターゲットにした短い2回目の録画から取得しました。どちらも Wi-Fi 名とユーザーのイニシャルが写る macOS のメニューバーを含んでいました。Custom のフレームで、上部40ピクセルと右側のパネルを取り除きました。

Show full image を選ぶとトリミングが解除され、元のスクリーンショットはその下に変更されずに残ります。トリミングが保護するのは書き出し結果であり、Document ファイルではありません。

クリックのあるページでフレーミングのレベルを使う

請求書ガイドの Action Capture のページにはクリック位置があるため、Framing はその周囲を拡大できます。レベル3の Balanced では、ほとんどのページでパネルのタイトルとクリックしたボタンが残りました。2ページでは、取引先名が並ぶサイドバーがまだ写っていたため、レベル4の Close に変更しました。

フレーミングのレベルは、Tighter framing または Wider framing を1回クリックするごとに1段階変わります。読者がそのステップの画面を判別できるか確認します。Close でパネルのタイトルが消える場合は、Adjust framing… を使い、Custom に切り替えてタイトルを残し、サイドバーだけを切り取ります。

機密情報の範囲だけにぼかしを入れる

B を押して Blur (Pro) を選び、フィールド上をドラッグします。V で選択し、Object Inspector で強度を調整します。表示されている文字だけでなく、フィールドの幅全体を覆い、値の長さが分からないようにします。

完成したぼかしは Command+C でコピーし、同じフィールドが同じ位置にある他のページで Command+V を使って貼り付けます。レイアウトは変わることがあるため、各ページで位置を確認します。

Document の外にある1枚のスクリーンショットには、ブラウザツールの Image Redaction Tool でブラウザ上にぼかしを入れられます。画像はデバイス内に残ります。2つの方法の違いは、画像の墨消しとプライバシーぼかしを参照してください。

確実に効くぼかしの設定

Blur strength は2から80までで、初期値は12です。初期値は、小さな顔やアバターに適しています。テキストの場合は、書き出しサイズで文字の形が残らなくなるまで値を上げます。

Opacity は、すべての注釈に対して5から100パーセントまで設定できます。不透明度を下げると、元のテキストが透けて見えます。ぼかしは必ず100パーセントに設定します。

複数のページで1つのぼかしを再利用する

サインイン中のメールアドレスは、ステップ2と9の同じヘッダー位置にありました。ぼかしをコピーすると、強度とサイズは同一に保たれます。ただし、スクロールされたページではヘッダーが数ピクセルずれることがあるため、位置の確認は必要です。

貼り付けた後、元のぼかしと Position and size の値（X、Y、W、H）を比べます。ヘッダーが移動していれば、フィールド全体を覆うまで貼り付けたぼかしをドラッグします。

失敗するぼかしの習慣

弱い墨消しの多くは、いくつかの習慣に起因します。以下は、最初の下書きのレビューで見つかったものです。それぞれ、値の一部が読めるか推測できる状態のまま残りました。

安全なコピーを書き出す

Document から書き出します。Export PDF と More export formats（PNG、JPG、WebP のページと ZIP パッケージ）は、現在のフレーミングと注釈（ぼかしを含む）を反映してページを生成します。

元のピクセルを保持している場所は2か所あります。

• Document 自体: 注釈は非破壊的です。Document 内の元画像は墨消しされていません。共有するのは書き出し結果だけにし、Document ファイルは共有しません。
• Capture History: セッションフレームの ZIP 書き出しには、加工されていない元のファイルが含まれます。Temposhot は、フレームに注釈やフレーミングがある場合にその旨を警告します。

すべての形式は、Documents の書き出しガイドで確認できます。

墨消し後も元のピクセルが残る場所

墨消し作業の後、請求書ガイドは Mac 上の3か所に存在します。共有して安全なのは1つだけです。下のツリーで、各コピーに含まれる内容を示します。

読者に合った書き出し形式を選ぶ

PDF は、タイトル、説明文、描画済みのページを含む1ファイルで、ほとんどの読者に適しています。PNG、JPG、WebP のページは、ページごとに1ファイルを生成し、ページタイトルから名前が付けられます。ZIP パッケージには、描画済みの PNG ページと document.json ファイルが含まれます。

チーム外に ZIP パッケージを送る前に document.json を開きます。このファイルは Document を記述しているため、ページタイトルや説明文に含まれていた名前がないか確認します。外部の読者には、PDF の方が簡単な選択です。

注釈付きのフレームがあるセッションからキャプチャ ZIP を書き出すと、Temposhot は最初に確認します。共有用のファイルが目的の場合は Cancel を選択します。Export original files は、墨消しされていない一式を生成します。

墨消ししていないセッションを削除する

元のセッションは、Document の作成後も Capture History に残ります。Document は、すべての画像のコピーを独自に保持しています。セッションを削除すると、そのセッションに保存されたフレームが Mac から削除されますが、Document は変わりません。

請求書ガイドの最初の録画には、有効なセッショントークンと実在の顧客名が含まれていました。墨消し作業の後にそのセッションを削除し、不要になった最後のフレームのコピーを取り除きました。Capture History は初期設定で30セッションを保持するため、古いセッションも時間とともに削除されます。

共有する最終版を確認する

エディターではなく、書き出したファイルを開き、読者が見るサイズで確認します。表紙と最後のページを含め、すべてのページを確認します。タイトルと説明文も読みます。画像で隠した名前を繰り返している場合があるためです。

組織の外に出すガイドは、第三者にもレビューしてもらいます。初めて読む人は、作成者が見慣れて気づかなくなった名前や番号に気づきます。

時間を計測したレビュー作業

15ページの PDF の最終レビューには12分かかりました。2人目のレビュアーがさらに10分を費やし、ステップ5のタイトルを発見しました。下のタイムラインは、実施した順序を示します。

更新によって新たな情報漏えいが生じる

ガイドはアプリの変更に応じて更新されます。新しい録画のたびに、ライブデータが写り込む可能性が生まれます。同じテストアカウントと同じブラウザプロファイルで更新したステップを録画し、Pages パネルの Add from Capture History… から新しいフレームを追加します。

新しいページには、まだぼかしもフレーミングもありません。新しいページだけに対して確認を再度行い、同じフィールドが現れる箇所には既存のぼかしをコピーします。Document を変更しても以前の書き出しは変わらないため、その後に Document を再度書き出します。

組織の外に出す前のチェックリスト

このチェックリストは、例のガイドで情報漏えいが見つかったすべての場所を対象としています。スクリーンショットから作るガイドすべてに適用できます。

よくある質問

機密情報を隠すにはぼかしで十分ですか？

名前やメールアドレスであれば、強いぼかしを使うことで通常は十分です。パスワード、トークン、短いコードには、値を隠した状態での再キャプチャを使います。

Temposhot は墨消しのためにスクリーンショットをアップロードしますか？

いいえ。キャプチャ、編集、書き出しはすべて Mac 上でローカルに実行されます。ブラウザの墨消しツールも、ブラウザ内で画像を処理します。

どのツールが Pro ですか？

Blur、Click Marker、Step Numbers は Pro のエディターツールです。Framing はすべてのユーザーが利用できます。

Temposhot Pro がなくても墨消しできますか？

はい。Framing と再キャプチャを使えば可能で、どちらも無料プランで利用できます。1枚の画像であれば、ブラウザツールの Image Redaction Tool で、ライセンスなしにぼかし、ピクセル化、領域の塗りつぶしができます。

ぼかしではなく、ピクセル化や塗りつぶしを使うべきですか？

1枚の画像であれば、Image Redaction Tool でぼかし、ピクセル化、単色の塗りつぶしを選べます。単色の塗りつぶしは元の形を残さないため、コードのような短い値に適しています。ぼかしはチュートリアルで自然に読めるため、読者に存在を認識させればよい名前やメールアドレスに適しています。

ぼかしを削除すると元のテキストは戻りますか？

はい。注釈は下のスクリーンショットを変更しないため、ぼかしを削除すると元の画像が再び表示されます。そのため、Document ファイル自体を共有してはいけません。

クリックを分かりやすいステップ形式のガイドに変える

Action Capture は、単一のウィンドウまたは領域からガイドを録画し、非公開画面用の一時停止操作を備えています。Temposhot をダウンロードすると、テストアカウントを使って次のチュートリアルを録画できます。