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

# ドキュメント

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

## このページの内容

- [インストール](https://openscreenshot.app/ja/docs/#install)
- [スクリーンショットをキャプチャ](https://openscreenshot.app/ja/docs/#capture)
- [キャプチャ モード](https://openscreenshot.app/ja/docs/#modes)
- [キャプチャの後](https://openscreenshot.app/ja/docs/#after-capture)
- [注釈](https://openscreenshot.app/ja/docs/#annotate)
- [Beautify](https://openscreenshot.app/ja/docs/#beautify)
- [手元にある画像に注釈を付ける](https://openscreenshot.app/ja/docs/#import)
- [書き出し](https://openscreenshot.app/ja/docs/#export)
- [タブを録画](https://openscreenshot.app/ja/docs/#record)
- [下書き](https://openscreenshot.app/ja/docs/#drafts)
- [キーボード ショートカット](https://openscreenshot.app/ja/docs/#shortcuts)
- [設定](https://openscreenshot.app/ja/docs/#settings)
- [エージェント & CLI](https://openscreenshot.app/ja/docs/#agents-cli)
- [プライバシー](https://openscreenshot.app/ja/docs/#privacy)
- [サポートを受ける](https://openscreenshot.app/ja/docs/#support)

## インストール

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

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

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

ツールバーの OpenScreenShot アイコンをクリックすると、メニューを挟まずにページ全体のキャプチャが始まります。すべてブラウザ内でローカルに動作します。キャプチャの開始方法は 4 つあります。

- **ツールバーのアイコン** — ワンクリックでページ全体をキャプチャします。設定で**ワンクリック Express モード**をオフにするとモード選択ポップアップに戻ります。アイコンを右クリックすると他のモードと設定を選べます。
- **キーボード ショートカット** — ページ全体は `Ctrl+Shift+S`、表示領域は `Alt+Shift+V`、選択範囲は `Ctrl+Shift+E`。macOS では `⌘⇧S`、`⌥⇧V`、`⌘⇧E` です。要素のキャプチャにはデフォルトのキーがありません。どのショートカットも `chrome://extensions/shortcuts` で設定・変更できます。
- **右クリックメニュー** — どのページでも OpenScreenShot サブメニューから同じ 4 つのモードと設定を選べます。
- **範囲の再キャプチャ** — ポップアップのフッターと右クリック メニューから、前回の範囲の矩形をもう一度キャプチャできます。どちらの項目も、一度範囲を選択すると表示されます。

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

## キャプチャ モード

### ページ全体

スクロールするページ全体をキャプチャし、1 枚の画像につなぎ合わせます。拡張機能はページをビューポート単位でスクロールし、各タイルをキャプチャして合成します。固定ヘッダーは最初のタイルでキャプチャされ、最上部に 1 回だけ合成されます。ウィンドウの代わりに内側の要素がスクロールするページにも対応しています。1 枚の画像に収まらない高さ (32,000 デバイス ピクセル) のページは、最大 6 枚の画像として保存されます。ダウンロードでは各パートに名前が付き、エディタまたはクリップボードでは各パートがそれぞれのエディタ タブで開きます。

### 表示領域

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

### 選択範囲

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

### 要素

ページ上にポインターを合わせてカード、グラフ、表、画像などの要素を選び、クリックするか `Enter` を押すと、その要素の範囲どおりにキャプチャします。`↑` で親要素、`↓` で子要素、`←`/`→` で隣の要素を選択します。要素が完全に表示されていない場合は、代わりにページ全体のキャプチャを提案します。

## キャプチャの後

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

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

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

## 注釈

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

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

`Shift` を押しながら描くと、図形は縦横比が等しくなり、直線と矢印は 45° に固定されます。スタイル バーには、`1`～`8` に対応した 8 色パレット、カスタム カラー、最近使った色、キャプチャのサイズに合わせて太さが変わる 4 段階の線幅、フォント サイズのコントロールがあります。選んだ内容はセッションをまたいで記憶されます。レール上のツールをドラッグしてよく使うものを先頭に置くか、フォーカスしたツールを `Alt+↑` / `Alt+↓` で移動できます。元に戻す / やり直すは `Ctrl+Z` / `Ctrl+Shift+Z`、macOS では `⌘Z` / `⌘⇧Z` です。

## Beautify

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

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

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

## 書き出し

エディタ上部バーの**画像を保存**をクリックするか `Ctrl+S` / `⌘S` を押すと、**書き出し**ダイアログが開きます。その隣の**コピー**は PNG をクリップボードにコピーし、**PDF** はワンクリックで PDF を保存します。ダイアログで形式を選択:

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

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

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

## タブを録画

タブの録画は Chrome 版で使えます。Firefox 版は現在スクリーンショットのみに対応しています。ポップアップの**録画**をクリックすると、ページの隣に録画タブが開きます。録画中は `Alt+Shift+X` を押すと、どのタブからでも停止できます。初めて録画するとき、Chrome がタブキャプチャの許可を 1 回求めます。

### 録画を開始

録画タブには、ページの画像とカメラのライブ映像が表示されます。そこで**マイク**、**タブの音声**、**ウェブカメラ**をオンにします。ブラウザーの許可の確認はそのタブに表示されます。画像の上をドラッグするとページの一部だけを録画できます。**タブ全体**のままでもかまいません。**録画を開始**をクリックすると、OpenScreenShot がページに切り替えます。

録画中に別のサイトへ移動した場合、クリックの記録が追従するには任意の「サイトをまたいで録画」権限が必要です（[設定](https://openscreenshot.app/ja/docs/#settings)を参照）。この権限がないとツールバーのバッジが琥珀色になり、動画の残りの部分ではズームとクリック効果が止まります。動画自体の録画は続きます。

### 録画タブ

録画中、録画タブにはタイマーと、一時停止/再開、停止、キャンセルのボタンがあります。録画するページには何も追加されないため、動画にコントロールは映りません。停止するにはタブに戻るか、`Alt+Shift+X` を押します。停止すると、同じタブでエディターが開きます。

ウェブカメラは、エディターで位置を決める丸いバブルとして書き出しに加わります。エディターは動画を選んだ範囲に切り抜きます。

### エディタ

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

### 書き出し

書き出しは、設定したトラックと効果を合成しながらテイクをキャンバス経由で再レンダリングし、デフォルトでは MP4 ファイル (H.264 と AAC) をダウンロードします。ボタンの隣の選択肢から WebM も選べます。MP4 は 4096×2304 までのため、それより大きいタブは収まるように縮小されます。MP4 の録画に対応していないブラウザでは、WebM のみ書き出せます。

## 下書き

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

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

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

- `1`～`8` — 注釈の色を設定。
- `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}` を挿入します。ライブ プレビューで結果を確認できます。`/` を入れると「ダウンロード」内のフォルダーに保存します (例: `Screenshots/{title}`)。

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

**サイトをまたいで録画** — 既定ではオフです。オンにすると任意のホスト権限 `<all_urls>` を求めます。これにより、録画中に別のサイトへ移動したタブにもクリックの記録が追従します。

## エージェント & CLI

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

```
pnpm dlx openscreenshot shot https://example.com --out shot.png --full
```

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

```
{ "command": "pnpm", "args": ["dlx", "openscreenshot"] }
```

その後、`capture_screenshot` ツールを `{ "url": "https://example.com" }` で呼び出します。省略可能な入力は `fullPage` (デフォルト false)、`width` (200～3840、デフォルト 1280)、`height` (200～2160、デフォルト 800)、`redact` です。`redact` は、スクリーンショットを撮る前に、CSS の `selectors`、テキストの `patterns` (`email`、`phone`、`secret`)、ピクセル単位の `rects` を黒い四角で覆います。ツールは PNG の画像コンテンツをクライアントに返します。ホスト型のモデルを使うクライアントは、その画像を提供元に送信することがあります。デバイスの外に出してはならないデータには `redact` を使い、クライアントのデータ設定を確認してください。

## プライバシー

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

詳細は[プライバシー ポリシー](https://openscreenshot.app/ja/privacy/)をご覧ください。

## サポートを受ける

よくある質問と既知の制限は[サポート & FAQ](https://openscreenshot.app/ja/support/) ページをご覧ください。さらにサポートが必要な場合は、[GitHub](https://github.com/pghqdev/OpenScreenShot/issues) で issue を開いてください。

## OpenScreenShot をインストール

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

[Chrome に追加](https://chromewebstore.google.com/detail/hdabbojjccojlapnfjpdppcpfcnhgmdp) [Firefox に追加](https://addons.mozilla.org/firefox/addon/openscreenshot/)

---

Canonical page: https://openscreenshot.app/ja/docs/