VKT Toolkit · 2026年9月11日 · 8 分で読める

スクリーンショットのキャプチャ・アノテーション・PDF エクスポート — 完全な Chrome ワークフロー

スクリーンショットは最初のステップに過ぎません。ウェブページをキャプチャした後、重要な部分を囲み、矢印で問題箇所を指し、メールアドレスをぼかし、全体を PDF として保存してバグレポートに添付する必要があります。従来のワークフローでは、スクリーンショット拡張機能、画像エディタ、PDF コンバーターの3つの異なるツールが必要です。より速い方法があります。

このガイドでは、ブラウザを離れずにすべてを実行できる一つの無料 Chrome 拡張機能を使用して、キャプチャ、アノテーション、機密データのぼかし、エクスポートの完全なワークフローを解説します。

従来のワークフロー（そしてなぜ面倒なのか）

ほとんどの人のスクリーンショットワークフローは次のようになります：

1. キャプチャ：スクリーンショット拡張機能または Print Screen でキャプチャ；
2. 画像エディタを開く：Paint、Photoshop、Preview、GIMP でトリミング、矢印の追加、プライベート情報のぼかし；
3. 画像を保存；
4. PDF ツールを開く：Word、Google Docs、オンラインコンバーターで画像を PDF に変換；
5. PDF を添付：メール、レポート、ドキュメントに添付。

5つのステップ、3つのアプリケーション、2回のファイル変換。そしてフルページスクリーンショットにアノテーションを付ける必要がある場合 — 高さが 10,000 ピクセル以上になることがあります — ほとんどの画像エディタはキャンバスサイズに苦労します。

PageShot のワークフロー：キャプチャ → アノテーション → エクスポート（1つのツール）

VKT PageShot は4つのステップを1つの Chrome 拡張機能に統合しています。以下が完全なワークフローです：

ステップ 1：キャプチャ

ツールバーの PageShot アイコンをクリックします。キャプチャモードを選択します：

• フルページ — スクロール可能なページ全体をキャプチャします。折り返し線より下のコンテンツも含みます。遅延読み込み画像を処理し、スティッキーヘッダーを自動的に削除します；
• 表示領域 — 現在画面に表示されているものだけをキャプチャします；
• 選択範囲 — ドラッグしてページの特定領域を選択します。

キャプチャは瞬時に完了します。アップロードも処理遅延もありません。アノテーションエディターが自動的に開きます。

ステップ 2：アノテーション

PageShot の内蔵アノテーションエディターには、バグレポート、チュートリアル、ドキュメント用のスクリーンショットに必要なツールがひと通り揃っています：

配置した注釈は画像に焼き込まれる前に何度でもやり直せます。直前の操作は「元に戻す」で取り消せ、最初から引き直したいときは「すべて消去」でまとめて消せます。配置済みの要素を個別に動かしたり、大きさや色を変えたりはできないので、位置と色は置く前に決めておきます。画像を切り抜きたいときは、編集後にトリミングするのではなく、最初から「選択範囲」モードで必要な部分だけを撮り直すのが PageShot のやり方です。

ステップ 3：機密データのぼかし

これはほとんどの人がスキップするステップです — そして後で後悔します。誰かのメールアドレス、クライアント名、口座番号、プライベートメッセージを含むスクリーンショットを共有することは、プライバシーリークの温床です。

PageShot のモザイクツールで、ぼかし作業が簡単になります：

1. ツールバーからモザイクツールを選択；
2. 隠したい範囲 — メールアドレス、ユーザー名、残高の数字 — をドラッグ；
3. 範囲が固定サイズのブロックでピクセル化されます。強度のスライダーはなく、ブロックの大きさは一定です；
4. かけ直したいときは「元に戻す」で取り消し、範囲を指定し直します。

ぼかしはエクスポートされた画像に焼き付けられます — 削除できる別レイヤーではありません。これは重要です：スクリーンショットを共有した場合、ぼかされたデータは永久に復元不可能です。

ステップ 4：エクスポート

アノテーションが完了したら、エクスポートボタンをクリックします。選べるのは次の 3 つです：

• クリップボードにコピー（PNG） — Slack、Discord、メール、Google Docs、画像を受け付ける任意のアプリにそのまま貼り付け。素早い共有に最速のオプション；
• PNG をダウンロード — 可逆圧縮なので画質は劣化しません。ファイル名はページタイトルと日付から自動で付きます（例：screenshot-2026-09-11.png）；
• PDF を書き出す（Premium） — 買い切りの Premium ライセンスに含まれます。注釈が保持されたページ分割済みの PDF を生成。バグレポート、ドキュメント、正式な提出に最適です。

各エクスポート形式の使い分け

実際のワークフロー

バグレポートの提出

バグのあるページをキャプチャします（バグが折り返し線より下にある場合はフルページ）。壊れた要素を指す矢印を追加します。期待される動作を説明するテキストラベルを追加します。ページに表示されているユーザーデータをぼかします。PNG としてエクスポートし、Jira、GitHub Issues、または Linear に貼り付けます。

チュートリアルまたはハウツーガイドの作成

プロセスの各ステップをキャプチャします。アノテーションエディターで、番号付きテキストラベル（ステップ 1、ステップ 2…）を追加し、読者がクリックすべきボタンを矩形で囲み、個人アカウントの詳細をモザイクで隠します。すべての画像を PNG としてエクスポートし、ドキュメントに埋め込みます。

価格や出品情報の記録保存

価格が表示されている商品ページをキャプチャします。日付と時刻のテキストラベルを追加します。PDF としてエクスポート（Premium）— PDF メタデータのタイムスタンプが記録として機能します。価格の紛争、保証請求、出品情報の検証に便利です。

デザインへのフィードバック共有

デザインモックアップまたはライブページをキャプチャします。矩形で修正が必要な領域を囲みます。フィードバックを記載したテキストラベルを追加します。外部共有前にモザイクで社内限定コンテンツを隠します。PNG としてエクスポートし、Figma コメント、Slack、またはメールに貼り付けます。

変更前のウェブページのアーカイブ

フルページをキャプチャします。アノテーションなし（または日付ラベルのみ）で、PDF としてエクスポートしてタイムスタンプ付きアーカイブを作成します。利用規約、価格ページ、ポリシードキュメント、または予告なく変更される可能性のあるコンテンツに便利です。

比較：スクリーンショット＋アノテーションツール

分類は明確です：軽量キャプチャツール（GoFullPage、DevTools、Snipping Tool）は画像を取得できますが、アノテーションは別のアプリに任せます。フルスイート（Awesome Screenshot、Nimbus）はキャプチャとアノテーションをまとめていますが、クラウド機能と有料プランを押し付けます。PageShot はキャプチャ、アノテーション、モザイク、そして PDF 出力までをひとつのツールにまとめ、処理はすべてローカルで完結します。PDF 出力だけが買い切りの Premium で、それ以外は無料です。

プライバシー：スクリーンショットがブラウザを離れることはありません

PageShot のワークフローの各ステップ — キャプチャ、アノテーション、ぼかし、エクスポート — はすべてブラウザ内で完結します。スクリーンショットがサーバーにアップロードされることはありません。アカウントは不要です。データがマシンを離れることはありません。

これは、プライベートデータを含むページをキャプチャする際に特に重要です — クライアントダッシュボード、社内ツール、個人アカウント、財務情報。モザイクぼかしはエクスポートされたファイルで機密データを永久に隠します。そして何もアップロードされないため、誰かのサーバー上にぼかされていないスクリーンショットのコピーが浮遊することはありません。

権限は最小限です：activeTab（現在のページをキャプチャするため）と storage（設定を記憶するため）。それだけです。

よくある質問

一度キャプチャ、一度アノテーション、一度共有

スクリーンショット拡張機能、画像エディタ、PDF コンバーターという3ツールのワークフローは、バグレポート、チュートリアル、フィードバックのすべてにかかるコストです。キャプチャ、アノテーション、ぼかし、エクスポートを一つのツールで行えば、摩擦がなくなります。スクリーンショットはプロジェクトではなく、一つのアクションになります。

VKT ブログでさらにガイドをチェック；ご質問は [email protected] まで。