[活用例](https://openscreenshot.app/ja/use-cases/)

# ヘルプ記事やチュートリアル用のスクリーンショットを作る方法

チュートリアルのスクリーンショットのサイズをそろえ、手順に番号を付け、目的のコントロールを強調し、各ファイルをドキュメント用フォルダに保存します。

執筆: [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

ヘルプ記事やチュートリアルでは、各画面を同じ方法でキャプチャし、操作に番号を付け、すべての画像を同じ幅で書き出します。OpenScreenShot では、**書き出し**ダイアログの**倍率**で正確なピクセル幅を設定し、操作ごとに**手順番号**のバッジを追加し、**Spotlight** で読者に目的のコントロールを示します。`Docs/{title}` のようなファイル名テンプレートを使うと、各画像を Downloads 内のフォルダに保存できます。

## チュートリアル用のスクリーンショットを作る手順

1. 記事内のすべてのキャプチャで、ブラウザのウィンドウを同じサイズにします。テーマとズーム レベルも毎回同じにします。
2. 画面をキャプチャします。右クリック メニューの**選択範囲**または**要素をキャプチャ**を使うと、画像をその手順に関係する部分に絞れます。
3. **エディタ**で、読者が使う順にそれぞれのコントロールに**手順番号**（`S`）を追加します。
4. 画面にほかの内容が多い場合は、重要な範囲に **Spotlight**（`O`）を追加します。
5. サンプルの顧客データ、実際のメールアドレス、API キーを、**ぼかし**（`B`）の**塗りつぶし**で覆います。
6. 必要に応じて、上部バーの **Beautify** を開き、余白、角丸、影を追加します。
7. **画像を保存**をクリックします。**書き出し**ダイアログで **PNG** を選び、**倍率**にページの幅を入力し、ファイル名を確認して**書き出し**をクリックします。

## すべての画像を同じサイズにする

1 つの記事の中でスクリーンショットのサイズが手順ごとに変わると、読者は気づきます。**倍率**で 25、50、100、200 % のいずれかを選ぶか、正確なピクセル幅を入力します。幅を固定すると、記事内のすべての画像がドキュメント サイトの本文カラムにそろいます。

**書き出し**ダイアログで**この設定を記憶する**をオンにすると、形式と品質が新しい既定値として保存されます。幅はこの既定値に含まれないため、書き出しのたびに入力してください。Chrome のキャンバスの上限を超える幅は拒否されるため、拡張機能が空のファイルを書き出すことはありません。

PNG は可逆圧縮なので、画面の文字がくっきりしたままです。JPEG や WebP は、ドキュメント プラットフォームにファイル サイズの制限がある場合にだけ使ってください。

## 順序が崩れない手順番号を付ける

**手順番号**のバッジは自動で番号が増えます。最初のクリックで 1、次のクリックで 2 が置かれます。バッジを削除すると残りのバッジの番号が振り直されるため、後ろの番号をすべて直さなくても手順を削除できます。画像の番号を記事の番号付きリストとそろえてください。

キー `1`–`8` で 8 色のパレットを使えます。エディタは色、線の太さ、フォント サイズをセッションをまたいで記憶するため、1 つの記事のスクリーンショットは同じスタイルを保てます。

## 強調とフレーム

**Spotlight** は 1 つ以上の範囲を明るいまま残し、ほかの部分を暗くします。切り抜きは、矩形、角丸矩形、楕円のいずれかにできます。長い設定ページでは、**Cut** ツール（`X`）で読者に不要な横方向の帯を削除できます。適用する前にライブ プレビューで確認できます。

**Beautify** パネル（[ドキュメント](https://openscreenshot.app/ja/docs/#annotate)でも Beautify と呼びます）は、スクリーンショットの周りに余白、角の丸み、ドロップ シャドウ、背景を追加します。フレームはすべての書き出しとクリップボードに含まれます。スタイルを 1 つ選び、ドキュメント内のすべての画像に使ってください。

## 画像に名前を付けて整理する

ポップアップ、またはツールバー アイコンの右クリック メニューから**設定**を開き、**ファイル名テンプレート**を編集します。トークンをクリックすると `{date}`、`{time}`、`{title}`、`{domain}`、`{w}`、`{h}` を挿入できます。ライブ プレビューで確認してください。

`/` を入れると Downloads 内のフォルダに保存されます。たとえば `Docs/{title}` では、各画像がページのタイトルの名前で `Docs` フォルダに保存されます。`{title}` トークンはファイル名に使えない文字を置き換えるため、ページのタイトルに `/` があっても別のフォルダは作られません。**書き出し**ダイアログでは保存前にファイル名が表示され、その場で編集できます。

## 制限事項

画面のスクリーンショットは、製品が変わると古くなります。ページのタイトルや URL をファイル名に入れておくと、古い画像を見つけて差し替えられます。ブラウザのスクリーンショットに写るのはページの内容だけです。アドレスバーやブラウザのツールバーは含まれません。

すべてのオプションは[書き出しのリファレンス](https://openscreenshot.app/ja/docs/#export)と[設定のリファレンス](https://openscreenshot.app/ja/docs/#settings)で確認できます。投稿用に画像を準備する場合は、[SNS でスクリーンショットを共有する方法](https://openscreenshot.app/ja/use-cases/social-media/)を参照してください。

## さらに読む

[ドキュメントを読む](https://openscreenshot.app/ja/docs/)、[すべてのガイドを見る](https://openscreenshot.app/ja/blog/)、または[キャプチャについてサポートを受ける](https://openscreenshot.app/ja/support/)。

---

Canonical page: https://openscreenshot.app/ja/use-cases/documentation/