スクリーンショットに番号付きステップを追加

文章の手順の順番と一致する、番号付きステップのバッジを置けます。

ブラウザ内で動作
アップロード不要
アカウント不要

ブラウザツールを読み込んでいます…

スクリーンショットに番号付きステップを追加でできること

番号付きのバッジを使えば、1 枚のスクリーンショットで短い手順全体を示せます。1 つ目のコントロール、2 つ目、3 つ目と順にクリックすると、クリックするたびに次の番号の丸いバッジが置かれます。白い縁取りがあるので、どんな背景でも見えます。その後、画像の下に同じ番号で手順を書いてください。

バッジを削除したり元に戻したりすると、残りのバッジの番号が振り直され、番号が飛ぶことはありません。「その他のオプション」の「次の番号」を使えば、2 枚目の画像を 4 から始めるなど、複数のスクリーンショットにまたがって番号を続けられます。連番ではなく 1 か所を指し示すだけなら、スクリーンショットに矢印を追加を使ってください。

例

選ぶもの

組み込みの請求ページのサンプル（「例を使う」）

ダウンロード

example-billing-settings-steps.png
1440 × 900 px、「請求」メニュー、支払いカード、「支払い方法を更新」ボタンにバッジ 1、2、3

「バッジのサイズ」の既定値は、幅 1440 px の画像で直径 40 px です。999 までの番号がバッジに収まります。

スクリーンショットに番号付きステップを追加の使い方

「ファイルを選択」をクリックするか、スクリーンショットを貼り付けます。
「色」と「バッジのサイズ」を設定し、読者がたどる順に各位置をクリックします。
編集リスト（ステップ 1、ステップ 2、…）を確認し、「.png をダウンロード」をクリックします。

知っておきたいこと

番号を振り直しても、連番の開始番号は保たれます。4 から始めたバッジは、削除後も 4 から始まります。連番の途中で入力した「次の番号」は保たれず、バッジは 1 つの連番に詰められます。
バッジはクリックした点を中心に置かれるため、半分はコントロールに重なります。小さなボタンのラベルを見せたい場合は、ボタンのすぐ横をクリックしてください。
明るいバッジの色では番号が暗い文字に切り替わりますが、白い縁取りは変わりません。

スクリーンショットに番号付きステップを追加についてよくある質問

スクリーンショットにステップ番号を付けるには？

スクリーンショットを読み込み、各位置を順にクリックします。1 回目のクリックで 1、次で 2 が置かれ、以降も同様です。読者が手順を追えるよう、ドキュメントにも対応する番号付きの手順を書いてください。

次のスクリーンショットで番号を続けるには？

クリックする前に「その他のオプション」を開き、「次の番号」を最後のバッジの次の番号（たとえば 4）に設定します。次のバッジはその番号から始まり、順に増えていきます。

矢印より番号付きステップのほうがよいのはどんなときですか？

フォームの入力のように、1 つの画面で複数の操作を決まった順に行うときです。矢印は 1 枚の画像に 1 つの操作がある場合に向いています。番号があると、「ステップ 3 で『年間』を選ぶ」のように本文から位置を示しやすくもなります。