インストール · キャプチャ · 注釈 · 書き出し

ドキュメント

オープンソースの Chrome 向けスクリーンショット&注釈拡張機能、OpenScreenShot のインストール方法と使い方。

インストール

OpenScreenShot は Chrome ウェブストアで入手できます。

  1. Chrome で OpenScreenShot のページを開きます。
  2. Chrome に追加をクリックします。
  3. 権限を許可します。拡張機能に必要なのは、アクティブなタブと、そこでキャプチャ スクリプトを実行する権限です。
  4. ツールバーに OpenScreenShot のアイコンが表示されます。クリックするとポップアップが開きます。

スクリーンショットをキャプチャ

ツールバーの OpenScreenShot アイコンをクリックし、3 つのキャプチャ モードから 1 つを選びます。すべてブラウザ内でローカルに実行されます。キャプチャの開始方法は 4 つあります。

  • ポップアップ — モードをクリックするか、13 を押します。
  • キーボード ショートカット — ページ全体は Ctrl+Shift+S、表示領域は Alt+Shift+V、選択範囲は Ctrl+Shift+E。macOS では ⌘⇧S⌘⇧V⌘⇧E です。chrome://extensions/shortcuts で変更できます。
  • 右クリック メニュー — どのページでも、OpenScreenShot のサブメニューから同じ 3 つのモードを選べます。
  • 範囲の再キャプチャ — ポップアップのフッターと右クリック メニューから、前回の範囲の矩形をもう一度キャプチャできます。どちらの項目も、一度範囲を選択すると表示されます。

ポップアップの遅延の行は、キャプチャを 3 秒、5 秒、10 秒待機させ、その間ツールバーのバッジがカウントダウンします。ほかの場所をクリックした瞬間に閉じてしまうホバー状態、ドロップダウン メニュー、ツールチップに使ってください。

キャプチャ モード

ページ全体

スクロールするページ全体をキャプチャし、1 枚の画像につなぎ合わせます。拡張機能はページをビューポート単位でスクロールし、各タイルをキャプチャして合成します。固定ヘッダーは最初のタイルでキャプチャされ、最上部に 1 回だけ合成されます。ウィンドウの代わりに内側の要素がスクロールするページにも対応しています。

表示領域

現在のビューポートを即座にキャプチャします。スクロールはありません。今画面に見えているものを手早く撮りたいときに使ってください。

選択範囲

クリックしてドラッグし、矩形を描きます。各辺と角にサイズ変更ハンドルが表示されます。矢印キーで選択範囲を 1 ピクセルずつ動かせます。Shift を押しながらだと 10 ピクセルずつ動きます。Enter で確定、Esc でキャンセルします。

キャプチャの後

ポップアップのキャプチャ後の行で、キャプチャ完了後の動作を選びます。ポップアップのボタン、キーボード ショートカット、右クリック メニューのすべての起点に適用されます。

  • エディタ — 注釈エディタを新しいタブで開きます。これがデフォルトです。
  • クリップボード — スクリーンショットをコピーしてエディタをスキップします。チャット、ドキュメント、issue にそのまま貼り付けられます。
  • ダウンロード — スクリーンショットをダウンロード フォルダに保存してエディタをスキップします。クイック保存は PNG で保存されます。

クリップボードとダウンロードではタブが開かないため、ツールバーのバッジが完了の合図になります。キャプチャに失敗するとバッジに ! が点滅します。ポップアップ フッターの前回を開くで、最新のキャプチャをいつでもエディタで開けます。

注釈

エディタはフル タブで開き、ローカル ストレージから最新のキャプチャを読み込みます。各ツールには 1 文字のショートカットがあります。

  • 選択 V — 注釈の移動、サイズ変更、削除。テキスト レイヤーはダブルクリックで再編集できます。
  • 四角形 R — 枠線の四角形を描きます。
  • 矢印 A — 方向を示す矢印を描きます。
  • 直線 L — 矢じりのない矢印です。
  • ペン P — フリーハンドで描きます。
  • 蛍光ペン H — 半透明のフリーハンド ストロークです。
  • テキスト T — テキスト ボックスを追加します。サイズはフォント サイズのコントロールで決まります。
  • 手順番号 S — 番号バッジは自動で数が増え、1 つ削除すると番号が振り直されます。
  • ぼかし B — 機密情報を、やわらかいぼかし、粗いモザイク、不透明な塗りつぶしで隠します。不透明な塗りつぶしは再圧縮にも耐えます。
  • Spotlight O — 四角形、角丸四角形、楕円の切り抜きが 1 つの暗転レイヤーに統合されます。
  • スポイト I — キャプチャから色を取得します。見えているままをサンプリングするため、Spotlight の内側や Beautify のグラデーション上の色も見た目どおりに拾えます。色の行のスウォッチ ボタンからは、キャンバスの外も対象にできる Chrome の画面全体ピッカーが開きます。
  • 切り抜き C — 選択した範囲に画像をトリミングします。

Shift を押しながら描くと、四角形は正方形に、直線と矢印は 45° に固定されます。スタイル バーには、18 に対応した 8 色パレット、カスタム カラー、最近使った色、3 段階の線幅、フォント サイズのコントロールがあります。選んだ内容はセッションをまたいで記憶されます。元に戻す / やり直すは Ctrl+Z / Ctrl+Shift+Z、macOS では ⌘Z / ⌘⇧Z です。

Beautify

上部バーの Beautify パネルは、共有向けにスクリーンショットをフレームで飾ります。余白、角丸、影のスライダーに加え、6 つのグラデーション プリセット、カスタムの単色、透明の背景を選べます。フレームはライブでプレビューされ、すべての書き出し、クリップボード、PDF に反映されます。

手元にある画像に注釈を付ける

画像ファイルをエディタのステージにドロップするか、テキスト フィールドの外で Ctrl+V / ⌘V で貼り付けます。読み込んだ画像はキャプチャと同じ扱いになるため、すべてのツール、Beautify フレーム、すべての書き出し方法がそのまま使え、上部バーには読み込みと表示されます。読み込みはキャンバスを置き換えるため、失われる注釈がある場合はエディタが先に確認します。

書き出し

エディタ上部バーの書き出しをクリックするか、Ctrl+S / ⌘S を押します。形式を選択:

  • PNG — ロスレスで、透過を保持します。
  • JPEG — ファイルが小さく、画質を調整できます。
  • WebP — JPEG のように画質を調整でき、PNG のように透過に対応します。
  • PDF — 画像 1 枚のページとして書き出すか、A4/Letter に合わせるか、内容が行の途中で切れないよう 5mm の重なりを付けて複数ページに分割します。

倍率は 25、50、100、200%、または正確なピクセル幅で書き出します。PDF ではページに合わせてサイズが決まるため非表示になります。Chrome のキャンバス上限を超えるサイズは、空のファイルとして書き出される代わりに拒否されます。

Ctrl+C / ⌘C は、完成した画像をそのままクリップボードにコピーします。書き出しダイアログでは、現在の設定を新しいデフォルトとして保存することもできます。

タブを録画

ポップアップの録画をクリックします。録画中は Alt+Shift+X で停止できます。初回の録画時に Chrome がタブ キャプチャの権限プロンプトを 1 回表示し、以降の録画はワンクリックで始まります。

録画を開始

ポップアップの録画の行には、マイクタブの音声ウェブカメラの 3 つのトグルがあります。録画をクリックする前にオンにしてください。マイクまたはウェブカメラをオンにすると、キャプチャの開始前に、ページ上の小さなバブルからブラウザ自身の権限プロンプトが表示されます。

録画中に別のサイトへ移動する場合、コントロール バーが追従するにはオプションの「サイトをまたいで録画」権限が必要です (設定を参照)。この権限がないとツールバーのバッジがアンバー色に変わります。ツールバーのアイコンをクリックするか、ページをもう一度操作すると、オーバーレイが再アタッチされます。

コントロール バー

録画中はページ下部に小さなバーが表示されます。タイマー、有効にしたトラックごとのチップ、そして一時停止 / 再開、停止、キャンセルのボタンです。ウェブカメラをオンにすると、ドラッグできる円形プレビューがページ上に浮かびます。好きな場所にドラッグすれば、録画が終わるまでそこに留まります。

バーはポインターが離れて約 3 秒で自動的に隠れ、録画の邪魔になりません。カーソルをページ下部中央に移動すると再表示されます。ホバー中と録画の一時停止中は表示されたままになります。

エディタ

停止すると、テイクをタイムラインに並べた録画エディタが開きます。エディタは、クリックした位置ごとに滑らかな 2x ズームを追加します。それらは調整も削除もでき、1.5x、2x、3x の手動ズーム ブロックを自分で追加することもできます。各セグメントの先頭と末尾は、ハンドルをドラッグしてトリミングします。クリック効果がクリックした場所を示し、ウェブカメラ バブル、Beautify フレーム、マイク / タブ音声の音量スライダーはサイド パネルにあります。「カーソル表示」は、記録されたカーソルの軌跡に沿って滑らかなポインターを描画します。設定レールでオフにできます。

書き出し

書き出しは、設定したトラックと効果を合成しながらテイクをキャンバス経由で再レンダリングし、WebM ファイルをダウンロードします。

下書き

作業中の編集は随時ローカルに保存されます。エディタのタブが閉じたりクラッシュしても、次に開いたエディタのタブが下書きの復元を提案します。復元はいつでもワンクリックなので、古い下書きが、新しく始めるつもりだったキャプチャを勝手に置き換えることはありません。切り抜いた画像には専用の下書きが作られるため、注釈が別の画像に復元されることもありません。

キーボード ショートカット

エディタで ? を押すと一覧シートが開きます。上記のツール文字に加えて:

  • 18 — 注釈の色を設定。
  • Ctrl+C / ⌘C — クリップボードにコピー。
  • Ctrl+S / ⌘S — 書き出し。
  • Backspace — 選択中の注釈を削除。
  • Esc — 選択解除、または切り抜きをキャンセル。
  • Ctrl / +0 — 拡大、縮小、実際のサイズ。F で画面に合わせます。
  • Space + ドラッグ — キャンバスの表示位置を移動。

Alt+Shift+X は、どこからでも現在の録画を停止します。エディタやポップアップを開いておく必要はありません。

設定

ポップアップの歯車アイコンから設定できる項目:

  • テーマ — ライト、ダーク、システム。
  • デフォルトの形式 — PNG、JPEG、WebP、PDF。
  • 画質 — JPEG、WebP、PDF 用。
  • ファイル名テンプレート — トークン チップをクリックして {date}{time}{title}{domain}{w}{h} を挿入します。ライブ プレビューで結果を確認できます。

設定はこのデバイスのローカル ストレージに保存されます。パネル下部のデフォルトに戻すは 2 回のクリックで実行されます。

サイトをまたいで録画 — デフォルトはオフです。オンにするとオプションの <all_urls> ホスト権限をリクエストし、録画中に別のサイトへ移動したタブでも、録画コントロール バーとカーソル オーバーレイが追従できるようになります。

エージェント & CLI

openscreenshot (npm) は、コマンド ラインや AI エージェントからスクリーンショットをスクリプト化するための、独立したオプションのローカル ツールです。手元のマシンにある Chrome をそのまま利用するため、ブラウザのダウンロードもホスト型サービスも不要です。Chrome が自動で見つからない場合は CHROME_PATH を設定してください。

npx openscreenshot shot https://example.com --out shot.png --full

MCP サーバーとして使うには、MCP クライアントの設定に次を追加します。

{ "command": "npx", "args": ["openscreenshot", "serve"] }

その後、capture_screenshot ツールを { "url": "https://example.com" } で呼び出します。

プライバシー

OpenScreenShot はすべてをブラウザ内でローカルに処理します。キャプチャは Chrome のローカル ストレージに保存され、どのサーバーにもアップロードされません。録画、カーソル ログ、マイク / ウェブカメラのストリームは、削除するまでデバイス上の IndexedDB に留まります。拡張機能には分析ツールもテレメトリーもサードパーティ サービスもありません。

詳細はプライバシー ポリシーをご覧ください。

サポートを受ける

よくある質問と既知の制限はサポート & FAQ ページをご覧ください。さらにサポートが必要な場合は、GitHub で issue を開いてください。

OpenScreenShot をインストール

無料、オープンソース、そしてプライベート。Chrome ウェブストアで入手できます。

Chrome に追加