ヘルプ記事やチュートリアルでは、各画面を同じ方法でキャプチャし、操作に番号を付け、すべての画像を同じ幅で書き出します。OpenScreenShot では、書き出しダイアログの倍率で正確なピクセル幅を設定し、操作ごとに手順番号のバッジを追加し、Spotlight で読者に目的のコントロールを示します。Docs/{title} のようなファイル名テンプレートを使うと、各画像を Downloads 内のフォルダに保存できます。
チュートリアル用のスクリーンショットを作る手順
- 記事内のすべてのキャプチャで、ブラウザのウィンドウを同じサイズにします。テーマとズーム レベルも毎回同じにします。
- 画面をキャプチャします。右クリック メニューの選択範囲または要素をキャプチャを使うと、画像をその手順に関係する部分に絞れます。
- エディタで、読者が使う順にそれぞれのコントロールに手順番号（
S）を追加します。 - 画面にほかの内容が多い場合は、重要な範囲に Spotlight（
O）を追加します。 - サンプルの顧客データ、実際のメールアドレス、API キーを、ぼかし（
B）の塗りつぶしで覆います。 - 必要に応じて、上部バーの Beautify を開き、余白、角丸、影を追加します。
- 画像を保存をクリックします。書き出しダイアログで PNG を選び、倍率にページの幅を入力し、ファイル名を確認して書き出しをクリックします。
すべての画像を同じサイズにする
1 つの記事の中でスクリーンショットのサイズが手順ごとに変わると、読者は気づきます。倍率で 25、50、100、200 % のいずれかを選ぶか、正確なピクセル幅を入力します。幅を固定すると、記事内のすべての画像がドキュメント サイトの本文カラムにそろいます。
書き出しダイアログでこの設定を記憶するをオンにすると、形式と品質が新しい既定値として保存されます。幅はこの既定値に含まれないため、書き出しのたびに入力してください。Chrome のキャンバスの上限を超える幅は拒否されるため、拡張機能が空のファイルを書き出すことはありません。
PNG は可逆圧縮なので、画面の文字がくっきりしたままです。JPEG や WebP は、ドキュメント プラットフォームにファイル サイズの制限がある場合にだけ使ってください。
順序が崩れない手順番号を付ける
手順番号のバッジは自動で番号が増えます。最初のクリックで 1、次のクリックで 2 が置かれます。バッジを削除すると残りのバッジの番号が振り直されるため、後ろの番号をすべて直さなくても手順を削除できます。画像の番号を記事の番号付きリストとそろえてください。
キー 1–8 で 8 色のパレットを使えます。エディタは色、線の太さ、フォント サイズをセッションをまたいで記憶するため、1 つの記事のスクリーンショットは同じスタイルを保てます。
強調とフレーム
Spotlight は 1 つ以上の範囲を明るいまま残し、ほかの部分を暗くします。切り抜きは、矩形、角丸矩形、楕円のいずれかにできます。長い設定ページでは、Cut ツール（X）で読者に不要な横方向の帯を削除できます。適用する前にライブ プレビューで確認できます。
Beautify パネル（ドキュメントでも Beautify と呼びます）は、スクリーンショットの周りに余白、角の丸み、ドロップ シャドウ、背景を追加します。フレームはすべての書き出しとクリップボードに含まれます。スタイルを 1 つ選び、ドキュメント内のすべての画像に使ってください。
画像に名前を付けて整理する
ポップアップ、またはツールバー アイコンの右クリック メニューから設定を開き、ファイル名テンプレートを編集します。トークンをクリックすると {date}、{time}、{title}、{domain}、{w}、{h} を挿入できます。ライブ プレビューで確認してください。
/ を入れると Downloads 内のフォルダに保存されます。たとえば Docs/{title} では、各画像がページのタイトルの名前で Docs フォルダに保存されます。{title} トークンはファイル名に使えない文字を置き換えるため、ページのタイトルに / があっても別のフォルダは作られません。書き出しダイアログでは保存前にファイル名が表示され、その場で編集できます。
制限事項
画面のスクリーンショットは、製品が変わると古くなります。ページのタイトルや URL をファイル名に入れておくと、古い画像を見つけて差し替えられます。ブラウザのスクリーンショットに写るのはページの内容だけです。アドレスバーやブラウザのツールバーは含まれません。
すべてのオプションは書き出しのリファレンスと設定のリファレンスで確認できます。投稿用に画像を準備する場合は、SNS でスクリーンショットを共有する方法を参照してください。